[{"__symbolic":"module","version":3,"metadata":{"SkyContribPhoneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-contrib-phone-input","template":"<div class=\"container\">\n  <select [(ngModel)]=\"selectedCountry\" (ngModelChange)=\"onCountryChange($event)\" class=\"sky-form-control\">\n    <option *ngFor=\"let country of countries\">{{ country }}</option>\n  </select>\n  <input\n    type=\"text\"\n    [(ngModel)]=\"phoneNumber\"\n    (ngModelChange)=\"onPhoneNumberChange($event)\"\n    [ngClass]=\"setInvalidClass()\"\n    (blur)=\"onBlur()\"\n    class=\"sky-form-control\"\n  />\n</div>\n","styles":[".sky-form-control{width:100%;padding:6px 12px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;line-height:1.42857;font-size:15px;color:#282b31}.sky-form-control:focus{box-shadow:0 0 8px rgba(0,180,241,0.6);border:1px solid #00b4f1;outline:none}.sky-form-group{margin-bottom:10px}input.ng-invalid.ng-touched,select.ng-invalid.submitted{box-shadow:0 0 8px rgba(239,64,68,0.6);border:1px solid #ef4044;outline:none}.sky-error-label{margin-top:5px;color:#282b31}.sky-error-label::before{content:\"\\f071\";font-family:FontAwesome;margin-right:5px;color:#ef4044}.sky-control-label{display:inline-block;font-weight:normal;margin-bottom:5px;max-width:100%}.sky-control-label-required:after{content:\"*\";color:#ef4044;padding-left:5px}fieldset{border:0;margin:0;padding:0}:host .container{display:inline-flex}:host .container select{width:50px;height:inherit;border-right-width:1px}:host .container input{border-left-width:0}:host .container input:focus,:host .container input.ng-invalid{border-left-width:1px}\n"]}]}],"members":{"phoneNumber":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"countries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedCountry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"phoneNumberChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"countryChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"onCountryChange":[{"__symbolic":"method"}],"setInvalidClass":[{"__symbolic":"method"}],"getFormattedPhoneNumber":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyContribPhoneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-contrib-phone-input","template":"<div class=\"container\">\n  <select [(ngModel)]=\"selectedCountry\" (ngModelChange)=\"onCountryChange($event)\" class=\"sky-form-control\">\n    <option *ngFor=\"let country of countries\">{{ country }}</option>\n  </select>\n  <input\n    type=\"text\"\n    [(ngModel)]=\"phoneNumber\"\n    (ngModelChange)=\"onPhoneNumberChange($event)\"\n    [ngClass]=\"setInvalidClass()\"\n    (blur)=\"onBlur()\"\n    class=\"sky-form-control\"\n  />\n</div>\n","styles":[".sky-form-control{width:100%;padding:6px 12px;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;line-height:1.42857;font-size:15px;color:#282b31}.sky-form-control:focus{box-shadow:0 0 8px rgba(0,180,241,0.6);border:1px solid #00b4f1;outline:none}.sky-form-group{margin-bottom:10px}input.ng-invalid.ng-touched,select.ng-invalid.submitted{box-shadow:0 0 8px rgba(239,64,68,0.6);border:1px solid #ef4044;outline:none}.sky-error-label{margin-top:5px;color:#282b31}.sky-error-label::before{content:\"\\f071\";font-family:FontAwesome;margin-right:5px;color:#ef4044}.sky-control-label{display:inline-block;font-weight:normal;margin-bottom:5px;max-width:100%}.sky-control-label-required:after{content:\"*\";color:#ef4044;padding-left:5px}fieldset{border:0;margin:0;padding:0}:host .container{display:inline-flex}:host .container select{width:50px;height:inherit;border-right-width:1px}:host .container input{border-left-width:0}:host .container input:focus,:host .container input.ng-invalid{border-left-width:1px}\n"]}]}],"members":{"phoneNumber":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"countries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedCountry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"phoneNumberChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"countryChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"onCountryChange":[{"__symbolic":"method"}],"setInvalidClass":[{"__symbolic":"method"}],"getFormattedPhoneNumber":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}]}}}}]