@norwegian/core-components 7.3.2 → 7.4.1
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/esm2022/lib/components/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/lib/components/filter/filter.component.mjs +14 -16
- package/esm2022/lib/components/input/input.component.mjs +2 -2
- package/esm2022/lib/components/page-footer/page-footer.component.mjs +2 -2
- package/esm2022/lib/components/phone-number/phone-number.component.mjs +3 -3
- package/esm2022/lib/components/radio/radio.component.mjs +2 -2
- package/esm2022/lib/components/select/select.component.mjs +3 -3
- package/esm2022/lib/components/spinner/spinner.component.mjs +3 -6
- package/fesm2022/norwegian-core-components.mjs +26 -31
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/lib/components/filter/filter.component.d.ts +7 -4
- package/lib/components/spinner/spinner.component.d.ts +1 -9
- package/package.json +1 -1
|
@@ -2573,11 +2573,11 @@ class CheckboxComponent extends NasComponentBase {
|
|
|
2573
2573
|
}
|
|
2574
2574
|
}
|
|
2575
2575
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxComponent, selector: "nas-checkbox", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", reverse: "reverse", filled: "filled", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\" #input [id]=\"inputId\" [checked]=\"exists(checked)\" [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (change)=\"inputChanged($event)\" (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" #inputReactive [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\" [formControlName]=\"nasFormControlName\" [id]=\"inputId\" [checked]=\"exists(checked)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (keydown)=\"onKeydown($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>", 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-checkbox{-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:30px;margin-bottom:24px;
|
|
2576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxComponent, selector: "nas-checkbox", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", reverse: "reverse", filled: "filled", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\" #input [id]=\"inputId\" [checked]=\"exists(checked)\" [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (change)=\"inputChanged($event)\" (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" #inputReactive [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\" [formControlName]=\"nasFormControlName\" [id]=\"inputId\" [checked]=\"exists(checked)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (keydown)=\"onKeydown($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>", 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-checkbox{-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:30px;margin-bottom:24px;color:#15273f}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#6f6f6f}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#15273f}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#e9e7e4;border-color:#6f6f6f}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#e9e7e4}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox__indicator:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image: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.0.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%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#e9e7e4}.nas-checkbox--disabled .nas-checkbox__indicator:before{background-image: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.0.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%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#e9e7e4}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{border:2px solid #E9E7E4}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{display:block}.nas-checkbox--reverse{padding-left:0;padding-right:30px}.nas-checkbox--reverse .nas-checkbox__indicator{right:0;left:auto}.nas-checkbox--filled{width:100%;margin:0;display:flex;justify-content:flex-end}.nas-checkbox--filled.nas-checkbox--reverse{display:block}\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: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2577
2577
|
}
|
|
2578
2578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2579
2579
|
type: Component,
|
|
2580
|
-
args: [{ selector: 'nas-checkbox', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\" #input [id]=\"inputId\" [checked]=\"exists(checked)\" [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (change)=\"inputChanged($event)\" (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" #inputReactive [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\" [formControlName]=\"nasFormControlName\" [id]=\"inputId\" [checked]=\"exists(checked)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (keydown)=\"onKeydown($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>", 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-checkbox{-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:30px;margin-bottom:24px;
|
|
2580
|
+
args: [{ selector: 'nas-checkbox', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\" #input [id]=\"inputId\" [checked]=\"exists(checked)\" [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (change)=\"inputChanged($event)\" (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" #inputReactive [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\" [formControlName]=\"nasFormControlName\" [id]=\"inputId\" [checked]=\"exists(checked)\"\n [required]=\"exists(required)\" [tabIndex]=\"tabIndex\" [attr.name]=\"name\" [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\" [attr.aria-describedby]=\"ariaLabelledby\" [attr.value]=\"value\"\n (keydown)=\"onKeydown($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>", 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-checkbox{-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:30px;margin-bottom:24px;color:#15273f}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#6f6f6f}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#15273f}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#e9e7e4;border-color:#6f6f6f}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#e9e7e4}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox__indicator:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image: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.0.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%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#e9e7e4}.nas-checkbox--disabled .nas-checkbox__indicator:before{background-image: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.0.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%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#e9e7e4}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{border:2px solid #E9E7E4}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{display:block}.nas-checkbox--reverse{padding-left:0;padding-right:30px}.nas-checkbox--reverse .nas-checkbox__indicator{right:0;left:auto}.nas-checkbox--filled{width:100%;margin:0;display:flex;justify-content:flex-end}.nas-checkbox--filled.nas-checkbox--reverse{display:block}\n"] }]
|
|
2581
2581
|
}], ctorParameters: function () { return []; }, propDecorators: { input: [{
|
|
2582
2582
|
type: ViewChild,
|
|
2583
2583
|
args: ['input']
|
|
@@ -4423,14 +4423,14 @@ class SelectComponent extends NasComponentBase {
|
|
|
4423
4423
|
selectTitleWrapper.style.display = 'none';
|
|
4424
4424
|
}
|
|
4425
4425
|
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 }); }
|
|
4426
|
-
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", keyDownEvent: "keyDownEvent" }, 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()\" *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 [id]=\"selectId\" [attr.disabled]=\"disabled\" [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\" [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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 [formControlName]=\"nasFormControlName\" [id]=\"selectId\" [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\" [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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>\n <p [nasClass]=\"getClass('error')\" #errorMessageWrapper *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">\n {{errorMessage}}</p>\n <div #selectTitleWrapper [style.display]=\"'none'\" 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:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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 #E9E7E4;outline:0;font-size:16px;color:#15273f;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #1C1C1C}.nas-select select:hover,.nas-select select:focus{border-color:#15273f}.nas-select select:active{border-color:#15273f}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#6f6f6f;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#e9e7e4}.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%2315273F%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:#e9e7e4}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#6f6f6f}.nas-select--disabled:after{background-color:#6f6f6f;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 #E9E7E4;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4426
|
+
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", keyDownEvent: "keyDownEvent" }, 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 id=\"getSelectId()\" *ngIf=\"label && !inline\">\n <span [nasClass]=\"getClass('label-text')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <select #select [id]=\"selectId\" [attr.disabled]=\"disabled\" [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\" [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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 [formControlName]=\"nasFormControlName\" [id]=\"selectId\" [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\" [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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>\n <p [nasClass]=\"getClass('error')\" #errorMessageWrapper *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">\n {{errorMessage}}</p>\n <div #selectTitleWrapper [style.display]=\"'none'\" 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-text{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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 #E9E7E4;outline:0;font-size:16px;color:#15273f;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #1C1C1C}.nas-select select:hover,.nas-select select:focus{border-color:#15273f}.nas-select select:active{border-color:#15273f}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#6f6f6f;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#e9e7e4}.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%2315273F%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:#e9e7e4}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#6f6f6f}.nas-select--disabled:after{background-color:#6f6f6f;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 #E9E7E4;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4427
4427
|
}
|
|
4428
4428
|
__decorate([
|
|
4429
4429
|
Debounce(150)
|
|
4430
4430
|
], SelectComponent.prototype, "setSelectedAndEmitChange", null);
|
|
4431
4431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
4432
4432
|
type: Component,
|
|
4433
|
-
args: [{ selector: 'nas-select', encapsulation: ViewEncapsulation.None, template: "<label for=\"getSelectId()\" *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 [id]=\"selectId\" [attr.disabled]=\"disabled\" [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\" [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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 [formControlName]=\"nasFormControlName\" [id]=\"selectId\" [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\" [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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>\n <p [nasClass]=\"getClass('error')\" #errorMessageWrapper *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">\n {{errorMessage}}</p>\n <div #selectTitleWrapper [style.display]=\"'none'\" 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:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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 #E9E7E4;outline:0;font-size:16px;color:#15273f;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #1C1C1C}.nas-select select:hover,.nas-select select:focus{border-color:#15273f}.nas-select select:active{border-color:#15273f}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#6f6f6f;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#e9e7e4}.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%2315273F%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:#e9e7e4}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#6f6f6f}.nas-select--disabled:after{background-color:#6f6f6f;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 #E9E7E4;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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"] }]
|
|
4433
|
+
args: [{ selector: 'nas-select', encapsulation: ViewEncapsulation.None, template: "<label id=\"getSelectId()\" *ngIf=\"label && !inline\">\n <span [nasClass]=\"getClass('label-text')\">{{label}}</span>\n</label>\n<div [nasClass]=\"getClasses()\">\n <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <select #select [id]=\"selectId\" [attr.disabled]=\"disabled\" [attr.aria-label]=\"'select'\"\n [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\" [formControl]=\"selectControl\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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 [formControlName]=\"nasFormControlName\" [id]=\"selectId\" [attr.disabled]=\"disabled\"\n [attr.aria-label]=\"'select'\" [attr.aria-labelledby]=\"getSelectId()\" [style.width.px]=\"labelWidth\"\n (mousedown)=\"toggleSelect($event)\" (keydown)=\"toggleSelect($event, true)\" (blur)=\"blurSelect()\"\n (change)=\"toggleSelect($event)\">\n <ng-container *ngIf=\"!hasContent\">\n <option *ngFor=\"let option of options\" [value]=\"option?.value\" [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>\n <p [nasClass]=\"getClass('error')\" #errorMessageWrapper *ngIf=\"exists(error) && errorMessage\" [id]=\"errorId\">\n {{errorMessage}}</p>\n <div #selectTitleWrapper [style.display]=\"'none'\" 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-text{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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 #E9E7E4;outline:0;font-size:16px;color:#15273f;background-color:transparent}.nas-select select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #1C1C1C}.nas-select select:hover,.nas-select select:focus{border-color:#15273f}.nas-select select:active{border-color:#15273f}.nas-select select::-ms-expand{display:none}.nas-select select[disabled]{color:#6f6f6f;cursor:default}.nas-select select[disabled]:hover,.nas-select select[disabled]:focus{border-color:#e9e7e4}.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%2315273F%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:#e9e7e4}.nas-select--light select:focus{color:#000;background-color:#fff}.nas-select--disabled select{background-color:#6f6f6f}.nas-select--disabled:after{background-color:#6f6f6f;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 #E9E7E4;width:auto;transition:width .3s cubic-bezier(0,0,.1,1)}.nas-select--inline option,.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-select--inline.nas-select--error:after{top:50%!important}.nas-select--simple select{border-color:transparent}.nas-select--simple option{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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"] }]
|
|
4434
4434
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectTitleWrapper: [{
|
|
4435
4435
|
type: ViewChild,
|
|
4436
4436
|
args: ['selectTitleWrapper', { static: true }]
|
|
@@ -6058,7 +6058,6 @@ class RadioComponent extends NasComponentBase {
|
|
|
6058
6058
|
}
|
|
6059
6059
|
set checked(input) {
|
|
6060
6060
|
this.checkedValue = input;
|
|
6061
|
-
this.checkedChange.emit(this.checked);
|
|
6062
6061
|
}
|
|
6063
6062
|
get inputId() {
|
|
6064
6063
|
return this.id ? this.id : `nas-radio-${this.componentId}`;
|
|
@@ -6086,6 +6085,7 @@ class RadioComponent extends NasComponentBase {
|
|
|
6086
6085
|
}
|
|
6087
6086
|
onChange(event) {
|
|
6088
6087
|
this.checked = event.target.checked;
|
|
6088
|
+
this.checkedChange.emit(this.checked);
|
|
6089
6089
|
}
|
|
6090
6090
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6091
6091
|
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\" [disabled]=\"exists(disabled)\" [attr.id]=\"inputId\" [attr.name]=\"name\" [value]=\"value\"\n [tabIndex]=\"tabIndex\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\" [required]=\"required\" [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()\" [formGroup]=\"nasFormGroup\">\n <input type=\"radio\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\" [attr.name]=\"name\" [value]=\"value\"\n [tabIndex]=\"tabIndex\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\" [required]=\"required\" [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>", 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:30px;margin-bottom:24px;margin-right:24px;color:#15273f}.nas-radio input{position:absolute;opacity:0;z-index:-1}.nas-radio input:checked+.nas-radio__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-radio input:checked+.nas-radio__indicator:before{transform:scale(1.7);opacity:1}.nas-radio input[disabled]+.nas-radio__indicator{background-color:#e9e7e4;border-color:#6f6f6f}.nas-radio input[disabled]+.nas-radio__indicator:before{background-color:#6f6f6f}.nas-radio__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;width:22px;height:22px;border-radius:50%;border:2px solid #15273F;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:#15273f;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1)}.nas-radio__indicator:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-radio--block{display:block}.nas-radio--spaceless{margin-bottom:0}.nas-radio--disabled{color:#6f6f6f;cursor:default}.nas-radio--disabled .nas-radio__indicator{-webkit-user-select:none;user-select:none}.nas-radio--strong{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-radio--error input:checked+.nas-radio__indicator,.nas-radio--error input+.nas-radio__indicator{border-color:#e5212d;background-color:#fff5f3}.nas-radio--error input:checked+.nas-radio__indicator:before,.nas-radio--error input+.nas-radio__indicator:before{border:2px solid #E5212D;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: i3$1.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: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -6519,8 +6519,13 @@ class FilterComponent extends NasComponentBase {
|
|
|
6519
6519
|
}
|
|
6520
6520
|
ngOnInit() {
|
|
6521
6521
|
if (this.enableTripSwitch) {
|
|
6522
|
-
this.
|
|
6523
|
-
this.
|
|
6522
|
+
this.tripType = this.tripType !== TripType.oneWay && this.tripType !== TripType.twoWayReturn ? TripType.twoWayReturn : this.tripType;
|
|
6523
|
+
if (this.nasFormControlNameTripType) {
|
|
6524
|
+
const tripTypeControl = this.nasFormGroup.get(this.nasFormControlNameTripType);
|
|
6525
|
+
if (tripTypeControl) {
|
|
6526
|
+
tripTypeControl.patchValue(this.tripType);
|
|
6527
|
+
}
|
|
6528
|
+
}
|
|
6524
6529
|
}
|
|
6525
6530
|
if (!this.nasFormGroup) {
|
|
6526
6531
|
return;
|
|
@@ -6539,7 +6544,7 @@ class FilterComponent extends NasComponentBase {
|
|
|
6539
6544
|
if (this.nasFormControlNameTripType) {
|
|
6540
6545
|
const tripTypeControl = this.nasFormGroup.get(this.nasFormControlNameTripType);
|
|
6541
6546
|
if (tripTypeControl) {
|
|
6542
|
-
this.tripType =
|
|
6547
|
+
this.tripType = tripTypeControl.value;
|
|
6543
6548
|
this.inboundDisabled = tripTypeControl.value === TripType.oneWay;
|
|
6544
6549
|
if (this.nasFormControlNameInbound) {
|
|
6545
6550
|
const inboundControl = this.nasFormGroup.get(this.nasFormControlNameInbound);
|
|
@@ -7026,20 +7031,11 @@ class FilterComponent extends NasComponentBase {
|
|
|
7026
7031
|
this.tripSwitch.open = false;
|
|
7027
7032
|
}
|
|
7028
7033
|
});
|
|
7029
|
-
|
|
7030
|
-
return;
|
|
7031
|
-
}
|
|
7032
|
-
if (this.tripTypeInit) {
|
|
7033
|
-
this.tripType = this.defaultTripType;
|
|
7034
|
-
}
|
|
7035
|
-
else {
|
|
7036
|
-
this.tripType = tripType;
|
|
7037
|
-
}
|
|
7034
|
+
this.tripType = tripType;
|
|
7038
7035
|
if (this.nasFormGroup && this.nasFormControlNameTripType) {
|
|
7039
7036
|
const tripSwitchControl = this.nasFormGroup.get(this.nasFormControlNameTripType);
|
|
7040
7037
|
tripSwitchControl.patchValue(this.tripType);
|
|
7041
7038
|
}
|
|
7042
|
-
this.tripTypeInit = false;
|
|
7043
7039
|
}
|
|
7044
7040
|
onTransitChange(directOnly) {
|
|
7045
7041
|
setTimeout(() => {
|
|
@@ -7160,11 +7156,11 @@ class FilterComponent extends NasComponentBase {
|
|
|
7160
7156
|
}
|
|
7161
7157
|
}
|
|
7162
7158
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: FilterComponent, deps: [{ token: DeviceHelper }, { token: SortService }, { token: AbandonedBasketService }, { token: DateHelper }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7163
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: FilterComponent, selector: "nas-filter", inputs: { airportRelations: "airportRelations", ariaLabelClear: "ariaLabelClear", ariaLabelSubtract: "ariaLabelSubtract", ariaLabelBackdrop: "ariaLabelBackdrop", ariaLabelAdd: "ariaLabelAdd", allowedOriginAirports: "allowedOriginAirports", allowedDestinationAirports: "allowedDestinationAirports", displayLatestSearches: "displayLatestSearches", useSwitch: "useSwitch", displayClosestAirports: "displayClosestAirports", originAirportCode: "originAirportCode", destinationAirportCode: "destinationAirportCode", passengerSelectLabel: "passengerSelectLabel", maxPaxCount: "maxPaxCount", passengers: "passengers", minAdultCount: "minAdultCount", tripSwitchRoundTripLabel: "tripSwitchRoundTripLabel", tripSwitchOneWayLabel: "tripSwitchOneWayLabel", directOnlyLabel: "directOnlyLabel", directTransitLabel: "directTransitLabel", minimizeOnMobile: "minimizeOnMobile", expandedAccordionMobile: "expandedAccordionMobile", defaultSummarySeparator: "defaultSummarySeparator", lastSummarySeparator: "lastSummarySeparator", passengerSelectTitle: "passengerSelectTitle", passengerSelectAdultsLabel: "passengerSelectAdultsLabel", passengerSelectYouthsLabel: "passengerSelectYouthsLabel", passengerSelectYoungAdultsLabel: "passengerSelectYoungAdultsLabel", passengerSelectChildrenLabel: "passengerSelectChildrenLabel", passengerSelectInfantsLabel: "passengerSelectInfantsLabel", groupBookingLabel: "groupBookingLabel", allAirportsLabel: "allAirportsLabel", latestSearchesLabel: "latestSearchesLabel", closestAirportsLabel: "closestAirportsLabel", selectOriginFirstLabel: "selectOriginFirstLabel", labelOrigin: "labelOrigin", placeholderOrigin: "placeholderOrigin", labelDestination: "labelDestination", geolocationLabel: "geolocationLabel", geolocationBlockedLabel: "geolocationBlockedLabel", placeholderDestination: "placeholderDestination", keepSelection: "keepSelection", editSearchTitle: "editSearchTitle", nasFormGroup: "nasFormGroup", nasFormControlNameOrigin: "nasFormControlNameOrigin", nasFormControlNameDestination: "nasFormControlNameDestination", nasFormControlNameTripType: "nasFormControlNameTripType", nasFormControlNameDirectOnly: "nasFormControlNameDirectOnly", nasFormControlNameOutbound: "nasFormControlNameOutbound", nasFormControlNameInbound: "nasFormControlNameInbound", nasFormControlGroupBooking: "nasFormControlGroupBooking", overrideOrigin: "overrideOrigin", enableSuggestions: "enableSuggestions", closestAirports: "closestAirports", minimize: "minimize", airports: "airports", tripType: "tripType", directOnly: "directOnly", groupBookingLimit: "groupBookingLimit", ariaLabelPreviousMonth: "ariaLabelPreviousMonth", ariaLabelNextMonth: "ariaLabelNextMonth", noAvailableFlightsLabel: "noAvailableFlightsLabel", availableFlightsLabel: "availableFlightsLabel", disablePastSelection: "disablePastSelection", outboundLabel: "outboundLabel", inboundLabel: "inboundLabel", availability: "availability", outboundAvailableDates: "outboundAvailableDates", inboundAvailableDates: "inboundAvailableDates", times: "times", dateDisplayFormat: "dateDisplayFormat", timeDisplayFormat: "timeDisplayFormat", locale: "locale", compact: "compact", outboundDisabled: "outboundDisabled", inboundDisabled: "inboundDisabled", enableDatepickers: "enableDatepickers", minimizingLabel: "minimizingLabel", maximizingLabel: "maximizingLabel", directOnlyMobileLabel: "directOnlyMobileLabel", orLabel: "orLabel", passengersTitleLabel: "passengersTitleLabel", invalidDestinationText: "invalidDestinationText", outboundSelectedDate: "outboundSelectedDate", inboundSelectedDate: "inboundSelectedDate", enableDestinationSelect: "enableDestinationSelect", enablePassengersSelect: "enablePassengersSelect", enableTripSwitch: "enableTripSwitch", enableTransitSwitch: "enableTransitSwitch", datePickerComboInlineFlex: "datePickerComboInlineFlex", airportSelectOutboundId: "airportSelectOutboundId", airportSelectInboundId: "airportSelectInboundId", passengerSelectId: "passengerSelectId", datePickerOutboundId: "datePickerOutboundId", datePickerInboundId: "datePickerInboundId", tripTypeId: "tripTypeId", transitTypeId: "transitTypeId" }, outputs: { originOpenChange: "originOpenChange", destinationOpenChange: "destinationOpenChange", passengerSelectOpenChange: "passengerSelectOpenChange", originChange: "originChange", destinationChange: "destinationChange", passengersChange: "passengersChange", tripTypeChange: "tripTypeChange", directOnlyChange: "directOnlyChange", outboundSelectedDateChange: "outboundSelectedDateChange", inboundSelectedDateChange: "inboundSelectedDateChange", outboundOpenChange: "outboundOpenChange", inboundOpenChange: "inboundOpenChange", outboundMonthChange: "outboundMonthChange", inboundMonthChange: "inboundMonthChange", focusOnNextChange: "focusOnNextChange", positionChange: "positionChange" }, viewQueries: [{ propertyName: "passengerSelectDropdown", first: true, predicate: ["passengerSelectDropdown"], descendants: true }, { propertyName: "passengerSelect", first: true, predicate: ["passengerSelect"], descendants: true }, { propertyName: "tripSwitch", first: true, predicate: ["tripSwitch"], descendants: true }, { propertyName: "transitSwitch", first: true, predicate: ["transitSwitch"], descendants: true }, { propertyName: "airportSelect", first: true, predicate: ["airportSelect"], descendants: true }, { propertyName: "datepickerCombo", first: true, predicate: ["datepickerCombo"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "tripTypeOneway", first: true, predicate: ["tripTypeOneway"], descendants: true }, { propertyName: "tripTypeRoundTrip", first: true, predicate: ["tripTypeRoundTrip"], descendants: true }, { propertyName: "transitTypeDirectOnly", first: true, predicate: ["transitTypeDirectOnly"], descendants: true }, { propertyName: "transitTypeTransit", first: true, predicate: ["transitTypeTransit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nas-accordion *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile); else filterTemplate\" simple\n containerOnToggle transparent [expanded]=\"expandedAccordionMobile\" [title]=\"editSearchTitle\"\n (toggleChange)=\"onAccordionToggleChange($event)\">\n <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n</nas-accordion>\n<div class=\"container\" *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile) && displaySummary\">{{getSummary()}}\n</div>\n\n<ng-template #filterTemplate>\n <div #container [nasClass]=\"getContainerClass()\">\n <div [nasClass]=\"getFilterClass('filters', [exists(minimize) && 'minimized'])\">\n <ng-container *ngIf=\"airports?.length > 0\">\n <nas-airport-select *ngIf=\"airports && airportRelations && (enableDestinationSelect)\" #airportSelect combo\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\" \n [outboundId]=\"airportSelectOutboundId\" [inboundId]=\"airportSelectInboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\"\n [nasFormControlNameDestination]=\"nasFormControlNameDestination\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getAirportSelectClass()\" [airports]=\"airports\" [allowedOriginAiports]=\"allowedOriginAirports\"\n [allowedDestinationAirports]=\"allowedDestinationAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [latestSearchesDestination]=\"latestSearchesDestination\"\n [displayLatestSearches]=\"displayLatestSearches\" [displayClosestAirports]=\"displayClosestAirports\"\n [originAirportCode]=\"originAirportCode\" [destinationAirportCode]=\"destinationAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [labelDestination]=\"labelDestination\"\n [geolocationLabel]=\"geolocationLabel\" [geolocationBlockedLabel]=\"geolocationBlockedLabel\"\n [placeholderDestination]=\"placeholderDestination\" [keepSelection]=\"keepSelection\"\n [invalidDestinationText]=\"invalidDestinationText\" (originChange)=\"setSelectedOriginAirport($event)\"\n (destinationChange)=\"onDestinationChange($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (destinationOpenChange)=\"onDestinationOpen($event)\"\n (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-airport-select *ngIf=\"airports && (!enableDestinationSelect)\" #airportSelect\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [outboundId]=\"airportSelectOutboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getClass('airport-origin-select')\" [airports]=\"airports\"\n [allowedOriginAiports]=\"allowedOriginAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [displayLatestSearches]=\"displayLatestSearches\"\n [displayClosestAirports]=\"displayClosestAirports\" [originAirportCode]=\"originAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [geolocationLabel]=\"geolocationLabel\"\n [geolocationBlockedLabel]=\"geolocationBlockedLabel\" [keepSelection]=\"keepSelection\"\n (originChange)=\"setSelectedOriginAirport($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-suggestions *ngIf=\"(closestAirports || latestSearchesOrigin) && exists(enableSuggestions)\"\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [nasClass]=\"getFilterClass('suggestions', !exists(enableDatepickers) && 'flex-end')\" [suggestions]=\"getSuggestions()\" [orLabel]=\"orLabel\"\n (airportSelect)=\"setSelectedOriginAirport($event)\"></nas-suggestions>\n </ng-container>\n <ng-container *ngIf=\"shouldMaximize()\">\n <ng-container *ngIf=\"enablePassengersSelect\">\n <div [nasClass]=\"getClass('passengers')\">\n <button (click)=\"onPassengerSelectOpen($event)\" [id]=\"passengerSelectId\"\n [nasClass]=\"getClass('passengers-button', openPassengerSelect && 'active')\">\n <div [nasClass]=\"getClass('label')\">\n <p [nasClass]=\"getClass('button-title')\">{{passengersTitleLabel}}</p>\n <p>{{passengerSelectLabel}}</p>\n </div>\n <div [nasClass]=\"getClass('traveler-icon')\"><nas-icon [icon]=\"'my-profile-compact'\"\n [type]=\"'small'\"></nas-icon></div>\n </button>\n <div *ngIf=\"openPassengerSelect\" [nasClass]=\"getClass('passengers-selection')\">\n <nas-passenger-select [ariaLabelAdd]=\"ariaLabelAdd\" [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [adultsLabel]=\"passengerSelectAdultsLabel\" [youthsLabel]=\"passengerSelectYouthsLabel\"\n [youngAdultsLabel]=\"passengerSelectYoungAdultsLabel\" [childrenLabel]=\"passengerSelectChildrenLabel\"\n [infantsLabel]=\"passengerSelectInfantsLabel\" [maxPaxCount]=\"maxPaxCount\"\n [minAdultCount]=\"minAdultCount\" [title]=\"passengerSelectTitle\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlGroupBooking]=\"nasFormControlGroupBooking\" [groupBookingLabel]=\"groupBookingLabel\"\n [groupBookingLimit]=\"groupBookingLimit\" (focusOnNext)=\"onPassengersSelectFocusOnNext()\"\n (focusOnPrevious)=\"onPassengersSelectFocusOnPrevious()\"\n [(passengers)]=\"passengers\"></nas-passenger-select>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openPassengerSelect\"></nas-backdrop>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"enableTripSwitch\">\n <form [nasClass]=\"getClass('radio', !exists(enableDatepickers) && 'flex-end')\">\n <nas-radio #tripTypeRoundTrip [id]=\"tripTypeInputId + '__round-trip'\" [name]=\"'tripType'\" [value]=\"2\" (checkedChange)=\"onTripTypeChange(2)\" [checked]=\"defaultTripType === 2\">\n {{tripSwitchRoundTripLabel}}\n </nas-radio>\n <nas-radio #tripTypeOneway [id]=\"tripTypeInputId + '__one-way'\" [name]=\"'tripType'\" [value]=\"1\" (checkedChange)=\"onTripTypeChange(1)\" [checked]=\"defaultTripType === 1\">\n {{tripSwitchOneWayLabel}}\n </nas-radio>\n </form>\n </ng-container>\n <ng-container *ngIf=\"exists(enableDatepickers)\">\n <div [nasClass]=\"getDatePickersClass()\">\n <nas-datepicker-combo #datepickerCombo compact \n [outboundId]=\"datePickerOutboundId\" [inboundId]=\"datePickerInboundId\" [inlineFlex]=\"inlineFlex\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOutbound]=\"nasFormControlNameOutbound\"\n [nasFormControlNameInbound]=\"nasFormControlNameInbound\" [availability]=\"availability\"\n [availableFlightsLabel]=\"availableFlightsLabel\" [dateDisplayFormat]=\"dateDisplayFormat\"\n [disablePastSelection]=\"disablePastSelection\" [locale]=\"locale\"\n [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\" [inboundAvailableDates]=\"inboundAvailableDates\"\n [inboundLabel]=\"inboundLabel\" [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n [outboundAvailableDates]=\"outboundAvailableDates\" [outboundLabel]=\"outboundLabel\"\n [timeDisplayFormat]=\"timeDisplayFormat\" [times]=\"times\" [outboundDisabled]=\"outboundDisabled\"\n [inboundDisabled]=\"inboundDisabled\" [outboundOnly]=\"tripType === 1\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n [ariaLabelNextMonth]=\"ariaLabelNextMonth\" (focusOnNextChange)=\"onFocusOnNextChange($event)\"\n (focusOnPreviousChange)=\"onDatepickerFocusOnPrevious($event)\"\n (inboundMonthChange)=\"onInboundMonthChange($event)\" (outboundMonthChange)=\"onOutboundMonthChange($event)\"\n [(outboundOpen)]=\"outboundOpen\" [(inboundOpen)]=\"inboundOpen\"\n [(inboundSelectedDate)]=\"inboundSelectedDate\" [(outboundSelectedDate)]=\"outboundSelectedDate\">\n </nas-datepicker-combo>\n </div>\n </ng-container>\n <ng-container *ngIf=\"enableTransitSwitch\">\n <div [nasClass]=\"getClass('transit-type')\">\n <nas-button *ngIf=\"directOnlyLabel && directTransitLabel\" #transitSwitch block light\n [id]=\"transitTypeInputId\" [iconType]=\"'chevron-down'\" [label]=\"getTransitLabel()\"\n [nasClass]=\"getClass('transit', openTransitTypeSelect && 'active')\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" (click)=\"onTransitSwitchOpen($event)\"\n (keydown)=\"transitKeyDown($event)\">{{ getTransitLabel() }}\n </nas-button>\n <div *ngIf=\"openTransitTypeSelect\" [nasClass]=\"getClass('transit-type-selection')\">\n <button [id]=\"transitTypeInputId + '__direct'\" [nasClass]=\"getTravelDetailsClass('action', directOnly && 'active')\" type=\"button\"\n #transitTypeDirectOnly (click)=\"onTransitChange(true)\">{{ directOnlyLabel }}\n </button>\n <button [id]=\"transitTypeInputId + '__transit'\" type=\"button\" #transitTypeTransit\n [nasClass]=\"getTravelDetailsClass('action', !directOnly && 'active')\"\n (click)=\"onTransitChange(false)\">{{ directTransitLabel }}\n </button>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openTransitTypeSelect\"></nas-backdrop>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>", 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-filter{position:relative;z-index:6}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light{border:2px solid #15273F}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:hover,.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:focus{background-color:#fff}.nas-filter ::ng-deep .nas-filter__transit .nas-button__content{gap:0;justify-content:space-between;font-weight:400}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button__icon{transform:rotate(180deg)}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button{background-color:#ebf4ff!important;border:2px solid #15273F;z-index:5}.nas-filter__title{margin-top:24px;font-size:32px;line-height:40px}.nas-filter__radio{display:flex;gap:24px;padding:12px}.nas-filter__radio--flex-end{order:4!important}.nas-filter__passengers-button{display:flex;justify-content:space-between;background-color:#fff;border:2px solid #15273F;padding:9px 14px;width:100%;height:67px}.nas-filter__passengers-button--active{background-color:#ebf4ff!important;position:relative;z-index:5}.nas-filter__label{flex-direction:column;text-align:left;display:flex;justify-content:center}.nas-filter__label p{margin:0}.nas-filter__button-title{font-weight:700;font-size:14px}.nas-filter__traveler-icon{transform:scale(.85);margin-top:12px}.nas-filter__transit-type-selection{z-index:4;position:absolute;width:100%;border-left:2px solid #15273F;border-right:2px solid #15273F;border-bottom:2px solid #15273F}.nas-filter__transit-type-selection button:first-child{border-bottom:2px solid #E9E7E4}.nas-filter__transit-type-selection ::ng-deep .nas-backdrop{z-index:-1}.nas-filter__passengers{margin-top:8px}.nas-filter__filters:has(.nas-filter__radio--flex-end){display:flex;flex-direction:column}.nas-filter__filters .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md{display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}.nas-filter__filters--md .nas-filter__airport-select ::ng-deep .nas-airport-select-combo{flex-direction:row}.nas-filter__filters--md .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md .nas-filter__radio{order:0;width:100%;padding-left:0}.nas-filter__filters--md .nas-filter__date-combo{order:1;flex:1 1 48.5%}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls{border-left:2px solid #6F6F6F}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active{border-left:2px solid currentColor}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact{position:relative}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound{margin-left:8px}.nas-filter__filters--md .nas-filter__passengers{order:2;flex:1 1 24%;position:relative;height:68px;margin:0}.nas-filter__filters--md .nas-filter__passengers .nas-filter__passengers-button{height:68px}.nas-filter__filters--md .nas-filter__passengers .nas-filter__button-title{line-height:18px}.nas-filter__filters--md .nas-filter__transit-type{order:3;flex:1 1 24%;position:relative}.nas-filter__filters--md .nas-filter__transit-type ::ng-deep .nas-button{height:68px;margin:0}.nas-filter__filters--md:has(.nas-filter__radio--flex-end){display:flex;flex-direction:row}.nas-filter__filters--lg{display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}.nas-filter__filters--lg .nas-filter__airport-select{order:0;flex:0 0 48%}.nas-filter__filters--lg .nas-filter__suggestions{order:8;flex:0 0 100%}.nas-filter__filters--lg .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--lg .nas-filter__suggestions--flex-end{margin-bottom:0;order:4}.nas-filter__filters--lg .nas-filter__passengers{order:2;margin-top:0;position:relative;flex:0 0 24.5%}.nas-filter__filters--lg .nas-filter__passengers .nas-filter__passengers-button{height:67px}.nas-filter__filters--lg .nas-filter__transit-type{order:3;flex:0 0 24.4%;position:relative}.nas-filter__filters--lg .nas-filter__transit-type ::ng-deep .nas-button{height:67px;margin:0}.nas-filter__filters--lg .nas-filter__date-combo{order:1;flex:0 0 49.5%}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls{border-left:2px solid #6F6F6F}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active{border-left:2px solid currentColor}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact{position:relative}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound{margin-left:8px}.nas-filter__filters--lg .nas-filter__radio{order:4;flex:0 0 49%;padding:9px 0 0}.nas-filter__filters--lg:has(.nas-filter__radio--flex-end){display:flex;flex-direction:row}.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo{flex-direction:row}.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:46.5%;transform:rotate(90deg)}.nas-filter__filters--lg.nas-filter__filters--minimized .nas-filter__airport-select{order:0;flex:0 0 100%}.nas-filter__filters--lg.nas-filter__filters--minimized ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:48%;transform:rotate(90deg)}.nas-filter__filters--lg.nas-filter__filters--minimized .nas-filter__radio{order:0;flex:0 0 100%;padding:12px 0}.nas-filter__suggestions{flex-basis:100%;position:relative}.nas-filter__airport-select{order:0;flex:0 0 100%;position:relative}.nas-filter__toggler{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;color:#15273f;margin-top:6px;z-index:1}.nas-filter__toggler .nas-filter__toggle-action{cursor:pointer;margin-top:2px;float:right}.nas-filter__toggler .nas-filter__direct-only{display:inline-block}.travel-details{position:relative;margin:0;z-index:1;display:flex;flex-direction:column}.travel-details--lg{flex-direction:row;flex-wrap:wrap;flex:0 0 50%}.travel-details--lg .nas-filter__passengers{order:0;flex:1 1 auto;height:68px}.travel-details--lg .nas-filter__transit-type{order:0;flex:1 1 auto;position:relative}.travel-details--lg .nas-filter__transit-type ::ng-deep .nas-button{height:68px;margin:0}.travel-details__list{margin-top:12px}.travel-details__list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0}.travel-details__list-item:not(:last-child){padding:6px 0 9px;border-bottom:2px solid #E9E7E4}.travel-details__label{flex-grow:2;margin:0 6px 0 0}.travel-details__title{font-size:18px;line-height:24px;display:block;min-width:124px}.travel-details__title--small{font-size:16px;line-height:24px;margin:0}.travel-details__action{padding:12px;width:100%;background-color:#fff;font-weight:700}.travel-details__action:hover,.travel-details__action:focus{background-color:#f1f1f1}.travel-details__action--border{border-bottom:2px #E9E7E4}.travel-details__action:focus{outline:none;z-index:1}.travel-details__icon{margin-bottom:9px}.travel-details__dropdown{margin-right:0}.travel-details__dropdown:after{content:\"\";position:absolute;bottom:-3px;left:0;width:100%;border-bottom:3px solid #E9E7E4}.travel-details__dropdown--trip-type{order:1;flex:1;margin-right:3px;margin-bottom:3px}.travel-details__dropdown--transit-type{order:2;flex:1;margin-bottom:3px}.travel-details__dropdown--passengers{order:3;flex:1 0 100%;margin-bottom:3px}.travel-details__transit-icon{position:relative;display:flex;justify-content:center;width:calc(100% - 48px);margin:12px auto;height:24px;background-color:inherit}.travel-details__transit-icon:before{content:\"\";position:absolute;height:2px;left:0;width:100%;top:calc(50% - 1px);background-color:currentColor}.travel-details__transit-icon:after{content:\"\";position:absolute;width:10px;height:10px;right:0;top:calc(50% - 5px);border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}.travel-details__transit-icon-stop{position:relative;top:calc(50% - 5px);width:10px;height:10px;border:2px solid currentColor;border-radius:50%;background-color:inherit}@media (min-width: 1000px){.travel-details--no-border:after{border-bottom:none}}::ng-deep .nas-filter__filters .nas-passenger-select__title{padding:8px 16px 0}::ng-deep .nas-filter__filters .nas-passenger-select__list{position:absolute!important;width:100%}::ng-deep .nas-filter__filters .nas-passenger-select__list-item{padding:8px 16px!important}::ng-deep .nas-filter__filters .nas-radio{margin:0!important}::ng-deep .nas-filter__filters .nas-button{margin-top:6px}::ng-deep .nas-filter__filters .travel-details--no-border:after{display:none}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker__date-picker-wrapper{border-bottom:none!important;position:unset}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker--compact{position:unset}::ng-deep .nas-filter__filters .nas-filter__date-combo--side-by-side .nas-datepicker-combo__separator{display:block;border-bottom:none!important}::ng-deep .nas-filter__filters .nas-airport-select__input-line{border-top:none!important}::ng-deep .nas-filter__filters .nas-airport-select-combo__separator{border-bottom:none!important}::ng-deep .nas-filter__filters .nas-dropdown__toggle{height:64px!important}::ng-deep .nas-filter__filters .nas-datepicker-combo__separator{display:none}::ng-deep .nas-filter__rotate{transform:rotate(180deg)}::ng-deep .nas-filter__rotate-enter,::ng-deep .nas-filter__rotate-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}::ng-deep .nas-filter__rotate-enter{animation:flip-in .55s ease both}::ng-deep .nas-filter__rotate-leave-active{animation:flip-out .2s ease-out both}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__input-line{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select-combo__separator{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results-wrapper{margin-top:0}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results{top:-3px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__icon{bottom:18px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select:after{display:none}::ng-deep .nas-filter__airport-select .nas-airport-select__input-line{display:none}::ng-deep .nas-filter__airport-origin-select{width:100%;max-width:100%}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{max-width:100%}@media (min-width: 640px){::ng-deep .nas-filter__airport-origin-select{max-width:360px;flex:auto;margin-right:3px}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{width:auto;max-width:360px}}::ng-deep .nas-filter__origin-combined{border-bottom:3px solid #E9E7E4;order:3;flex:0 0 100%;display:flex;flex-wrap:wrap}@media (min-width: 1000px){::ng-deep .nas-filter__origin-combined{display:flex;flex:none}::ng-deep .nas-filter__origin-combined .nas-dropdown__toggle nas-icon{float:none!important}}::ng-deep .nas-filter__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:passenger-backdrop .7s ease-out both}::ng-deep .nas-filter__passengers-selection{position:absolute;z-index:4;width:100%}::ng-deep .nas-filter__passengers-selection ::ng-deep .nas-backdrop{z-index:-1}@keyframes passenger-backdrop{0%{opacity:0}}::ng-deep .lower-z-index{z-index:1!important;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: AirportSelectComponent, selector: "nas-airport-select", inputs: ["outboundId", "inboundId", "airports", "airportRelations", "latestSearchesOrigin", "latestSearchesDestination", "closestAirports", "allowedOriginAiports", "allowedDestinationAirports", "displayLatestSearches", "displayClosestAirports", "combo", "useSwitch", "allAirportsLabel", "latestSearchesLabel", "closestAirportsLabel", "geolocationLabel", "geolocationBlockedLabel", "selectOriginFirstLabel", "invalidDestinationText", "labelOrigin", "placeholderOrigin", "labelDestination", "placeholderDestination", "keepSelection", "nasFormControlNameOrigin", "nasFormControlNameDestination", "nasFormGroup", "originAirportCode", "destinationAirportCode", "ariaLabelClear", "ariaLabelBackdrop"], outputs: ["originChange", "originOpenChange", "destinationChange", "destinationOpenChange", "focusOnNext", "positionChange"] }, { kind: "component", type: PassengerSelectComponent, selector: "nas-passenger-select", inputs: ["passengers", "maxPaxCount", "minAdultCount", "groupBookingLimit", "title", "adultsLabel", "childrenLabel", "infantsLabel", "youthsLabel", "youngAdultsLabel", "groupBookingLabel", "nasFormGroup", "nasFormControlGroupBooking", "ariaLabelSubtract", "ariaLabelAdd"], outputs: ["passengersChange", "focusOnNext", "focusOnPrevious"] }, { kind: "component", type: AccordionComponent, selector: "nas-accordion", inputs: ["expanded", "title", "badge", "icon", "simple", "spaced", "small", "inverted", "containerOnToggle", "nopadding", "transparent", "approve", "primary", "warning", "badgeInfo", "badgeSuccess", "badgeWarning", "badgeError", "cssClass", "cssStyle"], outputs: ["toggleChange"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange"] }, { kind: "component", type: SuggestionsComponent, selector: "nas-suggestions", inputs: ["suggestions", "orLabel"], outputs: ["airportSelect"] }, { kind: "component", type: DatepickerComboComponent, selector: "nas-datepicker-combo", inputs: ["outboundId", "inboundId", "ariaLabelBackdrop", "outboundOpen", "inboundOpen", "noAvailableFlightsLabel", "availableFlightsLabel", "disablePastSelection", "outboundDisabled", "inboundDisabled", "outboundOnly", "outboundLabel", "inboundLabel", "timepickerLabel", "availability", "outboundAvailableDates", "inboundAvailableDates", "times", "dateDisplayFormat", "timeDisplayFormat", "locale", "compact", "nasFormGroup", "nasFormControlNameOutbound", "nasFormControlNameInbound", "outboundSelectedDate", "inboundSelectedDate", "disableBackdrop", "outboundSelectedTime", "inboundSelectedTime", "ariaLabelPreviousMonth", "ariaLabelNextMonth", "inboundLowerLimitDateOffset", "inlineFlex"], outputs: ["outboundSelectedDateChange", "inboundSelectedDateChange", "outboundOpenChange", "inboundOpenChange", "outboundMonthChange", "inboundMonthChange", "focusOnNextChange", "focusOnPreviousChange"] }, { kind: "component", type: RadioComponent, selector: "nas-radio", inputs: ["id", "value", "name", "error", "disabled", "strong", "block", "spaceless", "tabIndex", "required", "aria-label", "aria-describedby", "aria-labelledby", "checked", "nasFormControlName", "nasFormGroup"], outputs: ["checkedChange"] }, { kind: "component", type: BackdropComponent, selector: "nas-backdrop", inputs: ["showBackdrop", "ariaLabelBackdrop"], outputs: ["showBackdropChange"] }] }); }
|
|
7159
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: FilterComponent, selector: "nas-filter", inputs: { airportRelations: "airportRelations", ariaLabelClear: "ariaLabelClear", ariaLabelSubtract: "ariaLabelSubtract", ariaLabelBackdrop: "ariaLabelBackdrop", ariaLabelAdd: "ariaLabelAdd", allowedOriginAirports: "allowedOriginAirports", allowedDestinationAirports: "allowedDestinationAirports", displayLatestSearches: "displayLatestSearches", useSwitch: "useSwitch", displayClosestAirports: "displayClosestAirports", originAirportCode: "originAirportCode", destinationAirportCode: "destinationAirportCode", passengerSelectLabel: "passengerSelectLabel", maxPaxCount: "maxPaxCount", passengers: "passengers", minAdultCount: "minAdultCount", tripSwitchRoundTripLabel: "tripSwitchRoundTripLabel", tripSwitchOneWayLabel: "tripSwitchOneWayLabel", directOnlyLabel: "directOnlyLabel", directTransitLabel: "directTransitLabel", minimizeOnMobile: "minimizeOnMobile", inlineOnDesktop: "inlineOnDesktop", expandedAccordionMobile: "expandedAccordionMobile", defaultSummarySeparator: "defaultSummarySeparator", lastSummarySeparator: "lastSummarySeparator", passengerSelectTitle: "passengerSelectTitle", passengerSelectAdultsLabel: "passengerSelectAdultsLabel", passengerSelectYouthsLabel: "passengerSelectYouthsLabel", passengerSelectYoungAdultsLabel: "passengerSelectYoungAdultsLabel", passengerSelectChildrenLabel: "passengerSelectChildrenLabel", passengerSelectInfantsLabel: "passengerSelectInfantsLabel", groupBookingLabel: "groupBookingLabel", allAirportsLabel: "allAirportsLabel", latestSearchesLabel: "latestSearchesLabel", closestAirportsLabel: "closestAirportsLabel", selectOriginFirstLabel: "selectOriginFirstLabel", labelOrigin: "labelOrigin", placeholderOrigin: "placeholderOrigin", labelDestination: "labelDestination", geolocationLabel: "geolocationLabel", geolocationBlockedLabel: "geolocationBlockedLabel", placeholderDestination: "placeholderDestination", keepSelection: "keepSelection", editSearchTitle: "editSearchTitle", nasFormGroup: "nasFormGroup", nasFormControlNameOrigin: "nasFormControlNameOrigin", nasFormControlNameDestination: "nasFormControlNameDestination", nasFormControlNameTripType: "nasFormControlNameTripType", nasFormControlNameDirectOnly: "nasFormControlNameDirectOnly", nasFormControlNameOutbound: "nasFormControlNameOutbound", nasFormControlNameInbound: "nasFormControlNameInbound", nasFormControlGroupBooking: "nasFormControlGroupBooking", overrideOrigin: "overrideOrigin", enableSuggestions: "enableSuggestions", closestAirports: "closestAirports", minimize: "minimize", airports: "airports", tripType: "tripType", directOnly: "directOnly", groupBookingLimit: "groupBookingLimit", ariaLabelPreviousMonth: "ariaLabelPreviousMonth", ariaLabelNextMonth: "ariaLabelNextMonth", noAvailableFlightsLabel: "noAvailableFlightsLabel", availableFlightsLabel: "availableFlightsLabel", disablePastSelection: "disablePastSelection", outboundLabel: "outboundLabel", inboundLabel: "inboundLabel", availability: "availability", outboundAvailableDates: "outboundAvailableDates", inboundAvailableDates: "inboundAvailableDates", times: "times", dateDisplayFormat: "dateDisplayFormat", timeDisplayFormat: "timeDisplayFormat", locale: "locale", compact: "compact", outboundDisabled: "outboundDisabled", inboundDisabled: "inboundDisabled", enableDatepickers: "enableDatepickers", minimizingLabel: "minimizingLabel", maximizingLabel: "maximizingLabel", directOnlyMobileLabel: "directOnlyMobileLabel", orLabel: "orLabel", passengersTitleLabel: "passengersTitleLabel", invalidDestinationText: "invalidDestinationText", outboundSelectedDate: "outboundSelectedDate", inboundSelectedDate: "inboundSelectedDate", enableDestinationSelect: "enableDestinationSelect", enablePassengersSelect: "enablePassengersSelect", enableTripSwitch: "enableTripSwitch", enableTransitSwitch: "enableTransitSwitch", datePickerComboInlineFlex: "datePickerComboInlineFlex", airportSelectOutboundId: "airportSelectOutboundId", airportSelectInboundId: "airportSelectInboundId", passengerSelectId: "passengerSelectId", datePickerOutboundId: "datePickerOutboundId", datePickerInboundId: "datePickerInboundId", tripTypeId: "tripTypeId", transitTypeId: "transitTypeId" }, outputs: { originOpenChange: "originOpenChange", destinationOpenChange: "destinationOpenChange", passengerSelectOpenChange: "passengerSelectOpenChange", originChange: "originChange", destinationChange: "destinationChange", passengersChange: "passengersChange", tripTypeChange: "tripTypeChange", directOnlyChange: "directOnlyChange", outboundSelectedDateChange: "outboundSelectedDateChange", inboundSelectedDateChange: "inboundSelectedDateChange", outboundOpenChange: "outboundOpenChange", inboundOpenChange: "inboundOpenChange", outboundMonthChange: "outboundMonthChange", inboundMonthChange: "inboundMonthChange", focusOnNextChange: "focusOnNextChange", positionChange: "positionChange" }, viewQueries: [{ propertyName: "passengerSelectDropdown", first: true, predicate: ["passengerSelectDropdown"], descendants: true }, { propertyName: "passengerSelect", first: true, predicate: ["passengerSelect"], descendants: true }, { propertyName: "tripSwitch", first: true, predicate: ["tripSwitch"], descendants: true }, { propertyName: "transitSwitch", first: true, predicate: ["transitSwitch"], descendants: true }, { propertyName: "airportSelect", first: true, predicate: ["airportSelect"], descendants: true }, { propertyName: "datepickerCombo", first: true, predicate: ["datepickerCombo"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "tripTypeOneway", first: true, predicate: ["tripTypeOneway"], descendants: true }, { propertyName: "tripTypeRoundTrip", first: true, predicate: ["tripTypeRoundTrip"], descendants: true }, { propertyName: "transitTypeDirectOnly", first: true, predicate: ["transitTypeDirectOnly"], descendants: true }, { propertyName: "transitTypeTransit", first: true, predicate: ["transitTypeTransit"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<nas-accordion *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile); else filterTemplate\" simple\n containerOnToggle transparent [expanded]=\"expandedAccordionMobile\" [title]=\"editSearchTitle\"\n (toggleChange)=\"onAccordionToggleChange($event)\">\n <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n</nas-accordion>\n<div class=\"container\" *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile) && displaySummary\">{{getSummary()}}\n</div>\n\n<ng-template #filterTemplate>\n <div #container [nasClass]=\"getContainerClass()\">\n <div [nasClass]=\"getFilterClass('filters', [exists(minimize) && 'minimized', exists(inlineOnDesktop) && 'inline'])\">\n <ng-container *ngIf=\"airports?.length > 0\">\n <nas-airport-select *ngIf=\"airports && airportRelations && (enableDestinationSelect)\" #airportSelect combo\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\" \n [outboundId]=\"airportSelectOutboundId\" [inboundId]=\"airportSelectInboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\"\n [nasFormControlNameDestination]=\"nasFormControlNameDestination\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getAirportSelectClass()\" [airports]=\"airports\" [allowedOriginAiports]=\"allowedOriginAirports\"\n [allowedDestinationAirports]=\"allowedDestinationAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [latestSearchesDestination]=\"latestSearchesDestination\"\n [displayLatestSearches]=\"displayLatestSearches\" [displayClosestAirports]=\"displayClosestAirports\"\n [originAirportCode]=\"originAirportCode\" [destinationAirportCode]=\"destinationAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [labelDestination]=\"labelDestination\"\n [geolocationLabel]=\"geolocationLabel\" [geolocationBlockedLabel]=\"geolocationBlockedLabel\"\n [placeholderDestination]=\"placeholderDestination\" [keepSelection]=\"keepSelection\"\n [invalidDestinationText]=\"invalidDestinationText\" (originChange)=\"setSelectedOriginAirport($event)\"\n (destinationChange)=\"onDestinationChange($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (destinationOpenChange)=\"onDestinationOpen($event)\"\n (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-airport-select *ngIf=\"airports && (!enableDestinationSelect)\" #airportSelect\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [outboundId]=\"airportSelectOutboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getClass('airport-origin-select')\" [airports]=\"airports\"\n [allowedOriginAiports]=\"allowedOriginAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [displayLatestSearches]=\"displayLatestSearches\"\n [displayClosestAirports]=\"displayClosestAirports\" [originAirportCode]=\"originAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [geolocationLabel]=\"geolocationLabel\"\n [geolocationBlockedLabel]=\"geolocationBlockedLabel\" [keepSelection]=\"keepSelection\"\n (originChange)=\"setSelectedOriginAirport($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-suggestions *ngIf=\"(closestAirports || latestSearchesOrigin) && exists(enableSuggestions)\"\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [nasClass]=\"getFilterClass('suggestions', !exists(enableDatepickers) && 'flex-end')\" [suggestions]=\"getSuggestions()\" [orLabel]=\"orLabel\"\n (airportSelect)=\"setSelectedOriginAirport($event)\"></nas-suggestions>\n </ng-container>\n <ng-container *ngIf=\"shouldMaximize()\">\n <form *ngIf=\"enableTripSwitch\" [nasClass]=\"getClass('radio', !exists(enableDatepickers) && 'flex-end')\">\n <nas-radio #tripTypeRoundTrip [id]=\"tripTypeInputId + '__round-trip'\" [name]=\"'tripType'\" [value]=\"2\" (checkedChange)=\"onTripTypeChange(2)\" [checked]=\"tripType === 2\">\n {{tripSwitchRoundTripLabel}}\n </nas-radio>\n <nas-radio #tripTypeOneway [id]=\"tripTypeInputId + '__one-way'\" [name]=\"'tripType'\" [value]=\"1\" (checkedChange)=\"onTripTypeChange(1)\" [checked]=\"tripType === 1\">\n {{tripSwitchOneWayLabel}}\n </nas-radio>\n </form>\n <div *ngIf=\"exists(enableDatepickers)\" [nasClass]=\"getDatePickersClass()\">\n <nas-datepicker-combo #datepickerCombo compact \n [outboundId]=\"datePickerOutboundId\" [inboundId]=\"datePickerInboundId\" [inlineFlex]=\"inlineFlex\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOutbound]=\"nasFormControlNameOutbound\"\n [nasFormControlNameInbound]=\"nasFormControlNameInbound\" [availability]=\"availability\"\n [availableFlightsLabel]=\"availableFlightsLabel\" [dateDisplayFormat]=\"dateDisplayFormat\"\n [disablePastSelection]=\"disablePastSelection\" [locale]=\"locale\"\n [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\" [inboundAvailableDates]=\"inboundAvailableDates\"\n [inboundLabel]=\"inboundLabel\" [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n [outboundAvailableDates]=\"outboundAvailableDates\" [outboundLabel]=\"outboundLabel\"\n [timeDisplayFormat]=\"timeDisplayFormat\" [times]=\"times\" [outboundDisabled]=\"outboundDisabled\"\n [inboundDisabled]=\"inboundDisabled\" [outboundOnly]=\"tripType === 1\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n [ariaLabelNextMonth]=\"ariaLabelNextMonth\" (focusOnNextChange)=\"onFocusOnNextChange($event)\"\n (focusOnPreviousChange)=\"onDatepickerFocusOnPrevious($event)\"\n (inboundMonthChange)=\"onInboundMonthChange($event)\" (outboundMonthChange)=\"onOutboundMonthChange($event)\"\n [(outboundOpen)]=\"outboundOpen\" [(inboundOpen)]=\"inboundOpen\"\n [(inboundSelectedDate)]=\"inboundSelectedDate\" [(outboundSelectedDate)]=\"outboundSelectedDate\">\n </nas-datepicker-combo>\n </div>\n <div *ngIf=\"enablePassengersSelect || enableTransitSwitch\" [nasClass]=\"getClass('dropdown-wrapper')\">\n <div *ngIf=\"enablePassengersSelect\" [nasClass]=\"getClass('passengers')\">\n <button (click)=\"onPassengerSelectOpen($event)\" [id]=\"passengerSelectId\"\n [nasClass]=\"getClass('passengers-button', openPassengerSelect && 'active')\">\n <div [nasClass]=\"getClass('label')\">\n <p [nasClass]=\"getClass('button-title')\">{{passengersTitleLabel}}</p>\n <p>{{passengerSelectLabel}}</p>\n </div>\n <div [nasClass]=\"getClass('traveler-icon')\"><nas-icon [icon]=\"'my-profile-compact'\"\n [type]=\"'small'\"></nas-icon></div>\n </button>\n <div *ngIf=\"openPassengerSelect\" [nasClass]=\"getClass('passengers-selection')\">\n <nas-passenger-select [ariaLabelAdd]=\"ariaLabelAdd\" [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [adultsLabel]=\"passengerSelectAdultsLabel\" [youthsLabel]=\"passengerSelectYouthsLabel\"\n [youngAdultsLabel]=\"passengerSelectYoungAdultsLabel\" [childrenLabel]=\"passengerSelectChildrenLabel\"\n [infantsLabel]=\"passengerSelectInfantsLabel\" [maxPaxCount]=\"maxPaxCount\"\n [minAdultCount]=\"minAdultCount\" [title]=\"passengerSelectTitle\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlGroupBooking]=\"nasFormControlGroupBooking\" [groupBookingLabel]=\"groupBookingLabel\"\n [groupBookingLimit]=\"groupBookingLimit\" (focusOnNext)=\"onPassengersSelectFocusOnNext()\"\n (focusOnPrevious)=\"onPassengersSelectFocusOnPrevious()\"\n [(passengers)]=\"passengers\"></nas-passenger-select>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openPassengerSelect\"></nas-backdrop>\n </div>\n </div>\n <div *ngIf=\"enableTransitSwitch\" [nasClass]=\"getClass('transit-type')\">\n <nas-button *ngIf=\"directOnlyLabel && directTransitLabel\" #transitSwitch block light\n [id]=\"transitTypeInputId\" [iconType]=\"'chevron-down'\" [label]=\"getTransitLabel()\"\n [nasClass]=\"getClass('transit', openTransitTypeSelect && 'active')\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" (click)=\"onTransitSwitchOpen($event)\"\n (keydown)=\"transitKeyDown($event)\">{{ getTransitLabel() }}\n </nas-button>\n <div *ngIf=\"openTransitTypeSelect\" [nasClass]=\"getClass('transit-type-selection')\">\n <button [id]=\"transitTypeInputId + '__direct'\" [nasClass]=\"getTravelDetailsClass('action', directOnly && 'active')\" type=\"button\"\n #transitTypeDirectOnly (click)=\"onTransitChange(true)\">{{ directOnlyLabel }}\n </button>\n <button [id]=\"transitTypeInputId + '__transit'\" type=\"button\" #transitTypeTransit\n [nasClass]=\"getTravelDetailsClass('action', !directOnly && 'active')\"\n (click)=\"onTransitChange(false)\">{{ directTransitLabel }}\n </button>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openTransitTypeSelect\"></nas-backdrop>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>", 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-filter{position:relative;z-index:6}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light{border:2px solid #15273F}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:hover,.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:focus{background-color:#fff}.nas-filter ::ng-deep .nas-filter__transit .nas-button__content{gap:0;justify-content:space-between;font-weight:400}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button__icon{transform:rotate(180deg)}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button{background-color:#ebf4ff!important;border:2px solid #15273F;z-index:5}.nas-filter__title{margin-top:24px;font-size:32px;line-height:40px}.nas-filter__radio{display:flex;gap:24px;padding:12px}.nas-filter__radio--flex-end{order:4!important}.nas-filter__passengers-button{display:flex;justify-content:space-between;background-color:#fff;border:2px solid #15273F;padding:9px 14px;width:100%;height:67px}.nas-filter__passengers-button--active{background-color:#ebf4ff!important;position:relative;z-index:5}.nas-filter__label{flex-direction:column;text-align:left;display:flex;justify-content:center}.nas-filter__label p{margin:0}.nas-filter__button-title{font-weight:700;font-size:14px}.nas-filter__traveler-icon{transform:scale(.85);margin-top:12px}.nas-filter__transit-type-selection{z-index:4;position:absolute;width:100%;border-left:2px solid #15273F;border-right:2px solid #15273F;border-bottom:2px solid #15273F}.nas-filter__transit-type-selection button:first-child{border-bottom:2px solid #E9E7E4}.nas-filter__transit-type-selection ::ng-deep .nas-backdrop{z-index:-1}.nas-filter__passengers{margin-top:8px}.nas-filter__filters:has(.nas-filter__radio--flex-end){display:flex;flex-direction:column}.nas-filter__filters .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md,.nas-filter__filters--lg{display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}.nas-filter__filters--md .nas-filter__airport-select,.nas-filter__filters--lg .nas-filter__airport-select{flex:0 0 100%}.nas-filter__filters--md .nas-filter__airport-select ::ng-deep .nas-airport-select-combo__switcher,.nas-filter__filters--lg .nas-filter__airport-select ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:48%;transform:rotate(90deg)}.nas-filter__filters--md .nas-filter__suggestions,.nas-filter__filters--lg .nas-filter__suggestions{flex:0 0 100%}.nas-filter__filters--md .nas-filter__suggestions ::ng-deep .nas-suggestions,.nas-filter__filters--lg .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md .nas-filter__suggestions--flex-end,.nas-filter__filters--lg .nas-filter__suggestions--flex-end{margin-bottom:0}.nas-filter__filters--md .nas-filter__dropdown-wrapper,.nas-filter__filters--lg .nas-filter__dropdown-wrapper{display:flex;gap:8px;flex:1 1 49%}.nas-filter__filters--md .nas-filter__passengers,.nas-filter__filters--lg .nas-filter__passengers{margin-top:0;position:relative;flex:1 1 24.5%}.nas-filter__filters--md .nas-filter__passengers .nas-filter__passengers-button,.nas-filter__filters--lg .nas-filter__passengers .nas-filter__passengers-button{height:67px}.nas-filter__filters--md .nas-filter__transit-type,.nas-filter__filters--lg .nas-filter__transit-type{flex:1 1 24.4%;position:relative}.nas-filter__filters--md .nas-filter__transit-type ::ng-deep .nas-button,.nas-filter__filters--lg .nas-filter__transit-type ::ng-deep .nas-button{height:67px;margin:0}.nas-filter__filters--md .nas-filter__date-combo,.nas-filter__filters--lg .nas-filter__date-combo{flex:1 1 49%}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls{border-left:2px solid #6F6F6F}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active{border-left:2px solid currentColor}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact{position:relative}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound{margin-left:8px}.nas-filter__filters--md .nas-filter__radio,.nas-filter__filters--lg .nas-filter__radio{flex:0 0 100%;padding:9px 0}.nas-filter__filters--md:has(.nas-filter__radio--flex-end),.nas-filter__filters--lg:has(.nas-filter__radio--flex-end){display:flex;flex-direction:row}.nas-filter__filters--md ::ng-deep .nas-airport-select-combo,.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo{flex-direction:row}.nas-filter__filters--md ::ng-deep .nas-airport-select-combo__switcher,.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:46.5%;transform:rotate(90deg)}.nas-filter__filters--md .nas-filter__passengers ::ng-deep .nas-passenger-select__list{width:100%;min-width:250px}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__airport-select{order:0;flex:1}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__airport-select ::ng-deep .nas-airport-select-combo__switcher{left:46%}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__date-combo,.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__dropdown-wrapper{order:0;flex:1}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__radio{order:1;flex:1 1 100%}.nas-filter__suggestions{flex-basis:100%;position:relative}.nas-filter__airport-select{order:0;flex:0 0 100%;position:relative}.nas-filter__toggler{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;color:#15273f;margin-top:6px;z-index:1}.nas-filter__toggler .nas-filter__toggle-action{cursor:pointer;margin-top:2px;float:right}.nas-filter__toggler .nas-filter__direct-only{display:inline-block}.travel-details{position:relative;margin:0;z-index:1;display:flex;flex-direction:column}.travel-details__list{margin-top:12px}.travel-details__list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0}.travel-details__list-item:not(:last-child){padding:6px 0 9px;border-bottom:2px solid #E9E7E4}.travel-details__label{flex-grow:2;margin:0 6px 0 0}.travel-details__title{font-size:18px;line-height:24px;display:block;min-width:124px}.travel-details__title--small{font-size:16px;line-height:24px;margin:0}.travel-details__action{padding:12px;width:100%;background-color:#fff;font-weight:700}.travel-details__action:hover,.travel-details__action:focus{background-color:#f1f1f1}.travel-details__action--border{border-bottom:2px #E9E7E4}.travel-details__action:focus{outline:none;z-index:1}.travel-details__icon{margin-bottom:9px}.travel-details__dropdown{margin-right:0}.travel-details__dropdown:after{content:\"\";position:absolute;bottom:-3px;left:0;width:100%;border-bottom:3px solid #E9E7E4}.travel-details__dropdown--trip-type{order:1;flex:1;margin-right:3px;margin-bottom:3px}.travel-details__dropdown--transit-type{order:2;flex:1;margin-bottom:3px}.travel-details__dropdown--passengers{order:3;flex:1 0 100%;margin-bottom:3px}.travel-details__transit-icon{position:relative;display:flex;justify-content:center;width:calc(100% - 48px);margin:12px auto;height:24px;background-color:inherit}.travel-details__transit-icon:before{content:\"\";position:absolute;height:2px;left:0;width:100%;top:calc(50% - 1px);background-color:currentColor}.travel-details__transit-icon:after{content:\"\";position:absolute;width:10px;height:10px;right:0;top:calc(50% - 5px);border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}.travel-details__transit-icon-stop{position:relative;top:calc(50% - 5px);width:10px;height:10px;border:2px solid currentColor;border-radius:50%;background-color:inherit}@media (min-width: 1000px){.travel-details--no-border:after{border-bottom:none}}::ng-deep .nas-filter__filters .nas-passenger-select__title{padding:8px 16px 0}::ng-deep .nas-filter__filters .nas-passenger-select__list{position:absolute!important;width:100%}::ng-deep .nas-filter__filters .nas-passenger-select__list-item{padding:8px 16px!important}::ng-deep .nas-filter__filters .nas-radio{margin:0!important}::ng-deep .nas-filter__filters .nas-button{margin-top:6px}::ng-deep .nas-filter__filters .travel-details--no-border:after{display:none}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker__date-picker-wrapper{border-bottom:none!important;position:unset}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker--compact{position:unset;margin-bottom:0}::ng-deep .nas-filter__filters .nas-filter__date-combo--side-by-side .nas-datepicker-combo__separator{display:block;border-bottom:none!important}::ng-deep .nas-filter__filters .nas-airport-select__input-line{border-top:none!important}::ng-deep .nas-filter__filters .nas-airport-select-combo__separator{border-bottom:none!important}::ng-deep .nas-filter__filters .nas-dropdown__toggle{height:64px!important}::ng-deep .nas-filter__filters .nas-datepicker-combo__separator{display:none}::ng-deep .nas-filter__rotate{transform:rotate(180deg)}::ng-deep .nas-filter__rotate-enter,::ng-deep .nas-filter__rotate-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}::ng-deep .nas-filter__rotate-enter{animation:flip-in .55s ease both}::ng-deep .nas-filter__rotate-leave-active{animation:flip-out .2s ease-out both}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__input-line{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select-combo__separator{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results-wrapper{margin-top:0}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results{top:-3px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__icon{bottom:18px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select:after{display:none}::ng-deep .nas-filter__airport-select .nas-airport-select__input-line{display:none}::ng-deep .nas-filter__airport-origin-select{width:100%;max-width:100%}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{max-width:100%}@media (min-width: 640px){::ng-deep .nas-filter__airport-origin-select{max-width:360px;flex:auto;margin-right:3px}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{width:auto;max-width:360px}}::ng-deep .nas-filter__origin-combined{border-bottom:3px solid #E9E7E4;order:3;flex:0 0 100%;display:flex;flex-wrap:wrap}@media (min-width: 1000px){::ng-deep .nas-filter__origin-combined{display:flex;flex:none}::ng-deep .nas-filter__origin-combined .nas-dropdown__toggle nas-icon{float:none!important}}::ng-deep .nas-filter__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:passenger-backdrop .7s ease-out both}::ng-deep .nas-filter__passengers-selection{position:absolute;z-index:4;width:100%}::ng-deep .nas-filter__passengers-selection ::ng-deep .nas-backdrop{z-index:-1}@keyframes passenger-backdrop{0%{opacity:0}}::ng-deep .lower-z-index{z-index:1!important;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: AirportSelectComponent, selector: "nas-airport-select", inputs: ["outboundId", "inboundId", "airports", "airportRelations", "latestSearchesOrigin", "latestSearchesDestination", "closestAirports", "allowedOriginAiports", "allowedDestinationAirports", "displayLatestSearches", "displayClosestAirports", "combo", "useSwitch", "allAirportsLabel", "latestSearchesLabel", "closestAirportsLabel", "geolocationLabel", "geolocationBlockedLabel", "selectOriginFirstLabel", "invalidDestinationText", "labelOrigin", "placeholderOrigin", "labelDestination", "placeholderDestination", "keepSelection", "nasFormControlNameOrigin", "nasFormControlNameDestination", "nasFormGroup", "originAirportCode", "destinationAirportCode", "ariaLabelClear", "ariaLabelBackdrop"], outputs: ["originChange", "originOpenChange", "destinationChange", "destinationOpenChange", "focusOnNext", "positionChange"] }, { kind: "component", type: PassengerSelectComponent, selector: "nas-passenger-select", inputs: ["passengers", "maxPaxCount", "minAdultCount", "groupBookingLimit", "title", "adultsLabel", "childrenLabel", "infantsLabel", "youthsLabel", "youngAdultsLabel", "groupBookingLabel", "nasFormGroup", "nasFormControlGroupBooking", "ariaLabelSubtract", "ariaLabelAdd"], outputs: ["passengersChange", "focusOnNext", "focusOnPrevious"] }, { kind: "component", type: AccordionComponent, selector: "nas-accordion", inputs: ["expanded", "title", "badge", "icon", "simple", "spaced", "small", "inverted", "containerOnToggle", "nopadding", "transparent", "approve", "primary", "warning", "badgeInfo", "badgeSuccess", "badgeWarning", "badgeError", "cssClass", "cssStyle"], outputs: ["toggleChange"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange"] }, { kind: "component", type: SuggestionsComponent, selector: "nas-suggestions", inputs: ["suggestions", "orLabel"], outputs: ["airportSelect"] }, { kind: "component", type: DatepickerComboComponent, selector: "nas-datepicker-combo", inputs: ["outboundId", "inboundId", "ariaLabelBackdrop", "outboundOpen", "inboundOpen", "noAvailableFlightsLabel", "availableFlightsLabel", "disablePastSelection", "outboundDisabled", "inboundDisabled", "outboundOnly", "outboundLabel", "inboundLabel", "timepickerLabel", "availability", "outboundAvailableDates", "inboundAvailableDates", "times", "dateDisplayFormat", "timeDisplayFormat", "locale", "compact", "nasFormGroup", "nasFormControlNameOutbound", "nasFormControlNameInbound", "outboundSelectedDate", "inboundSelectedDate", "disableBackdrop", "outboundSelectedTime", "inboundSelectedTime", "ariaLabelPreviousMonth", "ariaLabelNextMonth", "inboundLowerLimitDateOffset", "inlineFlex"], outputs: ["outboundSelectedDateChange", "inboundSelectedDateChange", "outboundOpenChange", "inboundOpenChange", "outboundMonthChange", "inboundMonthChange", "focusOnNextChange", "focusOnPreviousChange"] }, { kind: "component", type: RadioComponent, selector: "nas-radio", inputs: ["id", "value", "name", "error", "disabled", "strong", "block", "spaceless", "tabIndex", "required", "aria-label", "aria-describedby", "aria-labelledby", "checked", "nasFormControlName", "nasFormGroup"], outputs: ["checkedChange"] }, { kind: "component", type: BackdropComponent, selector: "nas-backdrop", inputs: ["showBackdrop", "ariaLabelBackdrop"], outputs: ["showBackdropChange"] }] }); }
|
|
7164
7160
|
}
|
|
7165
7161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: FilterComponent, decorators: [{
|
|
7166
7162
|
type: Component,
|
|
7167
|
-
args: [{ selector: 'nas-filter', template: "<nas-accordion *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile); else filterTemplate\" simple\n containerOnToggle transparent [expanded]=\"expandedAccordionMobile\" [title]=\"editSearchTitle\"\n (toggleChange)=\"onAccordionToggleChange($event)\">\n <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n</nas-accordion>\n<div class=\"container\" *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile) && displaySummary\">{{getSummary()}}\n</div>\n\n<ng-template #filterTemplate>\n <div #container [nasClass]=\"getContainerClass()\">\n <div [nasClass]=\"getFilterClass('filters', [exists(minimize) && 'minimized'])\">\n <ng-container *ngIf=\"airports?.length > 0\">\n <nas-airport-select *ngIf=\"airports && airportRelations && (enableDestinationSelect)\" #airportSelect combo\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\" \n [outboundId]=\"airportSelectOutboundId\" [inboundId]=\"airportSelectInboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\"\n [nasFormControlNameDestination]=\"nasFormControlNameDestination\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getAirportSelectClass()\" [airports]=\"airports\" [allowedOriginAiports]=\"allowedOriginAirports\"\n [allowedDestinationAirports]=\"allowedDestinationAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [latestSearchesDestination]=\"latestSearchesDestination\"\n [displayLatestSearches]=\"displayLatestSearches\" [displayClosestAirports]=\"displayClosestAirports\"\n [originAirportCode]=\"originAirportCode\" [destinationAirportCode]=\"destinationAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [labelDestination]=\"labelDestination\"\n [geolocationLabel]=\"geolocationLabel\" [geolocationBlockedLabel]=\"geolocationBlockedLabel\"\n [placeholderDestination]=\"placeholderDestination\" [keepSelection]=\"keepSelection\"\n [invalidDestinationText]=\"invalidDestinationText\" (originChange)=\"setSelectedOriginAirport($event)\"\n (destinationChange)=\"onDestinationChange($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (destinationOpenChange)=\"onDestinationOpen($event)\"\n (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-airport-select *ngIf=\"airports && (!enableDestinationSelect)\" #airportSelect\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [outboundId]=\"airportSelectOutboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getClass('airport-origin-select')\" [airports]=\"airports\"\n [allowedOriginAiports]=\"allowedOriginAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [displayLatestSearches]=\"displayLatestSearches\"\n [displayClosestAirports]=\"displayClosestAirports\" [originAirportCode]=\"originAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [geolocationLabel]=\"geolocationLabel\"\n [geolocationBlockedLabel]=\"geolocationBlockedLabel\" [keepSelection]=\"keepSelection\"\n (originChange)=\"setSelectedOriginAirport($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-suggestions *ngIf=\"(closestAirports || latestSearchesOrigin) && exists(enableSuggestions)\"\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [nasClass]=\"getFilterClass('suggestions', !exists(enableDatepickers) && 'flex-end')\" [suggestions]=\"getSuggestions()\" [orLabel]=\"orLabel\"\n (airportSelect)=\"setSelectedOriginAirport($event)\"></nas-suggestions>\n </ng-container>\n <ng-container *ngIf=\"shouldMaximize()\">\n <ng-container *ngIf=\"enablePassengersSelect\">\n <div [nasClass]=\"getClass('passengers')\">\n <button (click)=\"onPassengerSelectOpen($event)\" [id]=\"passengerSelectId\"\n [nasClass]=\"getClass('passengers-button', openPassengerSelect && 'active')\">\n <div [nasClass]=\"getClass('label')\">\n <p [nasClass]=\"getClass('button-title')\">{{passengersTitleLabel}}</p>\n <p>{{passengerSelectLabel}}</p>\n </div>\n <div [nasClass]=\"getClass('traveler-icon')\"><nas-icon [icon]=\"'my-profile-compact'\"\n [type]=\"'small'\"></nas-icon></div>\n </button>\n <div *ngIf=\"openPassengerSelect\" [nasClass]=\"getClass('passengers-selection')\">\n <nas-passenger-select [ariaLabelAdd]=\"ariaLabelAdd\" [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [adultsLabel]=\"passengerSelectAdultsLabel\" [youthsLabel]=\"passengerSelectYouthsLabel\"\n [youngAdultsLabel]=\"passengerSelectYoungAdultsLabel\" [childrenLabel]=\"passengerSelectChildrenLabel\"\n [infantsLabel]=\"passengerSelectInfantsLabel\" [maxPaxCount]=\"maxPaxCount\"\n [minAdultCount]=\"minAdultCount\" [title]=\"passengerSelectTitle\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlGroupBooking]=\"nasFormControlGroupBooking\" [groupBookingLabel]=\"groupBookingLabel\"\n [groupBookingLimit]=\"groupBookingLimit\" (focusOnNext)=\"onPassengersSelectFocusOnNext()\"\n (focusOnPrevious)=\"onPassengersSelectFocusOnPrevious()\"\n [(passengers)]=\"passengers\"></nas-passenger-select>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openPassengerSelect\"></nas-backdrop>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"enableTripSwitch\">\n <form [nasClass]=\"getClass('radio', !exists(enableDatepickers) && 'flex-end')\">\n <nas-radio #tripTypeRoundTrip [id]=\"tripTypeInputId + '__round-trip'\" [name]=\"'tripType'\" [value]=\"2\" (checkedChange)=\"onTripTypeChange(2)\" [checked]=\"defaultTripType === 2\">\n {{tripSwitchRoundTripLabel}}\n </nas-radio>\n <nas-radio #tripTypeOneway [id]=\"tripTypeInputId + '__one-way'\" [name]=\"'tripType'\" [value]=\"1\" (checkedChange)=\"onTripTypeChange(1)\" [checked]=\"defaultTripType === 1\">\n {{tripSwitchOneWayLabel}}\n </nas-radio>\n </form>\n </ng-container>\n <ng-container *ngIf=\"exists(enableDatepickers)\">\n <div [nasClass]=\"getDatePickersClass()\">\n <nas-datepicker-combo #datepickerCombo compact \n [outboundId]=\"datePickerOutboundId\" [inboundId]=\"datePickerInboundId\" [inlineFlex]=\"inlineFlex\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOutbound]=\"nasFormControlNameOutbound\"\n [nasFormControlNameInbound]=\"nasFormControlNameInbound\" [availability]=\"availability\"\n [availableFlightsLabel]=\"availableFlightsLabel\" [dateDisplayFormat]=\"dateDisplayFormat\"\n [disablePastSelection]=\"disablePastSelection\" [locale]=\"locale\"\n [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\" [inboundAvailableDates]=\"inboundAvailableDates\"\n [inboundLabel]=\"inboundLabel\" [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n [outboundAvailableDates]=\"outboundAvailableDates\" [outboundLabel]=\"outboundLabel\"\n [timeDisplayFormat]=\"timeDisplayFormat\" [times]=\"times\" [outboundDisabled]=\"outboundDisabled\"\n [inboundDisabled]=\"inboundDisabled\" [outboundOnly]=\"tripType === 1\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n [ariaLabelNextMonth]=\"ariaLabelNextMonth\" (focusOnNextChange)=\"onFocusOnNextChange($event)\"\n (focusOnPreviousChange)=\"onDatepickerFocusOnPrevious($event)\"\n (inboundMonthChange)=\"onInboundMonthChange($event)\" (outboundMonthChange)=\"onOutboundMonthChange($event)\"\n [(outboundOpen)]=\"outboundOpen\" [(inboundOpen)]=\"inboundOpen\"\n [(inboundSelectedDate)]=\"inboundSelectedDate\" [(outboundSelectedDate)]=\"outboundSelectedDate\">\n </nas-datepicker-combo>\n </div>\n </ng-container>\n <ng-container *ngIf=\"enableTransitSwitch\">\n <div [nasClass]=\"getClass('transit-type')\">\n <nas-button *ngIf=\"directOnlyLabel && directTransitLabel\" #transitSwitch block light\n [id]=\"transitTypeInputId\" [iconType]=\"'chevron-down'\" [label]=\"getTransitLabel()\"\n [nasClass]=\"getClass('transit', openTransitTypeSelect && 'active')\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" (click)=\"onTransitSwitchOpen($event)\"\n (keydown)=\"transitKeyDown($event)\">{{ getTransitLabel() }}\n </nas-button>\n <div *ngIf=\"openTransitTypeSelect\" [nasClass]=\"getClass('transit-type-selection')\">\n <button [id]=\"transitTypeInputId + '__direct'\" [nasClass]=\"getTravelDetailsClass('action', directOnly && 'active')\" type=\"button\"\n #transitTypeDirectOnly (click)=\"onTransitChange(true)\">{{ directOnlyLabel }}\n </button>\n <button [id]=\"transitTypeInputId + '__transit'\" type=\"button\" #transitTypeTransit\n [nasClass]=\"getTravelDetailsClass('action', !directOnly && 'active')\"\n (click)=\"onTransitChange(false)\">{{ directTransitLabel }}\n </button>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openTransitTypeSelect\"></nas-backdrop>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</ng-template>", 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-filter{position:relative;z-index:6}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light{border:2px solid #15273F}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:hover,.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:focus{background-color:#fff}.nas-filter ::ng-deep .nas-filter__transit .nas-button__content{gap:0;justify-content:space-between;font-weight:400}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button__icon{transform:rotate(180deg)}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button{background-color:#ebf4ff!important;border:2px solid #15273F;z-index:5}.nas-filter__title{margin-top:24px;font-size:32px;line-height:40px}.nas-filter__radio{display:flex;gap:24px;padding:12px}.nas-filter__radio--flex-end{order:4!important}.nas-filter__passengers-button{display:flex;justify-content:space-between;background-color:#fff;border:2px solid #15273F;padding:9px 14px;width:100%;height:67px}.nas-filter__passengers-button--active{background-color:#ebf4ff!important;position:relative;z-index:5}.nas-filter__label{flex-direction:column;text-align:left;display:flex;justify-content:center}.nas-filter__label p{margin:0}.nas-filter__button-title{font-weight:700;font-size:14px}.nas-filter__traveler-icon{transform:scale(.85);margin-top:12px}.nas-filter__transit-type-selection{z-index:4;position:absolute;width:100%;border-left:2px solid #15273F;border-right:2px solid #15273F;border-bottom:2px solid #15273F}.nas-filter__transit-type-selection button:first-child{border-bottom:2px solid #E9E7E4}.nas-filter__transit-type-selection ::ng-deep .nas-backdrop{z-index:-1}.nas-filter__passengers{margin-top:8px}.nas-filter__filters:has(.nas-filter__radio--flex-end){display:flex;flex-direction:column}.nas-filter__filters .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md{display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}.nas-filter__filters--md .nas-filter__airport-select ::ng-deep .nas-airport-select-combo{flex-direction:row}.nas-filter__filters--md .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md .nas-filter__radio{order:0;width:100%;padding-left:0}.nas-filter__filters--md .nas-filter__date-combo{order:1;flex:1 1 48.5%}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls{border-left:2px solid #6F6F6F}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active{border-left:2px solid currentColor}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact{position:relative}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound{margin-left:8px}.nas-filter__filters--md .nas-filter__passengers{order:2;flex:1 1 24%;position:relative;height:68px;margin:0}.nas-filter__filters--md .nas-filter__passengers .nas-filter__passengers-button{height:68px}.nas-filter__filters--md .nas-filter__passengers .nas-filter__button-title{line-height:18px}.nas-filter__filters--md .nas-filter__transit-type{order:3;flex:1 1 24%;position:relative}.nas-filter__filters--md .nas-filter__transit-type ::ng-deep .nas-button{height:68px;margin:0}.nas-filter__filters--md:has(.nas-filter__radio--flex-end){display:flex;flex-direction:row}.nas-filter__filters--lg{display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}.nas-filter__filters--lg .nas-filter__airport-select{order:0;flex:0 0 48%}.nas-filter__filters--lg .nas-filter__suggestions{order:8;flex:0 0 100%}.nas-filter__filters--lg .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--lg .nas-filter__suggestions--flex-end{margin-bottom:0;order:4}.nas-filter__filters--lg .nas-filter__passengers{order:2;margin-top:0;position:relative;flex:0 0 24.5%}.nas-filter__filters--lg .nas-filter__passengers .nas-filter__passengers-button{height:67px}.nas-filter__filters--lg .nas-filter__transit-type{order:3;flex:0 0 24.4%;position:relative}.nas-filter__filters--lg .nas-filter__transit-type ::ng-deep .nas-button{height:67px;margin:0}.nas-filter__filters--lg .nas-filter__date-combo{order:1;flex:0 0 49.5%}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls{border-left:2px solid #6F6F6F}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active{border-left:2px solid currentColor}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact{position:relative}.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound{margin-left:8px}.nas-filter__filters--lg .nas-filter__radio{order:4;flex:0 0 49%;padding:9px 0 0}.nas-filter__filters--lg:has(.nas-filter__radio--flex-end){display:flex;flex-direction:row}.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo{flex-direction:row}.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:46.5%;transform:rotate(90deg)}.nas-filter__filters--lg.nas-filter__filters--minimized .nas-filter__airport-select{order:0;flex:0 0 100%}.nas-filter__filters--lg.nas-filter__filters--minimized ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:48%;transform:rotate(90deg)}.nas-filter__filters--lg.nas-filter__filters--minimized .nas-filter__radio{order:0;flex:0 0 100%;padding:12px 0}.nas-filter__suggestions{flex-basis:100%;position:relative}.nas-filter__airport-select{order:0;flex:0 0 100%;position:relative}.nas-filter__toggler{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;color:#15273f;margin-top:6px;z-index:1}.nas-filter__toggler .nas-filter__toggle-action{cursor:pointer;margin-top:2px;float:right}.nas-filter__toggler .nas-filter__direct-only{display:inline-block}.travel-details{position:relative;margin:0;z-index:1;display:flex;flex-direction:column}.travel-details--lg{flex-direction:row;flex-wrap:wrap;flex:0 0 50%}.travel-details--lg .nas-filter__passengers{order:0;flex:1 1 auto;height:68px}.travel-details--lg .nas-filter__transit-type{order:0;flex:1 1 auto;position:relative}.travel-details--lg .nas-filter__transit-type ::ng-deep .nas-button{height:68px;margin:0}.travel-details__list{margin-top:12px}.travel-details__list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0}.travel-details__list-item:not(:last-child){padding:6px 0 9px;border-bottom:2px solid #E9E7E4}.travel-details__label{flex-grow:2;margin:0 6px 0 0}.travel-details__title{font-size:18px;line-height:24px;display:block;min-width:124px}.travel-details__title--small{font-size:16px;line-height:24px;margin:0}.travel-details__action{padding:12px;width:100%;background-color:#fff;font-weight:700}.travel-details__action:hover,.travel-details__action:focus{background-color:#f1f1f1}.travel-details__action--border{border-bottom:2px #E9E7E4}.travel-details__action:focus{outline:none;z-index:1}.travel-details__icon{margin-bottom:9px}.travel-details__dropdown{margin-right:0}.travel-details__dropdown:after{content:\"\";position:absolute;bottom:-3px;left:0;width:100%;border-bottom:3px solid #E9E7E4}.travel-details__dropdown--trip-type{order:1;flex:1;margin-right:3px;margin-bottom:3px}.travel-details__dropdown--transit-type{order:2;flex:1;margin-bottom:3px}.travel-details__dropdown--passengers{order:3;flex:1 0 100%;margin-bottom:3px}.travel-details__transit-icon{position:relative;display:flex;justify-content:center;width:calc(100% - 48px);margin:12px auto;height:24px;background-color:inherit}.travel-details__transit-icon:before{content:\"\";position:absolute;height:2px;left:0;width:100%;top:calc(50% - 1px);background-color:currentColor}.travel-details__transit-icon:after{content:\"\";position:absolute;width:10px;height:10px;right:0;top:calc(50% - 5px);border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}.travel-details__transit-icon-stop{position:relative;top:calc(50% - 5px);width:10px;height:10px;border:2px solid currentColor;border-radius:50%;background-color:inherit}@media (min-width: 1000px){.travel-details--no-border:after{border-bottom:none}}::ng-deep .nas-filter__filters .nas-passenger-select__title{padding:8px 16px 0}::ng-deep .nas-filter__filters .nas-passenger-select__list{position:absolute!important;width:100%}::ng-deep .nas-filter__filters .nas-passenger-select__list-item{padding:8px 16px!important}::ng-deep .nas-filter__filters .nas-radio{margin:0!important}::ng-deep .nas-filter__filters .nas-button{margin-top:6px}::ng-deep .nas-filter__filters .travel-details--no-border:after{display:none}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker__date-picker-wrapper{border-bottom:none!important;position:unset}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker--compact{position:unset}::ng-deep .nas-filter__filters .nas-filter__date-combo--side-by-side .nas-datepicker-combo__separator{display:block;border-bottom:none!important}::ng-deep .nas-filter__filters .nas-airport-select__input-line{border-top:none!important}::ng-deep .nas-filter__filters .nas-airport-select-combo__separator{border-bottom:none!important}::ng-deep .nas-filter__filters .nas-dropdown__toggle{height:64px!important}::ng-deep .nas-filter__filters .nas-datepicker-combo__separator{display:none}::ng-deep .nas-filter__rotate{transform:rotate(180deg)}::ng-deep .nas-filter__rotate-enter,::ng-deep .nas-filter__rotate-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}::ng-deep .nas-filter__rotate-enter{animation:flip-in .55s ease both}::ng-deep .nas-filter__rotate-leave-active{animation:flip-out .2s ease-out both}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__input-line{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select-combo__separator{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results-wrapper{margin-top:0}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results{top:-3px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__icon{bottom:18px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select:after{display:none}::ng-deep .nas-filter__airport-select .nas-airport-select__input-line{display:none}::ng-deep .nas-filter__airport-origin-select{width:100%;max-width:100%}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{max-width:100%}@media (min-width: 640px){::ng-deep .nas-filter__airport-origin-select{max-width:360px;flex:auto;margin-right:3px}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{width:auto;max-width:360px}}::ng-deep .nas-filter__origin-combined{border-bottom:3px solid #E9E7E4;order:3;flex:0 0 100%;display:flex;flex-wrap:wrap}@media (min-width: 1000px){::ng-deep .nas-filter__origin-combined{display:flex;flex:none}::ng-deep .nas-filter__origin-combined .nas-dropdown__toggle nas-icon{float:none!important}}::ng-deep .nas-filter__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:passenger-backdrop .7s ease-out both}::ng-deep .nas-filter__passengers-selection{position:absolute;z-index:4;width:100%}::ng-deep .nas-filter__passengers-selection ::ng-deep .nas-backdrop{z-index:-1}@keyframes passenger-backdrop{0%{opacity:0}}::ng-deep .lower-z-index{z-index:1!important;position:relative}\n"] }]
|
|
7163
|
+
args: [{ selector: 'nas-filter', template: "<nas-accordion *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile); else filterTemplate\" simple\n containerOnToggle transparent [expanded]=\"expandedAccordionMobile\" [title]=\"editSearchTitle\"\n (toggleChange)=\"onAccordionToggleChange($event)\">\n <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n</nas-accordion>\n<div class=\"container\" *ngIf=\"deviceHelper?.isMobile() && exists(minimizeOnMobile) && displaySummary\">{{getSummary()}}\n</div>\n\n<ng-template #filterTemplate>\n <div #container [nasClass]=\"getContainerClass()\">\n <div [nasClass]=\"getFilterClass('filters', [exists(minimize) && 'minimized', exists(inlineOnDesktop) && 'inline'])\">\n <ng-container *ngIf=\"airports?.length > 0\">\n <nas-airport-select *ngIf=\"airports && airportRelations && (enableDestinationSelect)\" #airportSelect combo\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\" \n [outboundId]=\"airportSelectOutboundId\" [inboundId]=\"airportSelectInboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\"\n [nasFormControlNameDestination]=\"nasFormControlNameDestination\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getAirportSelectClass()\" [airports]=\"airports\" [allowedOriginAiports]=\"allowedOriginAirports\"\n [allowedDestinationAirports]=\"allowedDestinationAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [latestSearchesDestination]=\"latestSearchesDestination\"\n [displayLatestSearches]=\"displayLatestSearches\" [displayClosestAirports]=\"displayClosestAirports\"\n [originAirportCode]=\"originAirportCode\" [destinationAirportCode]=\"destinationAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [labelDestination]=\"labelDestination\"\n [geolocationLabel]=\"geolocationLabel\" [geolocationBlockedLabel]=\"geolocationBlockedLabel\"\n [placeholderDestination]=\"placeholderDestination\" [keepSelection]=\"keepSelection\"\n [invalidDestinationText]=\"invalidDestinationText\" (originChange)=\"setSelectedOriginAirport($event)\"\n (destinationChange)=\"onDestinationChange($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (destinationOpenChange)=\"onDestinationOpen($event)\"\n (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-airport-select *ngIf=\"airports && (!enableDestinationSelect)\" #airportSelect\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [outboundId]=\"airportSelectOutboundId\" [ariaLabelClear]=\"ariaLabelClear\" [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOrigin]=\"nasFormControlNameOrigin\" [useSwitch]=\"useSwitch\"\n [nasClass]=\"getClass('airport-origin-select')\" [airports]=\"airports\"\n [allowedOriginAiports]=\"allowedOriginAirports\" [airportRelations]=\"airportRelations\"\n [latestSearchesOrigin]=\"latestSearchesOrigin\" [displayLatestSearches]=\"displayLatestSearches\"\n [displayClosestAirports]=\"displayClosestAirports\" [originAirportCode]=\"originAirportCode\"\n [allAirportsLabel]=\"allAirportsLabel\" [latestSearchesLabel]=\"latestSearchesLabel\"\n [closestAirportsLabel]=\"closestAirportsLabel\" [closestAirports]=\"closestAirports\"\n [selectOriginFirstLabel]=\"selectOriginFirstLabel\" [labelOrigin]=\"labelOrigin\"\n [placeholderOrigin]=\"placeholderOrigin\" [geolocationLabel]=\"geolocationLabel\"\n [geolocationBlockedLabel]=\"geolocationBlockedLabel\" [keepSelection]=\"keepSelection\"\n (originChange)=\"setSelectedOriginAirport($event)\" (focusOnNext)=\"setFocusOnPassengerSelect($event)\"\n (originOpenChange)=\"onOriginOpen($event)\" (positionChange)=\"getClosestAirports($event)\"></nas-airport-select>\n <nas-suggestions *ngIf=\"(closestAirports || latestSearchesOrigin) && exists(enableSuggestions)\"\n [ngClass]=\"{ 'lower-z-index': openPassengerSelect || inboundOpen || outboundOpen }\"\n [nasClass]=\"getFilterClass('suggestions', !exists(enableDatepickers) && 'flex-end')\" [suggestions]=\"getSuggestions()\" [orLabel]=\"orLabel\"\n (airportSelect)=\"setSelectedOriginAirport($event)\"></nas-suggestions>\n </ng-container>\n <ng-container *ngIf=\"shouldMaximize()\">\n <form *ngIf=\"enableTripSwitch\" [nasClass]=\"getClass('radio', !exists(enableDatepickers) && 'flex-end')\">\n <nas-radio #tripTypeRoundTrip [id]=\"tripTypeInputId + '__round-trip'\" [name]=\"'tripType'\" [value]=\"2\" (checkedChange)=\"onTripTypeChange(2)\" [checked]=\"tripType === 2\">\n {{tripSwitchRoundTripLabel}}\n </nas-radio>\n <nas-radio #tripTypeOneway [id]=\"tripTypeInputId + '__one-way'\" [name]=\"'tripType'\" [value]=\"1\" (checkedChange)=\"onTripTypeChange(1)\" [checked]=\"tripType === 1\">\n {{tripSwitchOneWayLabel}}\n </nas-radio>\n </form>\n <div *ngIf=\"exists(enableDatepickers)\" [nasClass]=\"getDatePickersClass()\">\n <nas-datepicker-combo #datepickerCombo compact \n [outboundId]=\"datePickerOutboundId\" [inboundId]=\"datePickerInboundId\" [inlineFlex]=\"inlineFlex\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlNameOutbound]=\"nasFormControlNameOutbound\"\n [nasFormControlNameInbound]=\"nasFormControlNameInbound\" [availability]=\"availability\"\n [availableFlightsLabel]=\"availableFlightsLabel\" [dateDisplayFormat]=\"dateDisplayFormat\"\n [disablePastSelection]=\"disablePastSelection\" [locale]=\"locale\"\n [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\" [inboundAvailableDates]=\"inboundAvailableDates\"\n [inboundLabel]=\"inboundLabel\" [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n [outboundAvailableDates]=\"outboundAvailableDates\" [outboundLabel]=\"outboundLabel\"\n [timeDisplayFormat]=\"timeDisplayFormat\" [times]=\"times\" [outboundDisabled]=\"outboundDisabled\"\n [inboundDisabled]=\"inboundDisabled\" [outboundOnly]=\"tripType === 1\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n [ariaLabelNextMonth]=\"ariaLabelNextMonth\" (focusOnNextChange)=\"onFocusOnNextChange($event)\"\n (focusOnPreviousChange)=\"onDatepickerFocusOnPrevious($event)\"\n (inboundMonthChange)=\"onInboundMonthChange($event)\" (outboundMonthChange)=\"onOutboundMonthChange($event)\"\n [(outboundOpen)]=\"outboundOpen\" [(inboundOpen)]=\"inboundOpen\"\n [(inboundSelectedDate)]=\"inboundSelectedDate\" [(outboundSelectedDate)]=\"outboundSelectedDate\">\n </nas-datepicker-combo>\n </div>\n <div *ngIf=\"enablePassengersSelect || enableTransitSwitch\" [nasClass]=\"getClass('dropdown-wrapper')\">\n <div *ngIf=\"enablePassengersSelect\" [nasClass]=\"getClass('passengers')\">\n <button (click)=\"onPassengerSelectOpen($event)\" [id]=\"passengerSelectId\"\n [nasClass]=\"getClass('passengers-button', openPassengerSelect && 'active')\">\n <div [nasClass]=\"getClass('label')\">\n <p [nasClass]=\"getClass('button-title')\">{{passengersTitleLabel}}</p>\n <p>{{passengerSelectLabel}}</p>\n </div>\n <div [nasClass]=\"getClass('traveler-icon')\"><nas-icon [icon]=\"'my-profile-compact'\"\n [type]=\"'small'\"></nas-icon></div>\n </button>\n <div *ngIf=\"openPassengerSelect\" [nasClass]=\"getClass('passengers-selection')\">\n <nas-passenger-select [ariaLabelAdd]=\"ariaLabelAdd\" [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [adultsLabel]=\"passengerSelectAdultsLabel\" [youthsLabel]=\"passengerSelectYouthsLabel\"\n [youngAdultsLabel]=\"passengerSelectYoungAdultsLabel\" [childrenLabel]=\"passengerSelectChildrenLabel\"\n [infantsLabel]=\"passengerSelectInfantsLabel\" [maxPaxCount]=\"maxPaxCount\"\n [minAdultCount]=\"minAdultCount\" [title]=\"passengerSelectTitle\" [nasFormGroup]=\"nasFormGroup\"\n [nasFormControlGroupBooking]=\"nasFormControlGroupBooking\" [groupBookingLabel]=\"groupBookingLabel\"\n [groupBookingLimit]=\"groupBookingLimit\" (focusOnNext)=\"onPassengersSelectFocusOnNext()\"\n (focusOnPrevious)=\"onPassengersSelectFocusOnPrevious()\"\n [(passengers)]=\"passengers\"></nas-passenger-select>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openPassengerSelect\"></nas-backdrop>\n </div>\n </div>\n <div *ngIf=\"enableTransitSwitch\" [nasClass]=\"getClass('transit-type')\">\n <nas-button *ngIf=\"directOnlyLabel && directTransitLabel\" #transitSwitch block light\n [id]=\"transitTypeInputId\" [iconType]=\"'chevron-down'\" [label]=\"getTransitLabel()\"\n [nasClass]=\"getClass('transit', openTransitTypeSelect && 'active')\"\n [ariaLabelBackdrop]=\"ariaLabelBackdrop\" (click)=\"onTransitSwitchOpen($event)\"\n (keydown)=\"transitKeyDown($event)\">{{ getTransitLabel() }}\n </nas-button>\n <div *ngIf=\"openTransitTypeSelect\" [nasClass]=\"getClass('transit-type-selection')\">\n <button [id]=\"transitTypeInputId + '__direct'\" [nasClass]=\"getTravelDetailsClass('action', directOnly && 'active')\" type=\"button\"\n #transitTypeDirectOnly (click)=\"onTransitChange(true)\">{{ directOnlyLabel }}\n </button>\n <button [id]=\"transitTypeInputId + '__transit'\" type=\"button\" #transitTypeTransit\n [nasClass]=\"getTravelDetailsClass('action', !directOnly && 'active')\"\n (click)=\"onTransitChange(false)\">{{ directTransitLabel }}\n </button>\n <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n [(showBackdrop)]=\"openTransitTypeSelect\"></nas-backdrop>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>", 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-filter{position:relative;z-index:6}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light{border:2px solid #15273F}.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:hover,.nas-filter ::ng-deep .nas-filter__transit .nas-button--light:focus{background-color:#fff}.nas-filter ::ng-deep .nas-filter__transit .nas-button__content{gap:0;justify-content:space-between;font-weight:400}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button__icon{transform:rotate(180deg)}.nas-filter ::ng-deep .nas-filter__transit--active .nas-button{background-color:#ebf4ff!important;border:2px solid #15273F;z-index:5}.nas-filter__title{margin-top:24px;font-size:32px;line-height:40px}.nas-filter__radio{display:flex;gap:24px;padding:12px}.nas-filter__radio--flex-end{order:4!important}.nas-filter__passengers-button{display:flex;justify-content:space-between;background-color:#fff;border:2px solid #15273F;padding:9px 14px;width:100%;height:67px}.nas-filter__passengers-button--active{background-color:#ebf4ff!important;position:relative;z-index:5}.nas-filter__label{flex-direction:column;text-align:left;display:flex;justify-content:center}.nas-filter__label p{margin:0}.nas-filter__button-title{font-weight:700;font-size:14px}.nas-filter__traveler-icon{transform:scale(.85);margin-top:12px}.nas-filter__transit-type-selection{z-index:4;position:absolute;width:100%;border-left:2px solid #15273F;border-right:2px solid #15273F;border-bottom:2px solid #15273F}.nas-filter__transit-type-selection button:first-child{border-bottom:2px solid #E9E7E4}.nas-filter__transit-type-selection ::ng-deep .nas-backdrop{z-index:-1}.nas-filter__passengers{margin-top:8px}.nas-filter__filters:has(.nas-filter__radio--flex-end){display:flex;flex-direction:column}.nas-filter__filters .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md,.nas-filter__filters--lg{display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}.nas-filter__filters--md .nas-filter__airport-select,.nas-filter__filters--lg .nas-filter__airport-select{flex:0 0 100%}.nas-filter__filters--md .nas-filter__airport-select ::ng-deep .nas-airport-select-combo__switcher,.nas-filter__filters--lg .nas-filter__airport-select ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:48%;transform:rotate(90deg)}.nas-filter__filters--md .nas-filter__suggestions,.nas-filter__filters--lg .nas-filter__suggestions{flex:0 0 100%}.nas-filter__filters--md .nas-filter__suggestions ::ng-deep .nas-suggestions,.nas-filter__filters--lg .nas-filter__suggestions ::ng-deep .nas-suggestions{margin:0}.nas-filter__filters--md .nas-filter__suggestions--flex-end,.nas-filter__filters--lg .nas-filter__suggestions--flex-end{margin-bottom:0}.nas-filter__filters--md .nas-filter__dropdown-wrapper,.nas-filter__filters--lg .nas-filter__dropdown-wrapper{display:flex;gap:8px;flex:1 1 49%}.nas-filter__filters--md .nas-filter__passengers,.nas-filter__filters--lg .nas-filter__passengers{margin-top:0;position:relative;flex:1 1 24.5%}.nas-filter__filters--md .nas-filter__passengers .nas-filter__passengers-button,.nas-filter__filters--lg .nas-filter__passengers .nas-filter__passengers-button{height:67px}.nas-filter__filters--md .nas-filter__transit-type,.nas-filter__filters--lg .nas-filter__transit-type{flex:1 1 24.4%;position:relative}.nas-filter__filters--md .nas-filter__transit-type ::ng-deep .nas-button,.nas-filter__filters--lg .nas-filter__transit-type ::ng-deep .nas-button{height:67px;margin:0}.nas-filter__filters--md .nas-filter__date-combo,.nas-filter__filters--lg .nas-filter__date-combo{flex:1 1 49%}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls{border-left:2px solid #6F6F6F}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound .nas-datepicker__date-picker-wrapper .nas-datepicker__controls--active{border-left:2px solid currentColor}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker__date-picker-wrapper,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker .nas-datepicker--compact{position:relative}.nas-filter__filters--md .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound,.nas-filter__filters--lg .nas-filter__date-combo ::ng-deep .nas-datepicker-combo__date-picker--inbound{margin-left:8px}.nas-filter__filters--md .nas-filter__radio,.nas-filter__filters--lg .nas-filter__radio{flex:0 0 100%;padding:9px 0}.nas-filter__filters--md:has(.nas-filter__radio--flex-end),.nas-filter__filters--lg:has(.nas-filter__radio--flex-end){display:flex;flex-direction:row}.nas-filter__filters--md ::ng-deep .nas-airport-select-combo,.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo{flex-direction:row}.nas-filter__filters--md ::ng-deep .nas-airport-select-combo__switcher,.nas-filter__filters--lg ::ng-deep .nas-airport-select-combo__switcher{top:20%;left:46.5%;transform:rotate(90deg)}.nas-filter__filters--md .nas-filter__passengers ::ng-deep .nas-passenger-select__list{width:100%;min-width:250px}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__airport-select{order:0;flex:1}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__airport-select ::ng-deep .nas-airport-select-combo__switcher{left:46%}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__date-combo,.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__dropdown-wrapper{order:0;flex:1}.nas-filter__filters--lg.nas-filter__filters--inline .nas-filter__radio{order:1;flex:1 1 100%}.nas-filter__suggestions{flex-basis:100%;position:relative}.nas-filter__airport-select{order:0;flex:0 0 100%;position:relative}.nas-filter__toggler{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;color:#15273f;margin-top:6px;z-index:1}.nas-filter__toggler .nas-filter__toggle-action{cursor:pointer;margin-top:2px;float:right}.nas-filter__toggler .nas-filter__direct-only{display:inline-block}.travel-details{position:relative;margin:0;z-index:1;display:flex;flex-direction:column}.travel-details__list{margin-top:12px}.travel-details__list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0}.travel-details__list-item:not(:last-child){padding:6px 0 9px;border-bottom:2px solid #E9E7E4}.travel-details__label{flex-grow:2;margin:0 6px 0 0}.travel-details__title{font-size:18px;line-height:24px;display:block;min-width:124px}.travel-details__title--small{font-size:16px;line-height:24px;margin:0}.travel-details__action{padding:12px;width:100%;background-color:#fff;font-weight:700}.travel-details__action:hover,.travel-details__action:focus{background-color:#f1f1f1}.travel-details__action--border{border-bottom:2px #E9E7E4}.travel-details__action:focus{outline:none;z-index:1}.travel-details__icon{margin-bottom:9px}.travel-details__dropdown{margin-right:0}.travel-details__dropdown:after{content:\"\";position:absolute;bottom:-3px;left:0;width:100%;border-bottom:3px solid #E9E7E4}.travel-details__dropdown--trip-type{order:1;flex:1;margin-right:3px;margin-bottom:3px}.travel-details__dropdown--transit-type{order:2;flex:1;margin-bottom:3px}.travel-details__dropdown--passengers{order:3;flex:1 0 100%;margin-bottom:3px}.travel-details__transit-icon{position:relative;display:flex;justify-content:center;width:calc(100% - 48px);margin:12px auto;height:24px;background-color:inherit}.travel-details__transit-icon:before{content:\"\";position:absolute;height:2px;left:0;width:100%;top:calc(50% - 1px);background-color:currentColor}.travel-details__transit-icon:after{content:\"\";position:absolute;width:10px;height:10px;right:0;top:calc(50% - 5px);border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}.travel-details__transit-icon-stop{position:relative;top:calc(50% - 5px);width:10px;height:10px;border:2px solid currentColor;border-radius:50%;background-color:inherit}@media (min-width: 1000px){.travel-details--no-border:after{border-bottom:none}}::ng-deep .nas-filter__filters .nas-passenger-select__title{padding:8px 16px 0}::ng-deep .nas-filter__filters .nas-passenger-select__list{position:absolute!important;width:100%}::ng-deep .nas-filter__filters .nas-passenger-select__list-item{padding:8px 16px!important}::ng-deep .nas-filter__filters .nas-radio{margin:0!important}::ng-deep .nas-filter__filters .nas-button{margin-top:6px}::ng-deep .nas-filter__filters .travel-details--no-border:after{display:none}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker__date-picker-wrapper{border-bottom:none!important;position:unset}::ng-deep .nas-filter__filters .nas-filter__date-combo .nas-datepicker--compact{position:unset;margin-bottom:0}::ng-deep .nas-filter__filters .nas-filter__date-combo--side-by-side .nas-datepicker-combo__separator{display:block;border-bottom:none!important}::ng-deep .nas-filter__filters .nas-airport-select__input-line{border-top:none!important}::ng-deep .nas-filter__filters .nas-airport-select-combo__separator{border-bottom:none!important}::ng-deep .nas-filter__filters .nas-dropdown__toggle{height:64px!important}::ng-deep .nas-filter__filters .nas-datepicker-combo__separator{display:none}::ng-deep .nas-filter__rotate{transform:rotate(180deg)}::ng-deep .nas-filter__rotate-enter,::ng-deep .nas-filter__rotate-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}::ng-deep .nas-filter__rotate-enter{animation:flip-in .55s ease both}::ng-deep .nas-filter__rotate-leave-active{animation:flip-out .2s ease-out both}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__input-line{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select-combo__separator{border-top:none}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results-wrapper{margin-top:0}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__results{top:-3px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select__icon{bottom:18px}::ng-deep .nas-filter__airport-select--no-border .nas-airport-select:after{display:none}::ng-deep .nas-filter__airport-select .nas-airport-select__input-line{display:none}::ng-deep .nas-filter__airport-origin-select{width:100%;max-width:100%}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{max-width:100%}@media (min-width: 640px){::ng-deep .nas-filter__airport-origin-select{max-width:360px;flex:auto;margin-right:3px}::ng-deep .nas-filter__airport-origin-select .nas-airport-select:only-child{width:auto;max-width:360px}}::ng-deep .nas-filter__origin-combined{border-bottom:3px solid #E9E7E4;order:3;flex:0 0 100%;display:flex;flex-wrap:wrap}@media (min-width: 1000px){::ng-deep .nas-filter__origin-combined{display:flex;flex:none}::ng-deep .nas-filter__origin-combined .nas-dropdown__toggle nas-icon{float:none!important}}::ng-deep .nas-filter__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:passenger-backdrop .7s ease-out both}::ng-deep .nas-filter__passengers-selection{position:absolute;z-index:4;width:100%}::ng-deep .nas-filter__passengers-selection ::ng-deep .nas-backdrop{z-index:-1}@keyframes passenger-backdrop{0%{opacity:0}}::ng-deep .lower-z-index{z-index:1!important;position:relative}\n"] }]
|
|
7168
7164
|
}], ctorParameters: function () { return [{ type: DeviceHelper }, { type: SortService }, { type: AbandonedBasketService }, { type: DateHelper }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { passengerSelectDropdown: [{
|
|
7169
7165
|
type: ViewChild,
|
|
7170
7166
|
args: ['passengerSelectDropdown']
|
|
@@ -7240,6 +7236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
7240
7236
|
type: Input
|
|
7241
7237
|
}], minimizeOnMobile: [{
|
|
7242
7238
|
type: Input
|
|
7239
|
+
}], inlineOnDesktop: [{
|
|
7240
|
+
type: Input
|
|
7243
7241
|
}], expandedAccordionMobile: [{
|
|
7244
7242
|
type: Input
|
|
7245
7243
|
}], defaultSummarySeparator: [{
|
|
@@ -7549,7 +7547,6 @@ class SpinnerComponent extends NasComponentBase {
|
|
|
7549
7547
|
return [
|
|
7550
7548
|
this.exists(this.small) && 'small',
|
|
7551
7549
|
this.exists(this.rounded) && 'rounded',
|
|
7552
|
-
this.exists(this.roundedSmall) && 'rounded--small',
|
|
7553
7550
|
this.exists(this.overlay) && 'overlay'
|
|
7554
7551
|
];
|
|
7555
7552
|
}
|
|
@@ -7566,11 +7563,11 @@ class SpinnerComponent extends NasComponentBase {
|
|
|
7566
7563
|
return classes;
|
|
7567
7564
|
}
|
|
7568
7565
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SpinnerComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SpinnerComponent, selector: "nas-spinner", inputs: { text: "text", refreshText: "refreshText", small: "small", overlay: "overlay", enable: "enable", refresh: "refresh", blockScrolling: "blockScrolling", rounded: "rounded",
|
|
7566
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SpinnerComponent, selector: "nas-spinner", inputs: { text: "text", refreshText: "refreshText", small: "small", overlay: "overlay", enable: "enable", refresh: "refresh", blockScrolling: "blockScrolling", rounded: "rounded", cssClass: "cssClass" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClasses('', modifiers)\" *ngIf=\"enable\">\n <span [nasClass]=\"getClass('box')\">\n <span [nasClass]=\"getClass('border')\"></span>\n </span>\n <div *ngIf=\"text\" [nasClass]=\"getClass('text')\">\n <div>{{text}}</div>\n <div [nasClass]=\"getClass('refresh')\" *ngIf=\"showRefreshLink\" (click)=\"refreshPage()\">\n <a> {{refreshText}} </a>\n </div>\n </div>\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-spinner{position:relative;text-align:center}.nas-spinner__box{position:relative;display:block;z-index:2;margin-left:auto;margin-right:auto;margin-bottom:8px;width:48px;height:48px;background-color:#e5212d}.nas-spinner__border{position:absolute;display:block;top:52px;left:0;width:48px;height:8px;background-color:#15273f;animation:spinner ease 1s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-spinner__text{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;position:relative;z-index:2;margin-top:24px;text-align:center;width:100%}.nas-spinner--small .nas-spinner__box{width:24px;height:24px}.nas-spinner--small .nas-spinner__text{margin-top:16px}.nas-spinner--small .nas-spinner__border{position:absolute;top:27px;left:0;width:24px;height:3px;background-color:#15273f;animation:spinner ease 1s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-spinner--overlay{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;top:0;left:0;width:100%;height:100%;z-index:40}.nas-spinner--overlay:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#ffffffb3;animation:fade-in .5s ease-out both}.nas-spinner--rounded .nas-spinner__box,.nas-spinner--rounded.nas-spinner--small .nas-spinner__box .nas-spinner__box{height:48px;width:48px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#1C1C1C 100%);mask:radial-gradient(circle 16px,transparent 99%,#1C1C1C 100%);background-image:conic-gradient(transparent 25%,#15273f);background-color:unset;animation:spin 1.5s linear infinite;border-radius:50%;position:relative;display:block;z-index:2;margin-left:auto;margin-right:auto}.nas-spinner--rounded .nas-spinner__border,.nas-spinner--rounded.nas-spinner--small .nas-spinner__box .nas-spinner__border{display:none}.nas-spinner--rounded.nas-spinner--small .nas-spinner__box{height:16px;width:16px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#1C1C1C 100%);mask:radial-gradient(circle 6px,transparent 85%,#1C1C1C 100%);background-image:conic-gradient(transparent 15%,#15273f)}.nas-spinner--rounded.nas-spinner--small .nas-spinner__text{margin-top:16px}.nas-spinner--rounded.nas-spinner--small .nas-spinner__border{display:none}.nas-spinner__refresh{padding-left:5px;position:absolute;width:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7570
7567
|
}
|
|
7571
7568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
7572
7569
|
type: Component,
|
|
7573
|
-
args: [{ selector: 'nas-spinner', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClasses('', modifiers)\" *ngIf=\"enable\">\n <span [nasClass]=\"getClass('box')\">\n <span [nasClass]=\"getClass('border')\"></span>\n </span>\n <div *ngIf=\"text\" [nasClass]=\"getClass('text')\">\n <div>{{text}}</div>\n <div [nasClass]=\"getClass('refresh')\" *ngIf=\"showRefreshLink\" (click)=\"refreshPage()\"
|
|
7570
|
+
args: [{ selector: 'nas-spinner', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClasses('', modifiers)\" *ngIf=\"enable\">\n <span [nasClass]=\"getClass('box')\">\n <span [nasClass]=\"getClass('border')\"></span>\n </span>\n <div *ngIf=\"text\" [nasClass]=\"getClass('text')\">\n <div>{{text}}</div>\n <div [nasClass]=\"getClass('refresh')\" *ngIf=\"showRefreshLink\" (click)=\"refreshPage()\">\n <a> {{refreshText}} </a>\n </div>\n </div>\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-spinner{position:relative;text-align:center}.nas-spinner__box{position:relative;display:block;z-index:2;margin-left:auto;margin-right:auto;margin-bottom:8px;width:48px;height:48px;background-color:#e5212d}.nas-spinner__border{position:absolute;display:block;top:52px;left:0;width:48px;height:8px;background-color:#15273f;animation:spinner ease 1s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-spinner__text{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;position:relative;z-index:2;margin-top:24px;text-align:center;width:100%}.nas-spinner--small .nas-spinner__box{width:24px;height:24px}.nas-spinner--small .nas-spinner__text{margin-top:16px}.nas-spinner--small .nas-spinner__border{position:absolute;top:27px;left:0;width:24px;height:3px;background-color:#15273f;animation:spinner ease 1s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-spinner--overlay{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;top:0;left:0;width:100%;height:100%;z-index:40}.nas-spinner--overlay:before{content:\"\";display:block;position:fixed;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#ffffffb3;animation:fade-in .5s ease-out both}.nas-spinner--rounded .nas-spinner__box,.nas-spinner--rounded.nas-spinner--small .nas-spinner__box .nas-spinner__box{height:48px;width:48px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#1C1C1C 100%);mask:radial-gradient(circle 16px,transparent 99%,#1C1C1C 100%);background-image:conic-gradient(transparent 25%,#15273f);background-color:unset;animation:spin 1.5s linear infinite;border-radius:50%;position:relative;display:block;z-index:2;margin-left:auto;margin-right:auto}.nas-spinner--rounded .nas-spinner__border,.nas-spinner--rounded.nas-spinner--small .nas-spinner__box .nas-spinner__border{display:none}.nas-spinner--rounded.nas-spinner--small .nas-spinner__box{height:16px;width:16px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#1C1C1C 100%);mask:radial-gradient(circle 6px,transparent 85%,#1C1C1C 100%);background-image:conic-gradient(transparent 15%,#15273f)}.nas-spinner--rounded.nas-spinner--small .nas-spinner__text{margin-top:16px}.nas-spinner--rounded.nas-spinner--small .nas-spinner__border{display:none}.nas-spinner__refresh{padding-left:5px;position:absolute;width:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinner{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
7574
7571
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { text: [{
|
|
7575
7572
|
type: Input
|
|
7576
7573
|
}], refreshText: [{
|
|
@@ -7587,8 +7584,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
7587
7584
|
type: Input
|
|
7588
7585
|
}], rounded: [{
|
|
7589
7586
|
type: Input
|
|
7590
|
-
}], roundedSmall: [{
|
|
7591
|
-
type: Input
|
|
7592
7587
|
}], cssClass: [{
|
|
7593
7588
|
type: Input
|
|
7594
7589
|
}] } });
|
|
@@ -8358,11 +8353,11 @@ class InputComponent extends NasComponentBase {
|
|
|
8358
8353
|
}
|
|
8359
8354
|
}
|
|
8360
8355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8361
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", active: "active", spaceless: "spaceless", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", type: "type", readonly: "readonly", name: "name", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", min: "min", max: "max", line: "line", pattern: "pattern" }, outputs: { modelChange: "modelChange", blur: "blur" }, viewQueries: [{ propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }, { propertyName: "inputNotReactive", first: true, predicate: ["inputNotReactive"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__input{position:relative}.nas-input__input .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__input input[type=text],.nas-input__input input[type=password]{border:2px solid #15273F;padding:12px 16px}.nas-input__input input[type=text]:placeholder-shown,.nas-input__input input[type=password]:placeholder-shown{border-color:#6f6f6f}.nas-input__input input[type=text] not:placeholder-shown,.nas-input__input input[type=password] not:placeholder-shown{border-color:#6f6f6f}.nas-input__input--error input[type=text]{background-color:#fff5f3;border:2px solid #E5212D;color:#15273f}.nas-input__input--disabled input[type=text]{background-color:#e9e7e4;border:0;color:#6f6f6f}.nas-input__input--active input[type=text]{border:2px solid #15273F;color:#15273f;background-color:#ebf4ff}.nas-input__input--active input[type=text] ::placeholder{color:#6f6f6f}.nas-input__input--active input[type=text]:focus-visible{outline-offset:2px;outline:2px solid #2A5980}.nas-input__input--spaceless input[type=text]{margin-bottom:0}.nas-input__controls{margin-bottom:0;position:relative}.nas-input__controls--label-inside{background-color:#fff;border:2px solid #6F6F6F}.nas-input__controls--label-inside .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__controls--label-inside--error{background-color:#fff5f3;border:2px solid #E5212D}.nas-input__controls--label-inside--disabled{background-color:#e9e7e4;border:0}.nas-input__controls--label-inside--active{border:2px solid #15273F;background-color:#ebf4ff}.nas-input__controls--label-inside--error input[type=text],.nas-input__controls--label-inside--error input[type=password] .nas-input__controls--label-inside--disabled input[type=text],.nas-input__controls--label-inside--active input[type=text],.nas-input__controls--label-inside input[type=text],.nas-input__controls--label-inside input[type=password]{border:0}.nas-input__controls--label-inside--error .nas-input__label,.nas-input__controls--label-inside--disabled .nas-input__label,.nas-input__controls--label-inside .nas-input__label{padding-top:12px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside--error .nas-input__text,.nas-input__controls--label-inside--disabled .nas-input__text,.nas-input__controls--label-inside .nas-input__text{padding-top:0!important;padding-left:16px;padding-right:16px;padding-bottom:9px}.nas-input__controls--label-inside--error .nas-input__icon,.nas-input__controls--label-inside--disabled .nas-input__icon,.nas-input__controls--label-inside .nas-input__icon{top:-11px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InputComponent, selector: "nas-input", inputs: { id: "id", model: "model", error: "error", disabled: "disabled", active: "active", spaceless: "spaceless", label: "label", labelInside: "labelInside", errorMessage: "errorMessage", placeholder: "placeholder", minLength: "minLength", maxLength: "maxLength", info: "info", icon: "icon", type: "type", readonly: "readonly", name: "name", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", min: "min", max: "max", line: "line", pattern: "pattern" }, outputs: { modelChange: "modelChange", blur: "blur" }, viewQueries: [{ propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }, { propertyName: "inputNotReactive", first: true, predicate: ["inputNotReactive"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__input{position:relative}.nas-input__input .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__input input[type=text],.nas-input__input input[type=password]{border:2px solid #6F6F6F;padding:12px 16px}.nas-input__input input[type=text]:placeholder-shown,.nas-input__input input[type=password]:placeholder-shown{border-color:#6f6f6f}.nas-input__input input[type=text] not:placeholder-shown,.nas-input__input input[type=password] not:placeholder-shown{border-color:#6f6f6f}.nas-input__input--error input[type=text]{background-color:#fff5f3;border:2px solid #E5212D;color:#15273f}.nas-input__input--disabled input[type=text]{background-color:#e9e7e4;border:0;color:#6f6f6f}.nas-input__input--active input[type=text],.nas-input__input--active input[type=password]{border:2px solid #15273F;color:#15273f;background-color:#ebf4ff}.nas-input__input--active input[type=text] ::placeholder,.nas-input__input--active input[type=password] ::placeholder{color:#6f6f6f}.nas-input__input--active input[type=text]:focus-visible,.nas-input__input--active input[type=password]:focus-visible{outline-offset:2px;outline:2px solid #2A5980}.nas-input__input--spaceless input[type=text]{margin-bottom:0}.nas-input__controls{margin-bottom:0;position:relative}.nas-input__controls--label-inside{background-color:#fff;border:2px solid #6F6F6F}.nas-input__controls--label-inside .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__controls--label-inside--error{background-color:#fff5f3;border:2px solid #E5212D}.nas-input__controls--label-inside--disabled{background-color:#e9e7e4;border:0}.nas-input__controls--label-inside--active{border:2px solid #15273F;background-color:#ebf4ff}.nas-input__controls--label-inside--error input[type=text],.nas-input__controls--label-inside--error input[type=password] .nas-input__controls--label-inside--disabled input[type=text],.nas-input__controls--label-inside--active input[type=text],.nas-input__controls--label-inside input[type=text],.nas-input__controls--label-inside input[type=password]{border:0}.nas-input__controls--label-inside--error .nas-input__label,.nas-input__controls--label-inside--disabled .nas-input__label,.nas-input__controls--label-inside .nas-input__label{padding-top:12px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside--error .nas-input__text,.nas-input__controls--label-inside--disabled .nas-input__text,.nas-input__controls--label-inside .nas-input__text{padding-top:0!important;padding-left:16px;padding-right:16px;padding-bottom:9px}.nas-input__controls--label-inside--error .nas-input__icon,.nas-input__controls--label-inside--disabled .nas-input__icon,.nas-input__controls--label-inside .nas-input__icon{top:-11px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8362
8357
|
}
|
|
8363
8358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
8364
8359
|
type: Component,
|
|
8365
|
-
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__input{position:relative}.nas-input__input .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__input input[type=text],.nas-input__input input[type=password]{border:2px solid #
|
|
8360
|
+
args: [{ selector: 'nas-input', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputNotReactive [nasClass]=\"getClass('text')\" [attr.id]=\"inputId\" [attr.type]=\"type\" [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\" [attr.max]=\"max\"\n [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\" [formGroup]=\"nasFormGroup\">\n <div (input)=\"onInput($event)\" [nasClass]=\"getClass('controls', exists(labelInside) && setLabelInsideStyling())\"\n #controls>\n <p [nasClass]=\"getClass('label')\" *ngIf=\"label\">{{ label }}</p>\n <div [nasClass]=\"getClass(setInputStyling())\">\n <input #inputReactive [nasClass]=\"getClass('text')\" [formControlName]=\"nasFormControlName\" [attr.id]=\"inputId\"\n [attr.type]=\"type\" [attr.name]=\"name\" [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\"\n [required]=\"required\" [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\" [attr.minlength]=\"minLength\" [attr.maxlength]=\"maxLength\" [attr.min]=\"min\"\n [attr.max]=\"max\" [attr.pattern]=\"pattern\" (blur)=\"onBlur($event.target.value)\" />\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\">{{ errorMessage }}\n </p>\n </span>\n <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{ info }}</span>\n </label>\n</ng-template>", 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-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__info{display:block;right:12px;margin-bottom:24px}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__message{margin-top:2px;display:flex;gap:8px}.nas-input__message--icon{transform:scale(.9)}.nas-input__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-input__input{position:relative}.nas-input__input .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__input input[type=text],.nas-input__input input[type=password]{border:2px solid #6F6F6F;padding:12px 16px}.nas-input__input input[type=text]:placeholder-shown,.nas-input__input input[type=password]:placeholder-shown{border-color:#6f6f6f}.nas-input__input input[type=text] not:placeholder-shown,.nas-input__input input[type=password] not:placeholder-shown{border-color:#6f6f6f}.nas-input__input--error input[type=text]{background-color:#fff5f3;border:2px solid #E5212D;color:#15273f}.nas-input__input--disabled input[type=text]{background-color:#e9e7e4;border:0;color:#6f6f6f}.nas-input__input--active input[type=text],.nas-input__input--active input[type=password]{border:2px solid #15273F;color:#15273f;background-color:#ebf4ff}.nas-input__input--active input[type=text] ::placeholder,.nas-input__input--active input[type=password] ::placeholder{color:#6f6f6f}.nas-input__input--active input[type=text]:focus-visible,.nas-input__input--active input[type=password]:focus-visible{outline-offset:2px;outline:2px solid #2A5980}.nas-input__input--spaceless input[type=text]{margin-bottom:0}.nas-input__controls{margin-bottom:0;position:relative}.nas-input__controls--label-inside{background-color:#fff;border:2px solid #6F6F6F}.nas-input__controls--label-inside .nas-input__text input[type=text]:-internal-autofill-selected{background-color:transparent!important}.nas-input__controls--label-inside--error{background-color:#fff5f3;border:2px solid #E5212D}.nas-input__controls--label-inside--disabled{background-color:#e9e7e4;border:0}.nas-input__controls--label-inside--active{border:2px solid #15273F;background-color:#ebf4ff}.nas-input__controls--label-inside--error input[type=text],.nas-input__controls--label-inside--error input[type=password] .nas-input__controls--label-inside--disabled input[type=text],.nas-input__controls--label-inside--active input[type=text],.nas-input__controls--label-inside input[type=text],.nas-input__controls--label-inside input[type=password]{border:0}.nas-input__controls--label-inside--error .nas-input__label,.nas-input__controls--label-inside--disabled .nas-input__label,.nas-input__controls--label-inside .nas-input__label{padding-top:12px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside--error .nas-input__text,.nas-input__controls--label-inside--disabled .nas-input__text,.nas-input__controls--label-inside .nas-input__text{padding-top:0!important;padding-left:16px;padding-right:16px;padding-bottom:9px}.nas-input__controls--label-inside--error .nas-input__icon,.nas-input__controls--label-inside--disabled .nas-input__icon,.nas-input__controls--label-inside .nas-input__icon{top:-11px}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"] }]
|
|
8366
8361
|
}], ctorParameters: function () { return []; }, propDecorators: { inputReactive: [{
|
|
8367
8362
|
type: ViewChild,
|
|
8368
8363
|
args: ['inputReactive']
|
|
@@ -8720,11 +8715,11 @@ class PageFooterComponent extends NasComponentBase {
|
|
|
8720
8715
|
window.scrollTo(0, 0);
|
|
8721
8716
|
}
|
|
8722
8717
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PageFooterComponent, selector: "nas-page-footer", inputs: { links: "links", buttonText: "buttonText", hideButton: "hideButton", bottomText: "bottomText" }, usesInheritance: true, ngImport: i0, template: "<footer>\n <hr />\n <nas-grid>\n <nas-col>\n <nas-button *ngIf=\"!hideButton\"\n right\n (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n </nas-button>\n <ul class=\"list list--horizontal\">\n <li *ngFor=\"let link of links\">\n <a *ngIf=\"link.link\"\n href=\"{{link.link}}\">{{link.title}}</a>\n </li>\n </ul>\n </nas-col>\n <nas-col *ngIf=\"bottomText\">\n <div class=\"spacing-top\"\n [innerHTML]=\"bottomText\"></div>\n </nas-col>\n </nas-grid>\n</footer>", 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)}}footer{background:#f1f1f1;position:relative;
|
|
8718
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PageFooterComponent, selector: "nas-page-footer", inputs: { links: "links", buttonText: "buttonText", hideButton: "hideButton", bottomText: "bottomText" }, usesInheritance: true, ngImport: i0, template: "<footer>\n <hr />\n <nas-grid>\n <nas-col>\n <nas-button *ngIf=\"!hideButton\"\n right\n (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n </nas-button>\n <ul class=\"list list--horizontal\">\n <li *ngFor=\"let link of links\">\n <a *ngIf=\"link.link\"\n href=\"{{link.link}}\">{{link.title}}</a>\n </li>\n </ul>\n </nas-col>\n <nas-col *ngIf=\"bottomText\">\n <div class=\"spacing-top\"\n [innerHTML]=\"bottomText\"></div>\n </nas-col>\n </nas-grid>\n</footer>", 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)}}footer{background:#f1f1f1;position:relative;padding:60px 0}footer .list{margin-bottom:24px;margin-left:24px;padding-top:3px}footer .list--horizontal{margin-left:0}footer .list--horizontal>li{display:inline-block;margin-right:24px}footer .spacing-top{margin-top:36px}\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: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange"] }, { kind: "component", type: GridComponent, selector: "nas-grid", inputs: ["right", "center", "stretch", "wide", "tight", "xtight", "xxtight", "spaceless", "mobileview", "nopadding", "nomargin", "colGroup"] }, { kind: "component", type: ColComponent, selector: "nas-col", inputs: ["base", "md", "lg", "xl", "colSize"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8724
8719
|
}
|
|
8725
8720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PageFooterComponent, decorators: [{
|
|
8726
8721
|
type: Component,
|
|
8727
|
-
args: [{ selector: 'nas-page-footer', encapsulation: ViewEncapsulation.None, template: "<footer>\n <hr />\n <nas-grid>\n <nas-col>\n <nas-button *ngIf=\"!hideButton\"\n right\n (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n </nas-button>\n <ul class=\"list list--horizontal\">\n <li *ngFor=\"let link of links\">\n <a *ngIf=\"link.link\"\n href=\"{{link.link}}\">{{link.title}}</a>\n </li>\n </ul>\n </nas-col>\n <nas-col *ngIf=\"bottomText\">\n <div class=\"spacing-top\"\n [innerHTML]=\"bottomText\"></div>\n </nas-col>\n </nas-grid>\n</footer>", 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)}}footer{background:#f1f1f1;position:relative;
|
|
8722
|
+
args: [{ selector: 'nas-page-footer', encapsulation: ViewEncapsulation.None, template: "<footer>\n <hr />\n <nas-grid>\n <nas-col>\n <nas-button *ngIf=\"!hideButton\"\n right\n (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n </nas-button>\n <ul class=\"list list--horizontal\">\n <li *ngFor=\"let link of links\">\n <a *ngIf=\"link.link\"\n href=\"{{link.link}}\">{{link.title}}</a>\n </li>\n </ul>\n </nas-col>\n <nas-col *ngIf=\"bottomText\">\n <div class=\"spacing-top\"\n [innerHTML]=\"bottomText\"></div>\n </nas-col>\n </nas-grid>\n</footer>", 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)}}footer{background:#f1f1f1;position:relative;padding:60px 0}footer .list{margin-bottom:24px;margin-left:24px;padding-top:3px}footer .list--horizontal{margin-left:0}footer .list--horizontal>li{display:inline-block;margin-right:24px}footer .spacing-top{margin-top:36px}\n"] }]
|
|
8728
8723
|
}], ctorParameters: function () { return []; }, propDecorators: { links: [{
|
|
8729
8724
|
type: Input
|
|
8730
8725
|
}], buttonText: [{
|
|
@@ -10951,11 +10946,11 @@ class PhoneNumberComponent extends NasComponentBase {
|
|
|
10951
10946
|
]);
|
|
10952
10947
|
}
|
|
10953
10948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10954
|
-
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", inputLabel: "inputLabel", placeholder: "placeholder", id: "id", type: "type", error: "error", disabled: "disabled", spaceless: "spaceless", 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 <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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\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\" [(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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\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\" [formControlName]=\"nasFormControlName\" />\n </div>\n </ng-template>\n </div>\n <span *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }} </p>\n </span>\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-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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__input-label{display:flex;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin:-28px 0 6px 12px}@media (min-width: 640px){.nas-phone-number__input-label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__input-label~.nas-phone-number__icon{top:43px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;background-color:#fff;border:2px solid #15273F}.nas-phone-number__number{flex:1}.nas-phone-number__text{width:100%;height:52px;border:2px solid #15273F;background-color:#fff;margin-left:12px}.nas-phone-number__text[disabled]{background-color:#e9e7e4;border:0}@media (min-width: 640px){.nas-phone-number__text{width:96.5%}}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number__message{margin-top:2px;display:flex;gap:8px}.nas-phone-number__message--icon{transform:scale(.9)}.nas-phone-number__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-phone-number--error .nas-phone-number__text{background-color:#fff5f3;border:2px solid #E5212D}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--spaceless{margin-bottom:0}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;background-color:#fff;line-height:24px;width:100%!important;border:2px solid #15273F;height:52px;margin-bottom:5px}@media (min-width: 640px){:host ::ng-deep .nas-select select{width:131px!important;margin-bottom:0}}:host ::ng-deep .nas-input__input input{margin-left:12px}:host ::ng-deep .nas-input__input--error input{margin-left:12px}:host ::ng-deep .nas-input__message{margin-left:12px}\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: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: 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", "keyDownEvent"] }, { kind: "component", type: OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: OptgroupComponent, selector: "nas-optgroup", inputs: ["label"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
10949
|
+
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", inputLabel: "inputLabel", placeholder: "placeholder", id: "id", type: "type", error: "error", disabled: "disabled", spaceless: "spaceless", 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 <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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\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 *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\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-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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__input-label{display:flex;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin:-28px 0 6px 12px}@media (min-width: 640px){.nas-phone-number__input-label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__input-label~.nas-phone-number__icon{top:43px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;background-color:#fff;border:2px solid #15273F}.nas-phone-number__number{flex:1}.nas-phone-number__text{width:100%;height:52px;border:2px solid #15273F;background-color:#fff}.nas-phone-number__text[disabled]{background-color:#e9e7e4;border:0}@media (min-width: 640px){.nas-phone-number__text{width:96.5%;margin-left:12px}}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number__message{margin-top:2px;display:flex;gap:8px}.nas-phone-number__message--icon{transform:scale(.9)}.nas-phone-number__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-phone-number--error .nas-phone-number__text{background-color:#fff5f3;border:2px solid #E5212D}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--spaceless{margin-bottom:0}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;background-color:#fff;line-height:24px;border:2px solid #15273F;height:52px;margin-bottom:5px}@media (min-width: 640px){:host ::ng-deep .nas-select select{margin-bottom:0}}\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: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: 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", "keyDownEvent"] }, { kind: "component", type: OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: OptgroupComponent, selector: "nas-optgroup", inputs: ["label"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
10955
10950
|
}
|
|
10956
10951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, decorators: [{
|
|
10957
10952
|
type: Component,
|
|
10958
|
-
args: [{ selector: 'nas-phone-number', template: "<div [nasClass]=\"mainClass()\">\n <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\n
|
|
10953
|
+
args: [{ selector: 'nas-phone-number', template: "<div [nasClass]=\"mainClass()\">\n <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\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 <label [nasClass]=\"getClass('input-label')\" *ngIf=\"inputLabel\" [attr.for]=\"id\">{{inputLabel}}</label>\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 *ngIf=\"exists(error)\" [nasClass]=\"getClass('message')\">\n <div [nasClass]=\"getClass('message--icon')\">\n <nas-icon type=\"negative\"></nas-icon>\n </div>\n <p [nasClass]=\"getClass('message--text')\" [id]=\"errorId\" *ngIf=\"exists(error) && errorMessage\"> {{ errorMessage }}\n </p>\n </span>\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-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,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__input-label{display:flex;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin:-28px 0 6px 12px}@media (min-width: 640px){.nas-phone-number__input-label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__input-label~.nas-phone-number__icon{top:43px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;background-color:#fff;border:2px solid #15273F}.nas-phone-number__number{flex:1}.nas-phone-number__text{width:100%;height:52px;border:2px solid #15273F;background-color:#fff}.nas-phone-number__text[disabled]{background-color:#e9e7e4;border:0}@media (min-width: 640px){.nas-phone-number__text{width:96.5%;margin-left:12px}}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number__message{margin-top:2px;display:flex;gap:8px}.nas-phone-number__message--icon{transform:scale(.9)}.nas-phone-number__message--text{color:#b12a0b;font-size:14px;font-weight:400;line-height:20px;margin-top:3px}.nas-phone-number--error .nas-phone-number__text{background-color:#fff5f3;border:2px solid #E5212D}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#b12a0b}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--spaceless{margin-bottom:0}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;background-color:#fff;line-height:24px;border:2px solid #15273F;height:52px;margin-bottom:5px}@media (min-width: 640px){:host ::ng-deep .nas-select select{margin-bottom:0}}\n"] }]
|
|
10959
10954
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
10960
10955
|
type: Input
|
|
10961
10956
|
}], preferredOptions: [{
|