npm - @norwegian/core-components - Versions diffs - 6.49.0 → 6.50.0 - Mend

@norwegian/core-components 6.49.0 → 6.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/esm2022/lib/components/button/button.component.mjs CHANGED Viewed

@@ -107,11 +107,11 @@ export class ButtonComponent extends NasComponentBase {
         this.clickChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ButtonComponent, selector: "nas-button", inputs: { primary: "primary", secondary: "secondary", link: "link", approve: "approve", light: "light", large: "large", block: "block", flex: "flex", compact: "compact", right: "right", spaceless: "spaceless", transparent: "transparent", href: "href", trackingvalue: "trackingvalue", canContinueOnDisabled: "canContinueOnDisabled", disabled: "disabled", type: "type", cssClass: "cssClass", ariaLabel: "ariaLabel", cssStyle: "cssStyle", tabindex: "tabindex", overrideBaseCssClass: "overrideBaseCssClass", useRouterLink: "useRouterLink", id: "id", target: "target" }, outputs: { clickChange: "clickChange" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button #button\n  *ngIf=\"!href\"\n  [nasClass]=\"getClasses('', modifiers)\"\n  [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\"\n  [class.disabled]=\"disabled\"\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"tabindex\"\n  [id]=\"buttonId\"\n  (click)=\"emitTrackingAndClickEvent($event)\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\"\n      [attr.disabled]=\"disabled\"\n      [routerLink]=\"href\"\n      [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\"\n    [attr.disabled]=\"disabled\"\n    [href]=\"href\"\n    [target]=\"target\"\n    [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\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-button{position:relative;display:inline-block;padding:12px 24px;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;line-height:26px;text-align:center;color:#003251;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:3px;bottom:-6px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#c3c3c3}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button:active{transform:translateY(3px)}.nas-button:active:before{transform:translateY(-3px)}.nas-button[disabled]{cursor:default;pointer-events:none;opacity:.5}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#003251}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#da1f2b}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#003251}.nas-button--primary:active{color:#fff;background:#d31e29}.nas-button--primary:active:before{background-color:#003251}.nas-button--secondary{color:#fff;background-color:#003251}.nas-button--secondary:before{background-color:#003251}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#00304d}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#00304d}.nas-button--secondary:active{color:#fff;background:#002e4b}.nas-button--secondary:active:before{background-color:#002e4b}.nas-button--approve{color:#fff;background-color:#238e00}.nas-button--approve:before{background-color:#238e00}.nas-button--approve:hover,.nas-button--approve:focus{color:#fff;background-color:#228b00}.nas-button--approve:hover:before,.nas-button--approve:focus:before{background-color:#228b00}.nas-button--approve:active{color:#fff;background:#218700}.nas-button--approve:active:before{background-color:#218700}.nas-button--light{color:#002a3a;background-color:#fff}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#002a3a;background-color:#fafafa}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#fafafa}.nas-button--light:active{color:#002a3a;background:#f2f2f2}.nas-button--light:active:before{background-color:#f2f2f2}.nas-button--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button--link:hover,.nas-button--link:focus{color:#003251;border-color:#003251;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#003251}.nas-button--link.nas-button--light{color:#fff;border-color:#fff}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ButtonComponent, selector: "nas-button", inputs: { primary: "primary", secondary: "secondary", link: "link", approve: "approve", light: "light", large: "large", block: "block", flex: "flex", compact: "compact", right: "right", spaceless: "spaceless", transparent: "transparent", href: "href", trackingvalue: "trackingvalue", canContinueOnDisabled: "canContinueOnDisabled", disabled: "disabled", type: "type", cssClass: "cssClass", ariaLabel: "ariaLabel", cssStyle: "cssStyle", tabindex: "tabindex", overrideBaseCssClass: "overrideBaseCssClass", useRouterLink: "useRouterLink", id: "id", target: "target" }, outputs: { clickChange: "clickChange" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button #button\n  *ngIf=\"!href\"\n  [nasClass]=\"getClasses('', modifiers)\"\n  [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\"\n  [class.disabled]=\"disabled\"\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"tabindex\"\n  [id]=\"buttonId\"\n  (click)=\"emitTrackingAndClickEvent($event)\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\"\n      [attr.disabled]=\"disabled\"\n      [routerLink]=\"href\"\n      [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\"\n    [attr.disabled]=\"disabled\"\n    [href]=\"href\"\n    [target]=\"target\"\n    [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\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-button{position:relative;display:inline-block;padding:12px 24px;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;line-height:26px;text-align:center;color:#15273f;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:3px;bottom:-6px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#c3c3c3}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button:active{transform:translateY(3px)}.nas-button:active:before{transform:translateY(-3px)}.nas-button[disabled]{cursor:default;pointer-events:none;opacity:.5}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#15273f}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#da1f2b}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#15273f}.nas-button--primary:active{color:#fff;background:#d31e29}.nas-button--primary:active:before{background-color:#15273f}.nas-button--secondary{color:#fff;background-color:#15273f}.nas-button--secondary:before{background-color:#15273f}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#14253c}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#14253c}.nas-button--secondary:active{color:#fff;background:#13243a}.nas-button--secondary:active:before{background-color:#13243a}.nas-button--approve{color:#fff;background-color:#238e00}.nas-button--approve:before{background-color:#238e00}.nas-button--approve:hover,.nas-button--approve:focus{color:#fff;background-color:#228b00}.nas-button--approve:hover:before,.nas-button--approve:focus:before{background-color:#228b00}.nas-button--approve:active{color:#fff;background:#218700}.nas-button--approve:active:before{background-color:#218700}.nas-button--light{color:#002a3a;background-color:#fff}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#002a3a;background-color:#fafafa}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#fafafa}.nas-button--light:active{color:#002a3a;background:#f2f2f2}.nas-button--light:active:before{background-color:#f2f2f2}.nas-button--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button--link:hover,.nas-button--link:focus{color:#15273f;border-color:#15273f;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#15273f}.nas-button--link.nas-button--light{color:#fff;border-color:#fff}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n  *ngIf=\"!href\"\n  [nasClass]=\"getClasses('', modifiers)\"\n  [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\"\n  [class.disabled]=\"disabled\"\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"tabindex\"\n  [id]=\"buttonId\"\n  (click)=\"emitTrackingAndClickEvent($event)\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\"\n      [attr.disabled]=\"disabled\"\n      [routerLink]=\"href\"\n      [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\"\n    [attr.disabled]=\"disabled\"\n    [href]=\"href\"\n    [target]=\"target\"\n    [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\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-button{position:relative;display:inline-block;padding:12px 24px;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;line-height:26px;text-align:center;color:#003251;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:3px;bottom:-6px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#c3c3c3}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button:active{transform:translateY(3px)}.nas-button:active:before{transform:translateY(-3px)}.nas-button[disabled]{cursor:default;pointer-events:none;opacity:.5}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#003251}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#da1f2b}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#003251}.nas-button--primary:active{color:#fff;background:#d31e29}.nas-button--primary:active:before{background-color:#003251}.nas-button--secondary{color:#fff;background-color:#003251}.nas-button--secondary:before{background-color:#003251}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#00304d}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#00304d}.nas-button--secondary:active{color:#fff;background:#002e4b}.nas-button--secondary:active:before{background-color:#002e4b}.nas-button--approve{color:#fff;background-color:#238e00}.nas-button--approve:before{background-color:#238e00}.nas-button--approve:hover,.nas-button--approve:focus{color:#fff;background-color:#228b00}.nas-button--approve:hover:before,.nas-button--approve:focus:before{background-color:#228b00}.nas-button--approve:active{color:#fff;background:#218700}.nas-button--approve:active:before{background-color:#218700}.nas-button--light{color:#002a3a;background-color:#fff}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#002a3a;background-color:#fafafa}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#fafafa}.nas-button--light:active{color:#002a3a;background:#f2f2f2}.nas-button--light:active:before{background-color:#f2f2f2}.nas-button--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button--link:hover,.nas-button--link:focus{color:#003251;border-color:#003251;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#003251}.nas-button--link.nas-button--light{color:#fff;border-color:#fff}\n"] }]
+            args: [{ selector: 'nas-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n  *ngIf=\"!href\"\n  [nasClass]=\"getClasses('', modifiers)\"\n  [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\"\n  [class.disabled]=\"disabled\"\n  [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"tabindex\"\n  [id]=\"buttonId\"\n  (click)=\"emitTrackingAndClickEvent($event)\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</button>\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\"\n      [attr.disabled]=\"disabled\"\n      [routerLink]=\"href\"\n      [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\"\n    [attr.disabled]=\"disabled\"\n    [href]=\"href\"\n    [target]=\"target\"\n    [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\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-button{position:relative;display:inline-block;padding:12px 24px;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;line-height:26px;text-align:center;color:#15273f;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:3px;bottom:-6px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#c3c3c3}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button:active{transform:translateY(3px)}.nas-button:active:before{transform:translateY(-3px)}.nas-button[disabled]{cursor:default;pointer-events:none;opacity:.5}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#15273f}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#da1f2b}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#15273f}.nas-button--primary:active{color:#fff;background:#d31e29}.nas-button--primary:active:before{background-color:#15273f}.nas-button--secondary{color:#fff;background-color:#15273f}.nas-button--secondary:before{background-color:#15273f}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#14253c}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#14253c}.nas-button--secondary:active{color:#fff;background:#13243a}.nas-button--secondary:active:before{background-color:#13243a}.nas-button--approve{color:#fff;background-color:#238e00}.nas-button--approve:before{background-color:#238e00}.nas-button--approve:hover,.nas-button--approve:focus{color:#fff;background-color:#228b00}.nas-button--approve:hover:before,.nas-button--approve:focus:before{background-color:#228b00}.nas-button--approve:active{color:#fff;background:#218700}.nas-button--approve:active:before{background-color:#218700}.nas-button--light{color:#002a3a;background-color:#fff}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#002a3a;background-color:#fafafa}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#fafafa}.nas-button--light:active{color:#002a3a;background:#f2f2f2}.nas-button--light:active:before{background-color:#f2f2f2}.nas-button--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button--link:hover,.nas-button--link:focus{color:#15273f;border-color:#15273f;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#15273f}.nas-button--link.nas-button--light{color:#fff;border-color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { button: [{
                 type: ViewChild,
                 args: ['button']

package/esm2022/lib/components/button-new/button-new.component.mjs CHANGED Viewed

@@ -108,11 +108,11 @@ export class ButtonNewComponent extends NasComponentBase {
         this.clickChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ButtonNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ButtonNewComponent, selector: "nas-button-new", inputs: { primary: "primary", secondary: "secondary", link: "link", light: "light", large: "large", block: "block", flex: "flex", compact: "compact", right: "right", spaceless: "spaceless", href: "href", trackingvalue: "trackingvalue", canContinueOnDisabled: "canContinueOnDisabled", disabled: "disabled", type: "type", cssClass: "cssClass", ariaLabel: "ariaLabel", cssStyle: "cssStyle", tabindex: "tabindex", overrideBaseCssClass: "overrideBaseCssClass", useRouterLink: "useRouterLink", id: "id", target: "target", icon: "icon", iconLeft: "iconLeft", iconType: "iconType", buttonlink: "buttonlink" }, outputs: { clickChange: "clickChange" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (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\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\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    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\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</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-button-new{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#003251;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new--container{background-color:#fff}.nas-button-new:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new:hover,.nas-button-new:focus{background-color:#c3c3c3}.nas-button-new:hover:before,.nas-button-new:focus:before{transform:translateY(0)}.nas-button-new[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e3e3e3}.nas-button-new--primary{color:#fff;background-color:#e5212d}.nas-button-new--primary:before{background-color:#003251}.nas-button-new--primary:hover,.nas-button-new--primary:focus{color:#fff;background-color:#b71530}.nas-button-new--primary:hover:before,.nas-button-new--primary:focus:before{background-color:#003251}.nas-button-new--primary:active{color:#fff;background:#891024}.nas-button-new--primary:active:before{background-color:#003251}.nas-button-new--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--primary:focus-visible:before{display:none}.nas-button-new--primary:disabled{background-color:#e3e3e3}.nas-button-new--primary:hover,.nas-button-new--primary:focus{border-bottom:0}.nas-button-new--secondary{color:#fff;background-color:#15273f}.nas-button-new--secondary:before{background-color:#15273f}.nas-button-new--secondary:hover,.nas-button-new--secondary:focus{color:#fff;background-color:#0a2033}.nas-button-new--secondary:hover:before,.nas-button-new--secondary:focus:before{background-color:#0a2033}.nas-button-new--secondary:active{color:#fff;background:#071622}.nas-button-new--secondary:active:before{background-color:#071622}.nas-button-new--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--secondary:focus-visible:before{display:none}.nas-button-new--secondary:before{display:none}.nas-button-new--secondary:disabled{background-color:#e3e3e3}.nas-button-new--light{color:#15273f;background-color:#fff;border:2px solid #6f6f6f}.nas-button-new--light:before{background-color:#fff}.nas-button-new--light:hover,.nas-button-new--light:focus{color:#15273f;background-color:#f1f1f1}.nas-button-new--light:hover:before,.nas-button-new--light:focus:before{background-color:#f1f1f1}.nas-button-new--light:active{color:#15273f;background:#EBF4FF}.nas-button-new--light:active:before{background-color:#ebf4ff}.nas-button-new--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--light:focus-visible:before{display:none}.nas-button-new--light:before{display:none}.nas-button-new--light:hover{border-color:#15273f}.nas-button-new--light:disabled{border:0}.nas-button-new--buttonlink{color:#b12a0b;background-color:transparent}.nas-button-new--buttonlink:before{background-color:transparent}.nas-button-new--buttonlink:hover,.nas-button-new--buttonlink:focus{color:#b12a0b;background-color:#f1f1f1}.nas-button-new--buttonlink:hover:before,.nas-button-new--buttonlink:focus:before{background-color:#f1f1f1}.nas-button-new--buttonlink:active{color:#b12a0b;background:#EBF4FF}.nas-button-new--buttonlink:active:before{background-color:#ebf4ff}.nas-button-new--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--buttonlink:focus-visible:before{display:none}.nas-button-new--buttonlink:before{display:none}.nas-button-new--buttonlink:disabled{background-color:#f9f9f9}.nas-button-new--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button-new--block{display:block;width:100%}.nas-button-new--flex{display:flex;width:100%}.nas-button-new--compact{margin-bottom:12px}.nas-button-new--compact:before{display:none}.nas-button-new--right{align-self:flex-end;float:right}.nas-button-new--spaceless{margin-bottom:0}.nas-button-new--transparent{color:#fff;background-color:#000000a6}.nas-button-new--transparent:before{background-color:inherit}.nas-button-new--transparent:hover,.nas-button-new--transparent:active,.nas-button-new--transparent:focus{background-color:#000c}.nas-button-new--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button-new--link:hover,.nas-button-new--link:focus{color:#003251;border-color:#003251;background:none}.nas-button-new--link:before{display:none}.nas-button-new--link.nas-button-new--secondary{color:#003251}.nas-button-new--link.nas-button-new--light{color:#fff;border-color:#fff}.nas-button-new__content{display:flex;justify-content:center;gap:4px}.nas-button-new__content--reverse{flex-direction:row-reverse}.nas-button-new__icon{position:relative}.nas-button-new__icon .nas-icon-small{margin:0;transform:scale(.8)}.nas-button-new--white-background{border-bottom:2px solid #fff}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ButtonNewComponent, selector: "nas-button-new", inputs: { primary: "primary", secondary: "secondary", link: "link", light: "light", large: "large", block: "block", flex: "flex", compact: "compact", right: "right", spaceless: "spaceless", href: "href", trackingvalue: "trackingvalue", canContinueOnDisabled: "canContinueOnDisabled", disabled: "disabled", type: "type", cssClass: "cssClass", ariaLabel: "ariaLabel", cssStyle: "cssStyle", tabindex: "tabindex", overrideBaseCssClass: "overrideBaseCssClass", useRouterLink: "useRouterLink", id: "id", target: "target", icon: "icon", iconLeft: "iconLeft", iconType: "iconType", buttonlink: "buttonlink" }, outputs: { clickChange: "clickChange" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (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\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\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    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\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</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-button-new{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#15273f;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new--container{background-color:#fff}.nas-button-new:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new:hover,.nas-button-new:focus{background-color:#c3c3c3}.nas-button-new:hover:before,.nas-button-new:focus:before{transform:translateY(0)}.nas-button-new[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e3e3e3}.nas-button-new--primary{color:#fff;background-color:#e5212d}.nas-button-new--primary:before{background-color:#15273f}.nas-button-new--primary:hover,.nas-button-new--primary:focus{color:#fff;background-color:#b71530}.nas-button-new--primary:hover:before,.nas-button-new--primary:focus:before{background-color:#15273f}.nas-button-new--primary:active{color:#fff;background:#891024}.nas-button-new--primary:active:before{background-color:#15273f}.nas-button-new--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--primary:focus-visible:before{display:none}.nas-button-new--primary:disabled{background-color:#e3e3e3}.nas-button-new--primary:hover,.nas-button-new--primary:focus{border-bottom:0}.nas-button-new--secondary{color:#fff;background-color:#15273f}.nas-button-new--secondary:before{background-color:#15273f}.nas-button-new--secondary:hover,.nas-button-new--secondary:focus{color:#fff;background-color:#0a2033}.nas-button-new--secondary:hover:before,.nas-button-new--secondary:focus:before{background-color:#0a2033}.nas-button-new--secondary:active{color:#fff;background:#071622}.nas-button-new--secondary:active:before{background-color:#071622}.nas-button-new--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--secondary:focus-visible:before{display:none}.nas-button-new--secondary:before{display:none}.nas-button-new--secondary:disabled{background-color:#e3e3e3}.nas-button-new--light{color:#15273f;background-color:#fff;border:2px solid #6f6f6f}.nas-button-new--light:before{background-color:#fff}.nas-button-new--light:hover,.nas-button-new--light:focus{color:#15273f;background-color:#f1f1f1}.nas-button-new--light:hover:before,.nas-button-new--light:focus:before{background-color:#f1f1f1}.nas-button-new--light:active{color:#15273f;background:#EBF4FF}.nas-button-new--light:active:before{background-color:#ebf4ff}.nas-button-new--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--light:focus-visible:before{display:none}.nas-button-new--light:before{display:none}.nas-button-new--light:hover{border-color:#15273f}.nas-button-new--light:disabled{border:0}.nas-button-new--buttonlink{color:#b12a0b;background-color:transparent}.nas-button-new--buttonlink:before{background-color:transparent}.nas-button-new--buttonlink:hover,.nas-button-new--buttonlink:focus{color:#b12a0b;background-color:#f1f1f1}.nas-button-new--buttonlink:hover:before,.nas-button-new--buttonlink:focus:before{background-color:#f1f1f1}.nas-button-new--buttonlink:active{color:#b12a0b;background:#EBF4FF}.nas-button-new--buttonlink:active:before{background-color:#ebf4ff}.nas-button-new--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--buttonlink:focus-visible:before{display:none}.nas-button-new--buttonlink:before{display:none}.nas-button-new--buttonlink:disabled{background-color:#f9f9f9}.nas-button-new--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button-new--block{display:block;width:100%}.nas-button-new--flex{display:flex;width:100%}.nas-button-new--compact{margin-bottom:12px}.nas-button-new--compact:before{display:none}.nas-button-new--right{align-self:flex-end;float:right}.nas-button-new--spaceless{margin-bottom:0}.nas-button-new--transparent{color:#fff;background-color:#000000a6}.nas-button-new--transparent:before{background-color:inherit}.nas-button-new--transparent:hover,.nas-button-new--transparent:active,.nas-button-new--transparent:focus{background-color:#000c}.nas-button-new--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button-new--link:hover,.nas-button-new--link:focus{color:#15273f;border-color:#15273f;background:none}.nas-button-new--link:before{display:none}.nas-button-new--link.nas-button-new--secondary{color:#15273f}.nas-button-new--link.nas-button-new--light{color:#fff;border-color:#fff}.nas-button-new__content{display:flex;justify-content:center;gap:4px}.nas-button-new__content--reverse{flex-direction:row-reverse}.nas-button-new__icon{position:relative}.nas-button-new__icon .nas-icon-small{margin:0;transform:scale(.8)}.nas-button-new--white-background{border-bottom:2px solid #fff}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ButtonNewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-button-new', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (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\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\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    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\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</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-button-new{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#003251;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new--container{background-color:#fff}.nas-button-new:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new:hover,.nas-button-new:focus{background-color:#c3c3c3}.nas-button-new:hover:before,.nas-button-new:focus:before{transform:translateY(0)}.nas-button-new[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e3e3e3}.nas-button-new--primary{color:#fff;background-color:#e5212d}.nas-button-new--primary:before{background-color:#003251}.nas-button-new--primary:hover,.nas-button-new--primary:focus{color:#fff;background-color:#b71530}.nas-button-new--primary:hover:before,.nas-button-new--primary:focus:before{background-color:#003251}.nas-button-new--primary:active{color:#fff;background:#891024}.nas-button-new--primary:active:before{background-color:#003251}.nas-button-new--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--primary:focus-visible:before{display:none}.nas-button-new--primary:disabled{background-color:#e3e3e3}.nas-button-new--primary:hover,.nas-button-new--primary:focus{border-bottom:0}.nas-button-new--secondary{color:#fff;background-color:#15273f}.nas-button-new--secondary:before{background-color:#15273f}.nas-button-new--secondary:hover,.nas-button-new--secondary:focus{color:#fff;background-color:#0a2033}.nas-button-new--secondary:hover:before,.nas-button-new--secondary:focus:before{background-color:#0a2033}.nas-button-new--secondary:active{color:#fff;background:#071622}.nas-button-new--secondary:active:before{background-color:#071622}.nas-button-new--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--secondary:focus-visible:before{display:none}.nas-button-new--secondary:before{display:none}.nas-button-new--secondary:disabled{background-color:#e3e3e3}.nas-button-new--light{color:#15273f;background-color:#fff;border:2px solid #6f6f6f}.nas-button-new--light:before{background-color:#fff}.nas-button-new--light:hover,.nas-button-new--light:focus{color:#15273f;background-color:#f1f1f1}.nas-button-new--light:hover:before,.nas-button-new--light:focus:before{background-color:#f1f1f1}.nas-button-new--light:active{color:#15273f;background:#EBF4FF}.nas-button-new--light:active:before{background-color:#ebf4ff}.nas-button-new--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--light:focus-visible:before{display:none}.nas-button-new--light:before{display:none}.nas-button-new--light:hover{border-color:#15273f}.nas-button-new--light:disabled{border:0}.nas-button-new--buttonlink{color:#b12a0b;background-color:transparent}.nas-button-new--buttonlink:before{background-color:transparent}.nas-button-new--buttonlink:hover,.nas-button-new--buttonlink:focus{color:#b12a0b;background-color:#f1f1f1}.nas-button-new--buttonlink:hover:before,.nas-button-new--buttonlink:focus:before{background-color:#f1f1f1}.nas-button-new--buttonlink:active{color:#b12a0b;background:#EBF4FF}.nas-button-new--buttonlink:active:before{background-color:#ebf4ff}.nas-button-new--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--buttonlink:focus-visible:before{display:none}.nas-button-new--buttonlink:before{display:none}.nas-button-new--buttonlink:disabled{background-color:#f9f9f9}.nas-button-new--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button-new--block{display:block;width:100%}.nas-button-new--flex{display:flex;width:100%}.nas-button-new--compact{margin-bottom:12px}.nas-button-new--compact:before{display:none}.nas-button-new--right{align-self:flex-end;float:right}.nas-button-new--spaceless{margin-bottom:0}.nas-button-new--transparent{color:#fff;background-color:#000000a6}.nas-button-new--transparent:before{background-color:inherit}.nas-button-new--transparent:hover,.nas-button-new--transparent:active,.nas-button-new--transparent:focus{background-color:#000c}.nas-button-new--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button-new--link:hover,.nas-button-new--link:focus{color:#003251;border-color:#003251;background:none}.nas-button-new--link:before{display:none}.nas-button-new--link.nas-button-new--secondary{color:#003251}.nas-button-new--link.nas-button-new--light{color:#fff;border-color:#fff}.nas-button-new__content{display:flex;justify-content:center;gap:4px}.nas-button-new__content--reverse{flex-direction:row-reverse}.nas-button-new__icon{position:relative}.nas-button-new__icon .nas-icon-small{margin:0;transform:scale(.8)}.nas-button-new--white-background{border-bottom:2px solid #fff}\n"] }]
+            args: [{ selector: 'nas-button-new', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n  [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n  [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (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\n<ng-container *ngIf=\"href\">\n  <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n    <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n      (click)=\"emitTrackingEvent();\">\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    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n  <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n    (click)=\"emitTrackingEvent();\">\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</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-button-new{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#15273f;background-color:#d8d8d8;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new--container{background-color:#fff}.nas-button-new:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#c3c3c3;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button-new:hover,.nas-button-new:focus{background-color:#c3c3c3}.nas-button-new:hover:before,.nas-button-new:focus:before{transform:translateY(0)}.nas-button-new[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e3e3e3}.nas-button-new--primary{color:#fff;background-color:#e5212d}.nas-button-new--primary:before{background-color:#15273f}.nas-button-new--primary:hover,.nas-button-new--primary:focus{color:#fff;background-color:#b71530}.nas-button-new--primary:hover:before,.nas-button-new--primary:focus:before{background-color:#15273f}.nas-button-new--primary:active{color:#fff;background:#891024}.nas-button-new--primary:active:before{background-color:#15273f}.nas-button-new--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--primary:focus-visible:before{display:none}.nas-button-new--primary:disabled{background-color:#e3e3e3}.nas-button-new--primary:hover,.nas-button-new--primary:focus{border-bottom:0}.nas-button-new--secondary{color:#fff;background-color:#15273f}.nas-button-new--secondary:before{background-color:#15273f}.nas-button-new--secondary:hover,.nas-button-new--secondary:focus{color:#fff;background-color:#0a2033}.nas-button-new--secondary:hover:before,.nas-button-new--secondary:focus:before{background-color:#0a2033}.nas-button-new--secondary:active{color:#fff;background:#071622}.nas-button-new--secondary:active:before{background-color:#071622}.nas-button-new--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--secondary:focus-visible:before{display:none}.nas-button-new--secondary:before{display:none}.nas-button-new--secondary:disabled{background-color:#e3e3e3}.nas-button-new--light{color:#15273f;background-color:#fff;border:2px solid #6f6f6f}.nas-button-new--light:before{background-color:#fff}.nas-button-new--light:hover,.nas-button-new--light:focus{color:#15273f;background-color:#f1f1f1}.nas-button-new--light:hover:before,.nas-button-new--light:focus:before{background-color:#f1f1f1}.nas-button-new--light:active{color:#15273f;background:#EBF4FF}.nas-button-new--light:active:before{background-color:#ebf4ff}.nas-button-new--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--light:focus-visible:before{display:none}.nas-button-new--light:before{display:none}.nas-button-new--light:hover{border-color:#15273f}.nas-button-new--light:disabled{border:0}.nas-button-new--buttonlink{color:#b12a0b;background-color:transparent}.nas-button-new--buttonlink:before{background-color:transparent}.nas-button-new--buttonlink:hover,.nas-button-new--buttonlink:focus{color:#b12a0b;background-color:#f1f1f1}.nas-button-new--buttonlink:hover:before,.nas-button-new--buttonlink:focus:before{background-color:#f1f1f1}.nas-button-new--buttonlink:active{color:#b12a0b;background:#EBF4FF}.nas-button-new--buttonlink:active:before{background-color:#ebf4ff}.nas-button-new--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button-new--buttonlink:focus-visible:before{display:none}.nas-button-new--buttonlink:before{display:none}.nas-button-new--buttonlink:disabled{background-color:#f9f9f9}.nas-button-new--large{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;padding:16px 36px 13px}.nas-button-new--block{display:block;width:100%}.nas-button-new--flex{display:flex;width:100%}.nas-button-new--compact{margin-bottom:12px}.nas-button-new--compact:before{display:none}.nas-button-new--right{align-self:flex-end;float:right}.nas-button-new--spaceless{margin-bottom:0}.nas-button-new--transparent{color:#fff;background-color:#000000a6}.nas-button-new--transparent:before{background-color:inherit}.nas-button-new--transparent:hover,.nas-button-new--transparent:active,.nas-button-new--transparent:focus{background-color:#000c}.nas-button-new--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;border-bottom:2px solid #d8d8d8}.nas-button-new--link:hover,.nas-button-new--link:focus{color:#15273f;border-color:#15273f;background:none}.nas-button-new--link:before{display:none}.nas-button-new--link.nas-button-new--secondary{color:#15273f}.nas-button-new--link.nas-button-new--light{color:#fff;border-color:#fff}.nas-button-new__content{display:flex;justify-content:center;gap:4px}.nas-button-new__content--reverse{flex-direction:row-reverse}.nas-button-new__icon{position:relative}.nas-button-new__icon .nas-icon-small{margin:0;transform:scale(.8)}.nas-button-new--white-background{border-bottom:2px solid #fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { button: [{
                 type: ViewChild,
                 args: ['button']

package/esm2022/lib/components/campaign-header/campaign-header.component.mjs CHANGED Viewed

@@ -32,11 +32,11 @@ export class CampaignHeaderComponent extends NasComponentBase {
         return 'var(--primary-base-color)';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CampaignHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CampaignHeaderComponent, selector: "nas-campaign-header", inputs: { title: "title", source: "source", description: "description", microButtonModel: "microButtonModel", gradient: "gradient" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <div *ngIf=\"microButtonModel\" [nasClass]=\"getClass('micro-button')\">\n    <nas-micro-button primary icon=\"left--light\" [model]=\"microButtonModel\"></nas-micro-button>\n  </div>\n  <header [nasClass]=\"gradient ? getClass('gradient-header') : getClass('header')\"\n    [style.--bg-image]=\"getBackgroundImage()\" [style.background-color]=\"getBackgroundColor()\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{ title }}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n  </header>\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)}}:host{--primary-base-color: #d81939}.nas-campaign-header{max-width:820px;margin:24px auto 36px}.nas-campaign-header__header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat}@media (min-width: 640px){.nas-campaign-header__header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__gradient-header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat;background:linear-gradient(180deg,rgba(0,50,81,0) 0%,rgba(0,50,81,.8) 100%),var(--bg-image, none),lightgray 50%/cover no-repeat}@media (min-width: 640px){.nas-campaign-header__gradient-header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__micro-button{position:absolute;padding:16px}@media (min-width: 640px){.nas-campaign-header__micro-button{padding:32px}}.nas-campaign-header__content{flex-grow:2}.nas-campaign-header__title{font-size:28px;color:#fff;padding:0 16px 8px;margin:unset!important}@media (min-width: 640px){.nas-campaign-header__title{font-size:50px;line-height:56px;padding:0 32px 16px}}.nas-campaign-header__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;font-size:16px;line-height:26px;padding:0 16px 16px}@media (min-width: 640px){.nas-campaign-header__description{padding:0 32px 32px;font-size:18px;line-height:26px}}.nas-campaign-header--small{margin-bottom:24px}.nas-campaign-header--small .nas-campaign-header__title{font-size:24px;line-height:30px}.nas-campaign-header--small .nas-campaign-header__header{height:auto;background-image:none;border-bottom:2px solid #003251}::ng-deep .nas-micro-button--text{border-bottom:none;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.MicroButtonComponent, selector: "nas-micro-button", inputs: ["icon", "iconType", "href", "target", "primary", "secondary", "white", "disabled", "iconLeft", "trackingvalue", "ariaLabel", "tabindex", "type"], outputs: ["clickChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CampaignHeaderComponent, selector: "nas-campaign-header", inputs: { title: "title", source: "source", description: "description", microButtonModel: "microButtonModel", gradient: "gradient" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <div *ngIf=\"microButtonModel\" [nasClass]=\"getClass('micro-button')\">\n    <nas-micro-button primary icon=\"left--light\" [model]=\"microButtonModel\"></nas-micro-button>\n  </div>\n  <header [nasClass]=\"gradient ? getClass('gradient-header') : getClass('header')\"\n    [style.--bg-image]=\"getBackgroundImage()\" [style.background-color]=\"getBackgroundColor()\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{ title }}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n  </header>\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)}}:host{--primary-base-color: #d81939}.nas-campaign-header{max-width:820px;margin:24px auto 36px}.nas-campaign-header__header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat}@media (min-width: 640px){.nas-campaign-header__header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__gradient-header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat;background:linear-gradient(180deg,rgba(0,50,81,0) 0%,rgba(0,50,81,.8) 100%),var(--bg-image, none),lightgray 50%/cover no-repeat}@media (min-width: 640px){.nas-campaign-header__gradient-header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__micro-button{position:absolute;padding:16px}@media (min-width: 640px){.nas-campaign-header__micro-button{padding:32px}}.nas-campaign-header__content{flex-grow:2}.nas-campaign-header__title{font-size:28px;color:#fff;padding:0 16px 8px;margin:unset!important}@media (min-width: 640px){.nas-campaign-header__title{font-size:50px;line-height:56px;padding:0 32px 16px}}.nas-campaign-header__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;font-size:16px;line-height:26px;padding:0 16px 16px}@media (min-width: 640px){.nas-campaign-header__description{padding:0 32px 32px;font-size:18px;line-height:26px}}.nas-campaign-header--small{margin-bottom:24px}.nas-campaign-header--small .nas-campaign-header__title{font-size:24px;line-height:30px}.nas-campaign-header--small .nas-campaign-header__header{height:auto;background-image:none;border-bottom:2px solid #15273f}::ng-deep .nas-micro-button--text{border-bottom:none;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.MicroButtonComponent, selector: "nas-micro-button", inputs: ["icon", "iconType", "href", "target", "primary", "secondary", "white", "disabled", "iconLeft", "trackingvalue", "ariaLabel", "tabindex", "type"], outputs: ["clickChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CampaignHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-campaign-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div *ngIf=\"microButtonModel\" [nasClass]=\"getClass('micro-button')\">\n    <nas-micro-button primary icon=\"left--light\" [model]=\"microButtonModel\"></nas-micro-button>\n  </div>\n  <header [nasClass]=\"gradient ? getClass('gradient-header') : getClass('header')\"\n    [style.--bg-image]=\"getBackgroundImage()\" [style.background-color]=\"getBackgroundColor()\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{ title }}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n  </header>\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)}}:host{--primary-base-color: #d81939}.nas-campaign-header{max-width:820px;margin:24px auto 36px}.nas-campaign-header__header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat}@media (min-width: 640px){.nas-campaign-header__header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__gradient-header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat;background:linear-gradient(180deg,rgba(0,50,81,0) 0%,rgba(0,50,81,.8) 100%),var(--bg-image, none),lightgray 50%/cover no-repeat}@media (min-width: 640px){.nas-campaign-header__gradient-header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__micro-button{position:absolute;padding:16px}@media (min-width: 640px){.nas-campaign-header__micro-button{padding:32px}}.nas-campaign-header__content{flex-grow:2}.nas-campaign-header__title{font-size:28px;color:#fff;padding:0 16px 8px;margin:unset!important}@media (min-width: 640px){.nas-campaign-header__title{font-size:50px;line-height:56px;padding:0 32px 16px}}.nas-campaign-header__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;font-size:16px;line-height:26px;padding:0 16px 16px}@media (min-width: 640px){.nas-campaign-header__description{padding:0 32px 32px;font-size:18px;line-height:26px}}.nas-campaign-header--small{margin-bottom:24px}.nas-campaign-header--small .nas-campaign-header__title{font-size:24px;line-height:30px}.nas-campaign-header--small .nas-campaign-header__header{height:auto;background-image:none;border-bottom:2px solid #003251}::ng-deep .nas-micro-button--text{border-bottom:none;font-weight:700}\n"] }]
+            args: [{ selector: 'nas-campaign-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div *ngIf=\"microButtonModel\" [nasClass]=\"getClass('micro-button')\">\n    <nas-micro-button primary icon=\"left--light\" [model]=\"microButtonModel\"></nas-micro-button>\n  </div>\n  <header [nasClass]=\"gradient ? getClass('gradient-header') : getClass('header')\"\n    [style.--bg-image]=\"getBackgroundImage()\" [style.background-color]=\"getBackgroundColor()\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{ title }}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n  </header>\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)}}:host{--primary-base-color: #d81939}.nas-campaign-header{max-width:820px;margin:24px auto 36px}.nas-campaign-header__header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat}@media (min-width: 640px){.nas-campaign-header__header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__gradient-header{display:flex;align-items:flex-end;height:250px;background-image:var(--bg-image, none);background-size:cover;background-position:center;background-repeat:no-repeat;background:linear-gradient(180deg,rgba(0,50,81,0) 0%,rgba(0,50,81,.8) 100%),var(--bg-image, none),lightgray 50%/cover no-repeat}@media (min-width: 640px){.nas-campaign-header__gradient-header{padding-left:0;background-size:cover;height:300px}}.nas-campaign-header__micro-button{position:absolute;padding:16px}@media (min-width: 640px){.nas-campaign-header__micro-button{padding:32px}}.nas-campaign-header__content{flex-grow:2}.nas-campaign-header__title{font-size:28px;color:#fff;padding:0 16px 8px;margin:unset!important}@media (min-width: 640px){.nas-campaign-header__title{font-size:50px;line-height:56px;padding:0 32px 16px}}.nas-campaign-header__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;font-size:16px;line-height:26px;padding:0 16px 16px}@media (min-width: 640px){.nas-campaign-header__description{padding:0 32px 32px;font-size:18px;line-height:26px}}.nas-campaign-header--small{margin-bottom:24px}.nas-campaign-header--small .nas-campaign-header__title{font-size:24px;line-height:30px}.nas-campaign-header--small .nas-campaign-header__header{height:auto;background-image:none;border-bottom:2px solid #15273f}::ng-deep .nas-micro-button--text{border-bottom:none;font-weight:700}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], source: [{

package/esm2022/lib/components/checkbox/checkbox.component.mjs CHANGED Viewed

@@ -94,11 +94,11 @@ export class CheckboxComponent extends NasComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxComponent, selector: "nas-checkbox", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [nasClass]=\"mainClass\">\n    <input type=\"checkbox\"\n      #input\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [disabled]=\"exists(disabled)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (change)=\"inputChanged($event)\"\n      (click)=\"inputClicked($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n  <label [nasClass]=\"mainClass\"\n    #inputReactive\n    [formGroup]=\"nasFormGroup\">\n    <input type=\"checkbox\"\n      [formControlName]=\"nasFormControlName\"\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (keydown)=\"onKeydown($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#909090}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#003251}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(1);opacity:1}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#003251}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox input:focus+.nas-checkbox__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:0;left:0;width:18px;height:18px;background-color:#fff}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox__indicator:after{content:\"\";position:absolute;bottom:-6px;width:100%;border-bottom:3px solid #c3c3c3}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#c3c3c3}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #c3c3c3}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #E5212D}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxComponent, selector: "nas-checkbox", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [nasClass]=\"mainClass\">\n    <input type=\"checkbox\"\n      #input\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [disabled]=\"exists(disabled)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (change)=\"inputChanged($event)\"\n      (click)=\"inputClicked($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n  <label [nasClass]=\"mainClass\"\n    #inputReactive\n    [formGroup]=\"nasFormGroup\">\n    <input type=\"checkbox\"\n      [formControlName]=\"nasFormControlName\"\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (keydown)=\"onKeydown($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#909090}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#15273f}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(1);opacity:1}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#15273f}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox input:focus+.nas-checkbox__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:0;left:0;width:18px;height:18px;background-color:#fff}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox__indicator:after{content:\"\";position:absolute;bottom:-6px;width:100%;border-bottom:3px solid #c3c3c3}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#c3c3c3}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #c3c3c3}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #E5212D}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-checkbox', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [nasClass]=\"mainClass\">\n    <input type=\"checkbox\"\n      #input\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [disabled]=\"exists(disabled)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (change)=\"inputChanged($event)\"\n      (click)=\"inputClicked($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n  <label [nasClass]=\"mainClass\"\n    #inputReactive\n    [formGroup]=\"nasFormGroup\">\n    <input type=\"checkbox\"\n      [formControlName]=\"nasFormControlName\"\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (keydown)=\"onKeydown($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#909090}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#003251}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(1);opacity:1}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#003251}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox input:focus+.nas-checkbox__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:0;left:0;width:18px;height:18px;background-color:#fff}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox__indicator:after{content:\"\";position:absolute;bottom:-6px;width:100%;border-bottom:3px solid #c3c3c3}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#c3c3c3}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #c3c3c3}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #E5212D}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{display:block}\n"] }]
+            args: [{ selector: 'nas-checkbox', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [nasClass]=\"mainClass\">\n    <input type=\"checkbox\"\n      #input\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [disabled]=\"exists(disabled)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (change)=\"inputChanged($event)\"\n      (click)=\"inputClicked($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n  <label [nasClass]=\"mainClass\"\n    #inputReactive\n    [formGroup]=\"nasFormGroup\">\n    <input type=\"checkbox\"\n      [formControlName]=\"nasFormControlName\"\n      [id]=\"inputId\"\n      [checked]=\"exists(checked)\"\n      [required]=\"exists(required)\"\n      [tabIndex]=\"tabIndex\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabel || null\"\n      [attr.aria-labelledby]=\"ariaLabelledby\"\n      [attr.aria-describedby]=\"ariaLabelledby\"\n      [attr.value]=\"value\"\n      (keydown)=\"onKeydown($event)\" />\n    <span [nasClass]=\"getClass('indicator')\"></span>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:27px;margin-bottom:24px;margin-right:24px;color:#002a3a}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#909090}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#15273f}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(1);opacity:1}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#15273f}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox input:focus+.nas-checkbox__indicator{box-shadow:0 0 1px 2px #e3e3e3,0 0 2px 3px #3b99fc}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;top:0;left:0;width:18px;height:18px;background-color:#fff}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox__indicator:after{content:\"\";position:absolute;bottom:-6px;width:100%;border-bottom:3px solid #c3c3c3}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#d8d8d8}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#c3c3c3}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #c3c3c3}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{width:22px;height:22px;border:2px solid #E5212D}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']

package/esm2022/lib/components/checkbox-new/checkbox-new.component.mjs CHANGED Viewed

@@ -94,11 +94,11 @@ export class CheckboxNewComponent extends NasComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxNewComponent, selector: "nas-checkbox-new", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n    <label [nasClass]=\"mainClass\">\n      <input type=\"checkbox\"\n        #input\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [disabled]=\"exists(disabled)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (change)=\"inputChanged($event)\"\n        (click)=\"inputClicked($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-container>\n  \n  <ng-template #reactiveForm>\n    <label [nasClass]=\"mainClass\"\n      #inputReactive\n      [formGroup]=\"nasFormGroup\">\n      <input type=\"checkbox\"\n        [formControlName]=\"nasFormControlName\"\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (keydown)=\"onKeydown($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-template>\n  \n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox-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-checkbox-new:hover .nas-checkbox-new__indicator:after{border-color:#909090}.nas-checkbox-new input{position:absolute;opacity:0;z-index:-1}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:after{border-color:#003251}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:hover:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox-new__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox-new__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-checkbox-new__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled{color:#6f6f6f;cursor:default}.nas-checkbox-new--disabled .nas-checkbox-new__indicator{background-color:#e3e3e3}.nas-checkbox-new--disabled .nas-checkbox-new__indicator:before{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled:hover .nas-checkbox-new__indicator:after{border-color:#c3c3c3}.nas-checkbox-new--error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--inverted{color:#fff}.nas-checkbox-new--inverted input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted input+.nas-checkbox-new__indicator:after{border-color:#fff}.nas-checkbox-new--inverted-error{color:#fff}.nas-checkbox-new--inverted-error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted-error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--outlined .nas-checkbox-new__indicator{border:2px solid #c3c3c3}.nas-checkbox-new--outlined .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--spaceless{margin-bottom:6px}.nas-checkbox-new--block{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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxNewComponent, selector: "nas-checkbox-new", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n    <label [nasClass]=\"mainClass\">\n      <input type=\"checkbox\"\n        #input\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [disabled]=\"exists(disabled)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (change)=\"inputChanged($event)\"\n        (click)=\"inputClicked($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-container>\n  \n  <ng-template #reactiveForm>\n    <label [nasClass]=\"mainClass\"\n      #inputReactive\n      [formGroup]=\"nasFormGroup\">\n      <input type=\"checkbox\"\n        [formControlName]=\"nasFormControlName\"\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (keydown)=\"onKeydown($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-template>\n  \n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox-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-checkbox-new:hover .nas-checkbox-new__indicator:after{border-color:#909090}.nas-checkbox-new input{position:absolute;opacity:0;z-index:-1}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:after{border-color:#15273f}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:hover:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox-new__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox-new__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-checkbox-new__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled{color:#6f6f6f;cursor:default}.nas-checkbox-new--disabled .nas-checkbox-new__indicator{background-color:#e3e3e3}.nas-checkbox-new--disabled .nas-checkbox-new__indicator:before{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled:hover .nas-checkbox-new__indicator:after{border-color:#c3c3c3}.nas-checkbox-new--error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--inverted{color:#fff}.nas-checkbox-new--inverted input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted input+.nas-checkbox-new__indicator:after{border-color:#fff}.nas-checkbox-new--inverted-error{color:#fff}.nas-checkbox-new--inverted-error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted-error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--outlined .nas-checkbox-new__indicator{border:2px solid #c3c3c3}.nas-checkbox-new--outlined .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--spaceless{margin-bottom:6px}.nas-checkbox-new--block{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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxNewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-checkbox-new', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n    <label [nasClass]=\"mainClass\">\n      <input type=\"checkbox\"\n        #input\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [disabled]=\"exists(disabled)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (change)=\"inputChanged($event)\"\n        (click)=\"inputClicked($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-container>\n  \n  <ng-template #reactiveForm>\n    <label [nasClass]=\"mainClass\"\n      #inputReactive\n      [formGroup]=\"nasFormGroup\">\n      <input type=\"checkbox\"\n        [formControlName]=\"nasFormControlName\"\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (keydown)=\"onKeydown($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-template>\n  \n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox-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-checkbox-new:hover .nas-checkbox-new__indicator:after{border-color:#909090}.nas-checkbox-new input{position:absolute;opacity:0;z-index:-1}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:after{border-color:#003251}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:hover:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox-new__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox-new__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-checkbox-new__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled{color:#6f6f6f;cursor:default}.nas-checkbox-new--disabled .nas-checkbox-new__indicator{background-color:#e3e3e3}.nas-checkbox-new--disabled .nas-checkbox-new__indicator:before{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled:hover .nas-checkbox-new__indicator:after{border-color:#c3c3c3}.nas-checkbox-new--error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--inverted{color:#fff}.nas-checkbox-new--inverted input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted input+.nas-checkbox-new__indicator:after{border-color:#fff}.nas-checkbox-new--inverted-error{color:#fff}.nas-checkbox-new--inverted-error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted-error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--outlined .nas-checkbox-new__indicator{border:2px solid #c3c3c3}.nas-checkbox-new--outlined .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--spaceless{margin-bottom:6px}.nas-checkbox-new--block{display:block}\n"] }]
+            args: [{ selector: 'nas-checkbox-new', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n    <label [nasClass]=\"mainClass\">\n      <input type=\"checkbox\"\n        #input\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [disabled]=\"exists(disabled)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (change)=\"inputChanged($event)\"\n        (click)=\"inputClicked($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-container>\n  \n  <ng-template #reactiveForm>\n    <label [nasClass]=\"mainClass\"\n      #inputReactive\n      [formGroup]=\"nasFormGroup\">\n      <input type=\"checkbox\"\n        [formControlName]=\"nasFormControlName\"\n        [id]=\"inputId\"\n        [checked]=\"exists(checked)\"\n        [required]=\"exists(required)\"\n        [tabIndex]=\"tabIndex\"\n        [attr.name]=\"name\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaLabelledby\"\n        [attr.value]=\"value\"\n        (keydown)=\"onKeydown($event)\" />\n      <span [nasClass]=\"getClass('indicator')\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </label>\n  </ng-template>\n  \n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox-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-checkbox-new:hover .nas-checkbox-new__indicator:after{border-color:#909090}.nas-checkbox-new input{position:absolute;opacity:0;z-index:-1}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox-new input:checked+.nas-checkbox-new__indicator:after{border-color:#15273f}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:hover:after,.nas-checkbox-new input[disabled]+.nas-checkbox-new__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox-new__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox-new__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-checkbox-new__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled{color:#6f6f6f;cursor:default}.nas-checkbox-new--disabled .nas-checkbox-new__indicator{background-color:#e3e3e3}.nas-checkbox-new--disabled .nas-checkbox-new__indicator:before{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox-new--disabled:hover .nas-checkbox-new__indicator:after{border-color:#c3c3c3}.nas-checkbox-new--error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--inverted{color:#fff}.nas-checkbox-new--inverted input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted input+.nas-checkbox-new__indicator:after{border-color:#fff}.nas-checkbox-new--inverted-error{color:#fff}.nas-checkbox-new--inverted-error input:checked+.nas-checkbox-new__indicator:after,.nas-checkbox-new--inverted-error input+.nas-checkbox-new__indicator:after{border-color:#e5212d}.nas-checkbox-new--outlined .nas-checkbox-new__indicator{border:2px solid #c3c3c3}.nas-checkbox-new--outlined .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox-new--outlined-error .nas-checkbox-new__indicator:after{display:none}.nas-checkbox-new--spaceless{margin-bottom:6px}.nas-checkbox-new--block{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']

package/esm2022/lib/components/cover/cover.component.mjs CHANGED Viewed

@@ -40,11 +40,11 @@ export class CoverComponent extends NasComponentBase {
         return classes;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CoverComponent, selector: "nas-cover", inputs: { wide: "wide", noIllustration: "noIllustration", spaceless: "spaceless", small: "small", title: "title", preamble: "preamble", cssClass: "cssClass", illustration: "illustration", fluid: "fluid", stripped: "stripped", description: "description", backLink: "backLink", useRouterLink: "useRouterLink" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClasses()\">\n  <div *ngIf=\"backLink\">\n    <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n    <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n      [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n  </div>\n  <header [nasClass]=\"getClass('header')\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n    <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n    <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n      <ng-content></ng-content>\n    </div>\n  </header>\n  <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\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-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #003251}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#003251;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#003251;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--no-illustration .nas-cover__header{background-image:none}.nas-cover--no-illustration .nas-cover__additions{max-width:300px}.nas-cover--spaceless{margin-bottom:0}.nas-cover--small{margin-bottom:24px}.nas-cover--small .nas-cover__title{font-size:24px;line-height:30px}.nas-cover--small .nas-cover__header{height:auto;background-image:none;border-bottom:2px solid #003251}.nas-cover--small .nas-cover__additions{height:auto}.nas-cover--stripped .nas-cover__header{background-image:none;border-bottom:0}.nas-cover--fluid{max-width:100%}.nas-cover--fluid .nas-cover__header{padding-left:0;height:auto}.nas-cover--illustration .nas-cover__header{position:relative;background-image:none;height:114px}@media (min-width: 480px){.nas-cover--illustration .nas-cover__header{padding-right:240px}}@media (min-width: 1000px){.nas-cover--illustration .nas-cover__header{padding-right:270px}}.nas-cover--illustration .nas-cover__content{position:relative;z-index:2}::ng-deep .nas-cover .nas-icon-large{background-size:370px 150px}::ng-deep .nas-button--link{border-bottom:none;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "approve", "light", "large", "block", "flex", "compact", "right", "spaceless", "transparent", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target"], outputs: ["clickChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CoverComponent, selector: "nas-cover", inputs: { wide: "wide", noIllustration: "noIllustration", spaceless: "spaceless", small: "small", title: "title", preamble: "preamble", cssClass: "cssClass", illustration: "illustration", fluid: "fluid", stripped: "stripped", description: "description", backLink: "backLink", useRouterLink: "useRouterLink" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClasses()\">\n  <div *ngIf=\"backLink\">\n    <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n    <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n      [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n  </div>\n  <header [nasClass]=\"getClass('header')\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n    <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n    <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n      <ng-content></ng-content>\n    </div>\n  </header>\n  <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\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-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #15273f}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#15273f;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#15273f;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--no-illustration .nas-cover__header{background-image:none}.nas-cover--no-illustration .nas-cover__additions{max-width:300px}.nas-cover--spaceless{margin-bottom:0}.nas-cover--small{margin-bottom:24px}.nas-cover--small .nas-cover__title{font-size:24px;line-height:30px}.nas-cover--small .nas-cover__header{height:auto;background-image:none;border-bottom:2px solid #15273f}.nas-cover--small .nas-cover__additions{height:auto}.nas-cover--stripped .nas-cover__header{background-image:none;border-bottom:0}.nas-cover--fluid{max-width:100%}.nas-cover--fluid .nas-cover__header{padding-left:0;height:auto}.nas-cover--illustration .nas-cover__header{position:relative;background-image:none;height:114px}@media (min-width: 480px){.nas-cover--illustration .nas-cover__header{padding-right:240px}}@media (min-width: 1000px){.nas-cover--illustration .nas-cover__header{padding-right:270px}}.nas-cover--illustration .nas-cover__content{position:relative;z-index:2}::ng-deep .nas-cover .nas-icon-large{background-size:370px 150px}::ng-deep .nas-button--link{border-bottom:none;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "approve", "light", "large", "block", "flex", "compact", "right", "spaceless", "transparent", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target"], outputs: ["clickChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-cover', template: "<div [nasClass]=\"getClasses()\">\n  <div *ngIf=\"backLink\">\n    <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n    <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n      [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n  </div>\n  <header [nasClass]=\"getClass('header')\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n    <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n    <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n      <ng-content></ng-content>\n    </div>\n  </header>\n  <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\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-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #003251}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#003251;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#003251;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--no-illustration .nas-cover__header{background-image:none}.nas-cover--no-illustration .nas-cover__additions{max-width:300px}.nas-cover--spaceless{margin-bottom:0}.nas-cover--small{margin-bottom:24px}.nas-cover--small .nas-cover__title{font-size:24px;line-height:30px}.nas-cover--small .nas-cover__header{height:auto;background-image:none;border-bottom:2px solid #003251}.nas-cover--small .nas-cover__additions{height:auto}.nas-cover--stripped .nas-cover__header{background-image:none;border-bottom:0}.nas-cover--fluid{max-width:100%}.nas-cover--fluid .nas-cover__header{padding-left:0;height:auto}.nas-cover--illustration .nas-cover__header{position:relative;background-image:none;height:114px}@media (min-width: 480px){.nas-cover--illustration .nas-cover__header{padding-right:240px}}@media (min-width: 1000px){.nas-cover--illustration .nas-cover__header{padding-right:270px}}.nas-cover--illustration .nas-cover__content{position:relative;z-index:2}::ng-deep .nas-cover .nas-icon-large{background-size:370px 150px}::ng-deep .nas-button--link{border-bottom:none;font-weight:700}\n"] }]
+            args: [{ selector: 'nas-cover', template: "<div [nasClass]=\"getClasses()\">\n  <div *ngIf=\"backLink\">\n    <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n    <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n      [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n  </div>\n  <header [nasClass]=\"getClass('header')\">\n    <div [nasClass]=\"getClass('content')\">\n      <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n      <div [nasClass]=\"getClass('description')\">\n        <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n        <ng-template #descriptionContent>\n          <ng-content select=\"[description]\"></ng-content>\n        </ng-template>\n      </div>\n    </div>\n    <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n    <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n      <ng-content></ng-content>\n    </div>\n  </header>\n  <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\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-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #15273f}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#15273f;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#15273f;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--no-illustration .nas-cover__header{background-image:none}.nas-cover--no-illustration .nas-cover__additions{max-width:300px}.nas-cover--spaceless{margin-bottom:0}.nas-cover--small{margin-bottom:24px}.nas-cover--small .nas-cover__title{font-size:24px;line-height:30px}.nas-cover--small .nas-cover__header{height:auto;background-image:none;border-bottom:2px solid #15273f}.nas-cover--small .nas-cover__additions{height:auto}.nas-cover--stripped .nas-cover__header{background-image:none;border-bottom:0}.nas-cover--fluid{max-width:100%}.nas-cover--fluid .nas-cover__header{padding-left:0;height:auto}.nas-cover--illustration .nas-cover__header{position:relative;background-image:none;height:114px}@media (min-width: 480px){.nas-cover--illustration .nas-cover__header{padding-right:240px}}@media (min-width: 1000px){.nas-cover--illustration .nas-cover__header{padding-right:270px}}.nas-cover--illustration .nas-cover__content{position:relative;z-index:2}::ng-deep .nas-cover .nas-icon-large{background-size:370px 150px}::ng-deep .nas-button--link{border-bottom:none;font-weight:700}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { wide: [{
                 type: Input
             }], noIllustration: [{