@cdf/cdf-ng-contact-us-form/lib/components/cdf-contact-us-form.component.metadata.json

Contact Us Form

[{"__symbolic":"module","version":3,"metadata":{"CdfContactUsFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"cdf-contact-us-form","template":"\t\n\t<form [formGroup]=\"contactUsForm\" (ngSubmit)=\"onFormSubmit($event)\" novalidate autocomplete=\"off\">\n\t\t<!--NAME-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Name</label>\n\t\t\t\t\t<input type=\"text\" formControlName=\"name\"/>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.name.valid || contactUsForm.controls.name.pristine\" class=\"form-element__error\">\n\t\t\t\t\t\tname is required\n\t\t\t\t\t</div>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\n\t\t<!--EMAIL ADDRESS-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Email Address</label>\n\t\t\t\t\t<input type=\"email\" formControlName=\"emailAddress\"/>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.emailAddress.valid || contactUsForm.controls.emailAddress.pristine || !contactUsForm.controls.emailAddress.errors.required\" class=\"form-element__error\">\n\t\t\t\t\t\temail address is required\n\t\t\t\t\t</div>\t\t\t\t\t\t\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.emailAddress.valid || contactUsForm.controls.emailAddress.pristine || !contactUsForm.controls.emailAddress.errors.email\" class=\"form-element__error\">\n\t\t\t\t\t\tinvalid email address\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\t\t\t\t\n\t\t</section>\n\n\t\t<!--MESSAGE-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Message:</label>\n\t\t\t\t\t<textarea formControlName=\"message\"></textarea>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.message.valid || contactUsForm.controls.message.pristine\" class=\"form-element__error\">\n\t\t\t\t\t\tmessage is required\n\t\t\t\t\t</div>\t\t\t\t\t\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\n\t\t<!--BUTTON-->\n\t\t<section class=\"row align-center\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<button type=\"submit\" class=\"button large radius\" [disabled]=\"!contactUsForm.valid\">Send Your Message</button>\n\t\t\t</div>\n\t\t</section>\n\t</form>\t\n\t","styles":["\t\t\nform {\n    margin: 0;\n    width: 100%\n}\n\nform input,\nform select,\nform textarea {\n    background-color: transparent;\n    border: 0;\n    -moz-border-radius: 0;\n    -webkit-border-radius: 0;\n    border-radius: 0;\n    box-sizing: border-box;\n    color: #262626;\n    display: block;\n    font-size: 1.25rem;\n    height: 2.3125rem;\n    margin: 0;\n    padding: 0 .5rem;\n    transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;\n    width: 100%\n}\n\nform input:focus,\nform input:hover,\nform select:focus,\nform select:hover,\nform textarea:focus,\nform textarea:hover {\n    border: 0;\n    outline: 0\n}\n\nform .form-element__error {\n    color: #B5121B;\n    padding: 0 .75rem\n}\n\n.ng-valid[required] {\n    border-left: 5px solid #598920\n}\n\nform input.ng-dirty.ng-invalid,\nform select.ng-dirty.ng-invalid,\nform textarea.ng-dirty.ng-invalid {\n    border-left: 5px solid #B5121B\n}\n\n.floatLabelContainer {\n    width: 100%;\n    height: 70px;\n    margin: 0 0 40px;\n    background: #fff;\n    box-sizing: border-box;\n    border: 1px solid rgba(42, 42, 42, .3);\n    border-radius: .325rem;\n    position: relative\n}\n\n.floatLabelContainer__textarea {\n    height: 280px\n}\n\n.floatLabelContainer.animate label {\n    -webkit-transition: all .9s ease;\n    transition: all .9s ease\n}\n\n.floatLabelContainer__label {\n    box-sizing: border-box;\n    color: #AFAFAF;\n    font-size: 12px;\n    font-weight: 400;\n    height: 100%;\n    line-height: 70px;\n    opacity: 1;\n    padding: 0 20px;\n    pointer-events: none;\n    position: absolute;\n    -webkit-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0);\n    width: 100%\n}\n\n.floatLabelContainer__input {\n    -webkit-appearance: none!important;\n    -moz-appearance: none!important;\n    appearance: none!important;\n    background: 0 0!important;\n    box-sizing: border-box;\n    color: #262626!important;\n    height: 100%!important;\n    margin: 0!important;\n    outline: 0!important;\n    padding: 10px 20px 0!important;\n    width: 100%!important\n}\n\n.floatLabelContainer__input::selection {\n    color: #fff;\n    background-color: #2a8dea\n}\n\n.floatLabelContainer--focused,\n.floatLabelContainer__input:focus {\n    border-color: #2a8dea\n}\n\n.floatLabelContainer--focused .floatLabelContainer__label {\n    color: #2a8dea;\n    transform: translate3d(0, -20px, 0)\n}\n\n.floatLabelContainer--hasValue .floatLabelContainer__label {\n    transform: translate3d(0, -20px, 0)\n}\n\n.floatLabelContainer>textarea {\n    padding: 30px 20px 0!important\n}\t\n\t\t"],"providers":[]}]}],"members":{"NotifyFormSubmitted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onFormSubmit":[{"__symbolic":"method"}],"ResetForm":[{"__symbolic":"method"}],"CreateForm":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CdfContactUsFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"cdf-contact-us-form","template":"\t\n\t<form [formGroup]=\"contactUsForm\" (ngSubmit)=\"onFormSubmit($event)\" novalidate autocomplete=\"off\">\n\t\t<!--NAME-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Name</label>\n\t\t\t\t\t<input type=\"text\" formControlName=\"name\"/>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.name.valid || contactUsForm.controls.name.pristine\" class=\"form-element__error\">\n\t\t\t\t\t\tname is required\n\t\t\t\t\t</div>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\n\t\t<!--EMAIL ADDRESS-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Email Address</label>\n\t\t\t\t\t<input type=\"email\" formControlName=\"emailAddress\"/>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.emailAddress.valid || contactUsForm.controls.emailAddress.pristine || !contactUsForm.controls.emailAddress.errors.required\" class=\"form-element__error\">\n\t\t\t\t\t\temail address is required\n\t\t\t\t\t</div>\t\t\t\t\t\t\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.emailAddress.valid || contactUsForm.controls.emailAddress.pristine || !contactUsForm.controls.emailAddress.errors.email\" class=\"form-element__error\">\n\t\t\t\t\t\tinvalid email address\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\t\t\t\t\n\t\t</section>\n\n\t\t<!--MESSAGE-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Message:</label>\n\t\t\t\t\t<textarea formControlName=\"message\"></textarea>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.message.valid || contactUsForm.controls.message.pristine\" class=\"form-element__error\">\n\t\t\t\t\t\tmessage is required\n\t\t\t\t\t</div>\t\t\t\t\t\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\n\t\t<!--BUTTON-->\n\t\t<section class=\"row align-center\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<button type=\"submit\" class=\"button large radius\" [disabled]=\"!contactUsForm.valid\">Send Your Message</button>\n\t\t\t</div>\n\t\t</section>\n\t</form>\t\n\t","styles":["\t\t\nform {\n    margin: 0;\n    width: 100%\n}\n\nform input,\nform select,\nform textarea {\n    background-color: transparent;\n    border: 0;\n    -moz-border-radius: 0;\n    -webkit-border-radius: 0;\n    border-radius: 0;\n    box-sizing: border-box;\n    color: #262626;\n    display: block;\n    font-size: 1.25rem;\n    height: 2.3125rem;\n    margin: 0;\n    padding: 0 .5rem;\n    transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;\n    width: 100%\n}\n\nform input:focus,\nform input:hover,\nform select:focus,\nform select:hover,\nform textarea:focus,\nform textarea:hover {\n    border: 0;\n    outline: 0\n}\n\nform .form-element__error {\n    color: #B5121B;\n    padding: 0 .75rem\n}\n\n.ng-valid[required] {\n    border-left: 5px solid #598920\n}\n\nform input.ng-dirty.ng-invalid,\nform select.ng-dirty.ng-invalid,\nform textarea.ng-dirty.ng-invalid {\n    border-left: 5px solid #B5121B\n}\n\n.floatLabelContainer {\n    width: 100%;\n    height: 70px;\n    margin: 0 0 40px;\n    background: #fff;\n    box-sizing: border-box;\n    border: 1px solid rgba(42, 42, 42, .3);\n    border-radius: .325rem;\n    position: relative\n}\n\n.floatLabelContainer__textarea {\n    height: 280px\n}\n\n.floatLabelContainer.animate label {\n    -webkit-transition: all .9s ease;\n    transition: all .9s ease\n}\n\n.floatLabelContainer__label {\n    box-sizing: border-box;\n    color: #AFAFAF;\n    font-size: 12px;\n    font-weight: 400;\n    height: 100%;\n    line-height: 70px;\n    opacity: 1;\n    padding: 0 20px;\n    pointer-events: none;\n    position: absolute;\n    -webkit-transform: translate3d(0, 0, 0);\n    transform: translate3d(0, 0, 0);\n    width: 100%\n}\n\n.floatLabelContainer__input {\n    -webkit-appearance: none!important;\n    -moz-appearance: none!important;\n    appearance: none!important;\n    background: 0 0!important;\n    box-sizing: border-box;\n    color: #262626!important;\n    height: 100%!important;\n    margin: 0!important;\n    outline: 0!important;\n    padding: 10px 20px 0!important;\n    width: 100%!important\n}\n\n.floatLabelContainer__input::selection {\n    color: #fff;\n    background-color: #2a8dea\n}\n\n.floatLabelContainer--focused,\n.floatLabelContainer__input:focus {\n    border-color: #2a8dea\n}\n\n.floatLabelContainer--focused .floatLabelContainer__label {\n    color: #2a8dea;\n    transform: translate3d(0, -20px, 0)\n}\n\n.floatLabelContainer--hasValue .floatLabelContainer__label {\n    transform: translate3d(0, -20px, 0)\n}\n\n.floatLabelContainer>textarea {\n    padding: 30px 20px 0!important\n}\t\n\t\t"],"providers":[]}]}],"members":{"NotifyFormSubmitted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onFormSubmit":[{"__symbolic":"method"}],"ResetForm":[{"__symbolic":"method"}],"CreateForm":[{"__symbolic":"method"}]}}}}]