@norwegian/core-components 6.60.0 → 7.0.0

package/esm2022/lib/components/divider/divider.module.mjs

@@ -6,11 +6,11 @@ import { NasClassModule } from '../../core/directives/nas-class/nas-class.module
 import * as i0 from "@angular/core";
 export class DividerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: DividerModule, declarations: [DividerComponent], imports: [CommonModule,
-            NasClassModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: DividerModule, declarations: [DividerComponent], imports: [NasClassModule,
+            CommonModule,
             RouterModule], exports: [DividerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DividerModule, imports: [CommonModule,
-            NasClassModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DividerModule, imports: [NasClassModule,
+            CommonModule,
             RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DividerModule, decorators: [{
@@ -18,11 +18,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
             args: [{
                     declarations: [DividerComponent],
                     imports: [
-                        CommonModule,
                         NasClassModule,
+                        CommonModule,
                         RouterModule
                     ],
                     exports: [DividerComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGl2aWRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2RpdmlkZXIvZGl2aWRlci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrREFBa0QsQ0FBQzs7QUFXbEYsTUFBTSxPQUFPLGFBQWE7OEdBQWIsYUFBYTsrR0FBYixhQUFhLGlCQVJULGdCQUFnQixhQUU3QixZQUFZO1lBQ1osY0FBYztZQUNkLFlBQVksYUFFSixnQkFBZ0I7K0dBRWYsYUFBYSxZQU50QixZQUFZO1lBQ1osY0FBYztZQUNkLFlBQVk7OzJGQUlILGFBQWE7a0JBVHpCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZ0JBQWdCLENBQUM7b0JBQ2hDLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLGNBQWM7d0JBQ2QsWUFBWTtxQkFDYjtvQkFDRCxPQUFPLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQztpQkFDNUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRlck1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBEaXZpZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9kaXZpZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOYXNDbGFzc01vZHVsZSB9IGZyb20gJy4uLy4uL2NvcmUvZGlyZWN0aXZlcy9uYXMtY2xhc3MvbmFzLWNsYXNzLm1vZHVsZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0RpdmlkZXJDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIE5hc0NsYXNzTW9kdWxlLFxuICAgIFJvdXRlck1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbRGl2aWRlckNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIERpdmlkZXJNb2R1bGUgeyB9Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGl2aWRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2RpdmlkZXIvZGl2aWRlci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrREFBa0QsQ0FBQzs7QUFXbEYsTUFBTSxPQUFPLGFBQWE7OEdBQWIsYUFBYTsrR0FBYixhQUFhLGlCQVJULGdCQUFnQixhQUU3QixjQUFjO1lBQ2QsWUFBWTtZQUNaLFlBQVksYUFFSixnQkFBZ0I7K0dBRWYsYUFBYSxZQU50QixjQUFjO1lBQ2QsWUFBWTtZQUNaLFlBQVk7OzJGQUlILGFBQWE7a0JBVHpCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZ0JBQWdCLENBQUM7b0JBQ2hDLE9BQU8sRUFBRTt3QkFDUCxjQUFjO3dCQUNkLFlBQVk7d0JBQ1osWUFBWTtxQkFDYjtvQkFDRCxPQUFPLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQztpQkFDNUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJvdXRlck1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBEaXZpZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9kaXZpZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOYXNDbGFzc01vZHVsZSB9IGZyb20gJy4uLy4uL2NvcmUvZGlyZWN0aXZlcy9uYXMtY2xhc3MvbmFzLWNsYXNzLm1vZHVsZSc7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0RpdmlkZXJDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgTmFzQ2xhc3NNb2R1bGUsXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIFJvdXRlck1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbRGl2aWRlckNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIERpdmlkZXJNb2R1bGUgeyB9Il19

package/esm2022/lib/components/dropdown/dropdown.component.mjs

@@ -128,11 +128,11 @@ export class DropdownComponent extends NasComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: DropdownComponent, selector: "nas-dropdown", inputs: { open: "open", id: "id", ariaLabelBackdrop: "ariaLabelBackdrop", cssClass: "cssClass", inline: "inline", label: "label", stretched: "stretched", labelStyle: "labelStyle" }, outputs: { openChange: "openChange" }, host: { properties: { "class.inline": "this.useInline" } }, viewQueries: [{ propertyName: "toggleElement", first: true, predicate: ["toggleElement"], descendants: true }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }, { propertyName: "contentParent", first: true, predicate: ["contentParent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getMainClass()\"\n  [id]=\"getId()\">\n  <button type=\"button\"\n    #toggleElement\n    [nasClass]=\"getClass('toggle', [open && 'active', !open && 'blured'])\"\n    (mousedown)=\"toggle()\"\n    (focus)=\"toggleOnFocus($event)\">\n    <div [nasClass]=\"getClass('label')\"\n      [ngStyle]=\"labelStyle\">{{label}}</div>\n    <nas-icon [nasClass]=\"getClass('dropdown-icon', open && 'rotate')\"\n      [icon]=\"'arrow-right'\"\n      [type]=\"'chevron-down'\"\n      [isIndicator]=\"true\"></nas-icon>\n  </button>\n  <div [nasClass]=\"getClass('body')\">\n    <div [nasClass]=\"getClass('content')\"\n      [ngStyle]=\"position\"\n      *ngIf=\"open\"\n      tabindex=\"-1\">\n      <span [nasClass]=\"getClass('arrow')\"\n        [ngStyle]=\"arrowPosition\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div *ngIf=\"!open\" #contentElement\n      [nasClass]=\"getClass('content', 'hidden')\" [style.maxWidth]=\"maxWidth - 24 + 'px'\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  </div>\n  <button type=\"button\"\n    tabindex=\"0\"\n    *ngIf=\"open\"\n    [attr.aria-label]=\"ariaLabelBackdrop\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"toggle()\"></button>\n</div>\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)}}:host(.inline){display:inline-block}.nas-dropdown{position:relative;display:inline-block;height:100%}.nas-dropdown__toggle{position:relative;z-index:3;padding:9px 16px;background-color:#fff;outline:0;text-align:left;white-space:nowrap;align-items:center}.nas-dropdown__toggle:after{content:\"\";position:absolute;width:100%;left:0;bottom:-6px;height:3px;background-color:#c3c3c3;display:none;animation:fade-in .1s linear both;animation-delay:.13s}.nas-dropdown__toggle:focus{outline:none}.nas-dropdown__toggle:focus:after{background-color:transparent}.nas-dropdown__toggle--blured:focus{transition:box-shadow .9s;outline:none;box-shadow:inset 0 0 2px #c3c3c3,inset 0 0 2px 3px #3b99fc}.nas-dropdown__toggle--active{background-color:#f1f1f1}.nas-dropdown__toggle--active:focus{box-shadow:none}.nas-dropdown__indicator{margin-left:9px}.nas-dropdown__body{position:relative;z-index:4;perspective:1000px}.nas-dropdown__arrow{position:absolute;width:16px;height:16px;top:-10px;left:calc(50% - 8px);background-color:inherit;transform:rotate(45deg);border-top:3px solid #15273f;border-left:3px solid #15273f}.nas-dropdown__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;outline:0;position:absolute;padding:16px;margin-top:16px;background-color:#fff;left:calc(50% - 150px);min-width:300px;max-width:calc(100vw - 24px);box-shadow:0 2px 12px #0000000d;border:3px solid #15273f}.nas-dropdown__content--tight{left:calc(50% - 100px);width:200px}.nas-dropdown__content--wide{left:calc(50% - 180px);width:360px}.nas-dropdown__content--form{padding:16px 16px 24px;background-color:#f1f1f1}.nas-dropdown__content--hidden{visibility:hidden;overflow:hidden;height:0;padding:0;margin:0;border:0}.nas-dropdown__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .5s ease-out both}.nas-dropdown--inline .nas-dropdown__toggle{padding:0;background-color:transparent}.nas-dropdown--inline .nas-dropdown__toggle:after{display:block}.nas-dropdown--stretched{display:block}.nas-dropdown--stretched button{width:100%!important}.nas-dropdown--stretched .nas-dropdown__content{width:300px;margin:16px auto 0}.nas-dropdown__label{display:inline-block}::ng-deep .nas-dropdown__dropdown-icon{float:right}::ng-deep .nas-dropdown__dropdown-icon--rotate .nas-icon-chevron-down{transform:rotate(180deg)}::ng-deep .nas-dropdown__dropdown-icon .nas-icon-chevron-down{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}\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: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: DropdownComponent, selector: "nas-dropdown", inputs: { open: "open", id: "id", ariaLabelBackdrop: "ariaLabelBackdrop", cssClass: "cssClass", inline: "inline", label: "label", stretched: "stretched", labelStyle: "labelStyle" }, outputs: { openChange: "openChange" }, host: { properties: { "class.inline": "this.useInline" } }, viewQueries: [{ propertyName: "toggleElement", first: true, predicate: ["toggleElement"], descendants: true }, { propertyName: "contentElement", first: true, predicate: ["contentElement"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }, { propertyName: "contentParent", first: true, predicate: ["contentParent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getMainClass()\"\n  [id]=\"getId()\">\n  <button type=\"button\"\n    #toggleElement\n    [nasClass]=\"getClass('toggle', [open && 'active', !open && 'blured'])\"\n    (mousedown)=\"toggle()\"\n    (focus)=\"toggleOnFocus($event)\">\n    <div [nasClass]=\"getClass('label')\"\n      [ngStyle]=\"labelStyle\">{{label}}</div>\n    <nas-icon [nasClass]=\"getClass('dropdown-icon', open && 'rotate')\"\n      [icon]=\"'arrow-right'\"\n      [type]=\"'chevron-down'\"\n      [isIndicator]=\"true\"></nas-icon>\n  </button>\n  <div [nasClass]=\"getClass('body')\">\n    <div [nasClass]=\"getClass('content')\"\n      [ngStyle]=\"position\"\n      *ngIf=\"open\"\n      tabindex=\"-1\">\n      <span [nasClass]=\"getClass('arrow')\"\n        [ngStyle]=\"arrowPosition\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div *ngIf=\"!open\" #contentElement\n      [nasClass]=\"getClass('content', 'hidden')\" [style.maxWidth]=\"maxWidth - 24 + 'px'\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  </div>\n  <button type=\"button\"\n    tabindex=\"0\"\n    *ngIf=\"open\"\n    [attr.aria-label]=\"ariaLabelBackdrop\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"toggle()\"></button>\n</div>\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)}}:host(.inline){display:inline-block}.nas-dropdown{position:relative;display:inline-block;height:100%}.nas-dropdown__toggle{position:relative;z-index:3;padding:9px 16px;background-color:#fff;outline:0;text-align:left;white-space:nowrap;align-items:center}.nas-dropdown__toggle:after{content:\"\";position:absolute;width:100%;left:0;bottom:-6px;height:3px;background-color:#e9e7e4;display:none;animation:fade-in .1s linear both;animation-delay:.13s}.nas-dropdown__toggle:focus{outline:none}.nas-dropdown__toggle:focus:after{background-color:transparent}.nas-dropdown__toggle--blured:focus{transition:box-shadow .9s;outline:none;box-shadow:inset 0 0 2px #e9e7e4,inset 0 0 2px 3px #7ca4cd}.nas-dropdown__toggle--active{background-color:#f8f8f8}.nas-dropdown__toggle--active:focus{box-shadow:none}.nas-dropdown__indicator{margin-left:9px}.nas-dropdown__body{position:relative;z-index:4;perspective:1000px}.nas-dropdown__arrow{position:absolute;width:16px;height:16px;top:-10px;left:calc(50% - 8px);background-color:inherit;transform:rotate(45deg);border-top:3px solid #15273F;border-left:3px solid #15273F}.nas-dropdown__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;outline:0;position:absolute;padding:16px;margin-top:16px;background-color:#fff;left:calc(50% - 150px);min-width:300px;max-width:calc(100vw - 24px);box-shadow:0 2px 12px #0000000d;border:3px solid #15273F}.nas-dropdown__content--tight{left:calc(50% - 100px);width:200px}.nas-dropdown__content--wide{left:calc(50% - 180px);width:360px}.nas-dropdown__content--form{padding:16px 16px 24px;background-color:#f8f8f8}.nas-dropdown__content--hidden{visibility:hidden;overflow:hidden;height:0;padding:0;margin:0;border:0}.nas-dropdown__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .5s ease-out both}.nas-dropdown--inline .nas-dropdown__toggle{padding:0;background-color:transparent}.nas-dropdown--inline .nas-dropdown__toggle:after{display:block}.nas-dropdown--stretched{display:block}.nas-dropdown--stretched button{width:100%!important}.nas-dropdown--stretched .nas-dropdown__content{width:300px;margin:16px auto 0}.nas-dropdown__label{display:inline-block}::ng-deep .nas-dropdown__dropdown-icon{float:right}::ng-deep .nas-dropdown__dropdown-icon--rotate .nas-icon-chevron-down{transform:rotate(180deg)}::ng-deep .nas-dropdown__dropdown-icon .nas-icon-chevron-down{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}\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: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-dropdown', template: "<div [nasClass]=\"getMainClass()\"\n  [id]=\"getId()\">\n  <button type=\"button\"\n    #toggleElement\n    [nasClass]=\"getClass('toggle', [open && 'active', !open && 'blured'])\"\n    (mousedown)=\"toggle()\"\n    (focus)=\"toggleOnFocus($event)\">\n    <div [nasClass]=\"getClass('label')\"\n      [ngStyle]=\"labelStyle\">{{label}}</div>\n    <nas-icon [nasClass]=\"getClass('dropdown-icon', open && 'rotate')\"\n      [icon]=\"'arrow-right'\"\n      [type]=\"'chevron-down'\"\n      [isIndicator]=\"true\"></nas-icon>\n  </button>\n  <div [nasClass]=\"getClass('body')\">\n    <div [nasClass]=\"getClass('content')\"\n      [ngStyle]=\"position\"\n      *ngIf=\"open\"\n      tabindex=\"-1\">\n      <span [nasClass]=\"getClass('arrow')\"\n        [ngStyle]=\"arrowPosition\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div *ngIf=\"!open\" #contentElement\n      [nasClass]=\"getClass('content', 'hidden')\" [style.maxWidth]=\"maxWidth - 24 + 'px'\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  </div>\n  <button type=\"button\"\n    tabindex=\"0\"\n    *ngIf=\"open\"\n    [attr.aria-label]=\"ariaLabelBackdrop\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"toggle()\"></button>\n</div>\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)}}:host(.inline){display:inline-block}.nas-dropdown{position:relative;display:inline-block;height:100%}.nas-dropdown__toggle{position:relative;z-index:3;padding:9px 16px;background-color:#fff;outline:0;text-align:left;white-space:nowrap;align-items:center}.nas-dropdown__toggle:after{content:\"\";position:absolute;width:100%;left:0;bottom:-6px;height:3px;background-color:#c3c3c3;display:none;animation:fade-in .1s linear both;animation-delay:.13s}.nas-dropdown__toggle:focus{outline:none}.nas-dropdown__toggle:focus:after{background-color:transparent}.nas-dropdown__toggle--blured:focus{transition:box-shadow .9s;outline:none;box-shadow:inset 0 0 2px #c3c3c3,inset 0 0 2px 3px #3b99fc}.nas-dropdown__toggle--active{background-color:#f1f1f1}.nas-dropdown__toggle--active:focus{box-shadow:none}.nas-dropdown__indicator{margin-left:9px}.nas-dropdown__body{position:relative;z-index:4;perspective:1000px}.nas-dropdown__arrow{position:absolute;width:16px;height:16px;top:-10px;left:calc(50% - 8px);background-color:inherit;transform:rotate(45deg);border-top:3px solid #15273f;border-left:3px solid #15273f}.nas-dropdown__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;outline:0;position:absolute;padding:16px;margin-top:16px;background-color:#fff;left:calc(50% - 150px);min-width:300px;max-width:calc(100vw - 24px);box-shadow:0 2px 12px #0000000d;border:3px solid #15273f}.nas-dropdown__content--tight{left:calc(50% - 100px);width:200px}.nas-dropdown__content--wide{left:calc(50% - 180px);width:360px}.nas-dropdown__content--form{padding:16px 16px 24px;background-color:#f1f1f1}.nas-dropdown__content--hidden{visibility:hidden;overflow:hidden;height:0;padding:0;margin:0;border:0}.nas-dropdown__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .5s ease-out both}.nas-dropdown--inline .nas-dropdown__toggle{padding:0;background-color:transparent}.nas-dropdown--inline .nas-dropdown__toggle:after{display:block}.nas-dropdown--stretched{display:block}.nas-dropdown--stretched button{width:100%!important}.nas-dropdown--stretched .nas-dropdown__content{width:300px;margin:16px auto 0}.nas-dropdown__label{display:inline-block}::ng-deep .nas-dropdown__dropdown-icon{float:right}::ng-deep .nas-dropdown__dropdown-icon--rotate .nas-icon-chevron-down{transform:rotate(180deg)}::ng-deep .nas-dropdown__dropdown-icon .nas-icon-chevron-down{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}\n"] }]
+            args: [{ selector: 'nas-dropdown', template: "<div [nasClass]=\"getMainClass()\"\n  [id]=\"getId()\">\n  <button type=\"button\"\n    #toggleElement\n    [nasClass]=\"getClass('toggle', [open && 'active', !open && 'blured'])\"\n    (mousedown)=\"toggle()\"\n    (focus)=\"toggleOnFocus($event)\">\n    <div [nasClass]=\"getClass('label')\"\n      [ngStyle]=\"labelStyle\">{{label}}</div>\n    <nas-icon [nasClass]=\"getClass('dropdown-icon', open && 'rotate')\"\n      [icon]=\"'arrow-right'\"\n      [type]=\"'chevron-down'\"\n      [isIndicator]=\"true\"></nas-icon>\n  </button>\n  <div [nasClass]=\"getClass('body')\">\n    <div [nasClass]=\"getClass('content')\"\n      [ngStyle]=\"position\"\n      *ngIf=\"open\"\n      tabindex=\"-1\">\n      <span [nasClass]=\"getClass('arrow')\"\n        [ngStyle]=\"arrowPosition\"></span>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div *ngIf=\"!open\" #contentElement\n      [nasClass]=\"getClass('content', 'hidden')\" [style.maxWidth]=\"maxWidth - 24 + 'px'\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n  </div>\n  <button type=\"button\"\n    tabindex=\"0\"\n    *ngIf=\"open\"\n    [attr.aria-label]=\"ariaLabelBackdrop\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"toggle()\"></button>\n</div>\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)}}:host(.inline){display:inline-block}.nas-dropdown{position:relative;display:inline-block;height:100%}.nas-dropdown__toggle{position:relative;z-index:3;padding:9px 16px;background-color:#fff;outline:0;text-align:left;white-space:nowrap;align-items:center}.nas-dropdown__toggle:after{content:\"\";position:absolute;width:100%;left:0;bottom:-6px;height:3px;background-color:#e9e7e4;display:none;animation:fade-in .1s linear both;animation-delay:.13s}.nas-dropdown__toggle:focus{outline:none}.nas-dropdown__toggle:focus:after{background-color:transparent}.nas-dropdown__toggle--blured:focus{transition:box-shadow .9s;outline:none;box-shadow:inset 0 0 2px #e9e7e4,inset 0 0 2px 3px #7ca4cd}.nas-dropdown__toggle--active{background-color:#f8f8f8}.nas-dropdown__toggle--active:focus{box-shadow:none}.nas-dropdown__indicator{margin-left:9px}.nas-dropdown__body{position:relative;z-index:4;perspective:1000px}.nas-dropdown__arrow{position:absolute;width:16px;height:16px;top:-10px;left:calc(50% - 8px);background-color:inherit;transform:rotate(45deg);border-top:3px solid #15273F;border-left:3px solid #15273F}.nas-dropdown__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;outline:0;position:absolute;padding:16px;margin-top:16px;background-color:#fff;left:calc(50% - 150px);min-width:300px;max-width:calc(100vw - 24px);box-shadow:0 2px 12px #0000000d;border:3px solid #15273F}.nas-dropdown__content--tight{left:calc(50% - 100px);width:200px}.nas-dropdown__content--wide{left:calc(50% - 180px);width:360px}.nas-dropdown__content--form{padding:16px 16px 24px;background-color:#f8f8f8}.nas-dropdown__content--hidden{visibility:hidden;overflow:hidden;height:0;padding:0;margin:0;border:0}.nas-dropdown__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .5s ease-out both}.nas-dropdown--inline .nas-dropdown__toggle{padding:0;background-color:transparent}.nas-dropdown--inline .nas-dropdown__toggle:after{display:block}.nas-dropdown--stretched{display:block}.nas-dropdown--stretched button{width:100%!important}.nas-dropdown--stretched .nas-dropdown__content{width:300px;margin:16px auto 0}.nas-dropdown__label{display:inline-block}::ng-deep .nas-dropdown__dropdown-icon{float:right}::ng-deep .nas-dropdown__dropdown-icon--rotate .nas-icon-chevron-down{transform:rotate(180deg)}::ng-deep .nas-dropdown__dropdown-icon .nas-icon-chevron-down{transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { open: [{
                 type: Input
             }], toggleElement: [{