@norwegian/core-components 6.12.1 → 6.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/medium/facebook--light.svg +1 -2
- package/assets/icons/medium/facebook.svg +0 -1
- package/assets/icons/medium/instagram--light.svg +2 -4
- package/assets/icons/medium/instagram.svg +1 -2
- package/assets/icons/medium/tiktok--light.svg +3 -0
- package/assets/icons/medium/tiktok.svg +3 -0
- package/assets/icons/medium/twitter-x--light.svg +9 -3
- package/assets/icons/medium/twitter-x.svg +9 -3
- package/assets/icons/medium/youtube--light.svg +1 -2
- package/assets/icons/medium/youtube.svg +0 -1
- package/assets/icons/small/facebook--light.svg +1 -2
- package/assets/icons/small/facebook.svg +0 -1
- package/assets/icons/small/instagram--light.svg +2 -3
- package/assets/icons/small/instagram.svg +1 -2
- package/assets/icons/small/tiktok--light.svg +3 -0
- package/assets/icons/small/tiktok.svg +3 -0
- package/assets/icons/small/twitter-x--light.svg +8 -2
- package/assets/icons/small/twitter-x.svg +8 -2
- package/assets/icons/small/youtube--light.svg +2 -3
- package/assets/icons/small/youtube.svg +0 -1
- package/esm2022/lib/components/accordion/accordion.component.mjs +2 -2
- package/esm2022/lib/components/alert/alert.component.mjs +41 -6
- package/esm2022/lib/components/box/box.component.mjs +4 -4
- package/esm2022/lib/components/button/button.component.mjs +4 -4
- package/esm2022/lib/components/campaign-header/campaign-header.component.mjs +4 -4
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/lib/components/chip/chip.component.mjs +2 -2
- package/esm2022/lib/components/datepicker/calendar/calendar.component.mjs +2 -2
- package/esm2022/lib/components/divider/divider.component.mjs +4 -4
- package/esm2022/lib/components/icon/icon.component.mjs +2 -2
- package/esm2022/lib/components/info/info.component.mjs +4 -4
- package/esm2022/lib/components/input/input.component.mjs +2 -2
- package/esm2022/lib/components/journey/journey.component.mjs +2 -2
- package/esm2022/lib/components/micro-button/micro-button.component.mjs +4 -4
- package/esm2022/lib/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/components/page-header/search/search.component.mjs +3 -3
- package/esm2022/lib/components/phone-number/phone-number.component.mjs +2 -2
- package/esm2022/lib/components/radio/radio.component.mjs +2 -2
- package/esm2022/lib/components/select/select.component.mjs +2 -2
- package/esm2022/lib/components/slider/slider.component.mjs +2 -2
- package/esm2022/lib/components/spinner/spinner.component.mjs +2 -2
- package/esm2022/lib/components/tab-group/tab/tab.component.mjs +2 -2
- package/esm2022/lib/components/tag/tag.component.mjs +4 -4
- package/esm2022/lib/components/textarea/textarea.component.mjs +2 -2
- package/esm2022/lib/core/services/abandoned-basket/abandoned-basket.service.mjs +6 -3
- package/esm2022/lib/core/services/geolocation/geolocation.service.mjs +6 -3
- package/esm2022/lib/core/services/sort/sort.service.mjs +6 -3
- package/esm2022/lib/core/services/viewport/viewport.service.mjs +6 -3
- package/fesm2022/norwegian-core-components.mjs +106 -59
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/lib/components/alert/alert.component.d.ts +13 -3
- package/package.json +1 -1
- package/styles/1__settings/_colors.scss +2 -2
|
@@ -33,11 +33,11 @@ export class SearchComponent extends NasComponentBase {
|
|
|
33
33
|
}, 50);
|
|
34
34
|
}
|
|
35
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SearchComponent, selector: "nas-search", inputs: { searchText: "searchText", searchForm: "searchForm" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form [action]=\"searchForm\" [nasClass]=\"getClass('', expanded && 'expanded')\" method=\"get\">\n <button type='button' [nasClass]=\"getClass('toggle')\" (click)=\"focus()\" (focus)=\"focus()\">\n <
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SearchComponent, selector: "nas-search", inputs: { searchText: "searchText", searchForm: "searchForm" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<form [action]=\"searchForm\" [nasClass]=\"getClass('', expanded && 'expanded')\" method=\"get\">\n <button type='button' [nasClass]=\"getClass('toggle')\" (click)=\"focus()\" (focus)=\"focus()\">\n <span [nasClass]=\"getClass('toggle-text')\">{{searchText}}</span>\n <nas-icon icon=\"search\" [nasClass]=\"getClass('icon')\"></nas-icon>\n </button>\n\n <input\n type=\"search\"\n [nasClass]=\"getClass('input')\"\n [placeholder]=\"searchText\"\n name=\"search\"\n (blur)=\"blur()\"\n #input\n />\n</form>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-search{display:none;position:relative;height:100%;color:#003251;overflow:hidden;padding-top:1px;padding-left:3px;padding-right:3px;margin-right:24px}@media (min-width: 1000px){.nas-search{display:flex;align-items:center;justify-content:flex-end}}.nas-search__toggle{position:relative;z-index:2;display:flex;align-items:center;outline:0;transition:transform .2s cubic-bezier(0,0,.1,1)}.nas-search__toggle-text{display:inline-block;padding-bottom:2px;border-bottom:2px solid transparent;transition:opacity .2s cubic-bezier(0,0,.1,1),transform .2s cubic-bezier(0,0,.1,1)}.nas-search__toggle:hover .nas-search__toggle-text,.nas-search__toggle:focus .nas-search__toggle-text{border-color:#003251}.nas-search__input[type=search]{display:none;position:absolute;right:0;margin-top:-1px;width:300px;padding:8px 36px 10px 12px;background-color:#fff;animation:search-input-in .3s ease-out both}.nas-search__icon{position:relative;top:-3px;transform:rotate(-360deg);transition:transform .19s cubic-bezier(0,0,.1,1);margin-left:9px}.nas-search--expanded{width:300px;border:2px solid #003251;height:36px}.nas-search--expanded .nas-search__toggle{outline:0;transform:translate(calc(100% - 30px))}.nas-search--expanded .nas-search__toggle-text{opacity:0;border:0;transform:translate(24px)}.nas-search--expanded .nas-search__icon{transform:none}.nas-search--expanded .nas-search__input[type=search]{display:block}@keyframes search-input-in{0%{opacity:0}}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SearchComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
|
-
args: [{ selector: 'nas-search', encapsulation: ViewEncapsulation.None, template: "<form [action]=\"searchForm\" [nasClass]=\"getClass('', expanded && 'expanded')\" method=\"get\">\n <button type='button' [nasClass]=\"getClass('toggle')\" (click)=\"focus()\" (focus)=\"focus()\">\n <
|
|
40
|
+
args: [{ selector: 'nas-search', encapsulation: ViewEncapsulation.None, template: "<form [action]=\"searchForm\" [nasClass]=\"getClass('', expanded && 'expanded')\" method=\"get\">\n <button type='button' [nasClass]=\"getClass('toggle')\" (click)=\"focus()\" (focus)=\"focus()\">\n <span [nasClass]=\"getClass('toggle-text')\">{{searchText}}</span>\n <nas-icon icon=\"search\" [nasClass]=\"getClass('icon')\"></nas-icon>\n </button>\n\n <input\n type=\"search\"\n [nasClass]=\"getClass('input')\"\n [placeholder]=\"searchText\"\n name=\"search\"\n (blur)=\"blur()\"\n #input\n />\n</form>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-search{display:none;position:relative;height:100%;color:#003251;overflow:hidden;padding-top:1px;padding-left:3px;padding-right:3px;margin-right:24px}@media (min-width: 1000px){.nas-search{display:flex;align-items:center;justify-content:flex-end}}.nas-search__toggle{position:relative;z-index:2;display:flex;align-items:center;outline:0;transition:transform .2s cubic-bezier(0,0,.1,1)}.nas-search__toggle-text{display:inline-block;padding-bottom:2px;border-bottom:2px solid transparent;transition:opacity .2s cubic-bezier(0,0,.1,1),transform .2s cubic-bezier(0,0,.1,1)}.nas-search__toggle:hover .nas-search__toggle-text,.nas-search__toggle:focus .nas-search__toggle-text{border-color:#003251}.nas-search__input[type=search]{display:none;position:absolute;right:0;margin-top:-1px;width:300px;padding:8px 36px 10px 12px;background-color:#fff;animation:search-input-in .3s ease-out both}.nas-search__icon{position:relative;top:-3px;transform:rotate(-360deg);transition:transform .19s cubic-bezier(0,0,.1,1);margin-left:9px}.nas-search--expanded{width:300px;border:2px solid #003251;height:36px}.nas-search--expanded .nas-search__toggle{outline:0;transform:translate(calc(100% - 30px))}.nas-search--expanded .nas-search__toggle-text{opacity:0;border:0;transform:translate(24px)}.nas-search--expanded .nas-search__icon{transform:none}.nas-search--expanded .nas-search__input[type=search]{display:block}@keyframes search-input-in{0%{opacity:0}}\n"] }]
|
|
41
41
|
}], ctorParameters: function () { return []; }, propDecorators: { searchText: [{
|
|
42
42
|
type: Input
|
|
43
43
|
}], searchForm: [{
|
|
@@ -46,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
46
46
|
type: ViewChild,
|
|
47
47
|
args: ['input']
|
|
48
48
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcGFnZS1oZWFkZXIvc2VhcmNoL3NlYXJjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3BhZ2UtaGVhZGVyL3NlYXJjaC9zZWFyY2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztHQUdHO0FBQ0gsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBRUwsU0FBUyxFQUNULGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRakQsTUFBTSxPQUFPLGVBQWdCLFNBQVEsZ0JBQWdCO0lBYW5EO1FBQ0UsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBYnRCOzs7V0FHRztRQUNNLGVBQVUsR0FBRyxRQUFRLENBQUM7UUFZL0IsYUFBUSxHQUFHLEtBQUssQ0FBQztJQUZqQixDQUFDO0lBSUQsSUFBSTtRQUNGLE1BQU0sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUVuRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxLQUFLLENBQUMsS0FBSyxLQUFLLEVBQUUsRUFBRTtnQkFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7YUFDdkI7UUFDSCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDVixDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBRXJCLE1BQU0sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUVuRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2hCLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNULENBQUM7OEdBckNVLGVBQWU7a0dBQWYsZUFBZSxnUENuQjVCLHloQkFlQTs7MkZESWEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLGlCQUdQLGlCQUFpQixDQUFDLElBQUk7MEVBTzVCLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFDYyxZQUFZO3NCQUEvQixTQUFTO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgTm9yd2VnaWFuIEFpciBTaHV0dGxlLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICovXG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBFbGVtZW50UmVmLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5hc0NvbXBvbmVudEJhc2UgfSBmcm9tICcuLi8uLi8uLi9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmFzLXNlYXJjaCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWFyY2guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2guY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoQ29tcG9uZW50IGV4dGVuZHMgTmFzQ29tcG9uZW50QmFzZSB7XG4gIC8qKlxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogU2V0cyB0aGUgc2VhcmNoIGxhYmVsIGZvciB0aGUgc2VhcmNoIGZvcm0uIERlZmF1bHQgdmFsdWUgaXMgXCJTZWFyY2hcIlxuICAgKi9cbiAgQElucHV0KCkgc2VhcmNoVGV4dCA9ICdTZWFyY2gnO1xuICAvKipcbiAgICogQGRlc2NyaXB0aW9uXG4gICAqIFVybCB0byB0aGUgc2VhcmNoIGZvcm0uIEFkZGVkIHRvIHRoZSBhY3Rpb24gYXR0cmlidXRlIG9uIG5hdGl2ZSBmb3JtIGVsZW1lbnQuXG4gICAqL1xuICBASW5wdXQoKSBzZWFyY2hGb3JtOiBzdHJpbmc7XG4gIEBWaWV3Q2hpbGQoJ2lucHV0JykgaW5wdXRFbGVtZW50OiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCduYXMtc2VhcmNoJyk7XG4gIH1cblxuICBleHBhbmRlZCA9IGZhbHNlO1xuXG4gIGJsdXIoKSB7XG4gICAgY29uc3QgeyBuYXRpdmVFbGVtZW50OiBpbnB1dCB9ID0gdGhpcy5pbnB1dEVsZW1lbnQ7XG5cbiAgICBzZXRUaW1lb3V0KCgpID0+
|
|
49
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUtY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvcGFnZS1oZWFkZXIvc2VhcmNoL3NlYXJjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3BhZ2UtaGVhZGVyL3NlYXJjaC9zZWFyY2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztHQUdHO0FBQ0gsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBRUwsU0FBUyxFQUNULGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRakQsTUFBTSxPQUFPLGVBQWdCLFNBQVEsZ0JBQWdCO0lBYW5EO1FBQ0UsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBYnRCOzs7V0FHRztRQUNNLGVBQVUsR0FBRyxRQUFRLENBQUM7UUFZL0IsYUFBUSxHQUFHLEtBQUssQ0FBQztJQUZqQixDQUFDO0lBSUQsSUFBSTtRQUNGLE1BQU0sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUVuRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxLQUFLLENBQUMsS0FBSyxLQUFLLEVBQUUsRUFBRTtnQkFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7YUFDdkI7UUFDSCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDVixDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1FBRXJCLE1BQU0sRUFBRSxhQUFhLEVBQUUsS0FBSyxFQUFFLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUVuRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsS0FBSyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2hCLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNULENBQUM7OEdBckNVLGVBQWU7a0dBQWYsZUFBZSxnUENuQjVCLHloQkFlQTs7MkZESWEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLGlCQUdQLGlCQUFpQixDQUFDLElBQUk7MEVBTzVCLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0csVUFBVTtzQkFBbEIsS0FBSztnQkFDYyxZQUFZO3NCQUEvQixTQUFTO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBsaWNlbnNlXG4gKiBDb3B5cmlnaHQgTm9yd2VnaWFuIEFpciBTaHV0dGxlLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICovXG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBFbGVtZW50UmVmLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5hc0NvbXBvbmVudEJhc2UgfSBmcm9tICcuLi8uLi8uLi9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmFzLXNlYXJjaCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWFyY2guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zZWFyY2guY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgU2VhcmNoQ29tcG9uZW50IGV4dGVuZHMgTmFzQ29tcG9uZW50QmFzZSB7XG4gIC8qKlxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogU2V0cyB0aGUgc2VhcmNoIGxhYmVsIGZvciB0aGUgc2VhcmNoIGZvcm0uIERlZmF1bHQgdmFsdWUgaXMgXCJTZWFyY2hcIlxuICAgKi9cbiAgQElucHV0KCkgc2VhcmNoVGV4dCA9ICdTZWFyY2gnO1xuICAvKipcbiAgICogQGRlc2NyaXB0aW9uXG4gICAqIFVybCB0byB0aGUgc2VhcmNoIGZvcm0uIEFkZGVkIHRvIHRoZSBhY3Rpb24gYXR0cmlidXRlIG9uIG5hdGl2ZSBmb3JtIGVsZW1lbnQuXG4gICAqL1xuICBASW5wdXQoKSBzZWFyY2hGb3JtOiBzdHJpbmc7XG4gIEBWaWV3Q2hpbGQoJ2lucHV0JykgaW5wdXRFbGVtZW50OiBFbGVtZW50UmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCduYXMtc2VhcmNoJyk7XG4gIH1cblxuICBleHBhbmRlZCA9IGZhbHNlO1xuXG4gIGJsdXIoKSB7XG4gICAgY29uc3QgeyBuYXRpdmVFbGVtZW50OiBpbnB1dCB9ID0gdGhpcy5pbnB1dEVsZW1lbnQ7XG5cbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGlmIChpbnB1dC52YWx1ZSA9PT0gJycpIHtcbiAgICAgICAgdGhpcy5leHBhbmRlZCA9IGZhbHNlO1xuICAgICAgfVxuICAgIH0sIDEwMCk7XG4gIH1cblxuICBmb2N1cygpIHtcbiAgICB0aGlzLmV4cGFuZGVkID0gdHJ1ZTtcblxuICAgIGNvbnN0IHsgbmF0aXZlRWxlbWVudDogaW5wdXQgfSA9IHRoaXMuaW5wdXRFbGVtZW50O1xuXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpbnB1dC5mb2N1cygpO1xuICAgIH0sIDUwKTtcbiAgfVxufVxuIiwiPGZvcm0gW2FjdGlvbl09XCJzZWFyY2hGb3JtXCIgW25hc0NsYXNzXT1cImdldENsYXNzKCcnLCBleHBhbmRlZCAmJiAnZXhwYW5kZWQnKVwiIG1ldGhvZD1cImdldFwiPlxuICA8YnV0dG9uIHR5cGU9J2J1dHRvbicgW25hc0NsYXNzXT1cImdldENsYXNzKCd0b2dnbGUnKVwiIChjbGljayk9XCJmb2N1cygpXCIgKGZvY3VzKT1cImZvY3VzKClcIj5cbiAgICA8c3BhbiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3MoJ3RvZ2dsZS10ZXh0JylcIj57e3NlYXJjaFRleHR9fTwvc3Bhbj5cbiAgICA8bmFzLWljb24gaWNvbj1cInNlYXJjaFwiIFtuYXNDbGFzc109XCJnZXRDbGFzcygnaWNvbicpXCI+PC9uYXMtaWNvbj5cbiAgPC9idXR0b24+XG5cbiAgPGlucHV0XG4gICAgdHlwZT1cInNlYXJjaFwiXG4gICAgW25hc0NsYXNzXT1cImdldENsYXNzKCdpbnB1dCcpXCJcbiAgICBbcGxhY2Vob2xkZXJdPVwic2VhcmNoVGV4dFwiXG4gICAgbmFtZT1cInNlYXJjaFwiXG4gICAgKGJsdXIpPVwiYmx1cigpXCJcbiAgICAjaW5wdXRcbiAgLz5cbjwvZm9ybT5cbiJdfQ==
|
|
@@ -78,11 +78,11 @@ export class PhoneNumberComponent extends NasComponentBase {
|
|
|
78
78
|
]);
|
|
79
79
|
}
|
|
80
80
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PhoneNumberComponent, selector: "nas-phone-number", inputs: { options: "options", preferredOptions: "preferredOptions", prefixCountryCode: "prefixCountryCode", label: "label", optionsLabel: "optionsLabel", preferredOptionsLabel: "preferredOptionsLabel", placeholder: "placeholder", id: "id", type: "type", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", errorMessage: "errorMessage", info: "info", icon: "icon", readonly: "readonly", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormControlNamePrefix: "nasFormControlNamePrefix", nasFormGroup: "nasFormGroup", model: "model", cssClass: "cssClass", selectedValue: "selectedValue", selected: "selected" }, outputs: { modelChange: "modelChange", selectedChange: "selectedChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClass()\">\n <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n <div [nasClass]=\"getClass('controls')\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCode>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [(ngModel)]=\"model\" />\n </div>\n </ng-container>\n <ng-template #reactiveForm>\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCodeReactive>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n [nasFormGroup]=\"nasFormGroup\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [formControlName]=\"nasFormControlName\" />\n </div>\n </ng-template>\n </div>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('line')\"></span>\n\n <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#d81939}.nas-phone-number--error .nas-phone-number__line{background-color:#d81939}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#003251}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: i4.OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: i5.OptgroupComponent, selector: "nas-optgroup", inputs: ["label"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PhoneNumberComponent, selector: "nas-phone-number", inputs: { options: "options", preferredOptions: "preferredOptions", prefixCountryCode: "prefixCountryCode", label: "label", optionsLabel: "optionsLabel", preferredOptionsLabel: "preferredOptionsLabel", placeholder: "placeholder", id: "id", type: "type", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", errorMessage: "errorMessage", info: "info", icon: "icon", readonly: "readonly", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormControlNamePrefix: "nasFormControlNamePrefix", nasFormGroup: "nasFormGroup", model: "model", cssClass: "cssClass", selectedValue: "selectedValue", selected: "selected" }, outputs: { modelChange: "modelChange", selectedChange: "selectedChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClass()\">\n <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n <div [nasClass]=\"getClass('controls')\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCode>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [(ngModel)]=\"model\" />\n </div>\n </ng-container>\n <ng-template #reactiveForm>\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCodeReactive>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n [nasFormGroup]=\"nasFormGroup\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [formControlName]=\"nasFormControlName\" />\n </div>\n </ng-template>\n </div>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('line')\"></span>\n\n <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-phone-number--error .nas-phone-number__line{background-color:#e5212d}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#003251}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: i4.OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: i5.OptgroupComponent, selector: "nas-optgroup", inputs: ["label"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
82
82
|
}
|
|
83
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, decorators: [{
|
|
84
84
|
type: Component,
|
|
85
|
-
args: [{ selector: 'nas-phone-number', template: "<div [nasClass]=\"mainClass()\">\n <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n <div [nasClass]=\"getClass('controls')\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCode>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [(ngModel)]=\"model\" />\n </div>\n </ng-container>\n <ng-template #reactiveForm>\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCodeReactive>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n [nasFormGroup]=\"nasFormGroup\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [formControlName]=\"nasFormControlName\" />\n </div>\n </ng-template>\n </div>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('line')\"></span>\n\n <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#
|
|
85
|
+
args: [{ selector: 'nas-phone-number', template: "<div [nasClass]=\"mainClass()\">\n <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n <div [nasClass]=\"getClass('controls')\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCode>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [(ngModel)]=\"model\" />\n </div>\n </ng-container>\n <ng-template #reactiveForm>\n <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n {{prefixCountryCode}}\n </div>\n <ng-template #selectCountryCodeReactive>\n <div [nasClass]=\"getClass('country-code')\">\n <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n [nasFormGroup]=\"nasFormGroup\">\n </nas-select>\n <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n <nas-optgroup [label]=\"preferredOptionsLabel\">\n <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n <nas-optgroup [label]=\"optionsLabel\">\n <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n </nas-optgroup>\n </nas-select>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [formControlName]=\"nasFormControlName\" />\n </div>\n </ng-template>\n </div>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('line')\"></span>\n\n <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-phone-number--error .nas-phone-number__line{background-color:#e5212d}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#003251}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#003251;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#003251}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"] }]
|
|
86
86
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
87
87
|
type: Input
|
|
88
88
|
}], preferredOptions: [{
|
|
@@ -54,11 +54,11 @@ export class RadioComponent extends NasComponentBase {
|
|
|
54
54
|
this.checked = event.target.checked;
|
|
55
55
|
}
|
|
56
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RadioComponent, selector: "nas-radio", inputs: { id: "id", value: "value", name: "name", error: "error", disabled: "disabled", strong: "strong", block: "block", spaceless: "spaceless", tabIndex: "tabIndex", required: "required", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"disabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-radio input{position:absolute;opacity:0;z-index:-1}.nas-radio input:checked+.nas-radio__indicator{border-color:#003251}.nas-radio input:checked+.nas-radio__indicator:before{transform:scale(1);opacity:1}.nas-radio input[disabled]+.nas-radio__indicator{background-color:#d8d8d8;border-color:#d8d8d8}.nas-radio input:focus+.nas-radio__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-radio:hover .nas-radio__indicator{border-color:#909090}.nas-radio__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:2px;left:0;width:18px;height:18px;border-radius:50%;border:3px solid #c3c3c3;background-color:#fff}.nas-radio__indicator:before{content:\"\";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;margin-top:-3px;background-color:#003251;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1)}.nas-radio--block{display:block}.nas-radio--spaceless{margin-bottom:0}.nas-radio--disabled{color:#626363}.nas-radio--strong{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-radio--error input:checked+.nas-radio__indicator,.nas-radio--error input+.nas-radio__indicator{border-color:#
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RadioComponent, selector: "nas-radio", inputs: { id: "id", value: "value", name: "name", error: "error", disabled: "disabled", strong: "strong", block: "block", spaceless: "spaceless", tabIndex: "tabIndex", required: "required", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"disabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-radio input{position:absolute;opacity:0;z-index:-1}.nas-radio input:checked+.nas-radio__indicator{border-color:#003251}.nas-radio input:checked+.nas-radio__indicator:before{transform:scale(1);opacity:1}.nas-radio input[disabled]+.nas-radio__indicator{background-color:#d8d8d8;border-color:#d8d8d8}.nas-radio input:focus+.nas-radio__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-radio:hover .nas-radio__indicator{border-color:#909090}.nas-radio__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:2px;left:0;width:18px;height:18px;border-radius:50%;border:3px solid #c3c3c3;background-color:#fff}.nas-radio__indicator:before{content:\"\";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;margin-top:-3px;background-color:#003251;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1)}.nas-radio--block{display:block}.nas-radio--spaceless{margin-bottom:0}.nas-radio--disabled{color:#626363}.nas-radio--strong{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-radio--error input:checked+.nas-radio__indicator,.nas-radio--error input+.nas-radio__indicator{border-color:#e5212d}.nas-radio--error input:checked+.nas-radio__indicator:before,.nas-radio--error input+.nas-radio__indicator:before{background-color:#e5212d}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RadioComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
|
-
args: [{ selector: 'nas-radio', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"disabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-radio input{position:absolute;opacity:0;z-index:-1}.nas-radio input:checked+.nas-radio__indicator{border-color:#003251}.nas-radio input:checked+.nas-radio__indicator:before{transform:scale(1);opacity:1}.nas-radio input[disabled]+.nas-radio__indicator{background-color:#d8d8d8;border-color:#d8d8d8}.nas-radio input:focus+.nas-radio__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-radio:hover .nas-radio__indicator{border-color:#909090}.nas-radio__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:2px;left:0;width:18px;height:18px;border-radius:50%;border:3px solid #c3c3c3;background-color:#fff}.nas-radio__indicator:before{content:\"\";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;margin-top:-3px;background-color:#003251;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1)}.nas-radio--block{display:block}.nas-radio--spaceless{margin-bottom:0}.nas-radio--disabled{color:#626363}.nas-radio--strong{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-radio--error input:checked+.nas-radio__indicator,.nas-radio--error input+.nas-radio__indicator{border-color:#
|
|
61
|
+
args: [{ selector: 'nas-radio', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"disabled\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-radio input{position:absolute;opacity:0;z-index:-1}.nas-radio input:checked+.nas-radio__indicator{border-color:#003251}.nas-radio input:checked+.nas-radio__indicator:before{transform:scale(1);opacity:1}.nas-radio input[disabled]+.nas-radio__indicator{background-color:#d8d8d8;border-color:#d8d8d8}.nas-radio input:focus+.nas-radio__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-radio:hover .nas-radio__indicator{border-color:#909090}.nas-radio__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:2px;left:0;width:18px;height:18px;border-radius:50%;border:3px solid #c3c3c3;background-color:#fff}.nas-radio__indicator:before{content:\"\";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;margin-top:-3px;background-color:#003251;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1)}.nas-radio--block{display:block}.nas-radio--spaceless{margin-bottom:0}.nas-radio--disabled{color:#626363}.nas-radio--strong{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-radio--error input:checked+.nas-radio__indicator,.nas-radio--error input+.nas-radio__indicator{border-color:#e5212d}.nas-radio--error input:checked+.nas-radio__indicator:before,.nas-radio--error input+.nas-radio__indicator:before{background-color:#e5212d}\n"] }]
|
|
62
62
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
63
63
|
type: Input
|
|
64
64
|
}], value: [{
|
|
@@ -287,14 +287,14 @@ export class SelectComponent extends NasComponentBase {
|
|
|
287
287
|
selectTitleWrapper.style.display = 'none';
|
|
288
288
|
}
|
|
289
289
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SelectComponent, selector: "nas-select", inputs: { id: "id", inline: "inline", label: "label", block: "block", spaceless: "spaceless", stretch: "stretch", compact: "compact", simple: "simple", light: "light", fill: "fill", error: "error", errorMessage: "errorMessage", disabled: "disabled", autogrow: "autogrow", cssClass: "cssClass", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", options: "options", selectedValue: "selectedValue", selected: "selected" }, outputs: { selectedChange: "selectedChange", keydown: "keydown" }, queries: [{ propertyName: "optionComponents", predicate: OptionComponent }, { propertyName: "optgroupComponents", predicate: OptgroupComponent }], viewQueries: [{ propertyName: "selectTitleWrapper", first: true, predicate: ["selectTitleWrapper"], descendants: true, static: true }, { propertyName: "errorMessageWrapper", first: true, predicate: ["errorMessageWrapper"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label for=\"getSelectId()\"\n *ngIf=\"label && !inline\">\n <span [nasClass]=\"getClass('label')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <select #select\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">\n {{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n <ng-template #reactiveForm>\n <ng-container [formGroup]=\"nasFormGroup\">\n <select #select\n [formControlName]=\"nasFormControlName\"\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">{{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n </ng-template>\n <p [nasClass]=\"getClass('error')\"\n #errorMessageWrapper\n *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">{{errorMessage}}</p>\n <div #selectTitleWrapper\n [style.display]=\"'none'\"\n aria-hidden=\"true\">\n <span>{{selectTitle}}</span>\n </div>\n <ng-template #contentOptions>\n <ng-content></ng-content>\n </ng-template>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-select{position:relative;display:inline-block;vertical-align:top;max-width:100%;margin-bottom:24px;z-index:0}.nas-select__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;display:block;margin-bottom:6px}.nas-select select{-webkit-appearance:none;-moz-appearance:none;display:inline-block;cursor:pointer;margin:0;padding:12px 34px 12px 12px;padding-right:34px!important;width:100%;border-radius:0;border:3px solid #c3c3c3;outline:0;font-size:16px;color:#002a3a;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.nas-select select:hover,.nas-select select:focus{border-color:#003251}.nas-select select:active{border-color:#003251}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#626363;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#c3c3c3}.nas-select:after{content:\"\";position:absolute;display:inline-block;pointer-events:none;z-index:3;bottom:18px;right:12px;width:12px;height:12px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23214A5F%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--block{display:block}.nas-select--block select{display:block;width:100%}.nas-select--light:after{background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23FFFFFF%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--light select{color:#fff;border-color:#fff}.nas-select--light select:hover,.nas-select--light select:focus{border-color:#c3c3c3}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#626363}.nas-select--disabled:after{background-color:#626363;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23909090%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--inline,.nas-select--simple{display:inline-block;max-width:100%;overflow:hidden;line-height:inherit;padding:0;font-size:inherit;color:inherit;margin-bottom:0;border-bottom:inherit}.nas-select--inline:after,.nas-select--simple:after{top:50%;margin-top:-7px;right:0}.nas-select--inline select,.nas-select--simple select{font-size:inherit;color:inherit;padding:0;padding-right:18px!important;border:0;padding-bottom:3px;border-bottom:3px solid #c3c3c3;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--stretch{display:block}.nas-select--stretch select{width:100%!important}.nas-select--error select{border-color:#d81939}.nas-select--error:after{top:24px;bottom:auto}.nas-select__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-select__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#d81939}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--compact select{padding-top:9px;padding-bottom:9px}.nas-select--compact:after{bottom:16px}.nas-select--spaceless{margin-bottom:0}.nas-select--fill select{background-color:#fff;border-color:#fff}.nas-select--rotate:after{transform:rotate(180deg);transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--rotate::after-enter,.nas-select--rotate::after-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-select--rotate::after-enter{animation:flip-in .55s ease both}.nas-select--rotate::after-leave-active{animation:flip-out .2s ease-out both}@-moz-document url-prefix(){.select select{text-indent:.01px;text-overflow:\"\";padding-right:1rem}.select option{background-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SelectComponent, selector: "nas-select", inputs: { id: "id", inline: "inline", label: "label", block: "block", spaceless: "spaceless", stretch: "stretch", compact: "compact", simple: "simple", light: "light", fill: "fill", error: "error", errorMessage: "errorMessage", disabled: "disabled", autogrow: "autogrow", cssClass: "cssClass", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", options: "options", selectedValue: "selectedValue", selected: "selected" }, outputs: { selectedChange: "selectedChange", keydown: "keydown" }, queries: [{ propertyName: "optionComponents", predicate: OptionComponent }, { propertyName: "optgroupComponents", predicate: OptgroupComponent }], viewQueries: [{ propertyName: "selectTitleWrapper", first: true, predicate: ["selectTitleWrapper"], descendants: true, static: true }, { propertyName: "errorMessageWrapper", first: true, predicate: ["errorMessageWrapper"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label for=\"getSelectId()\"\n *ngIf=\"label && !inline\">\n <span [nasClass]=\"getClass('label')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <select #select\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">\n {{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n <ng-template #reactiveForm>\n <ng-container [formGroup]=\"nasFormGroup\">\n <select #select\n [formControlName]=\"nasFormControlName\"\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">{{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n </ng-template>\n <p [nasClass]=\"getClass('error')\"\n #errorMessageWrapper\n *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">{{errorMessage}}</p>\n <div #selectTitleWrapper\n [style.display]=\"'none'\"\n aria-hidden=\"true\">\n <span>{{selectTitle}}</span>\n </div>\n <ng-template #contentOptions>\n <ng-content></ng-content>\n </ng-template>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-select{position:relative;display:inline-block;vertical-align:top;max-width:100%;margin-bottom:24px;z-index:0}.nas-select__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;display:block;margin-bottom:6px}.nas-select select{-webkit-appearance:none;-moz-appearance:none;display:inline-block;cursor:pointer;margin:0;padding:12px 34px 12px 12px;padding-right:34px!important;width:100%;border-radius:0;border:3px solid #c3c3c3;outline:0;font-size:16px;color:#002a3a;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.nas-select select:hover,.nas-select select:focus{border-color:#003251}.nas-select select:active{border-color:#003251}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#626363;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#c3c3c3}.nas-select:after{content:\"\";position:absolute;display:inline-block;pointer-events:none;z-index:3;bottom:18px;right:12px;width:12px;height:12px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23214A5F%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--block{display:block}.nas-select--block select{display:block;width:100%}.nas-select--light:after{background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23FFFFFF%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--light select{color:#fff;border-color:#fff}.nas-select--light select:hover,.nas-select--light select:focus{border-color:#c3c3c3}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#626363}.nas-select--disabled:after{background-color:#626363;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23909090%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--inline,.nas-select--simple{display:inline-block;max-width:100%;overflow:hidden;line-height:inherit;padding:0;font-size:inherit;color:inherit;margin-bottom:0;border-bottom:inherit}.nas-select--inline:after,.nas-select--simple:after{top:50%;margin-top:-7px;right:0}.nas-select--inline select,.nas-select--simple select{font-size:inherit;color:inherit;padding:0;padding-right:18px!important;border:0;padding-bottom:3px;border-bottom:3px solid #c3c3c3;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--stretch{display:block}.nas-select--stretch select{width:100%!important}.nas-select--error select{border-color:#e5212d}.nas-select--error:after{top:24px;bottom:auto}.nas-select__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-select__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--compact select{padding-top:9px;padding-bottom:9px}.nas-select--compact:after{bottom:16px}.nas-select--spaceless{margin-bottom:0}.nas-select--fill select{background-color:#fff;border-color:#fff}.nas-select--rotate:after{transform:rotate(180deg);transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--rotate::after-enter,.nas-select--rotate::after-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-select--rotate::after-enter{animation:flip-in .55s ease both}.nas-select--rotate::after-leave-active{animation:flip-out .2s ease-out both}@-moz-document url-prefix(){.select select{text-indent:.01px;text-overflow:\"\";padding-right:1rem}.select option{background-color:#fff}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
291
291
|
}
|
|
292
292
|
__decorate([
|
|
293
293
|
Debounce(150)
|
|
294
294
|
], SelectComponent.prototype, "setSelectedAndEmitChange", null);
|
|
295
295
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
296
296
|
type: Component,
|
|
297
|
-
args: [{ selector: 'nas-select', encapsulation: ViewEncapsulation.None, template: "<label for=\"getSelectId()\"\n *ngIf=\"label && !inline\">\n <span [nasClass]=\"getClass('label')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <select #select\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">\n {{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n <ng-template #reactiveForm>\n <ng-container [formGroup]=\"nasFormGroup\">\n <select #select\n [formControlName]=\"nasFormControlName\"\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">{{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n </ng-template>\n <p [nasClass]=\"getClass('error')\"\n #errorMessageWrapper\n *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">{{errorMessage}}</p>\n <div #selectTitleWrapper\n [style.display]=\"'none'\"\n aria-hidden=\"true\">\n <span>{{selectTitle}}</span>\n </div>\n <ng-template #contentOptions>\n <ng-content></ng-content>\n </ng-template>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-select{position:relative;display:inline-block;vertical-align:top;max-width:100%;margin-bottom:24px;z-index:0}.nas-select__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;display:block;margin-bottom:6px}.nas-select select{-webkit-appearance:none;-moz-appearance:none;display:inline-block;cursor:pointer;margin:0;padding:12px 34px 12px 12px;padding-right:34px!important;width:100%;border-radius:0;border:3px solid #c3c3c3;outline:0;font-size:16px;color:#002a3a;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.nas-select select:hover,.nas-select select:focus{border-color:#003251}.nas-select select:active{border-color:#003251}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#626363;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#c3c3c3}.nas-select:after{content:\"\";position:absolute;display:inline-block;pointer-events:none;z-index:3;bottom:18px;right:12px;width:12px;height:12px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23214A5F%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--block{display:block}.nas-select--block select{display:block;width:100%}.nas-select--light:after{background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23FFFFFF%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--light select{color:#fff;border-color:#fff}.nas-select--light select:hover,.nas-select--light select:focus{border-color:#c3c3c3}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#626363}.nas-select--disabled:after{background-color:#626363;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23909090%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--inline,.nas-select--simple{display:inline-block;max-width:100%;overflow:hidden;line-height:inherit;padding:0;font-size:inherit;color:inherit;margin-bottom:0;border-bottom:inherit}.nas-select--inline:after,.nas-select--simple:after{top:50%;margin-top:-7px;right:0}.nas-select--inline select,.nas-select--simple select{font-size:inherit;color:inherit;padding:0;padding-right:18px!important;border:0;padding-bottom:3px;border-bottom:3px solid #c3c3c3;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--stretch{display:block}.nas-select--stretch select{width:100%!important}.nas-select--error select{border-color:#d81939}.nas-select--error:after{top:24px;bottom:auto}.nas-select__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-select__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#d81939}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--compact select{padding-top:9px;padding-bottom:9px}.nas-select--compact:after{bottom:16px}.nas-select--spaceless{margin-bottom:0}.nas-select--fill select{background-color:#fff;border-color:#fff}.nas-select--rotate:after{transform:rotate(180deg);transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--rotate::after-enter,.nas-select--rotate::after-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-select--rotate::after-enter{animation:flip-in .55s ease both}.nas-select--rotate::after-leave-active{animation:flip-out .2s ease-out both}@-moz-document url-prefix(){.select select{text-indent:.01px;text-overflow:\"\";padding-right:1rem}.select option{background-color:#fff}}\n"] }]
|
|
297
|
+
args: [{ selector: 'nas-select', encapsulation: ViewEncapsulation.None, template: "<label for=\"getSelectId()\"\n *ngIf=\"label && !inline\">\n <span [nasClass]=\"getClass('label')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <select #select\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">\n {{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n <ng-template #reactiveForm>\n <ng-container [formGroup]=\"nasFormGroup\">\n <select #select\n [formControlName]=\"nasFormControlName\"\n [id]=\"selectId\"\n [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\"\n [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\"\n (keydown)=\"toggleSelect($event, true)\"\n (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\"\n [value]=\"option?.value\"\n [attr.aria-label]=\"option?.title\">{{option?.title}}</option>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"contentOptions\"></ng-container>\n </select>\n </ng-container>\n </ng-template>\n <p [nasClass]=\"getClass('error')\"\n #errorMessageWrapper\n *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">{{errorMessage}}</p>\n <div #selectTitleWrapper\n [style.display]=\"'none'\"\n aria-hidden=\"true\">\n <span>{{selectTitle}}</span>\n </div>\n <ng-template #contentOptions>\n <ng-content></ng-content>\n </ng-template>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-select{position:relative;display:inline-block;vertical-align:top;max-width:100%;margin-bottom:24px;z-index:0}.nas-select__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;display:block;margin-bottom:6px}.nas-select select{-webkit-appearance:none;-moz-appearance:none;display:inline-block;cursor:pointer;margin:0;padding:12px 34px 12px 12px;padding-right:34px!important;width:100%;border-radius:0;border:3px solid #c3c3c3;outline:0;font-size:16px;color:#002a3a;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.nas-select select:hover,.nas-select select:focus{border-color:#003251}.nas-select select:active{border-color:#003251}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#626363;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#c3c3c3}.nas-select:after{content:\"\";position:absolute;display:inline-block;pointer-events:none;z-index:3;bottom:18px;right:12px;width:12px;height:12px;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23214A5F%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--block{display:block}.nas-select--block select{display:block;width:100%}.nas-select--light:after{background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23FFFFFF%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--light select{color:#fff;border-color:#fff}.nas-select--light select:hover,.nas-select--light select:focus{border-color:#c3c3c3}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#626363}.nas-select--disabled:after{background-color:#626363;background:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.1.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2212px%22 height%3D%2212px%22 viewBox%3D%22-414 589.5 12 12%22 enable-background%3D%22new -414 589.5 12 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%23909090%22 points%3D%22-402%2C593.5 -404%2C591.5 -407.9%2C595 -408%2C595 -411.9%2C591.5 -413.9%2C593.5 -408.5%2C598.4 -408%2C598.6 %09-407.4%2C598.4 %22%2F%3E%3C%2Fsvg%3E\") 0 0 no-repeat}.nas-select--inline,.nas-select--simple{display:inline-block;max-width:100%;overflow:hidden;line-height:inherit;padding:0;font-size:inherit;color:inherit;margin-bottom:0;border-bottom:inherit}.nas-select--inline:after,.nas-select--simple:after{top:50%;margin-top:-7px;right:0}.nas-select--inline select,.nas-select--simple select{font-size:inherit;color:inherit;padding:0;padding-right:18px!important;border:0;padding-bottom:3px;border-bottom:3px solid #c3c3c3;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--stretch{display:block}.nas-select--stretch select{width:100%!important}.nas-select--error select{border-color:#e5212d}.nas-select--error:after{top:24px;bottom:auto}.nas-select__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-select__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-select--compact select{padding-top:9px;padding-bottom:9px}.nas-select--compact:after{bottom:16px}.nas-select--spaceless{margin-bottom:0}.nas-select--fill select{background-color:#fff;border-color:#fff}.nas-select--rotate:after{transform:rotate(180deg);transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-select--rotate::after-enter,.nas-select--rotate::after-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-select--rotate::after-enter{animation:flip-in .55s ease both}.nas-select--rotate::after-leave-active{animation:flip-out .2s ease-out both}@-moz-document url-prefix(){.select select{text-indent:.01px;text-overflow:\"\";padding-right:1rem}.select option{background-color:#fff}}\n"] }]
|
|
298
298
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectTitleWrapper: [{
|
|
299
299
|
type: ViewChild,
|
|
300
300
|
args: ['selectTitleWrapper', { static: true }]
|