@norwegian/core-components 6.54.1 → 6.54.2
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/airport-select-new/airport-select-dropdown/airport-select-dropdown.component.mjs +3 -9
- package/esm2022/lib/components/airport-select-new/airport-select-new.component.mjs +3 -6
- package/esm2022/lib/components/alert/alert.component.mjs +2 -2
- package/esm2022/lib/components/autocomplete-new/autocomplete-new.component.mjs +2 -2
- package/esm2022/lib/components/checkbox-new/checkbox-new.component.mjs +2 -2
- package/esm2022/lib/components/datepicker-combo-new/datepicker-combo-new.component.mjs +2 -2
- package/esm2022/lib/components/datepicker-new/calendar-new/calendar-new.component.mjs +2 -2
- package/esm2022/lib/components/filter-new/filter-new.component.mjs +3 -5
- package/esm2022/lib/components/micro-button/micro-button.component.mjs +2 -2
- package/esm2022/lib/components/page-header/wallet/wallet.component.mjs +2 -2
- package/esm2022/lib/components/passenger-select-new/passenger-select-new.component.mjs +2 -2
- package/esm2022/lib/components/radio-new/radio-new.component.mjs +2 -2
- package/esm2022/lib/components/slide-toggle-new/slide-toggle-new.component.mjs +2 -2
- package/esm2022/lib/components/spinner/spinner.component.mjs +2 -2
- package/fesm2022/norwegian-core-components.mjs +28 -39
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/lib/components/airport-select-new/airport-select-dropdown/airport-select-dropdown.component.d.ts +0 -1
- package/lib/components/airport-select-new/airport-select-new.component.d.ts +0 -1
- package/lib/components/filter-new/filter-new.component.d.ts +1 -7
- package/package.json +1 -1
|
@@ -64,11 +64,11 @@ export class MicroButtonComponent extends NasComponentBase {
|
|
|
64
64
|
this.clickChange.emit(event);
|
|
65
65
|
}
|
|
66
66
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MicroButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
67
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: MicroButtonComponent, selector: "nas-micro-button", inputs: { icon: "icon", iconType: "iconType", href: "href", target: "target", primary: "primary", secondary: "secondary", white: "white", disabled: "disabled", iconLeft: "iconLeft", trackingvalue: "trackingvalue", ariaLabel: "ariaLabel", tabindex: "tabindex", type: "type" }, outputs: { clickChange: "clickChange" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</div>\n\n<ng-template #buttonTemplate>\n <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </button>\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-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e3e3e3}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: MicroButtonComponent, selector: "nas-micro-button", inputs: { icon: "icon", iconType: "iconType", href: "href", target: "target", primary: "primary", secondary: "secondary", white: "white", disabled: "disabled", iconLeft: "iconLeft", trackingvalue: "trackingvalue", ariaLabel: "ariaLabel", tabindex: "tabindex", type: "type" }, outputs: { clickChange: "clickChange" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</div>\n\n<ng-template #buttonTemplate>\n <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </button>\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-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e3e3e3}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #15273f}.nas-micro-button--secondary:hover,.nas-micro-button--secondary:focus{color:#0a2033;background-color:transparent}.nas-micro-button--secondary:active{color:#071622;background:transparent}.nas-micro-button--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button--secondary:hover{border-color:#0a2033}.nas-micro-button--secondary:active{border-color:#071622}.nas-micro-button--secondary[disabled]{border:2px solid #e3e3e3}.nas-micro-button--white{color:#15273f;background-color:#fff}.nas-micro-button--white:hover,.nas-micro-button--white:focus{color:#15273f;background-color:#f9f9f9}.nas-micro-button--white:active{color:#15273f;background:#EBF4FF}.nas-micro-button--white:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button__content{display:flex;justify-content:center;gap:4px}.nas-micro-button__content--reverse{flex-direction:row-reverse}.nas-micro-button__icon{transform:scale(.75)}.nas-micro-button ::ng-deep .nas-icon-small{margin:-3px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
68
68
|
}
|
|
69
69
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MicroButtonComponent, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
|
-
args: [{ selector: 'nas-micro-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</div>\n\n<ng-template #buttonTemplate>\n <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </button>\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-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e3e3e3}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #
|
|
71
|
+
args: [{ selector: 'nas-micro-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</div>\n\n<ng-template #buttonTemplate>\n <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </button>\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-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e3e3e3}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #15273f}.nas-micro-button--secondary:hover,.nas-micro-button--secondary:focus{color:#0a2033;background-color:transparent}.nas-micro-button--secondary:active{color:#071622;background:transparent}.nas-micro-button--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button--secondary:hover{border-color:#0a2033}.nas-micro-button--secondary:active{border-color:#071622}.nas-micro-button--secondary[disabled]{border:2px solid #e3e3e3}.nas-micro-button--white{color:#15273f;background-color:#fff}.nas-micro-button--white:hover,.nas-micro-button--white:focus{color:#15273f;background-color:#f9f9f9}.nas-micro-button--white:active{color:#15273f;background:#EBF4FF}.nas-micro-button--white:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-micro-button__content{display:flex;justify-content:center;gap:4px}.nas-micro-button__content--reverse{flex-direction:row-reverse}.nas-micro-button__icon{transform:scale(.75)}.nas-micro-button ::ng-deep .nas-icon-small{margin:-3px 0 0}\n"] }]
|
|
72
72
|
}], ctorParameters: function () { return []; }, propDecorators: { icon: [{
|
|
73
73
|
type: Input
|
|
74
74
|
}], iconType: [{
|
|
@@ -43,11 +43,11 @@ export class WalletComponent extends NasComponentBase {
|
|
|
43
43
|
return window.location.href.includes(this.walletModel?.urls?.myTravelsUrl?.href) ? true : false;
|
|
44
44
|
}
|
|
45
45
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: WalletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: WalletComponent, selector: "nas-wallet", inputs: { walletModel: "walletModel" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClass('')\">\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('backdrop')\" (click)=\"onClickToggleContent()\"></div>\n <div [nasClass]=\"getClass('header')\">\n <div *ngIf=\"walletModel?.rewardNumber\" [nasClass]=\"getClass('header-points')\">\n <div *ngIf=\"pointsBalance >= 0 && (walletModel?.cashpointsBalance != null || walletModel?.spennBalance != null); else showTag\">\n <p>{{pointsBalance}}</p>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag--header')\" neutral [text]=\"'--'\"></nas-tag>\n </ng-template>\n <div *ngIf=\"!spennAndCashpointUnavailable\" [nasClass]=\"getClass('points-logo', icon)\">\n <nas-icon [nasClass]=\"getClass('icon')\" [type]=\"icon\"></nas-icon>\n </div>\n </div>\n </div>\n <button [nasClass]=\"getClass('dropdown')\" (click)=\"onClickToggleContent()\">\n <div [nasClass]=\"getClass('dropdown-icon', this.showContent && 'rotate')\">\n <nas-icon [icon]=\"'arrow-right'\" [type]=\"'chevron-down'\"></nas-icon>\n </div>\n </button>\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('content')\">\n <div *ngIf=\"walletModel?.rewardNumber\">\n <div [nasClass]=\"getClass('title')\">{{walletModel?.texts?.rewardPoints}}</div>\n <div *ngIf=\"!showNotAvailableMessage; else showAlert\">\n <div *ngIf=\"walletModel?.spennEnabled\" [nasClass]=\"getClass('spenn')\">\n <nas-icon [type]=\"'spenn'\"></nas-icon>\n <div *ngIf=\"walletModel?.spennBalance != null; else showTag\">\n <p>{{walletModel?.spennBalance}}</p>\n </div>\n </div>\n <div [nasClass]=\"getClass('cashpoints')\">\n <nas-icon [type]=\"'cashpoints-logo'\"></nas-icon>\n <div *ngIf=\"walletModel?.cashpointsBalance != null; else showTag\">\n <p>{{walletModel?.cashpointsBalance}}</p> \n </div>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag')\" neutral [text]=\"walletModel?.texts?.notAvailable\"></nas-tag>\n </ng-template>\n </div>\n <ng-template #showAlert>\n <div [nasClass]=\"getClass('info-box')\">\n <nas-alert neutral [text]=\"walletModel?.texts?.notAvailableMessage\"></nas-alert>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('info')\">{{pointsDescription}}</div>\n <div [nasClass]=\"getClass('reward')\">{{walletModel?.texts?.rewardNumber}} {{walletModel?.rewardNumber}}</div>\n </div>\n <div [nasClass]=\"getClass('button')\">\n <nas-button-new *ngIf=\"!myTravelsPage() && walletModel?.urls?.myTravelsUrl?.href\" \n light\n block\n [href]=\"walletModel?.urls?.myTravelsUrl?.href\" \n [nasClass]=\"getClass('button--mytravel')\">\n {{walletModel?.urls?.myTravelsUrl.text}}\n </nas-button-new>\n <nas-button-new *ngIf=\"walletModel?.urls?.signOutUrl?.href\" \n buttonlink \n block \n [href]=\"walletModel?.urls?.signOutUrl?.href\">\n {{walletModel?.urls?.signOutUrl?.text}}\n </nas-button-new>\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-wallet{display:inline-flex;position:unset;background-color:#fff}@media (min-width: 640px){.nas-wallet{position:relative;margin-left:16px}}.nas-wallet__header{display:flex;align-items:center}.nas-wallet__header-points,.nas-wallet__icon{display:none}@media (min-width: 640px){.nas-wallet__header-points,.nas-wallet__icon{display:flex}}.nas-wallet__points-logo{padding-top:0}.nas-wallet__points-logo--spenn{padding-top:5px}.nas-wallet__profile-name{padding-right:24px;color:#15273f}.nas-wallet__dropdown{padding:0 12px 0 16px}@media (min-width: 640px){.nas-wallet__dropdown{padding:0 16px}}.nas-wallet__dropdown-icon{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-wallet__dropdown-icon--rotate{transform:rotate(180deg)}.nas-wallet__content{z-index:50;background:linear-gradient(180deg,#FFF 0%,#F9F9F9 100%);box-shadow:0 0 14px #00325126;border-top:2px solid #
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: WalletComponent, selector: "nas-wallet", inputs: { walletModel: "walletModel" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClass('')\">\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('backdrop')\" (click)=\"onClickToggleContent()\"></div>\n <div [nasClass]=\"getClass('header')\">\n <div *ngIf=\"walletModel?.rewardNumber\" [nasClass]=\"getClass('header-points')\">\n <div *ngIf=\"pointsBalance >= 0 && (walletModel?.cashpointsBalance != null || walletModel?.spennBalance != null); else showTag\">\n <p>{{pointsBalance}}</p>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag--header')\" neutral [text]=\"'--'\"></nas-tag>\n </ng-template>\n <div *ngIf=\"!spennAndCashpointUnavailable\" [nasClass]=\"getClass('points-logo', icon)\">\n <nas-icon [nasClass]=\"getClass('icon')\" [type]=\"icon\"></nas-icon>\n </div>\n </div>\n </div>\n <button [nasClass]=\"getClass('dropdown')\" (click)=\"onClickToggleContent()\">\n <div [nasClass]=\"getClass('dropdown-icon', this.showContent && 'rotate')\">\n <nas-icon [icon]=\"'arrow-right'\" [type]=\"'chevron-down'\"></nas-icon>\n </div>\n </button>\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('content')\">\n <div *ngIf=\"walletModel?.rewardNumber\">\n <div [nasClass]=\"getClass('title')\">{{walletModel?.texts?.rewardPoints}}</div>\n <div *ngIf=\"!showNotAvailableMessage; else showAlert\">\n <div *ngIf=\"walletModel?.spennEnabled\" [nasClass]=\"getClass('spenn')\">\n <nas-icon [type]=\"'spenn'\"></nas-icon>\n <div *ngIf=\"walletModel?.spennBalance != null; else showTag\">\n <p>{{walletModel?.spennBalance}}</p>\n </div>\n </div>\n <div [nasClass]=\"getClass('cashpoints')\">\n <nas-icon [type]=\"'cashpoints-logo'\"></nas-icon>\n <div *ngIf=\"walletModel?.cashpointsBalance != null; else showTag\">\n <p>{{walletModel?.cashpointsBalance}}</p> \n </div>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag')\" neutral [text]=\"walletModel?.texts?.notAvailable\"></nas-tag>\n </ng-template>\n </div>\n <ng-template #showAlert>\n <div [nasClass]=\"getClass('info-box')\">\n <nas-alert neutral [text]=\"walletModel?.texts?.notAvailableMessage\"></nas-alert>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('info')\">{{pointsDescription}}</div>\n <div [nasClass]=\"getClass('reward')\">{{walletModel?.texts?.rewardNumber}} {{walletModel?.rewardNumber}}</div>\n </div>\n <div [nasClass]=\"getClass('button')\">\n <nas-button-new *ngIf=\"!myTravelsPage() && walletModel?.urls?.myTravelsUrl?.href\" \n light\n block\n [href]=\"walletModel?.urls?.myTravelsUrl?.href\" \n [nasClass]=\"getClass('button--mytravel')\">\n {{walletModel?.urls?.myTravelsUrl.text}}\n </nas-button-new>\n <nas-button-new *ngIf=\"walletModel?.urls?.signOutUrl?.href\" \n buttonlink \n block \n [href]=\"walletModel?.urls?.signOutUrl?.href\">\n {{walletModel?.urls?.signOutUrl?.text}}\n </nas-button-new>\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-wallet{display:inline-flex;position:unset;background-color:#fff}@media (min-width: 640px){.nas-wallet{position:relative;margin-left:16px}}.nas-wallet__header{display:flex;align-items:center}.nas-wallet__header-points,.nas-wallet__icon{display:none}@media (min-width: 640px){.nas-wallet__header-points,.nas-wallet__icon{display:flex}}.nas-wallet__points-logo{padding-top:0}.nas-wallet__points-logo--spenn{padding-top:5px}.nas-wallet__profile-name{padding-right:24px;color:#15273f}.nas-wallet__dropdown{padding:0 12px 0 16px}@media (min-width: 640px){.nas-wallet__dropdown{padding:0 16px}}.nas-wallet__dropdown-icon{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-wallet__dropdown-icon--rotate{transform:rotate(180deg)}.nas-wallet__content{z-index:50;background:linear-gradient(180deg,#FFF 0%,#F9F9F9 100%);box-shadow:0 0 14px #00325126;border-top:2px solid #15273f;position:absolute;padding:16px;top:70px;left:0}@media (min-width: 640px){.nas-wallet__content{width:334px;right:0;top:48px;left:unset}}.nas-wallet__profile-user{display:none;font-size:16px;color:#15273f;padding-bottom:16px}@media (min-width: 640px){.nas-wallet__profile-user{display:block}}.nas-wallet__profile-icon{transform:scale(.75)}.nas-wallet__title{font-weight:700;font-size:18px;line-height:24px;color:#15273f;padding-bottom:16px}.nas-wallet__spenn{display:flex;justify-content:space-between}.nas-wallet__cashpoints{display:flex;justify-content:space-between;padding-bottom:16px}.nas-wallet__info{padding-bottom:12px;border-bottom:solid 1px #c3c3c3}.nas-wallet__reward{padding:12px 0;text-align:center}.nas-wallet__info-box{margin-bottom:12px}.nas-wallet__button{display:flex;flex-direction:column}.nas-wallet__button--mytravel{margin-bottom:16px}.nas-wallet__tag--header{margin-right:12px}.nas-wallet__tag--wallet{padding-bottom:6px}.nas-wallet__backdrop{z-index:10;display:block;position:fixed;top:70px;left:0;width:100%;height:100%;color:transparent;background:var(--Color-UI-Overlay-40, rgba(21, 39, 63, .4));opacity:.2;animation:fade-in .3s ease-out both}.nas-wallet p{margin:0;padding-right:8px;color:#15273f;font-weight:700;font-size:21px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i4.TagComponent, selector: "nas-tag", inputs: ["info", "warning", "error", "success", "neutral", "text", "icon", "iconType"] }, { kind: "component", type: i5.ButtonNewComponent, selector: "nas-button-new", 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: i6.AlertComponent, selector: "nas-alert", inputs: ["timestamp", "title", "info", "warning", "error", "success", "neutral", "text", "show", "removable", "removeIcon", "trustTextHtml", "allowAutoScroll", "server", "correlation", "alert"], outputs: ["showChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
47
47
|
}
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: WalletComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
|
-
args: [{ selector: 'nas-wallet', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClass('')\">\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('backdrop')\" (click)=\"onClickToggleContent()\"></div>\n <div [nasClass]=\"getClass('header')\">\n <div *ngIf=\"walletModel?.rewardNumber\" [nasClass]=\"getClass('header-points')\">\n <div *ngIf=\"pointsBalance >= 0 && (walletModel?.cashpointsBalance != null || walletModel?.spennBalance != null); else showTag\">\n <p>{{pointsBalance}}</p>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag--header')\" neutral [text]=\"'--'\"></nas-tag>\n </ng-template>\n <div *ngIf=\"!spennAndCashpointUnavailable\" [nasClass]=\"getClass('points-logo', icon)\">\n <nas-icon [nasClass]=\"getClass('icon')\" [type]=\"icon\"></nas-icon>\n </div>\n </div>\n </div>\n <button [nasClass]=\"getClass('dropdown')\" (click)=\"onClickToggleContent()\">\n <div [nasClass]=\"getClass('dropdown-icon', this.showContent && 'rotate')\">\n <nas-icon [icon]=\"'arrow-right'\" [type]=\"'chevron-down'\"></nas-icon>\n </div>\n </button>\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('content')\">\n <div *ngIf=\"walletModel?.rewardNumber\">\n <div [nasClass]=\"getClass('title')\">{{walletModel?.texts?.rewardPoints}}</div>\n <div *ngIf=\"!showNotAvailableMessage; else showAlert\">\n <div *ngIf=\"walletModel?.spennEnabled\" [nasClass]=\"getClass('spenn')\">\n <nas-icon [type]=\"'spenn'\"></nas-icon>\n <div *ngIf=\"walletModel?.spennBalance != null; else showTag\">\n <p>{{walletModel?.spennBalance}}</p>\n </div>\n </div>\n <div [nasClass]=\"getClass('cashpoints')\">\n <nas-icon [type]=\"'cashpoints-logo'\"></nas-icon>\n <div *ngIf=\"walletModel?.cashpointsBalance != null; else showTag\">\n <p>{{walletModel?.cashpointsBalance}}</p> \n </div>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag')\" neutral [text]=\"walletModel?.texts?.notAvailable\"></nas-tag>\n </ng-template>\n </div>\n <ng-template #showAlert>\n <div [nasClass]=\"getClass('info-box')\">\n <nas-alert neutral [text]=\"walletModel?.texts?.notAvailableMessage\"></nas-alert>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('info')\">{{pointsDescription}}</div>\n <div [nasClass]=\"getClass('reward')\">{{walletModel?.texts?.rewardNumber}} {{walletModel?.rewardNumber}}</div>\n </div>\n <div [nasClass]=\"getClass('button')\">\n <nas-button-new *ngIf=\"!myTravelsPage() && walletModel?.urls?.myTravelsUrl?.href\" \n light\n block\n [href]=\"walletModel?.urls?.myTravelsUrl?.href\" \n [nasClass]=\"getClass('button--mytravel')\">\n {{walletModel?.urls?.myTravelsUrl.text}}\n </nas-button-new>\n <nas-button-new *ngIf=\"walletModel?.urls?.signOutUrl?.href\" \n buttonlink \n block \n [href]=\"walletModel?.urls?.signOutUrl?.href\">\n {{walletModel?.urls?.signOutUrl?.text}}\n </nas-button-new>\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-wallet{display:inline-flex;position:unset;background-color:#fff}@media (min-width: 640px){.nas-wallet{position:relative;margin-left:16px}}.nas-wallet__header{display:flex;align-items:center}.nas-wallet__header-points,.nas-wallet__icon{display:none}@media (min-width: 640px){.nas-wallet__header-points,.nas-wallet__icon{display:flex}}.nas-wallet__points-logo{padding-top:0}.nas-wallet__points-logo--spenn{padding-top:5px}.nas-wallet__profile-name{padding-right:24px;color:#15273f}.nas-wallet__dropdown{padding:0 12px 0 16px}@media (min-width: 640px){.nas-wallet__dropdown{padding:0 16px}}.nas-wallet__dropdown-icon{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-wallet__dropdown-icon--rotate{transform:rotate(180deg)}.nas-wallet__content{z-index:50;background:linear-gradient(180deg,#FFF 0%,#F9F9F9 100%);box-shadow:0 0 14px #00325126;border-top:2px solid #
|
|
50
|
+
args: [{ selector: 'nas-wallet', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClass('')\">\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('backdrop')\" (click)=\"onClickToggleContent()\"></div>\n <div [nasClass]=\"getClass('header')\">\n <div *ngIf=\"walletModel?.rewardNumber\" [nasClass]=\"getClass('header-points')\">\n <div *ngIf=\"pointsBalance >= 0 && (walletModel?.cashpointsBalance != null || walletModel?.spennBalance != null); else showTag\">\n <p>{{pointsBalance}}</p>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag--header')\" neutral [text]=\"'--'\"></nas-tag>\n </ng-template>\n <div *ngIf=\"!spennAndCashpointUnavailable\" [nasClass]=\"getClass('points-logo', icon)\">\n <nas-icon [nasClass]=\"getClass('icon')\" [type]=\"icon\"></nas-icon>\n </div>\n </div>\n </div>\n <button [nasClass]=\"getClass('dropdown')\" (click)=\"onClickToggleContent()\">\n <div [nasClass]=\"getClass('dropdown-icon', this.showContent && 'rotate')\">\n <nas-icon [icon]=\"'arrow-right'\" [type]=\"'chevron-down'\"></nas-icon>\n </div>\n </button>\n <div *ngIf=\"this.showContent\" [nasClass]=\"getClass('content')\">\n <div *ngIf=\"walletModel?.rewardNumber\">\n <div [nasClass]=\"getClass('title')\">{{walletModel?.texts?.rewardPoints}}</div>\n <div *ngIf=\"!showNotAvailableMessage; else showAlert\">\n <div *ngIf=\"walletModel?.spennEnabled\" [nasClass]=\"getClass('spenn')\">\n <nas-icon [type]=\"'spenn'\"></nas-icon>\n <div *ngIf=\"walletModel?.spennBalance != null; else showTag\">\n <p>{{walletModel?.spennBalance}}</p>\n </div>\n </div>\n <div [nasClass]=\"getClass('cashpoints')\">\n <nas-icon [type]=\"'cashpoints-logo'\"></nas-icon>\n <div *ngIf=\"walletModel?.cashpointsBalance != null; else showTag\">\n <p>{{walletModel?.cashpointsBalance}}</p> \n </div>\n </div>\n <ng-template #showTag>\n <nas-tag [nasClass]=\"getClass('tag')\" neutral [text]=\"walletModel?.texts?.notAvailable\"></nas-tag>\n </ng-template>\n </div>\n <ng-template #showAlert>\n <div [nasClass]=\"getClass('info-box')\">\n <nas-alert neutral [text]=\"walletModel?.texts?.notAvailableMessage\"></nas-alert>\n </div>\n </ng-template>\n <div [nasClass]=\"getClass('info')\">{{pointsDescription}}</div>\n <div [nasClass]=\"getClass('reward')\">{{walletModel?.texts?.rewardNumber}} {{walletModel?.rewardNumber}}</div>\n </div>\n <div [nasClass]=\"getClass('button')\">\n <nas-button-new *ngIf=\"!myTravelsPage() && walletModel?.urls?.myTravelsUrl?.href\" \n light\n block\n [href]=\"walletModel?.urls?.myTravelsUrl?.href\" \n [nasClass]=\"getClass('button--mytravel')\">\n {{walletModel?.urls?.myTravelsUrl.text}}\n </nas-button-new>\n <nas-button-new *ngIf=\"walletModel?.urls?.signOutUrl?.href\" \n buttonlink \n block \n [href]=\"walletModel?.urls?.signOutUrl?.href\">\n {{walletModel?.urls?.signOutUrl?.text}}\n </nas-button-new>\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-wallet{display:inline-flex;position:unset;background-color:#fff}@media (min-width: 640px){.nas-wallet{position:relative;margin-left:16px}}.nas-wallet__header{display:flex;align-items:center}.nas-wallet__header-points,.nas-wallet__icon{display:none}@media (min-width: 640px){.nas-wallet__header-points,.nas-wallet__icon{display:flex}}.nas-wallet__points-logo{padding-top:0}.nas-wallet__points-logo--spenn{padding-top:5px}.nas-wallet__profile-name{padding-right:24px;color:#15273f}.nas-wallet__dropdown{padding:0 12px 0 16px}@media (min-width: 640px){.nas-wallet__dropdown{padding:0 16px}}.nas-wallet__dropdown-icon{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-wallet__dropdown-icon--rotate{transform:rotate(180deg)}.nas-wallet__content{z-index:50;background:linear-gradient(180deg,#FFF 0%,#F9F9F9 100%);box-shadow:0 0 14px #00325126;border-top:2px solid #15273f;position:absolute;padding:16px;top:70px;left:0}@media (min-width: 640px){.nas-wallet__content{width:334px;right:0;top:48px;left:unset}}.nas-wallet__profile-user{display:none;font-size:16px;color:#15273f;padding-bottom:16px}@media (min-width: 640px){.nas-wallet__profile-user{display:block}}.nas-wallet__profile-icon{transform:scale(.75)}.nas-wallet__title{font-weight:700;font-size:18px;line-height:24px;color:#15273f;padding-bottom:16px}.nas-wallet__spenn{display:flex;justify-content:space-between}.nas-wallet__cashpoints{display:flex;justify-content:space-between;padding-bottom:16px}.nas-wallet__info{padding-bottom:12px;border-bottom:solid 1px #c3c3c3}.nas-wallet__reward{padding:12px 0;text-align:center}.nas-wallet__info-box{margin-bottom:12px}.nas-wallet__button{display:flex;flex-direction:column}.nas-wallet__button--mytravel{margin-bottom:16px}.nas-wallet__tag--header{margin-right:12px}.nas-wallet__tag--wallet{padding-bottom:6px}.nas-wallet__backdrop{z-index:10;display:block;position:fixed;top:70px;left:0;width:100%;height:100%;color:transparent;background:var(--Color-UI-Overlay-40, rgba(21, 39, 63, .4));opacity:.2;animation:fade-in .3s ease-out both}.nas-wallet p{margin:0;padding-right:8px;color:#15273f;font-weight:700;font-size:21px}\n"] }]
|
|
51
51
|
}], ctorParameters: function () { return []; }, propDecorators: { walletModel: [{
|
|
52
52
|
type: Input
|
|
53
53
|
}] } });
|
|
@@ -369,11 +369,11 @@ export class PassengerSelectNewComponent extends NasComponentBase {
|
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
371
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PassengerSelectNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
372
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PassengerSelectNewComponent, selector: "nas-passenger-select-new", inputs: { passengers: "passengers", maxPaxCount: "maxPaxCount", minAdultCount: "minAdultCount", groupBookingLimit: "groupBookingLimit", title: "title", adultsLabel: "adultsLabel", childrenLabel: "childrenLabel", infantsLabel: "infantsLabel", youthsLabel: "youthsLabel", youngAdultsLabel: "youngAdultsLabel", groupBookingLabel: "groupBookingLabel", nasFormGroup: "nasFormGroup", nasFormControlGroupBooking: "nasFormControlGroupBooking", ariaLabelSubtract: "ariaLabelSubtract", ariaLabelAdd: "ariaLabelAdd" }, outputs: { passengersChange: "passengersChange", focusOnNext: "focusOnNext", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "numberFields", predicate: NumberFieldNewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title\"\n [nasClass]=\"getClass('title', isGroupBooking && 'group-booking')\">{{title}}<ng-container *ngIf=\"isGroupBooking\">:\n <div>{{groupBookingLabel}}</div>\n </ng-container>\n</h2>\n<ul [nasClass]=\"getClass('list')\">\n <li *ngFor=\"let item of passengers; index as count\"\n [nasClass]=\"getClass('list-item')\">\n <label [nasClass]=\"getClass('label')\"\n [attr.aria-label]=\"getLabel(item.type)\">{{getLabel(item.type)}}</label>\n <ng-container *ngIf=\"!item.formGroup || !item.formControlName; else reactiveForm\">\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [number]=\"item.count\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (numberChange)=\"setPassengersCount(item, $event)\"\n (keydown)=\"keyDown($event, count)\"></nas-number-field-new>\n </ng-container>\n <ng-template #reactiveForm>\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [nasFormGroup]=\"item.formGroup\"\n [nasFormControlName]=\"item.formControlName\"\n [number]=\"item.formGroup?.get(item.formControlName)?.value\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (keydown)=\"keyDown($event, count)\"\n (numberChange)=\"setPassengersCount(item, $event)\"></nas-number-field-new>\n </ng-template>\n </li>\n</ul>", 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-passenger-select-new{position:relative;display:flex;flex-wrap:wrap;margin:16px 0 24px}.nas-passenger-select-new__list{
|
|
372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PassengerSelectNewComponent, selector: "nas-passenger-select-new", inputs: { passengers: "passengers", maxPaxCount: "maxPaxCount", minAdultCount: "minAdultCount", groupBookingLimit: "groupBookingLimit", title: "title", adultsLabel: "adultsLabel", childrenLabel: "childrenLabel", infantsLabel: "infantsLabel", youthsLabel: "youthsLabel", youngAdultsLabel: "youngAdultsLabel", groupBookingLabel: "groupBookingLabel", nasFormGroup: "nasFormGroup", nasFormControlGroupBooking: "nasFormControlGroupBooking", ariaLabelSubtract: "ariaLabelSubtract", ariaLabelAdd: "ariaLabelAdd" }, outputs: { passengersChange: "passengersChange", focusOnNext: "focusOnNext", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "numberFields", predicate: NumberFieldNewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h2 *ngIf=\"title\"\n [nasClass]=\"getClass('title', isGroupBooking && 'group-booking')\">{{title}}<ng-container *ngIf=\"isGroupBooking\">:\n <div>{{groupBookingLabel}}</div>\n </ng-container>\n</h2>\n<ul [nasClass]=\"getClass('list')\">\n <li *ngFor=\"let item of passengers; index as count\"\n [nasClass]=\"getClass('list-item')\">\n <label [nasClass]=\"getClass('label')\"\n [attr.aria-label]=\"getLabel(item.type)\">{{getLabel(item.type)}}</label>\n <ng-container *ngIf=\"!item.formGroup || !item.formControlName; else reactiveForm\">\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [number]=\"item.count\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (numberChange)=\"setPassengersCount(item, $event)\"\n (keydown)=\"keyDown($event, count)\"></nas-number-field-new>\n </ng-container>\n <ng-template #reactiveForm>\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [nasFormGroup]=\"item.formGroup\"\n [nasFormControlName]=\"item.formControlName\"\n [number]=\"item.formGroup?.get(item.formControlName)?.value\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (keydown)=\"keyDown($event, count)\"\n (numberChange)=\"setPassengersCount(item, $event)\"></nas-number-field-new>\n </ng-template>\n </li>\n</ul>", 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-passenger-select-new{position:relative;display:flex;flex-wrap:wrap;margin:16px 0 24px}.nas-passenger-select-new__list{position:relative;background-color:#fff;border-left:2px solid #15273f;border-bottom:2px solid #15273f;border-right:2px solid #15273f}.nas-passenger-select-new__list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0}.nas-passenger-select-new__list-item:not(:last-child){padding:6px 0 9px}.nas-passenger-select-new__label{flex-grow:2;margin:0 6px 0 0}.nas-passenger-select-new__title{font-size:18px;line-height:26px;display:block;min-width:124px}.nas-passenger-select-new__title--small{font-size:16px;line-height:26px;margin:0}.nas-passenger-select-new__title--group-booking{animation:pop-in-from-top .5s linear both}.nas-passenger-select-new__actions{display:flex}.nas-passenger-select-new__action{padding:12px;width:100%;background-color:#fff}.nas-passenger-select-new__action:hover,.nas-passenger-select-new__action:focus{background-color:#e3e3e3}.nas-passenger-select-new__action--active,.nas-passenger-select-new__action--active:hover,.nas-passenger-select-new__action--active:focus{color:#fff;background-color:#15273f}.nas-passenger-select-new__icon{margin-bottom:9px}.nas-passenger-select-new__dropdown{margin-right:9px;margin-bottom:6px}@media (min-width: 640px){.nas-passenger-select-new__dropdown{margin-right:9px;margin-bottom:0}.nas-passenger-select-new__dropdown:not(:first-child){margin-left:9px}}.nas-passenger-select-new__transit-icon{position:relative;display:flex;justify-content:center;width:calc(100% - 48px);margin:12px auto;height:24px;background-color:inherit}.nas-passenger-select-new__transit-icon:before{content:\"\";position:absolute;height:2px;left:0;width:100%;top:calc(50% - 1px);background-color:currentColor}.nas-passenger-select-new__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)}.nas-passenger-select-new__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){.nas-passenger-select-new--combined{margin:0}.nas-passenger-select-new--combined:after{content:\"\";position:absolute;bottom:-3px;left:-3px;width:calc(100% + 3px);border-bottom:3px solid #c3c3c3}.nas-passenger-select-new--combined .nas-passenger-select-new__dropdown{margin:0 3px 0 0}.nas-passenger-select-new--combined .nas-passenger-select-new__dropdown:last-child{margin:0}.nas-passenger-select-new--combined .dropdown__toggle{height:calc(100% - 3px);margin:0;padding-left:16px;padding-right:16px;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: "component", type: i2.NumberFieldNewComponent, selector: "nas-number-field-new", inputs: ["number", "max", "min", "label", "compact", "spaceless", "simple", "nasFormControlName", "nasFormGroup", "hideInput", "ariaLabelSubtract", "ariaLabelAdd", "ariaLabel"], outputs: ["numberChange"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }] }); }
|
|
373
373
|
}
|
|
374
374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PassengerSelectNewComponent, decorators: [{
|
|
375
375
|
type: Component,
|
|
376
|
-
args: [{ selector: 'nas-passenger-select-new', template: "<h2 *ngIf=\"title\"\n [nasClass]=\"getClass('title', isGroupBooking && 'group-booking')\">{{title}}<ng-container *ngIf=\"isGroupBooking\">:\n <div>{{groupBookingLabel}}</div>\n </ng-container>\n</h2>\n<ul [nasClass]=\"getClass('list')\">\n <li *ngFor=\"let item of passengers; index as count\"\n [nasClass]=\"getClass('list-item')\">\n <label [nasClass]=\"getClass('label')\"\n [attr.aria-label]=\"getLabel(item.type)\">{{getLabel(item.type)}}</label>\n <ng-container *ngIf=\"!item.formGroup || !item.formControlName; else reactiveForm\">\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [number]=\"item.count\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (numberChange)=\"setPassengersCount(item, $event)\"\n (keydown)=\"keyDown($event, count)\"></nas-number-field-new>\n </ng-container>\n <ng-template #reactiveForm>\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [nasFormGroup]=\"item.formGroup\"\n [nasFormControlName]=\"item.formControlName\"\n [number]=\"item.formGroup?.get(item.formControlName)?.value\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (keydown)=\"keyDown($event, count)\"\n (numberChange)=\"setPassengersCount(item, $event)\"></nas-number-field-new>\n </ng-template>\n </li>\n</ul>", 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-passenger-select-new{position:relative;display:flex;flex-wrap:wrap;margin:16px 0 24px}.nas-passenger-select-new__list{
|
|
376
|
+
args: [{ selector: 'nas-passenger-select-new', template: "<h2 *ngIf=\"title\"\n [nasClass]=\"getClass('title', isGroupBooking && 'group-booking')\">{{title}}<ng-container *ngIf=\"isGroupBooking\">:\n <div>{{groupBookingLabel}}</div>\n </ng-container>\n</h2>\n<ul [nasClass]=\"getClass('list')\">\n <li *ngFor=\"let item of passengers; index as count\"\n [nasClass]=\"getClass('list-item')\">\n <label [nasClass]=\"getClass('label')\"\n [attr.aria-label]=\"getLabel(item.type)\">{{getLabel(item.type)}}</label>\n <ng-container *ngIf=\"!item.formGroup || !item.formControlName; else reactiveForm\">\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [number]=\"item.count\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (numberChange)=\"setPassengersCount(item, $event)\"\n (keydown)=\"keyDown($event, count)\"></nas-number-field-new>\n </ng-container>\n <ng-template #reactiveForm>\n <nas-number-field-new compact\n spaceless\n simple\n [ariaLabel]=\"getLabel(item.type)\"\n [ariaLabelSubtract]=\"ariaLabelSubtract\"\n [ariaLabelAdd]=\"ariaLabelAdd\"\n [nasFormGroup]=\"item.formGroup\"\n [nasFormControlName]=\"item.formControlName\"\n [number]=\"item.formGroup?.get(item.formControlName)?.value\"\n [max]=\"getMax(item)\"\n [min]=\"getMin(item)\"\n (keydown)=\"keyDown($event, count)\"\n (numberChange)=\"setPassengersCount(item, $event)\"></nas-number-field-new>\n </ng-template>\n </li>\n</ul>", 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-passenger-select-new{position:relative;display:flex;flex-wrap:wrap;margin:16px 0 24px}.nas-passenger-select-new__list{position:relative;background-color:#fff;border-left:2px solid #15273f;border-bottom:2px solid #15273f;border-right:2px solid #15273f}.nas-passenger-select-new__list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0 0}.nas-passenger-select-new__list-item:not(:last-child){padding:6px 0 9px}.nas-passenger-select-new__label{flex-grow:2;margin:0 6px 0 0}.nas-passenger-select-new__title{font-size:18px;line-height:26px;display:block;min-width:124px}.nas-passenger-select-new__title--small{font-size:16px;line-height:26px;margin:0}.nas-passenger-select-new__title--group-booking{animation:pop-in-from-top .5s linear both}.nas-passenger-select-new__actions{display:flex}.nas-passenger-select-new__action{padding:12px;width:100%;background-color:#fff}.nas-passenger-select-new__action:hover,.nas-passenger-select-new__action:focus{background-color:#e3e3e3}.nas-passenger-select-new__action--active,.nas-passenger-select-new__action--active:hover,.nas-passenger-select-new__action--active:focus{color:#fff;background-color:#15273f}.nas-passenger-select-new__icon{margin-bottom:9px}.nas-passenger-select-new__dropdown{margin-right:9px;margin-bottom:6px}@media (min-width: 640px){.nas-passenger-select-new__dropdown{margin-right:9px;margin-bottom:0}.nas-passenger-select-new__dropdown:not(:first-child){margin-left:9px}}.nas-passenger-select-new__transit-icon{position:relative;display:flex;justify-content:center;width:calc(100% - 48px);margin:12px auto;height:24px;background-color:inherit}.nas-passenger-select-new__transit-icon:before{content:\"\";position:absolute;height:2px;left:0;width:100%;top:calc(50% - 1px);background-color:currentColor}.nas-passenger-select-new__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)}.nas-passenger-select-new__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){.nas-passenger-select-new--combined{margin:0}.nas-passenger-select-new--combined:after{content:\"\";position:absolute;bottom:-3px;left:-3px;width:calc(100% + 3px);border-bottom:3px solid #c3c3c3}.nas-passenger-select-new--combined .nas-passenger-select-new__dropdown{margin:0 3px 0 0}.nas-passenger-select-new--combined .nas-passenger-select-new__dropdown:last-child{margin:0}.nas-passenger-select-new--combined .dropdown__toggle{height:calc(100% - 3px);margin:0;padding-left:16px;padding-right:16px;background-color:#fff}}\n"] }]
|
|
377
377
|
}], ctorParameters: function () { return []; }, propDecorators: { numberFields: [{
|
|
378
378
|
type: ViewChildren,
|
|
379
379
|
args: [NumberFieldNewComponent]
|
|
@@ -54,11 +54,11 @@ export class RadioNewComponent extends NasComponentBase {
|
|
|
54
54
|
this.checked = event.target.checked;
|
|
55
55
|
}
|
|
56
56
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RadioNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RadioNewComponent, selector: "nas-radio-new", inputs: { id: "id", value: "value", name: "name", error: "error", disabled: "disabled", strong: "strong", block: "block", spaceless: "spaceless", tabIndex: "tabIndex", required: "required", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"exists(disabled)\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-container>\n <ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-template>\n \n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n ", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio-new{-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-new input{position:absolute;opacity:0;z-index:-1}.nas-radio-new input:checked+.nas-radio-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-radio-new input:checked+.nas-radio-new__indicator:before{transform:scale(1.7);opacity:1}.nas-radio-new input[disabled]+.nas-radio-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-radio-new input[disabled]+.nas-radio-new__indicator:before{background-color:#6f6f6f}.nas-radio-new__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;width:22px;height:22px;border-radius:50%;border:2px solid #
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RadioNewComponent, selector: "nas-radio-new", inputs: { id: "id", value: "value", name: "name", error: "error", disabled: "disabled", strong: "strong", block: "block", spaceless: "spaceless", tabIndex: "tabIndex", required: "required", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"exists(disabled)\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-container>\n <ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-template>\n \n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n ", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio-new{-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-new input{position:absolute;opacity:0;z-index:-1}.nas-radio-new input:checked+.nas-radio-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-radio-new input:checked+.nas-radio-new__indicator:before{transform:scale(1.7);opacity:1}.nas-radio-new input[disabled]+.nas-radio-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-radio-new input[disabled]+.nas-radio-new__indicator:before{background-color:#6f6f6f}.nas-radio-new__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-new__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-new__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-radio-new--block{display:block}.nas-radio-new--spaceless{margin-bottom:0}.nas-radio-new--disabled{color:#6f6f6f;cursor:default}.nas-radio-new--disabled .nas-radio-new__indicator{-webkit-user-select:none;user-select:none}.nas-radio-new--strong{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-radio-new--error input:checked+.nas-radio-new__indicator,.nas-radio-new--error input+.nas-radio-new__indicator{border-color:#e5212d;background-color:#fff5f3}.nas-radio-new--error input:checked+.nas-radio-new__indicator:before,.nas-radio-new--error input+.nas-radio-new__indicator:before{border:2px solid #CC3A19;background-color:#cc3a19}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RadioNewComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
|
-
args: [{ selector: 'nas-radio-new', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"exists(disabled)\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-container>\n <ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-template>\n \n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n ", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio-new{-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-new input{position:absolute;opacity:0;z-index:-1}.nas-radio-new input:checked+.nas-radio-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-radio-new input:checked+.nas-radio-new__indicator:before{transform:scale(1.7);opacity:1}.nas-radio-new input[disabled]+.nas-radio-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-radio-new input[disabled]+.nas-radio-new__indicator:before{background-color:#6f6f6f}.nas-radio-new__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;width:22px;height:22px;border-radius:50%;border:2px solid #
|
|
61
|
+
args: [{ selector: 'nas-radio-new', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <input type=\"radio\"\n [disabled]=\"exists(disabled)\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-container>\n <ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <input type=\"radio\"\n [formControlName]=\"nasFormControlName\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n [value]=\"value\"\n [tabIndex]=\"tabIndex\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [required]=\"required\"\n [checked]=\"exists(checked)\"\n (change)=\"onChange($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n </ng-template>\n \n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n ", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-radio-new{-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-new input{position:absolute;opacity:0;z-index:-1}.nas-radio-new input:checked+.nas-radio-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-radio-new input:checked+.nas-radio-new__indicator:before{transform:scale(1.7);opacity:1}.nas-radio-new input[disabled]+.nas-radio-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-radio-new input[disabled]+.nas-radio-new__indicator:before{background-color:#6f6f6f}.nas-radio-new__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-new__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-new__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-radio-new--block{display:block}.nas-radio-new--spaceless{margin-bottom:0}.nas-radio-new--disabled{color:#6f6f6f;cursor:default}.nas-radio-new--disabled .nas-radio-new__indicator{-webkit-user-select:none;user-select:none}.nas-radio-new--strong{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-radio-new--error input:checked+.nas-radio-new__indicator,.nas-radio-new--error input+.nas-radio-new__indicator{border-color:#e5212d;background-color:#fff5f3}.nas-radio-new--error input:checked+.nas-radio-new__indicator:before,.nas-radio-new--error input+.nas-radio-new__indicator:before{border:2px solid #CC3A19;background-color:#cc3a19}\n"] }]
|
|
62
62
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
63
63
|
type: Input
|
|
64
64
|
}], value: [{
|
|
@@ -92,11 +92,11 @@ export class SlideToggleNewComponent extends NasComponentBase {
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SlideToggleNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SlideToggleNewComponent, selector: "nas-slide-toggle-new", inputs: { nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", disabled: "disabled", inputId: "inputId", toggle: "toggle" }, outputs: { toggleChange: "toggleChange", focusOnPrevious: "focusOnPrevious" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n [disabled]=\"exists(disabled)\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n (keydown)=\"onKeydown($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <span [nasClass]=\"getClass('content')\">\n <ng-content></ng-content>\n </span>\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-slide-toggle-new{cursor:pointer;position:relative;margin-bottom:24px;margin-right:24px;display:inline-flex}.nas-slide-toggle-new input{position:absolute;opacity:0;z-index:-1}.nas-slide-toggle-new--disabled{cursor:auto}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container{background-color:#e3e3e3;border:2px solid #6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb,.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled{background-color:#6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled .nas-slide-toggle-new__thumb{background-color:#e3e3e3}.nas-slide-toggle-new__thumb-container{width:46px;background-color:#fff;height:25px;border-radius:30px;transition:all .2s cubic-bezier(0,0,.1,1);border:2px solid #
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SlideToggleNewComponent, selector: "nas-slide-toggle-new", inputs: { nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", disabled: "disabled", inputId: "inputId", toggle: "toggle" }, outputs: { toggleChange: "toggleChange", focusOnPrevious: "focusOnPrevious" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n [disabled]=\"exists(disabled)\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n (keydown)=\"onKeydown($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <span [nasClass]=\"getClass('content')\">\n <ng-content></ng-content>\n </span>\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-slide-toggle-new{cursor:pointer;position:relative;margin-bottom:24px;margin-right:24px;display:inline-flex}.nas-slide-toggle-new input{position:absolute;opacity:0;z-index:-1}.nas-slide-toggle-new--disabled{cursor:auto}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container{background-color:#e3e3e3;border:2px solid #6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb,.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled{background-color:#6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled .nas-slide-toggle-new__thumb{background-color:#e3e3e3}.nas-slide-toggle-new__thumb-container{width:46px;background-color:#fff;height:25px;border-radius:30px;transition:all .2s cubic-bezier(0,0,.1,1);border:2px solid #15273f}.nas-slide-toggle-new__thumb-container--toggled{background-color:#15273f}.nas-slide-toggle-new__thumb-container--toggled .nas-slide-toggle-new__thumb{margin-left:21px;background-color:#fff}.nas-slide-toggle-new__thumb-container:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-slide-toggle-new__thumb{background-color:#15273f;height:20px;width:20px;border-radius:20px;margin:1px 2px;transition:all .2s cubic-bezier(0,0,.1,1)}.nas-slide-toggle-new__content{margin-left:12px;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: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
96
96
|
}
|
|
97
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SlideToggleNewComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
|
-
args: [{ selector: 'nas-slide-toggle-new', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n [disabled]=\"exists(disabled)\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n (keydown)=\"onKeydown($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <span [nasClass]=\"getClass('content')\">\n <ng-content></ng-content>\n </span>\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-slide-toggle-new{cursor:pointer;position:relative;margin-bottom:24px;margin-right:24px;display:inline-flex}.nas-slide-toggle-new input{position:absolute;opacity:0;z-index:-1}.nas-slide-toggle-new--disabled{cursor:auto}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container{background-color:#e3e3e3;border:2px solid #6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb,.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled{background-color:#6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled .nas-slide-toggle-new__thumb{background-color:#e3e3e3}.nas-slide-toggle-new__thumb-container{width:46px;background-color:#fff;height:25px;border-radius:30px;transition:all .2s cubic-bezier(0,0,.1,1);border:2px solid #
|
|
99
|
+
args: [{ selector: 'nas-slide-toggle-new', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n [disabled]=\"exists(disabled)\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\" [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('thumb-container', exists(toggle) && 'toggled')\" tabindex=\"0\">\n <input type=\"checkbox\"\n role=\"switch\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(toggle)\"\n [attr.aria-checked]=\"exists(toggle)\"\n (keydown)=\"onKeydown($event)\">\n <div [nasClass]=\"getClass('thumb')\"></div>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <span [nasClass]=\"getClass('content')\">\n <ng-content></ng-content>\n </span>\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-slide-toggle-new{cursor:pointer;position:relative;margin-bottom:24px;margin-right:24px;display:inline-flex}.nas-slide-toggle-new input{position:absolute;opacity:0;z-index:-1}.nas-slide-toggle-new--disabled{cursor:auto}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container{background-color:#e3e3e3;border:2px solid #6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb,.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled{background-color:#6f6f6f}.nas-slide-toggle-new--disabled .nas-slide-toggle-new__thumb-container--toggled .nas-slide-toggle-new__thumb{background-color:#e3e3e3}.nas-slide-toggle-new__thumb-container{width:46px;background-color:#fff;height:25px;border-radius:30px;transition:all .2s cubic-bezier(0,0,.1,1);border:2px solid #15273f}.nas-slide-toggle-new__thumb-container--toggled{background-color:#15273f}.nas-slide-toggle-new__thumb-container--toggled .nas-slide-toggle-new__thumb{margin-left:21px;background-color:#fff}.nas-slide-toggle-new__thumb-container:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-slide-toggle-new__thumb{background-color:#15273f;height:20px;width:20px;border-radius:20px;margin:1px 2px;transition:all .2s cubic-bezier(0,0,.1,1)}.nas-slide-toggle-new__content{margin-left:12px;display:block}\n"] }]
|
|
100
100
|
}], ctorParameters: function () { return []; }, propDecorators: { nasFormControlName: [{
|
|
101
101
|
type: Input
|
|
102
102
|
}], nasFormGroup: [{
|
|
@@ -103,11 +103,11 @@ export class SpinnerComponent extends NasComponentBase {
|
|
|
103
103
|
return classes;
|
|
104
104
|
}
|
|
105
105
|
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 }); }
|
|
106
|
-
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()\"> <a> {{refreshText}} </a></div>\n </div>\n</div>\n\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-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:Apercu,Helvetica Neue,Helvetica,Arial,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{height:48px;width:48px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#000 100%);mask:radial-gradient(circle 16px,transparent 99%,#000 100%);background-image:conic-gradient(transparent 25%,#
|
|
106
|
+
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()\"> <a> {{refreshText}} </a></div>\n </div>\n</div>\n\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-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:Apercu,Helvetica Neue,Helvetica,Arial,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{height:48px;width:48px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#000 100%);mask:radial-gradient(circle 16px,transparent 99%,#000 100%);background-image:conic-gradient(transparent 25%,#15273f);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__box,.nas-spinner--rounded .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: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
107
107
|
}
|
|
108
108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
|
-
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()\"> <a> {{refreshText}} </a></div>\n </div>\n</div>\n\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-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:Apercu,Helvetica Neue,Helvetica,Arial,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{height:48px;width:48px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#000 100%);mask:radial-gradient(circle 16px,transparent 99%,#000 100%);background-image:conic-gradient(transparent 25%,#
|
|
110
|
+
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()\"> <a> {{refreshText}} </a></div>\n </div>\n</div>\n\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-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:Apercu,Helvetica Neue,Helvetica,Arial,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{height:48px;width:48px;-webkit-mask:radial-gradient(circle 16px,transparent 99%,#000 100%);mask:radial-gradient(circle 16px,transparent 99%,#000 100%);background-image:conic-gradient(transparent 25%,#15273f);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__box,.nas-spinner--rounded .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"] }]
|
|
111
111
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { text: [{
|
|
112
112
|
type: Input
|
|
113
113
|
}], refreshText: [{
|