@norwegian/core-components 6.50.0 → 6.51.0

package/fesm2022/norwegian-core-components.mjs

@@ -1120,7 +1120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-let nextId$g = 0;
+let nextId$h = 0;
 /**
  * @description
  * Norwegian Button Component | Buttons and Indicators
@@ -1196,7 +1196,7 @@ class ButtonComponent extends NasComponentBase {
         this.clickChange = new EventEmitter();
         this.trackingEventSource = new Subject();
         this.trackingEvent$ = this.trackingEventSource.asObservable();
-        this.componentId = nextId$g++;
+        this.componentId = nextId$h++;
     }
     getClasses(element, modifiers) {
         const classes = new Array();
@@ -1284,7 +1284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-let nextId$f = 0;
+let nextId$g = 0;
 class AirportSelectDropdownComponent extends NasComponentBase {
     get closestAirports() {
         return this.closestAirportsValue;
@@ -1378,7 +1378,7 @@ class AirportSelectDropdownComponent extends NasComponentBase {
         this.focusOnNext = new EventEmitter();
         this.focusOnPrevious = new EventEmitter();
         this.positionChange = new EventEmitter();
-        this.componentId = nextId$f++;
+        this.componentId = nextId$g++;
     }
     ngOnInit() {
         if (!this.ariaLabelClear) {
@@ -2444,7 +2444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 
-let nextId$e = 0;
+let nextId$f = 0;
 /**
  * @description
  * Norwegian Checkbox Component | Form Controls
@@ -2505,7 +2505,7 @@ class CheckboxComponent extends NasComponentBase {
         this.value = '';
         this.checkedChange = new EventEmitter();
         this.focusOnPrevious = new EventEmitter();
-        this.componentId = nextId$e++;
+        this.componentId = nextId$f++;
     }
     ngOnInit() {
         if (this.nasFormGroup && this.nasFormControlName) {
@@ -2674,7 +2674,7 @@ function Debounce(delay = 300) {
     };
 }
 
-let nextId$d = 0;
+let nextId$e = 0;
 /**
  * @description
  * Norwegian continue Component | Layout
@@ -2762,7 +2762,7 @@ class ContinueComponent extends NasComponentBase {
         this.scrolledPast = false;
         this.contentHeight = 0;
         this.animateUp = false;
-        this.componentId = nextId$d++;
+        this.componentId = nextId$e++;
         this.updateHeight = this.updateHeight.bind(this);
         this.checkPosition = this.checkPosition.bind(this);
         this.onScroll = this.onScroll.bind(this);
@@ -2967,7 +2967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 
-let nextId$c = 0;
+let nextId$d = 0;
 /**
  * @description
  * Norwegian Dropdown Component | Form Controls
@@ -2995,7 +2995,7 @@ class DropdownComponent extends NasComponentBase {
          * An event that is fired every time the dropdown is toggled.
          */
         this.openChange = new EventEmitter();
-        this.componentId = nextId$c++;
+        this.componentId = nextId$d++;
     }
     ngOnInit() {
         if (!this.ariaLabelBackdrop) {
@@ -3807,7 +3807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }] } });
 
-let nextId$b = 0;
+let nextId$c = 0;
 /**
  * @description
  * Norwegian Select Component | Form Controls
@@ -3870,7 +3870,7 @@ class SelectComponent extends NasComponentBase {
         */
         this.keydown = new EventEmitter();
         this.open = false;
-        this.componentId = nextId$b++;
+        this.componentId = nextId$c++;
     }
     ngOnChanges() {
         if (this.selectedValue) {
@@ -4203,13 +4203,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }] } });
 
-var WeekStart;
+var WeekStart$1;
 (function (WeekStart) {
     WeekStart[WeekStart["monday"] = 0] = "monday";
     WeekStart[WeekStart["sunday"] = 1] = "sunday";
-})(WeekStart || (WeekStart = {}));
+})(WeekStart$1 || (WeekStart$1 = {}));
 
-class CalendarService {
+let CalendarService$1 = class CalendarService {
     constructor(datePipe, dateService) {
         this.datePipe = datePipe;
         this.dateService = dateService;
@@ -4232,7 +4232,7 @@ class CalendarService {
             const currentDay = new Date(Date.UTC(weekday.getFullYear(), weekday.getMonth(), weekday.getDate() + index));
             weekdays.push(this.datePipe.transform(currentDay, 'EEE', 'UTC', locale));
         }
-        if (weekStart !== WeekStart.monday) {
+        if (weekStart !== WeekStart$1.monday) {
             const sunday = weekdays.pop();
             weekdays.unshift(sunday);
         }
@@ -4291,7 +4291,7 @@ class CalendarService {
                     const currentDate = this.dateService.utcDate(currentDayModel.date);
                     currentDayModel.isEmpty = currentDayModel.isAvailable;
                     let currentDay = currentDate.getDay();
-                    if (weekStart === WeekStart.monday) {
+                    if (weekStart === WeekStart$1.monday) {
                         if (currentDay === 0) {
                             currentDay = 6;
                         }
@@ -4408,8 +4408,8 @@ class CalendarService {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService, deps: [{ token: i1.DatePipe }, { token: DateHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService$1, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4574,7 +4574,7 @@ class CalendarComponent extends NasComponentBase {
          * @description
          * Desides if the week should start on a monday or sunday. Defaults to monday.
          */
-        this.weekStart = WeekStart.monday;
+        this.weekStart = WeekStart$1.monday;
         /**
          * @description
          * A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.
@@ -4906,7 +4906,7 @@ class CalendarComponent extends NasComponentBase {
         this.calendarService.updateAvailableDaysWithSelectedDate(this.availableDays, this.selectedDate);
         this.weeks = this.calendarService.getWeeks(this.availableDays, this.weekStart);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarComponent, deps: [{ token: DateHelper }, { token: i1.DatePipe }, { token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarComponent, deps: [{ token: DateHelper }, { token: i1.DatePipe }, { token: CalendarService$1 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CalendarComponent, selector: "nas-calendar", inputs: { noAvailableFlightsLabel: "noAvailableFlightsLabel", availableFlightsLabel: "availableFlightsLabel", disablePastSelection: "disablePastSelection", lowerLimitDate: "lowerLimitDate", date: "date", weekStart: "weekStart", displayWeekNumbers: "displayWeekNumbers", availability: "availability", locale: "locale", availableDates: "availableDates", activeDate: "activeDate", selectedDate: "selectedDate", nasFormGroup: "nasFormGroup", nasFormControlName: "nasFormControlName", dateDisplayFormat: "dateDisplayFormat", ariaLabelPreviousMonth: "ariaLabelPreviousMonth", ariaLabelNextMonth: "ariaLabelNextMonth" }, outputs: { monthChange: "monthChange", focusOnNextChange: "focusOnNextChange", selectedDateChange: "selectedDateChange", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "previousMonthRef", first: true, predicate: ["previousMonthRef"], descendants: true }, { propertyName: "nextMonthRef", first: true, predicate: ["nextMonthRef"], descendants: true }, { propertyName: "calendarContent", first: true, predicate: ["calendarContent"], descendants: true }, { propertyName: "monthSelectRef", first: true, predicate: ["monthSelect"], descendants: true }, { propertyName: "tableCells", predicate: ["tableCells"], descendants: true }, { propertyName: "dateButtons", predicate: ["dateButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClass()\">\n  <span [nasClass]=\"getClass('arrow')\"></span>\n  <div #calendarContent\n    tabindex=\"0\"\n    [nasClass]=\"getClass('content')\">\n    <header [nasClass]=\"getClass('header')\">\n      <button type=\"button\"\n        #previousMonthRef\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelPreviousMonth\"\n        [nasClass]=\"getClass('nav')\"\n        [disabled]=\"isPreviousMonthDisabled === true\"\n        (keydown)=\"onPreviousMonthKeydown($event)\"\n        (mousedown)=\"onPreviousMonthMousedown()\">\n        <nas-icon tabindex=\"-1\"\n          [type]=\"'arrow-left--light'\"></nas-icon>\n      </button>\n      <ng-container *ngIf=\"months?.length > 0; else currentMonthTemplate\">\n        <nas-select #monthSelect\n          [cssClass]=\"getClass('month')\"\n          [inline]=\"true\"\n          [simple]=\"true\"\n          [options]=\"months\"\n          [(selected)]=\"selectedMonth\"\n          (keydown)=\"onMonthSelectKeydown($event)\"></nas-select>\n      </ng-container>\n      <ng-template #currentMonthTemplate>\n        {{currentMonthModel}}\n      </ng-template>\n      <button type=\"button\"\n        tabindex=\"0\"\n        #nextMonthRef\n        [nasClass]=\"getClass('nav')\"\n        [attr.aria-label]=\"ariaLabelNextMonth\"\n        [disabled]=\"nextMonthDisabled\"\n        (keydown)=\"onNextMonthKeydown($event)\"\n        (mousedown)=\"onNextMonthMousedown()\">\n        <nas-icon [type]=\"'arrow-right--light'\"></nas-icon>\n      </button>\n    </header>\n    <table [nasClass]=\"getClass('table')\">\n      <thead>\n        <tr>\n          <th *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\"></th>\n          <th [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let weekday of weekdays\">\n            <div [nasClass]=\"getClass('item', 'header')\">{{weekday}}</div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let week of weeks\"\n          [nasClass]=\"getClass('row', 'animate')\">\n          <td *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\">\n            <span [nasClass]=\"getClass('date', 'week-number')\">{{week.weekNumber}}</span>\n          </td>\n          <td [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let day of week?.days\"\n            #tableCells>\n            <div [nasClass]=\"getClass('item', 'dummy')\"\n              *ngIf=\"day === null; else dayTemplate\"></div>\n            <ng-template #dayTemplate\n              tabindex=\"0\">\n              <button type=\"button\"\n                #dateButton\n                (keydown)=\"dateKeyDown($event)\"\n                tabIndex=\"0\"\n                [nasClass]=\"getCellButtonClass(day)\"\n                (mousedown)=\"onMouseDown(day.date, $event)\"\n                (click)=\"onDayClick(day)\"\n                (focus)=\"onDayFocus(day)\">\n                <div [nasClass]=\"getClass('date-wrapper')\">\n                  <span [nasClass]=\"getClass('date')\"\n                    [attr.aria-label]=\"day.date | date : 'dd':'UTC'\">{{day.date | date : 'dd':'UTC':locale}}</span>\n                </div>\n              </button>\n            </ng-template>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div [nasClass]=\"getClass('footer')\">\n      <div *ngIf=\"availableDates?.length === 0 && noAvailableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <nas-icon [icon]=\"'alert'\"></nas-icon>\n        {{noAvailableFlightsLabel}}\n      </div>\n      <div *ngIf=\"availableDates?.length > 0 && noAvailableFlightsLabel && availableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <div [nasClass]=\"getClass('item', 'available')\"></div>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{availableFlightsLabel}}</div>\n        <span [nasClass]=\"getClass('item', 'unavailable')\"></span>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{noAvailableFlightsLabel}}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-calendar{max-width:375px;float:right;border:3px solid #15273f;padding:10px;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;margin-top:3px;position:relative}.nas-calendar__content:active{outline:none;box-shadow:none}.nas-calendar__content:focus{outline:none;box-shadow:none}@media (min-width: 640px){.nas-calendar{margin-right:15px}}.nas-calendar__cover{margin-bottom:16px}.nas-calendar__header{position:relative;display:flex;justify-content:center;height:48px}.nas-calendar__month{max-width:200px;margin:0 auto 21px}.nas-calendar__table{table-layout:fixed;width:100%}.nas-calendar__week-number{font-size:14px;line-height:20px;position:relative;width:20px;display:none}@media (min-width: 640px){.nas-calendar__week-number{display:table-cell}}.nas-calendar__cell{padding:0}.nas-calendar__nav{position:absolute;margin:0 2px 12px;flex-shrink:0;width:24px;height:24px;border-radius:50%;background-color:#15273f;transition:transform .2s cubic-bezier(0,0,.1,1),opacity .2s ease-out}.nas-calendar__nav .nas-icon-arrow-left--light,.nas-calendar__nav .nas-icon-arrow-right--light{position:absolute;top:50%;left:50%}.nas-calendar__nav .nas-icon-arrow-left--light{transform:translate(-60%,-50%)}.nas-calendar__nav .nas-icon-arrow-right--light{transform:translate(-40%,-50%)}.nas-calendar__nav:first-child{left:0}.nas-calendar__nav:last-child{right:0}.nas-calendar__nav:hover,.nas-calendar__nav:focus{background-color:#002a3a;outline:none;border:3px solid #3b99fc}.nas-calendar__nav:active{transform:translateY(2px)}.nas-calendar__nav[disabled]{pointer-events:none;opacity:.5}.nas-calendar__item{font-size:14px;line-height:20px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;width:100%;height:36px;text-align:left;outline:0;padding:2px;border:1px solid #fff;transition:transform .17s cubic-bezier(0,0,.1,1);border-radius:0;align-items:center;justify-content:center;pointer-events:none;opacity:.5;background-color:#fff}.nas-calendar__item .nas-calendar__date{color:#002a3a}@media (min-width: 640px){.nas-calendar__item{padding:2px 6px}}@media (min-width: 1000px){.nas-calendar__item{padding:2px 3px}}@media (min-width: 1180px){.nas-calendar__item{padding:2px 6px}}.nas-calendar__item--large{height:36px}.nas-calendar__item--header{pointer-events:none;height:auto;background-color:transparent;border:0;opacity:1}@media (min-width: 640px){.nas-calendar__item--header{padding-left:11px}}.nas-calendar__item--dummy{visibility:hidden}.nas-calendar__item--today .nas-calendar__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#002a3a}.nas-calendar__item--cheapest{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#e5212d}.nas-calendar__item--empty{pointer-events:none;opacity:.3;border-color:#fff;background-color:#fff}.nas-calendar__item--empty .nas-calendar__date{color:inherit}.nas-calendar__item--available{pointer-events:all;opacity:1;border-color:#fff;background-color:#c3c3c3}.nas-calendar__item--available .nas-calendar__date{color:#002a3a}.nas-calendar__item--active{border-color:#15273f;border-width:3px}.nas-calendar__item--before{pointer-events:none;color:#a9a9a9;opacity:.55}.nas-calendar__item:hover,.nas-calendar__item:focus{border-color:#15273f;border-width:3px;box-shadow:inset 0 0 2px #c3c3c3,inset 0 0 2px 3px #3b99fc}.nas-calendar__item:active{transform:translateY(3px)}.nas-calendar__item--selected,.nas-calendar__item:active{color:#fff;background-color:#e5212d}.nas-calendar__item--selected:hover,.nas-calendar__item--selected:focus,.nas-calendar__item:active:hover,.nas-calendar__item:active:focus{border-color:#15273f;border-width:3px}.nas-calendar__item--selected .nas-calendar__date,.nas-calendar__item:active .nas-calendar__date{color:inherit}.nas-calendar__item--sold-out{pointer-events:none;opacity:.8;border-color:#fff;background-color:#fff}.nas-calendar__item--sold-out .nas-calendar__date{color:#002a3a}.nas-calendar__item[disabled]{pointer-events:none}.nas-calendar__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#6f6f6f}.nas-calendar__date--week-number{top:6px;right:6px}.nas-calendar__price{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:inherit;letter-spacing:-.04em}@media (min-width: 640px){.nas-calendar__price{font-size:14px;line-height:1.1}}@media (min-width: 1280px){.nas-calendar__price{font-size:16px}}.nas-calendar__price--before{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;text-decoration:line-through;font-size:.8em;line-height:1}@media (min-width: 1000px){.nas-calendar__price--before{margin-bottom:2px}}.nas-calendar__sold-out{position:absolute;bottom:2px;left:2px;line-height:1;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:-.015em;color:#8c8c8c;font-size:.75em}@media (min-width: 640px){.nas-calendar__sold-out{font-size:.9em;bottom:6px;left:6px}}@media (min-width: 1000px){.nas-calendar__sold-out{left:3px}}@media (min-width: 1180px){.nas-calendar__sold-out{left:6px}}.nas-calendar__transit{position:relative;display:flex;max-width:3.8em;width:calc(100% - 12px);padding:0 .5em 0 .3em;height:8px;justify-content:space-around;margin-bottom:2px;transform:scale(.85);transform-origin:left;background-color:inherit}@media (min-width: 640px){.nas-calendar__transit{transform:none;padding:0 .5em 0 .3em;margin-bottom:3px}}.nas-calendar__transit:before,.nas-calendar__transit:after{content:\"\";position:absolute}.nas-calendar__transit:before{top:calc(50% - 1px);width:100%;left:0;height:2px;background-color:currentColor}.nas-calendar__transit:after{width:8px;height:8px;right:0;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}.nas-calendar__transit-indicator{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;background-color:#fff}.nas-calendar__asterisk{font-size:.67em;top:-.36em;margin-left:.1em}.nas-calendar__footer{display:flex;justify-content:center}.nas-calendar__footer .nas-calendar__item{width:25px;height:25px;margin-right:3px}.nas-calendar__footer .nas-calendar__item--unavailable{border:1px solid #15273f}.nas-calendar__footer--item{margin-top:12px}.nas-calendar__footer--label{flex-shrink:0;margin-right:12px;display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:20px}.nas-calendar__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}@keyframes lowfare-item-in{0%{opacity:0;transform:scale(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
@@ -4924,7 +4924,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nas-calendar', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClass()\">\n  <span [nasClass]=\"getClass('arrow')\"></span>\n  <div #calendarContent\n    tabindex=\"0\"\n    [nasClass]=\"getClass('content')\">\n    <header [nasClass]=\"getClass('header')\">\n      <button type=\"button\"\n        #previousMonthRef\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelPreviousMonth\"\n        [nasClass]=\"getClass('nav')\"\n        [disabled]=\"isPreviousMonthDisabled === true\"\n        (keydown)=\"onPreviousMonthKeydown($event)\"\n        (mousedown)=\"onPreviousMonthMousedown()\">\n        <nas-icon tabindex=\"-1\"\n          [type]=\"'arrow-left--light'\"></nas-icon>\n      </button>\n      <ng-container *ngIf=\"months?.length > 0; else currentMonthTemplate\">\n        <nas-select #monthSelect\n          [cssClass]=\"getClass('month')\"\n          [inline]=\"true\"\n          [simple]=\"true\"\n          [options]=\"months\"\n          [(selected)]=\"selectedMonth\"\n          (keydown)=\"onMonthSelectKeydown($event)\"></nas-select>\n      </ng-container>\n      <ng-template #currentMonthTemplate>\n        {{currentMonthModel}}\n      </ng-template>\n      <button type=\"button\"\n        tabindex=\"0\"\n        #nextMonthRef\n        [nasClass]=\"getClass('nav')\"\n        [attr.aria-label]=\"ariaLabelNextMonth\"\n        [disabled]=\"nextMonthDisabled\"\n        (keydown)=\"onNextMonthKeydown($event)\"\n        (mousedown)=\"onNextMonthMousedown()\">\n        <nas-icon [type]=\"'arrow-right--light'\"></nas-icon>\n      </button>\n    </header>\n    <table [nasClass]=\"getClass('table')\">\n      <thead>\n        <tr>\n          <th *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\"></th>\n          <th [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let weekday of weekdays\">\n            <div [nasClass]=\"getClass('item', 'header')\">{{weekday}}</div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let week of weeks\"\n          [nasClass]=\"getClass('row', 'animate')\">\n          <td *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\">\n            <span [nasClass]=\"getClass('date', 'week-number')\">{{week.weekNumber}}</span>\n          </td>\n          <td [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let day of week?.days\"\n            #tableCells>\n            <div [nasClass]=\"getClass('item', 'dummy')\"\n              *ngIf=\"day === null; else dayTemplate\"></div>\n            <ng-template #dayTemplate\n              tabindex=\"0\">\n              <button type=\"button\"\n                #dateButton\n                (keydown)=\"dateKeyDown($event)\"\n                tabIndex=\"0\"\n                [nasClass]=\"getCellButtonClass(day)\"\n                (mousedown)=\"onMouseDown(day.date, $event)\"\n                (click)=\"onDayClick(day)\"\n                (focus)=\"onDayFocus(day)\">\n                <div [nasClass]=\"getClass('date-wrapper')\">\n                  <span [nasClass]=\"getClass('date')\"\n                    [attr.aria-label]=\"day.date | date : 'dd':'UTC'\">{{day.date | date : 'dd':'UTC':locale}}</span>\n                </div>\n              </button>\n            </ng-template>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div [nasClass]=\"getClass('footer')\">\n      <div *ngIf=\"availableDates?.length === 0 && noAvailableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <nas-icon [icon]=\"'alert'\"></nas-icon>\n        {{noAvailableFlightsLabel}}\n      </div>\n      <div *ngIf=\"availableDates?.length > 0 && noAvailableFlightsLabel && availableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <div [nasClass]=\"getClass('item', 'available')\"></div>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{availableFlightsLabel}}</div>\n        <span [nasClass]=\"getClass('item', 'unavailable')\"></span>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{noAvailableFlightsLabel}}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-calendar{max-width:375px;float:right;border:3px solid #15273f;padding:10px;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;margin-top:3px;position:relative}.nas-calendar__content:active{outline:none;box-shadow:none}.nas-calendar__content:focus{outline:none;box-shadow:none}@media (min-width: 640px){.nas-calendar{margin-right:15px}}.nas-calendar__cover{margin-bottom:16px}.nas-calendar__header{position:relative;display:flex;justify-content:center;height:48px}.nas-calendar__month{max-width:200px;margin:0 auto 21px}.nas-calendar__table{table-layout:fixed;width:100%}.nas-calendar__week-number{font-size:14px;line-height:20px;position:relative;width:20px;display:none}@media (min-width: 640px){.nas-calendar__week-number{display:table-cell}}.nas-calendar__cell{padding:0}.nas-calendar__nav{position:absolute;margin:0 2px 12px;flex-shrink:0;width:24px;height:24px;border-radius:50%;background-color:#15273f;transition:transform .2s cubic-bezier(0,0,.1,1),opacity .2s ease-out}.nas-calendar__nav .nas-icon-arrow-left--light,.nas-calendar__nav .nas-icon-arrow-right--light{position:absolute;top:50%;left:50%}.nas-calendar__nav .nas-icon-arrow-left--light{transform:translate(-60%,-50%)}.nas-calendar__nav .nas-icon-arrow-right--light{transform:translate(-40%,-50%)}.nas-calendar__nav:first-child{left:0}.nas-calendar__nav:last-child{right:0}.nas-calendar__nav:hover,.nas-calendar__nav:focus{background-color:#002a3a;outline:none;border:3px solid #3b99fc}.nas-calendar__nav:active{transform:translateY(2px)}.nas-calendar__nav[disabled]{pointer-events:none;opacity:.5}.nas-calendar__item{font-size:14px;line-height:20px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;width:100%;height:36px;text-align:left;outline:0;padding:2px;border:1px solid #fff;transition:transform .17s cubic-bezier(0,0,.1,1);border-radius:0;align-items:center;justify-content:center;pointer-events:none;opacity:.5;background-color:#fff}.nas-calendar__item .nas-calendar__date{color:#002a3a}@media (min-width: 640px){.nas-calendar__item{padding:2px 6px}}@media (min-width: 1000px){.nas-calendar__item{padding:2px 3px}}@media (min-width: 1180px){.nas-calendar__item{padding:2px 6px}}.nas-calendar__item--large{height:36px}.nas-calendar__item--header{pointer-events:none;height:auto;background-color:transparent;border:0;opacity:1}@media (min-width: 640px){.nas-calendar__item--header{padding-left:11px}}.nas-calendar__item--dummy{visibility:hidden}.nas-calendar__item--today .nas-calendar__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#002a3a}.nas-calendar__item--cheapest{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#e5212d}.nas-calendar__item--empty{pointer-events:none;opacity:.3;border-color:#fff;background-color:#fff}.nas-calendar__item--empty .nas-calendar__date{color:inherit}.nas-calendar__item--available{pointer-events:all;opacity:1;border-color:#fff;background-color:#c3c3c3}.nas-calendar__item--available .nas-calendar__date{color:#002a3a}.nas-calendar__item--active{border-color:#15273f;border-width:3px}.nas-calendar__item--before{pointer-events:none;color:#a9a9a9;opacity:.55}.nas-calendar__item:hover,.nas-calendar__item:focus{border-color:#15273f;border-width:3px;box-shadow:inset 0 0 2px #c3c3c3,inset 0 0 2px 3px #3b99fc}.nas-calendar__item:active{transform:translateY(3px)}.nas-calendar__item--selected,.nas-calendar__item:active{color:#fff;background-color:#e5212d}.nas-calendar__item--selected:hover,.nas-calendar__item--selected:focus,.nas-calendar__item:active:hover,.nas-calendar__item:active:focus{border-color:#15273f;border-width:3px}.nas-calendar__item--selected .nas-calendar__date,.nas-calendar__item:active .nas-calendar__date{color:inherit}.nas-calendar__item--sold-out{pointer-events:none;opacity:.8;border-color:#fff;background-color:#fff}.nas-calendar__item--sold-out .nas-calendar__date{color:#002a3a}.nas-calendar__item[disabled]{pointer-events:none}.nas-calendar__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#6f6f6f}.nas-calendar__date--week-number{top:6px;right:6px}.nas-calendar__price{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:inherit;letter-spacing:-.04em}@media (min-width: 640px){.nas-calendar__price{font-size:14px;line-height:1.1}}@media (min-width: 1280px){.nas-calendar__price{font-size:16px}}.nas-calendar__price--before{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;text-decoration:line-through;font-size:.8em;line-height:1}@media (min-width: 1000px){.nas-calendar__price--before{margin-bottom:2px}}.nas-calendar__sold-out{position:absolute;bottom:2px;left:2px;line-height:1;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:-.015em;color:#8c8c8c;font-size:.75em}@media (min-width: 640px){.nas-calendar__sold-out{font-size:.9em;bottom:6px;left:6px}}@media (min-width: 1000px){.nas-calendar__sold-out{left:3px}}@media (min-width: 1180px){.nas-calendar__sold-out{left:6px}}.nas-calendar__transit{position:relative;display:flex;max-width:3.8em;width:calc(100% - 12px);padding:0 .5em 0 .3em;height:8px;justify-content:space-around;margin-bottom:2px;transform:scale(.85);transform-origin:left;background-color:inherit}@media (min-width: 640px){.nas-calendar__transit{transform:none;padding:0 .5em 0 .3em;margin-bottom:3px}}.nas-calendar__transit:before,.nas-calendar__transit:after{content:\"\";position:absolute}.nas-calendar__transit:before{top:calc(50% - 1px);width:100%;left:0;height:2px;background-color:currentColor}.nas-calendar__transit:after{width:8px;height:8px;right:0;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}.nas-calendar__transit-indicator{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;background-color:#fff}.nas-calendar__asterisk{font-size:.67em;top:-.36em;margin-left:.1em}.nas-calendar__footer{display:flex;justify-content:center}.nas-calendar__footer .nas-calendar__item{width:25px;height:25px;margin-right:3px}.nas-calendar__footer .nas-calendar__item--unavailable{border:1px solid #15273f}.nas-calendar__footer--item{margin-top:12px}.nas-calendar__footer--label{flex-shrink:0;margin-right:12px;display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:20px}.nas-calendar__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}@keyframes lowfare-item-in{0%{opacity:0;transform:scale(0)}}\n"] }]
-        }], ctorParameters: function () { return [{ type: DateHelper }, { type: i1.DatePipe }, { type: CalendarService }]; }, propDecorators: { previousMonthRef: [{
+        }], ctorParameters: function () { return [{ type: DateHelper }, { type: i1.DatePipe }, { type: CalendarService$1 }]; }, propDecorators: { previousMonthRef: [{
                 type: ViewChild,
                 args: ['previousMonthRef']
             }], nextMonthRef: [{
@@ -7687,7 +7687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 
-let nextId$a = 0;
+let nextId$b = 0;
 /**
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
@@ -7722,7 +7722,7 @@ class RadioComponent extends NasComponentBase {
          * <nas-radio (checkedChange)="onCheckedChange($event)"></nas-radio>
          */
         this.checkedChange = new EventEmitter();
-        this.componentId = nextId$a++;
+        this.componentId = nextId$b++;
     }
     mainClass() {
         return this.getClass('', [
@@ -8233,7 +8233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 
-let nextId$9 = 0;
+let nextId$a = 0;
 /**
  * @description
  * Norwegian Input Component | Form Controls
@@ -8311,7 +8311,7 @@ class InputComponent extends NasComponentBase {
          * <nas-input [line]="false"></nas-input>
          */
         this.line = true;
-        this.componentId = nextId$9++;
+        this.componentId = nextId$a++;
     }
     ngAfterViewInit() {
         if (this.exists(this.disabled)) {
@@ -8849,7 +8849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-let nextId$8 = 0;
+let nextId$9 = 0;
 /**
  * @description
  * Norwegian Button Component | New design | Beta
@@ -8925,7 +8925,7 @@ class ButtonNewComponent extends NasComponentBase {
         this.clickChange = new EventEmitter();
         this.trackingEventSource = new Subject();
         this.trackingEvent$ = this.trackingEventSource.asObservable();
-        this.componentId = nextId$8++;
+        this.componentId = nextId$9++;
     }
     getClasses(element, modifiers) {
         const classes = new Array();
@@ -11216,7 +11216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Output
             }] } });
 
-let nextId$7 = 0;
+let nextId$8 = 0;
 /**
  * @description
  * Norwegian Tab Group Component | Layout
@@ -11252,7 +11252,7 @@ class TabGroupComponent extends NasComponentBase {
         super('nas-tab-group');
         this.selectedIndexValue = 0;
         this.groupId = 0;
-        this.groupId = nextId$7++;
+        this.groupId = nextId$8++;
     }
     ngAfterViewInit() {
         let tabIndex = 0;
@@ -11324,180 +11324,2296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 
-/**
- * @license
- * Copyright Norwegian Air Shuttle. All Rights Reserved.
- */
-/**
- * @description
- * Norwegian Phone number Component | Form Controls
- */
-class PhoneNumberComponent extends NasComponentBase {
-    get model() {
-        return this.modelValue;
+var WeekStart;
+(function (WeekStart) {
+    WeekStart[WeekStart["monday"] = 0] = "monday";
+    WeekStart[WeekStart["sunday"] = 1] = "sunday";
+})(WeekStart || (WeekStart = {}));
+
+class CalendarService {
+    constructor(datePipe, dateService) {
+        this.datePipe = datePipe;
+        this.dateService = dateService;
     }
-    set model(value) {
-        this.modelValue = value;
-        this.modelChange.emit(this.modelValue);
+    getMonthNames(locale) {
+        const month = new Date();
+        month.setMonth(0);
+        month.setDate(1);
+        const monthNames = new Array();
+        for (let index = 0; index < 12; index++) {
+            const currentMonth = new Date(Date.UTC(month.getFullYear(), month.getMonth() + index, 1));
+            monthNames.push(this.datePipe.transform(currentMonth, 'MMMM', 'UTC', locale));
+        }
+        return monthNames;
     }
-    /**
-     * @property Input
-     * @description
-     * Gets or sets the selected value.
-     * @example
-     * <nas-phone-number [(selected)]="selected"></nas-phone-number>
-    */
-    get selected() {
-        return this.selectedValue;
+    getWeekdays(weekStart, locale) {
+        const weekday = this.getMonday();
+        const weekdays = new Array();
+        for (let index = 0; index < 7; index++) {
+            const currentDay = new Date(Date.UTC(weekday.getFullYear(), weekday.getMonth(), weekday.getDate() + index));
+            const dayName = this.datePipe.transform(currentDay, 'EEE', 'UTC', locale);
+            weekdays.push(dayName.charAt(0));
+        }
+        if (weekStart !== WeekStart.monday) {
+            const sunday = weekdays.pop();
+            weekdays.unshift(sunday);
+        }
+        return weekdays;
     }
-    set selected(option) {
-        if (!option) {
+    updateAvailableDaysWithSelectedDate(availableDays, selectedDate) {
+        if (!availableDays || !selectedDate) {
             return;
         }
-        this.selectedValue = option;
-        this.selectedChange.emit(this.selectedValue);
+        availableDays = availableDays.map((x) => {
+            if (!this.dateService.isSameDate(this.dateService.utcDate(x.date), selectedDate)) {
+                return x;
+            }
+            if (x.isDisabled) {
+                selectedDate.setDate(selectedDate.date + 1);
+                return x;
+            }
+            x.isSelected = true;
+            return x;
+        });
     }
-    constructor() {
-        super('nas-phone-number');
-        /**
-         * @property Input
-         * @description
-         * The type of the native input element. Default value is number
-         * @example
-         * <nas-phone-number [type]="'text'"></nas-phone-number>
-        */
-        this.type = 'number';
-        /**
-         * @property Output
-         * @description
-         * An output event that fies when input value changes.
-         * @example
-         * <nas-phone-number (modelChange)="onModelChange()"></nas-phone-number>
-        */
-        this.modelChange = new EventEmitter();
-        /**
-         * @property Output
-         * @description
-         * An event that is fired every time a selection is done.
-         * @example
-         * <nas-phone-number (selectedChange)="onSelectedChange($event)"></nas-phone-number>
-        */
-        this.selectedChange = new EventEmitter();
+    setActiveDate(date, weeks) {
+        if (!weeks || weeks.length <= 0) {
+            return;
+        }
+        for (const day of this.getDays(weeks)) {
+            if (!day) {
+                continue;
+            }
+            day.isActive = false;
+            const utcDate = this.dateService.utcDate(day.date);
+            if (this.dateService.isSameDate(utcDate, date)) {
+                day.isActive = true;
+            }
+        }
     }
-    mainClass() {
-        const { error, disabled, loading, spaceless } = this;
-        return this.getClass('', [
-            this.exists(this.error) && 'error',
-            this.exists(this.disabled) && 'disabled',
-            this.exists(this.loading) && 'loading',
-            this.exists(this.spaceless) && 'spaceless'
-        ]);
+    getDays(weeks) {
+        const flatten = new Array();
+        weeks.forEach(x => x.days.forEach(d => flatten.push(d)));
+        return flatten;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PhoneNumberComponent, selector: "nas-phone-number", inputs: { options: "options", preferredOptions: "preferredOptions", prefixCountryCode: "prefixCountryCode", label: "label", optionsLabel: "optionsLabel", preferredOptionsLabel: "preferredOptionsLabel", placeholder: "placeholder", id: "id", type: "type", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", errorMessage: "errorMessage", info: "info", icon: "icon", readonly: "readonly", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormControlNamePrefix: "nasFormControlNamePrefix", nasFormGroup: "nasFormGroup", model: "model", cssClass: "cssClass", selectedValue: "selectedValue", selected: "selected" }, outputs: { modelChange: "modelChange", selectedChange: "selectedChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClass()\">\n  <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n  <div [nasClass]=\"getClass('controls')\">\n    <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCode>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [(ngModel)]=\"model\" />\n      </div>\n    </ng-container>\n    <ng-template #reactiveForm>\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCodeReactive>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n            [nasFormGroup]=\"nasFormGroup\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [formControlName]=\"nasFormControlName\" />\n      </div>\n    </ng-template>\n  </div>\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n    <nas-icon icon=\"alert--error\"></nas-icon>\n  </span>\n\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n    <nas-icon [icon]=\"icon\"></nas-icon>\n  </span>\n  <span [nasClass]=\"getClass('line')\"></span>\n\n  <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n  <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-phone-number--error .nas-phone-number__line{background-color:#e5212d}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#15273f;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#15273f}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: OptgroupComponent, selector: "nas-optgroup", inputs: ["label"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'nas-phone-number', template: "<div [nasClass]=\"mainClass()\">\n  <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n  <div [nasClass]=\"getClass('controls')\">\n    <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCode>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [(ngModel)]=\"model\" />\n      </div>\n    </ng-container>\n    <ng-template #reactiveForm>\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCodeReactive>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n            [nasFormGroup]=\"nasFormGroup\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [formControlName]=\"nasFormControlName\" />\n      </div>\n    </ng-template>\n  </div>\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n    <nas-icon icon=\"alert--error\"></nas-icon>\n  </span>\n\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n    <nas-icon [icon]=\"icon\"></nas-icon>\n  </span>\n  <span [nasClass]=\"getClass('line')\"></span>\n\n  <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n  <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-phone-number--error .nas-phone-number__line{background-color:#e5212d}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#15273f;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#15273f}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
-                type: Input
-            }], preferredOptions: [{
-                type: Input
-            }], prefixCountryCode: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], optionsLabel: [{
-                type: Input
-            }], preferredOptionsLabel: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], spaceless: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], errorMessage: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], ariaDescribedby: [{
-                type: Input,
-                args: ['aria-describedby']
-            }], required: [{
-                type: Input
-            }], nasFormControlName: [{
-                type: Input
-            }], nasFormControlNamePrefix: [{
-                type: Input
-            }], nasFormGroup: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], modelChange: [{
-                type: Output
-            }], cssClass: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], selectedChange: [{
-                type: Output
-            }] } });
-
-class PhoneNumberModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, declarations: [PhoneNumberComponent], imports: [CommonModule,
-            NasClassModule,
-            SelectModule,
-            InputModule,
-            FormsModule,
-            IconModule,
-            ReactiveFormsModule], exports: [PhoneNumberComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, imports: [CommonModule,
-            NasClassModule,
-            SelectModule,
-            InputModule,
-            FormsModule,
-            IconModule,
-            ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PhoneNumberComponent],
-                    imports: [
-                        CommonModule,
-                        NasClassModule,
-                        SelectModule,
+    getWeeks(availableDays, weekStart) {
+        if (!availableDays) {
+            return;
+        }
+        const sortedDays = availableDays
+            .sort((a, b) => this.dateService
+            .date(this.dateService.utcDate(a.date)).getTime() - this.dateService.date(this.dateService.utcDate(b.date)).getTime());
+        const weeks = new Array();
+        let index = 0;
+        for (let week = 0; week < 6; week++) {
+            const days = new Array();
+            for (let day = 0; day < 7; day++) {
+                const currentDayModel = sortedDays[0];
+                if (currentDayModel) {
+                    const currentDate = this.dateService.utcDate(currentDayModel.date);
+                    currentDayModel.isEmpty = currentDayModel.isAvailable;
+                    let currentDay = currentDate.getDay();
+                    if (weekStart === WeekStart.monday) {
+                        if (currentDay === 0) {
+                            currentDay = 6;
+                        }
+                        else {
+                            currentDay -= 1;
+                        }
+                    }
+                    if (currentDay === day) {
+                        index = index + 1;
+                        currentDayModel.index = index;
+                        days.push(currentDayModel);
+                        sortedDays.shift();
+                    }
+                    else {
+                        days.push(null);
+                    }
+                }
+            }
+            const firstDayInWeek = days.find(x => x != null);
+            let firstDateDateInWeek;
+            if (firstDayInWeek) {
+                const utcDate = this.dateService.utcDate(firstDayInWeek.date);
+                firstDateDateInWeek = new Date(utcDate.year, utcDate.month, utcDate.date);
+            }
+            if (!days.every(x => x === null)) {
+                weeks.push({
+                    days: days,
+                    weekNumber: this.dateService.getWeekNumber(firstDateDateInWeek)
+                });
+            }
+        }
+        return weeks;
+    }
+    getCurrentMonth(date) {
+        let currentMonth;
+        if (date) {
+            currentMonth = this.dateService.utcDate(new Date(Date.UTC(date.year, date.month, 1)));
+        }
+        else {
+            currentMonth = this.dateService.utcDate();
+        }
+        return currentMonth;
+    }
+    getMonthsSelectOptions(disablePastSelection, maxMonthIndex, monthNames) {
+        const months = new Array();
+        if (disablePastSelection === false) {
+            return months;
+        }
+        for (let index = 0; index < maxMonthIndex; index++) {
+            const date = this.dateService.utcDate().toDate();
+            date.setUTCDate(1);
+            date.setUTCMonth(date.getUTCMonth() + index);
+            const selectOption = {
+                title: `${monthNames[date.getUTCMonth()]} ${date.getUTCFullYear()}`,
+                value: date.toISOString()
+            };
+            months.push(selectOption);
+        }
+        return months;
+    }
+    getSelectedMonth(months, currentMonth) {
+        if (!months) {
+            return null;
+        }
+        const selected = months.find(x => {
+            const date = this.dateService.utcDate(x.value);
+            date.setDate(1);
+            const month = new UtcDate(currentMonth.year, currentMonth.month, 1);
+            return this.dateService.isSameMonth(date, month);
+        });
+        return selected;
+    }
+    getAvailableDays(currentMonth, availableDates, availability, disablePastSelection, lowerLimitDate, activeDate, selectedDate) {
+        const firstDateInThisMonth = new Date();
+        firstDateInThisMonth.setUTCDate(1);
+        firstDateInThisMonth.setUTCHours(0, 0, 0, 0);
+        const currentDate = currentMonth
+            ? new Date(Date.UTC(currentMonth.year, currentMonth.month, 1))
+            : firstDateInThisMonth;
+        const currentDateMonth = currentDate.getUTCMonth();
+        const days = new Array();
+        while (currentDate.getUTCMonth() === currentDateMonth) {
+            const utcDate = this.dateService.utcDate(currentDate);
+            const day = {
+                date: this.dateService.date(utcDate).toISOString(),
+                isAvailable: this.isAvailable(utcDate, availableDates, availability, disablePastSelection),
+                isDisabled: this.dateService.isLessThan(utcDate, lowerLimitDate) ? true : false,
+                isActive: this.dateService.isSameDate(this.dateService.utcDate(currentDate), activeDate) || this.dateService.isSameDate(this.dateService.utcDate(currentDate), lowerLimitDate),
+                isWithinRange: this.dateService.isGreaterThan(utcDate, lowerLimitDate) && this.dateService.isLessThan(utcDate, selectedDate)
+            };
+            if (selectedDate && this.dateService.isSameDate(selectedDate, utcDate) && day.isSelected || !day.isAvailable) {
+                day.isSelected = false;
+            }
+            days.push(day);
+            currentDate.setUTCDate(currentDate.getUTCDate() + 1);
+        }
+        return days;
+    }
+    isAvailable(date, availableDates, availability, disablePastSelection) {
+        if (!availability) {
+            return disablePastSelection && this.dateService.isInThePast(date, false, true, true) ? false : true;
+        }
+        if ((disablePastSelection && this.dateService.isInThePast(date, false, true, true))
+            || !availableDates
+            || !availableDates.some(x => this.dateService.isSameDate(x, date))) {
+            return false;
+        }
+        return true;
+    }
+    getMonday() {
+        const date = new Date();
+        const day = date.getDay();
+        const diff = date.getDate() - day + (day === 0 ? -6 : 1);
+        return new Date(date.setDate(diff));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService, deps: [{ token: i1.DatePipe }, { token: DateHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: DateHelper }]; } });
+
+class CalendarNewComponent extends NasComponentBase {
+    /**
+     * @description
+     * The lowest date allowed.
+     */
+    get lowerLimitDate() {
+        return this.lowerLimitDateValue;
+    }
+    set lowerLimitDate(date) {
+        if (!date) {
+            return;
+        }
+        this.lowerLimitDateValue = date;
+        if (!this.selectedDate) {
+            this.selectedDateValue = this.lowerLimitDateValue;
+            this.activeDate = this.lowerLimitDateValue;
+        }
+        else if (this.selectedDate && this.dateService.isGreaterThan(date, this.selectedDate, false, true, true)) {
+            this.selectedDateValue = this.lowerLimitDateValue;
+            this.activeDate = this.lowerLimitDateValue;
+        }
+        else if (this.activeDate && this.dateService.isGreaterThan(date, this.activeDate, false, true, true)) {
+            this.activeDate = this.lowerLimitDateValue;
+        }
+        this.applySelectedDateChanges();
+    }
+    /**
+     * @description
+     * An array with all the available dates of the month for seats.
+     */
+    get availableDates() {
+        return this.availableDatesValue;
+    }
+    set availableDates(dates) {
+        if (!dates || !this.exists(this.availability)) {
+            return;
+        }
+        if (dates.length > 0) {
+            const firstDate = dates[0];
+            this.currentMonth = firstDate;
+            this.setPreviousMonthDisabled();
+        }
+        this.availableDatesValue = dates;
+        this.applySelectedDateChanges();
+        if (!this.shouldFocusCalendarOnAvailableDatesUpdate) {
+            return;
+        }
+        if (document.activeElement === this.nextMonthRef.nativeElement ||
+            document.activeElement === this.previousMonthRef.nativeElement ||
+            this.monthSelectRef && document.activeElement === this.monthSelectRef.select.nativeElement) {
+            return;
+        }
+        setTimeout(() => {
+            const elmementToFocus = this.activeDateCell;
+            if (elmementToFocus) {
+                elmementToFocus.focus();
+            }
+            this.shouldFocusCalendarOnAvailableDatesUpdate = false;
+        }, 100);
+    }
+    /**
+     * @description
+     * Gets or sets the active date
+     */
+    get activeDate() {
+        return this.activeDateValue;
+    }
+    set activeDate(date) {
+        if (!date || this.dateService.isSameDate(date, this.activeDate)) {
+            return;
+        }
+        if (!this.currentMonth) {
+            this.currentMonth = date;
+        }
+        if (!this.dateService.isSameMonth(date, this.currentMonth)) {
+            this.currentMonth = date;
+            this.applySelectedDateChanges();
+            this.monthChange.emit(this.currentMonth);
+            this.setPreviousMonthDisabled();
+            const elmementToFocus = this.activeDateCell;
+            if (elmementToFocus) {
+                elmementToFocus.focus();
+            }
+        }
+        if (this.weeks) {
+            this.calendarService.setActiveDate(date, this.weeks);
+            for (const day of this.calendarService.getDays(this.weeks)) {
+                if (!day) {
+                    continue;
+                }
+                if (day.isActive) {
+                    this.activeDateValue = date;
+                    this.activeDateChange.emit(date);
+                }
+            }
+        }
+    }
+    get selectedDate() {
+        return this.selectedDateValue;
+    }
+    set selectedDate(date) {
+        if (!date) {
+            return;
+        }
+        this.selectedDateValue = date;
+        if (!this.dateService.isSameMonth(date, this.activeDate)
+            || !this.dateService.isSameMonth(date, this.currentMonth)) {
+            this.currentMonth = date;
+            this.activeDateValue = date;
+            this.applySelectedDateChanges();
+        }
+        this.setSelectedDate(date);
+    }
+    get selectedMonth() {
+        return this.selectedValue;
+    }
+    set selectedMonth(option) {
+        if (!option) {
+            return;
+        }
+        this.selectedValue = option;
+        const optionDate = this.dateService.utcDate(option.value);
+        if (!this.dateService.isSameMonth(optionDate, this.currentMonth)) {
+            this.currentMonth = optionDate;
+            this.applySelectedDateChanges();
+            this.monthChange.emit(this.currentMonth);
+            this.setPreviousMonthDisabled();
+        }
+    }
+    get nextMonthDisabled() {
+        const nextMonthIndex = this.currentMonth
+            && this.dateService.getUtcNumberOfMonthBetween(this.dateService.utcDate(), this.currentMonth);
+        return (nextMonthIndex + 2) >= this.maxMonthIndex;
+    }
+    get currentMonthModel() {
+        if (!this.currentMonth) {
+            return '';
+        }
+        return `${this.monthNames[this.currentMonth.toDate().getUTCMonth()]} ${this.currentMonth.toDate().getUTCFullYear()}`;
+    }
+    /**
+     * @description
+     * Is in use by DatepickerComponent
+     */
+    get activeDateCell() {
+        return document.querySelector('.nas-calendar__item--active');
+    }
+    constructor(dateService, datePipe, calendarService) {
+        super('nas-calendar-new');
+        this.dateService = dateService;
+        this.datePipe = datePipe;
+        this.calendarService = calendarService;
+        this.months = new Array();
+        this.weekdays = new Array();
+        /**
+         * @description
+         * Desides if the week should start on a monday or sunday. Defaults to monday.
+         */
+        this.weekStart = WeekStart.monday;
+        /**
+         * @description
+         * A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.
+         * This requires that registerLocaleData is called with the respective locale.
+         */
+        this.locale = 'en-US';
+        this.dateDisplayFormat = 'EEEE d, MMMM yyyy';
+        /**
+         * @description
+         * Month selected by the user by clicking in drop down for month selection or month navigation buttons.
+         */
+        this.monthChange = new EventEmitter();
+        /**
+         * @description
+         * When a user has actively changed the date.
+         */
+        this.focusOnNextChange = new EventEmitter();
+        /**
+         * @description
+         * When selected date has been changed.
+         */
+        this.selectedDateChange = new EventEmitter();
+        /**
+         * @description
+         * When active date has been changed.
+         */
+        this.activeDateChange = new EventEmitter();
+        this.maxMonthIndex = 13;
+        this.monthNames = new Array();
+        this.shouldFocusCalendarOnAvailableDatesUpdate = false;
+    }
+    ngOnInit() {
+        if (!this.ariaLabelPreviousMonth) {
+            this.warnMissingAccessibiltyInput('ariaLabelPreviousMonth');
+        }
+        if (!this.ariaLabelNextMonth) {
+            this.warnMissingAccessibiltyInput('ariaLabelNextMonth');
+        }
+        if (this.nasFormGroup && this.nasFormControlName) {
+            const control = this.nasFormGroup.get(this.nasFormControlName);
+            if (control) {
+                const calendarDate = control.value;
+                if (calendarDate) {
+                    this.selectedDate = calendarDate.date;
+                }
+            }
+        }
+        if (this.date || !this.currentMonth) {
+            this.currentMonth = this.calendarService.getCurrentMonth(this.date);
+        }
+        this.availableDays = this.calendarService.getAvailableDays(this.currentMonth, this.availableDates, this.availability, this.disablePastSelection, this.lowerLimitDate, this.activeDate, this.selectedDate);
+        this.calendarService.updateAvailableDaysWithSelectedDate(this.availableDays, this.selectedDate);
+        this.weeks = this.calendarService.getWeeks(this.availableDays, this.weekStart);
+        this.monthNames = this.calendarService.getMonthNames(this.locale);
+        this.months = this.calendarService.getMonthsSelectOptions(this.disablePastSelection, this.maxMonthIndex, this.monthNames);
+        this.selectedMonth = this.calendarService.getSelectedMonth(this.months, this.currentMonth);
+        this.weekdays = this.calendarService.getWeekdays(this.weekStart, this.locale);
+        this.setPreviousMonthDisabled();
+    }
+    dateKeyDown(event) {
+        let elementToFocus;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'ArrowUp':
+            case 'ArrowDown':
+                this.shouldFocusCalendarOnAvailableDatesUpdate = true;
+                break;
+            case 'Tab':
+                if (!event.shiftKey) {
+                    if (this.previousMonthRef && !this.isPreviousMonthDisabled) {
+                        elementToFocus = this.previousMonthRef.nativeElement;
+                    }
+                    else if (this.monthSelectRef && this.months.length > 0) {
+                        elementToFocus = this.monthSelectRef.select.nativeElement;
+                    }
+                    else if (this.nextMonthRef && !this.nextMonthDisabled) {
+                        elementToFocus = this.nextMonthRef.nativeElement;
+                    }
+                }
+                else {
+                    if (this.nextMonthRef && !this.nextMonthDisabled) {
+                        elementToFocus = this.nextMonthRef.nativeElement;
+                    }
+                    else if (this.monthSelectRef && this.months.length > 0) {
+                        elementToFocus = this.monthSelectRef.select.nativeElement;
+                    }
+                    else if (this.previousMonthRef && !this.isPreviousMonthDisabled) {
+                        elementToFocus = this.previousMonthRef.nativeElement;
+                    }
+                }
+                this.focusElement(event, elementToFocus);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                const activeDay = this.calendarService
+                    .getDays(this.weeks)
+                    .find(x => x && this.dateService.isSameDate(this.dateService.utcDate(x.date), this.activeDate));
+                if (this.availability && activeDay?.isAvailable && !activeDay?.isDisabled || !this.availability) {
+                    this.setSelectedDate(this.activeDate);
+                    this.focusOnNextChange.emit(event);
+                }
+                break;
+        }
+    }
+    onPreviousMonthKeydown(event) {
+        let elementToFocus;
+        switch (event.key) {
+            case 'Tab':
+                if (!event.shiftKey) {
+                    if (this.monthSelectRef && this.months.length > 0) {
+                        elementToFocus = this.monthSelectRef.select.nativeElement;
+                    }
+                    else if (this.nextMonthRef && !this.nextMonthDisabled) {
+                        elementToFocus = this.nextMonthRef.nativeElement;
+                    }
+                    else {
+                        elementToFocus = this.activeDateCell;
+                    }
+                }
+                else {
+                    elementToFocus = this.activeDateCell;
+                }
+                this.focusElement(event, elementToFocus);
+                break;
+            case 'Enter':
+                this.getPreviousMonth();
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }
+    onNextMonthKeydown(event) {
+        let elementToFocus;
+        switch (event.key) {
+            case 'Tab':
+                if (!event.shiftKey) {
+                    elementToFocus = this.activeDateCell;
+                }
+                else {
+                    if (this.monthSelectRef && this.months.length > 0) {
+                        elementToFocus = this.monthSelectRef.select.nativeElement;
+                    }
+                    else if (this.onPreviousMonthKeydown && !this.isPreviousMonthDisabled) {
+                        elementToFocus = this.previousMonthRef.nativeElement;
+                    }
+                    else {
+                        elementToFocus = this.activeDateCell;
+                    }
+                }
+                this.focusElement(event, elementToFocus);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.getNextMonth();
+                break;
+        }
+    }
+    onNextMonthMousedown() {
+        this.getNextMonth();
+    }
+    onPreviousMonthMousedown() {
+        this.getPreviousMonth();
+    }
+    onMonthSelectKeydown(event) {
+        let elementToFocus;
+        switch (event.key) {
+            case 'Tab':
+                if (!event.shiftKey) {
+                    if (this.nextMonthRef && !this.nextMonthDisabled) {
+                        elementToFocus = this.nextMonthRef.nativeElement;
+                    }
+                    else {
+                        elementToFocus = this.activeDateCell;
+                    }
+                }
+                else {
+                    if (this.onPreviousMonthKeydown && !this.isPreviousMonthDisabled) {
+                        elementToFocus = this.previousMonthRef.nativeElement;
+                    }
+                    else {
+                        elementToFocus = this.activeDateCell;
+                    }
+                }
+                this.focusElement(event, elementToFocus);
+                break;
+        }
+    }
+    focusElement(event, elementToFocus) {
+        if (elementToFocus) {
+            elementToFocus.focus();
+        }
+        if (event) {
+            event.preventDefault();
+        }
+    }
+    setActiveDate() {
+        if (!this.currentMonth) {
+            return;
+        }
+        const today = this.dateService.utcDate();
+        const lastDay = new Date(this.currentMonth.year, this.currentMonth.month + 1, 0);
+        const newDate = this.activeDate?.date > lastDay.getDate() ? lastDay.getDate() : this.activeDate?.date;
+        if (this.currentMonth.month !== today.month || this.currentMonth.year !== today.year) {
+            const nextMonth = this.currentMonth.month;
+            const nextYear = this.currentMonth.year;
+            this.activeDate = new UtcDate(nextYear, nextMonth, newDate);
+        }
+        else if (this.activeDate && this.activeDate.month !== this.currentMonth.month) {
+            this.activeDate = new UtcDate(this.activeDateValue.year, this.currentMonth.month, newDate);
+        }
+        else {
+            this.activeDate = this.dateService.utcDate();
+        }
+    }
+    onMouseDown(date, event) {
+        this.setSelectedDate(this.dateService.utcDate(date));
+        this.focusOnNextChange.emit(event);
+    }
+    onDayFocus(day) {
+        this.activeDate = this.dateService.utcDate(day.date);
+    }
+    onDayClick(day) {
+        if (this.dateService.isGreaterThan(this.dateService.utcDate(day.date), this.activeDate)) {
+        }
+        if (!day.isAvailable) {
+            return;
+        }
+        this.setSelectedDate(this.dateService.utcDate(day.date));
+        this.availableDays.forEach(date => {
+            if (this.activeDate && this.selectedDate) {
+                const utcDate = this.dateService.utcDate(day.date);
+                const withinRange = this.dateService.isGreaterThan(utcDate, this.selectedDate) &&
+                    this.dateService.isLessThan(utcDate, this.activeDate);
+                date.isWithinRange = withinRange;
+            }
+        });
+    }
+    setSelectedDate(date) {
+        if (!date) {
+            return;
+        }
+        if (this.nasFormGroup && this.nasFormControlName) {
+            const control = this.nasFormGroup.get(this.nasFormControlName);
+            const calendarDate = {
+                model: this.datePipe.transform(this.dateService.date(date), this.dateDisplayFormat, 'UTC', this.locale),
+                date: date
+            };
+            control.patchValue(calendarDate);
+        }
+        this.selectedDateChange.emit(date);
+        if (this.weeks && this.weeks.length > 0) {
+            for (const week of this.weeks) {
+                if (!week) {
+                    continue;
+                }
+                for (const day of week.days) {
+                    if (!day) {
+                        continue;
+                    }
+                    day.isSelected = day.isAvailable
+                        && this.dateService.isSameDate(this.dateService.utcDate(day.date), date);
+                }
+            }
+        }
+    }
+    getCellButtonClass(day) {
+        if (!day) {
+            return this.getClass('item');
+        }
+        return this.getClass('item', [
+            day.isDisabled && 'before',
+            day.isSelected && 'selected',
+            !this.dateService.isSameMonth(this.dateService.utcDate(day.date), this.currentMonth) && 'empty',
+            day.isAvailable && 'available',
+            'large',
+            day.isActive && 'active',
+            day.isWithinRange && 'within-range'
+        ]);
+    }
+    getNextMonth() {
+        if (!this.weeks) {
+            return;
+        }
+        const firstWeek = this.weeks[0];
+        if (!firstWeek) {
+            return;
+        }
+        const firstValidDay = firstWeek.days
+            .find(day => day && this.dateService.isSameMonth(this.dateService.utcDate(day.date), this.currentMonth));
+        if (!firstValidDay) {
+            return;
+        }
+        const nextMonth = this.dateService.utcDate(firstValidDay.date);
+        const month = nextMonth.month + 1;
+        nextMonth.setMonth(month);
+        this.currentMonth = nextMonth;
+        this.applySelectedDateChanges();
+        this.monthChange.emit(this.currentMonth);
+        this.setPreviousMonthDisabled();
+        if (!this.availability) {
+            this.maxMonthIndex++;
+        }
+    }
+    getPreviousMonth() {
+        if (!this.weeks) {
+            return;
+        }
+        const firstWeek = this.weeks[0];
+        if (!firstWeek) {
+            return;
+        }
+        const firstValidDay = firstWeek.days
+            .find(day => day && this.dateService.isSameMonth(this.dateService.utcDate(day.date), this.currentMonth));
+        const previousMonth = this.dateService.utcDate(firstValidDay.date);
+        const month = previousMonth.month - 1;
+        previousMonth.setMonth(month);
+        this.currentMonth = previousMonth;
+        this.applySelectedDateChanges();
+        this.monthChange.emit(this.currentMonth);
+        this.setPreviousMonthDisabled();
+    }
+    setPreviousMonthDisabled() {
+        if (this.currentMonth) {
+            const previousMonth = new UtcDate(this.currentMonth.year, this.currentMonth.month, this.currentMonth.date);
+            const month = previousMonth.month - 1;
+            previousMonth.setMonth(month);
+            if (this.disablePastSelection && this.dateService.isInThePast(previousMonth, true)) {
+                this.isPreviousMonthDisabled = true;
+                return;
+            }
+        }
+        this.isPreviousMonthDisabled = false;
+    }
+    applySelectedDateChanges() {
+        this.availableDays = this.calendarService.getAvailableDays(this.currentMonth, this.availableDates, this.availability, this.disablePastSelection, this.lowerLimitDate, this.activeDate, this.selectedDate);
+        this.selectedMonth = this.months
+            .find(x => this.dateService.isSameMonth(this.dateService.utcDate(x.value), this.currentMonth));
+        this.calendarService.updateAvailableDaysWithSelectedDate(this.availableDays, this.selectedDate);
+        this.weeks = this.calendarService.getWeeks(this.availableDays, this.weekStart);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarNewComponent, deps: [{ token: DateHelper }, { token: i1.DatePipe }, { token: CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CalendarNewComponent, selector: "nas-calendar-new", inputs: { noAvailableFlightsLabel: "noAvailableFlightsLabel", availableFlightsLabel: "availableFlightsLabel", disablePastSelection: "disablePastSelection", lowerLimitDate: "lowerLimitDate", date: "date", weekStart: "weekStart", displayWeekNumbers: "displayWeekNumbers", availability: "availability", locale: "locale", availableDates: "availableDates", activeDate: "activeDate", selectedDate: "selectedDate", nasFormGroup: "nasFormGroup", nasFormControlName: "nasFormControlName", dateDisplayFormat: "dateDisplayFormat", ariaLabelPreviousMonth: "ariaLabelPreviousMonth", ariaLabelNextMonth: "ariaLabelNextMonth" }, outputs: { monthChange: "monthChange", focusOnNextChange: "focusOnNextChange", selectedDateChange: "selectedDateChange", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "previousMonthRef", first: true, predicate: ["previousMonthRef"], descendants: true }, { propertyName: "nextMonthRef", first: true, predicate: ["nextMonthRef"], descendants: true }, { propertyName: "calendarContent", first: true, predicate: ["calendarContent"], descendants: true }, { propertyName: "monthSelectRef", first: true, predicate: ["monthSelect"], descendants: true }, { propertyName: "tableCells", predicate: ["tableCells"], descendants: true }, { propertyName: "dateButtons", predicate: ["dateButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClass()\">\n  <div #calendarContent\n    tabindex=\"0\"\n    [nasClass]=\"getClass('content')\">\n    <header [nasClass]=\"getClass('header')\">\n      <button type=\"button\"\n        #previousMonthRef\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelPreviousMonth\"\n        [nasClass]=\"getClass('nav')\"\n        [disabled]=\"isPreviousMonthDisabled === true\"\n        (keydown)=\"onPreviousMonthKeydown($event)\"\n        (mousedown)=\"onPreviousMonthMousedown()\">\n        <nas-icon tabindex=\"-1\"\n          [type]=\"'arrow-left'\"></nas-icon>\n      </button>\n      <ng-container *ngIf=\"months?.length > 0; else currentMonthTemplate\">\n        <nas-select #monthSelect\n          [cssClass]=\"getClass('month')\"\n          [inline]=\"true\"\n          [simple]=\"true\"\n          [options]=\"months\"\n          [(selected)]=\"selectedMonth\"\n          (keydown)=\"onMonthSelectKeydown($event)\"></nas-select>\n      </ng-container>\n      <ng-template #currentMonthTemplate>\n        {{currentMonthModel}}\n      </ng-template>     \n      <button type=\"button\"\n        tabindex=\"0\"\n        #nextMonthRef\n        [nasClass]=\"getClass('nav')\"\n        [attr.aria-label]=\"ariaLabelNextMonth\"\n        [disabled]=\"nextMonthDisabled\"\n        (keydown)=\"onNextMonthKeydown($event)\"\n        (mousedown)=\"onNextMonthMousedown()\">\n        <nas-icon [type]=\"'arrow-right'\"></nas-icon>\n      </button>\n    </header>\n\n    <!-- Weekdays + Dates -->\n    <table [nasClass]=\"getClass('table')\">\n      <thead>\n        <tr [nasClass]=\"getClass('week')\">\n          <th *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\"></th>\n          <th [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let weekday of weekdays\">\n            <div [nasClass]=\"getClass('item', 'header')\">{{weekday}}</div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let week of weeks\"\n          [nasClass]=\"getClass('row', 'animate')\">\n          <td *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\">\n            <span [nasClass]=\"getClass('date', 'week-number')\">{{week.weekNumber}}</span>\n          </td>\n          <td [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let day of week?.days\"\n            #tableCells>\n            <div [nasClass]=\"getClass('item', 'dummy')\"\n              *ngIf=\"day === null; else dayTemplate\"></div>\n            <ng-template #dayTemplate\n              tabindex=\"0\">\n              <button type=\"button\"\n                #dateButton\n                (keydown)=\"dateKeyDown($event)\"\n                tabIndex=\"0\"\n                [nasClass]=\"getCellButtonClass(day)\"\n                (mousedown)=\"onMouseDown(day.date, $event)\"\n                (click)=\"onDayClick(day)\"\n                (focus)=\"onDayFocus(day)\">\n                <div [nasClass]=\"getClass('date-wrapper')\">\n                  <span [nasClass]=\"getClass('date')\"\n                   [attr.aria-label]=\"day.date | date : 'd':'UTC'\">{{ day.date | date : 'd':'UTC':locale }}</span>\n                </div>\n              </button>\n            </ng-template>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div [nasClass]=\"getClass('footer')\">\n      <div *ngIf=\"availableDates?.length === 0 && noAvailableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <nas-icon [icon]=\"'alert'\"></nas-icon>\n        {{noAvailableFlightsLabel}}\n      </div>\n      <div *ngIf=\"availableDates?.length > 0 && noAvailableFlightsLabel && availableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <div [nasClass]=\"getClass('item', 'available')\"></div>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{availableFlightsLabel}}</div>\n        <span [nasClass]=\"getClass('item', 'unavailable')\"></span>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{noAvailableFlightsLabel}}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-calendar-new{width:100%;min-width:325px;float:right;padding:10px 0 5px;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;margin-top:3px;position:relative;z-index:4}@media (min-width: 640px){.nas-calendar-new{max-width:350px}}.nas-calendar-new__content:active{outline:none;box-shadow:none}.nas-calendar-new__content:focus{outline:none;box-shadow:none}.nas-calendar-new__cover{margin-bottom:16px}.nas-calendar-new__header{height:30px;font-size:small;font-weight:700;display:flex;justify-content:space-between}.nas-calendar-new__month{margin:0 auto 21px}.nas-calendar-new__months{background-color:#fff;max-width:350px;display:flex;flex-wrap:wrap;gap:15px}.nas-calendar-new__months--item{text-transform:uppercase}.nas-calendar-new__table{table-layout:fixed;width:100%}.nas-calendar-new__week-number{font-size:14px;line-height:20px;position:relative;width:20px;display:none}@media (min-width: 640px){.nas-calendar-new__week-number{display:table-cell}}.nas-calendar-new__cell{padding:0;font-weight:400;color:#15273f}.nas-calendar-new__nav{margin:-3px 2px 12px;width:24px;height:24px;border-radius:50%;transition:transform .2s cubic-bezier(0,0,.1,1),opacity .2s ease-out}.nas-calendar-new__nav .nas-icon-arrow-left--light,.nas-calendar-new__nav .nas-icon-arrow-right--light{position:absolute;top:50%;left:50%}.nas-calendar-new__nav .nas-icon-arrow-left--light{transform:translate(-60%,-50%)}.nas-calendar-new__nav .nas-icon-arrow-right--light{transform:translate(-40%,-50%)}.nas-calendar-new__nav:hover,.nas-calendar-new__nav:focus{outline:none;border:2px solid #3b99fc}.nas-calendar-new__nav:active{transform:translateY(2px)}.nas-calendar-new__nav[disabled]{pointer-events:none;opacity:.5}.nas-calendar-new__item{font-size:14px;line-height:20px;display:flex;flex-direction:column;margin-left:5px;cursor:pointer;overflow:hidden;width:100%;height:40px;text-align:left;outline:0;padding:2px;border:1px solid #fff;transition:transform .17s cubic-bezier(0,0,.1,1);border-radius:0;align-items:center;justify-content:center;pointer-events:none;opacity:.5;background-color:#fff}.nas-calendar-new__item .nas-calendar-new__date{color:#002a3a}@media (min-width: 640px){.nas-calendar-new__item{padding:2px 6px}}@media (min-width: 1000px){.nas-calendar-new__item{padding:2px 3px}}@media (min-width: 1180px){.nas-calendar-new__item{padding:2px 6px}}.nas-calendar-new__item--large{height:40px;width:40px;margin-top:5px}.nas-calendar-new__item--header{pointer-events:none;background-color:transparent;border:0;opacity:1;padding-bottom:9px;margin-left:0!important}.nas-calendar-new__item--dummy{visibility:hidden}.nas-calendar-new__item--today .nas-calendar-new__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#15273f}.nas-calendar-new__item--cheapest{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#e5212d}.nas-calendar-new__item--empty{pointer-events:none;opacity:.3;border-color:#fff;background-color:#fff}.nas-calendar-new__item--empty .nas-calendar-new__date{color:inherit}.nas-calendar-new__item--available{pointer-events:all;opacity:1;border-color:#eaeaea;background-color:#f9f9f9}.nas-calendar-new__item--available .nas-calendar-new__date{color:#002a3a}.nas-calendar-new__item--active{border:2px solid #15273F;background-color:#ebf4ff}.nas-calendar-new__item--within-range{background-color:#ebf4ff}.nas-calendar-new__item--before{pointer-events:none;color:#a9a9a9;opacity:.55}.nas-calendar-new__item:hover,.nas-calendar-new__item:focus{border-color:#15273f;border-width:3px;box-shadow:inset 0 0 2px #c3c3c3,inset 0 0 2px 3px #3b99fc}.nas-calendar-new__item:active{transform:translateY(3px)}.nas-calendar-new__item--selected,.nas-calendar-new__item:active{color:#fff;background-color:#15273f;height:40px;width:40px;margin-left:5px}.nas-calendar-new__item--selected:hover,.nas-calendar-new__item--selected:focus,.nas-calendar-new__item:active:hover,.nas-calendar-new__item:active:focus{border-color:#15273f;border-width:3px}.nas-calendar-new__item--selected .nas-calendar-new__date,.nas-calendar-new__item:active .nas-calendar-new__date{color:inherit}.nas-calendar-new__item--sold-out{pointer-events:none;opacity:.8;border-color:#fff;background-color:#fff}.nas-calendar-new__item--sold-out .nas-calendar-new__date{color:#002a3a}.nas-calendar-new__item[disabled]{pointer-events:none}.nas-calendar-new__week{border-bottom:1px solid #eaeaea}.nas-calendar-new__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#6f6f6f}.nas-calendar-new__date--week-number{top:6px;right:6px}.nas-calendar-new__price{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:inherit;letter-spacing:-.04em}@media (min-width: 640px){.nas-calendar-new__price{font-size:14px;line-height:1.1}}@media (min-width: 1280px){.nas-calendar-new__price{font-size:16px}}.nas-calendar-new__price--before{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;text-decoration:line-through;font-size:.8em;line-height:1}@media (min-width: 1000px){.nas-calendar-new__price--before{margin-bottom:2px}}.nas-calendar-new__sold-out{position:absolute;bottom:2px;left:2px;line-height:1;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:-.015em;color:#8c8c8c;font-size:.75em}@media (min-width: 640px){.nas-calendar-new__sold-out{font-size:.9em;bottom:6px;left:6px}}@media (min-width: 1000px){.nas-calendar-new__sold-out{left:3px}}@media (min-width: 1180px){.nas-calendar-new__sold-out{left:6px}}.nas-calendar-new__transit{position:relative;display:flex;max-width:3.8em;width:calc(100% - 12px);padding:0 .5em 0 .3em;height:8px;justify-content:space-around;margin-bottom:2px;transform:scale(.85);transform-origin:left;background-color:inherit}@media (min-width: 640px){.nas-calendar-new__transit{transform:none;padding:0 .5em 0 .3em;margin-bottom:3px}}.nas-calendar-new__transit:before,.nas-calendar-new__transit:after{content:\"\";position:absolute}.nas-calendar-new__transit:before{top:calc(50% - 1px);width:100%;left:0;height:2px;background-color:currentColor}.nas-calendar-new__transit:after{width:8px;height:8px;right:0;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}.nas-calendar-new__transit-indicator{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;background-color:#fff}.nas-calendar-new__asterisk{font-size:.67em;top:-.36em;margin-left:.1em}.nas-calendar-new__footer{display:flex;justify-content:center}.nas-calendar-new__footer .nas-calendar-new__item{width:25px;height:25px;margin-right:3px}.nas-calendar-new__footer .nas-calendar-new__item--unavailable{border:1px solid #15273f}.nas-calendar-new__footer--item{margin-bottom:6px}.nas-calendar-new__footer--label{flex-shrink:0;margin-right:12px;display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:20px}@keyframes lowfare-item-in{0%{opacity:0;transform:scale(0)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+__decorate([
+    Debounce(150)
+], CalendarNewComponent.prototype, "onPreviousMonthKeydown", null);
+__decorate([
+    Debounce(150)
+], CalendarNewComponent.prototype, "onNextMonthKeydown", null);
+__decorate([
+    Debounce(200)
+], CalendarNewComponent.prototype, "onNextMonthMousedown", null);
+__decorate([
+    Debounce(200)
+], CalendarNewComponent.prototype, "onPreviousMonthMousedown", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CalendarNewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nas-calendar-new', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClass()\">\n  <div #calendarContent\n    tabindex=\"0\"\n    [nasClass]=\"getClass('content')\">\n    <header [nasClass]=\"getClass('header')\">\n      <button type=\"button\"\n        #previousMonthRef\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelPreviousMonth\"\n        [nasClass]=\"getClass('nav')\"\n        [disabled]=\"isPreviousMonthDisabled === true\"\n        (keydown)=\"onPreviousMonthKeydown($event)\"\n        (mousedown)=\"onPreviousMonthMousedown()\">\n        <nas-icon tabindex=\"-1\"\n          [type]=\"'arrow-left'\"></nas-icon>\n      </button>\n      <ng-container *ngIf=\"months?.length > 0; else currentMonthTemplate\">\n        <nas-select #monthSelect\n          [cssClass]=\"getClass('month')\"\n          [inline]=\"true\"\n          [simple]=\"true\"\n          [options]=\"months\"\n          [(selected)]=\"selectedMonth\"\n          (keydown)=\"onMonthSelectKeydown($event)\"></nas-select>\n      </ng-container>\n      <ng-template #currentMonthTemplate>\n        {{currentMonthModel}}\n      </ng-template>     \n      <button type=\"button\"\n        tabindex=\"0\"\n        #nextMonthRef\n        [nasClass]=\"getClass('nav')\"\n        [attr.aria-label]=\"ariaLabelNextMonth\"\n        [disabled]=\"nextMonthDisabled\"\n        (keydown)=\"onNextMonthKeydown($event)\"\n        (mousedown)=\"onNextMonthMousedown()\">\n        <nas-icon [type]=\"'arrow-right'\"></nas-icon>\n      </button>\n    </header>\n\n    <!-- Weekdays + Dates -->\n    <table [nasClass]=\"getClass('table')\">\n      <thead>\n        <tr [nasClass]=\"getClass('week')\">\n          <th *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\"></th>\n          <th [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let weekday of weekdays\">\n            <div [nasClass]=\"getClass('item', 'header')\">{{weekday}}</div>\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let week of weeks\"\n          [nasClass]=\"getClass('row', 'animate')\">\n          <td *ngIf=\"exists(displayWeekNumbers)\"\n            [nasClass]=\"getClass('week-number')\">\n            <span [nasClass]=\"getClass('date', 'week-number')\">{{week.weekNumber}}</span>\n          </td>\n          <td [nasClass]=\"getClass('cell')\"\n            *ngFor=\"let day of week?.days\"\n            #tableCells>\n            <div [nasClass]=\"getClass('item', 'dummy')\"\n              *ngIf=\"day === null; else dayTemplate\"></div>\n            <ng-template #dayTemplate\n              tabindex=\"0\">\n              <button type=\"button\"\n                #dateButton\n                (keydown)=\"dateKeyDown($event)\"\n                tabIndex=\"0\"\n                [nasClass]=\"getCellButtonClass(day)\"\n                (mousedown)=\"onMouseDown(day.date, $event)\"\n                (click)=\"onDayClick(day)\"\n                (focus)=\"onDayFocus(day)\">\n                <div [nasClass]=\"getClass('date-wrapper')\">\n                  <span [nasClass]=\"getClass('date')\"\n                   [attr.aria-label]=\"day.date | date : 'd':'UTC'\">{{ day.date | date : 'd':'UTC':locale }}</span>\n                </div>\n              </button>\n            </ng-template>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n\n    <div [nasClass]=\"getClass('footer')\">\n      <div *ngIf=\"availableDates?.length === 0 && noAvailableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <nas-icon [icon]=\"'alert'\"></nas-icon>\n        {{noAvailableFlightsLabel}}\n      </div>\n      <div *ngIf=\"availableDates?.length > 0 && noAvailableFlightsLabel && availableFlightsLabel\"\n        [nasClass]=\"getClass('footer', 'item')\">\n        <div [nasClass]=\"getClass('item', 'available')\"></div>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{availableFlightsLabel}}</div>\n        <span [nasClass]=\"getClass('item', 'unavailable')\"></span>\n        <div [nasClass]=\"getClass('footer', 'label')\">{{noAvailableFlightsLabel}}</div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-calendar-new{width:100%;min-width:325px;float:right;padding:10px 0 5px;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;margin-top:3px;position:relative;z-index:4}@media (min-width: 640px){.nas-calendar-new{max-width:350px}}.nas-calendar-new__content:active{outline:none;box-shadow:none}.nas-calendar-new__content:focus{outline:none;box-shadow:none}.nas-calendar-new__cover{margin-bottom:16px}.nas-calendar-new__header{height:30px;font-size:small;font-weight:700;display:flex;justify-content:space-between}.nas-calendar-new__month{margin:0 auto 21px}.nas-calendar-new__months{background-color:#fff;max-width:350px;display:flex;flex-wrap:wrap;gap:15px}.nas-calendar-new__months--item{text-transform:uppercase}.nas-calendar-new__table{table-layout:fixed;width:100%}.nas-calendar-new__week-number{font-size:14px;line-height:20px;position:relative;width:20px;display:none}@media (min-width: 640px){.nas-calendar-new__week-number{display:table-cell}}.nas-calendar-new__cell{padding:0;font-weight:400;color:#15273f}.nas-calendar-new__nav{margin:-3px 2px 12px;width:24px;height:24px;border-radius:50%;transition:transform .2s cubic-bezier(0,0,.1,1),opacity .2s ease-out}.nas-calendar-new__nav .nas-icon-arrow-left--light,.nas-calendar-new__nav .nas-icon-arrow-right--light{position:absolute;top:50%;left:50%}.nas-calendar-new__nav .nas-icon-arrow-left--light{transform:translate(-60%,-50%)}.nas-calendar-new__nav .nas-icon-arrow-right--light{transform:translate(-40%,-50%)}.nas-calendar-new__nav:hover,.nas-calendar-new__nav:focus{outline:none;border:2px solid #3b99fc}.nas-calendar-new__nav:active{transform:translateY(2px)}.nas-calendar-new__nav[disabled]{pointer-events:none;opacity:.5}.nas-calendar-new__item{font-size:14px;line-height:20px;display:flex;flex-direction:column;margin-left:5px;cursor:pointer;overflow:hidden;width:100%;height:40px;text-align:left;outline:0;padding:2px;border:1px solid #fff;transition:transform .17s cubic-bezier(0,0,.1,1);border-radius:0;align-items:center;justify-content:center;pointer-events:none;opacity:.5;background-color:#fff}.nas-calendar-new__item .nas-calendar-new__date{color:#002a3a}@media (min-width: 640px){.nas-calendar-new__item{padding:2px 6px}}@media (min-width: 1000px){.nas-calendar-new__item{padding:2px 3px}}@media (min-width: 1180px){.nas-calendar-new__item{padding:2px 6px}}.nas-calendar-new__item--large{height:40px;width:40px;margin-top:5px}.nas-calendar-new__item--header{pointer-events:none;background-color:transparent;border:0;opacity:1;padding-bottom:9px;margin-left:0!important}.nas-calendar-new__item--dummy{visibility:hidden}.nas-calendar-new__item--today .nas-calendar-new__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#15273f}.nas-calendar-new__item--cheapest{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#e5212d}.nas-calendar-new__item--empty{pointer-events:none;opacity:.3;border-color:#fff;background-color:#fff}.nas-calendar-new__item--empty .nas-calendar-new__date{color:inherit}.nas-calendar-new__item--available{pointer-events:all;opacity:1;border-color:#eaeaea;background-color:#f9f9f9}.nas-calendar-new__item--available .nas-calendar-new__date{color:#002a3a}.nas-calendar-new__item--active{border:2px solid #15273F;background-color:#ebf4ff}.nas-calendar-new__item--within-range{background-color:#ebf4ff}.nas-calendar-new__item--before{pointer-events:none;color:#a9a9a9;opacity:.55}.nas-calendar-new__item:hover,.nas-calendar-new__item:focus{border-color:#15273f;border-width:3px;box-shadow:inset 0 0 2px #c3c3c3,inset 0 0 2px 3px #3b99fc}.nas-calendar-new__item:active{transform:translateY(3px)}.nas-calendar-new__item--selected,.nas-calendar-new__item:active{color:#fff;background-color:#15273f;height:40px;width:40px;margin-left:5px}.nas-calendar-new__item--selected:hover,.nas-calendar-new__item--selected:focus,.nas-calendar-new__item:active:hover,.nas-calendar-new__item:active:focus{border-color:#15273f;border-width:3px}.nas-calendar-new__item--selected .nas-calendar-new__date,.nas-calendar-new__item:active .nas-calendar-new__date{color:inherit}.nas-calendar-new__item--sold-out{pointer-events:none;opacity:.8;border-color:#fff;background-color:#fff}.nas-calendar-new__item--sold-out .nas-calendar-new__date{color:#002a3a}.nas-calendar-new__item[disabled]{pointer-events:none}.nas-calendar-new__week{border-bottom:1px solid #eaeaea}.nas-calendar-new__date{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#6f6f6f}.nas-calendar-new__date--week-number{top:6px;right:6px}.nas-calendar-new__price{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:inherit;letter-spacing:-.04em}@media (min-width: 640px){.nas-calendar-new__price{font-size:14px;line-height:1.1}}@media (min-width: 1280px){.nas-calendar-new__price{font-size:16px}}.nas-calendar-new__price--before{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;text-decoration:line-through;font-size:.8em;line-height:1}@media (min-width: 1000px){.nas-calendar-new__price--before{margin-bottom:2px}}.nas-calendar-new__sold-out{position:absolute;bottom:2px;left:2px;line-height:1;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:-.015em;color:#8c8c8c;font-size:.75em}@media (min-width: 640px){.nas-calendar-new__sold-out{font-size:.9em;bottom:6px;left:6px}}@media (min-width: 1000px){.nas-calendar-new__sold-out{left:3px}}@media (min-width: 1180px){.nas-calendar-new__sold-out{left:6px}}.nas-calendar-new__transit{position:relative;display:flex;max-width:3.8em;width:calc(100% - 12px);padding:0 .5em 0 .3em;height:8px;justify-content:space-around;margin-bottom:2px;transform:scale(.85);transform-origin:left;background-color:inherit}@media (min-width: 640px){.nas-calendar-new__transit{transform:none;padding:0 .5em 0 .3em;margin-bottom:3px}}.nas-calendar-new__transit:before,.nas-calendar-new__transit:after{content:\"\";position:absolute}.nas-calendar-new__transit:before{top:calc(50% - 1px);width:100%;left:0;height:2px;background-color:currentColor}.nas-calendar-new__transit:after{width:8px;height:8px;right:0;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}.nas-calendar-new__transit-indicator{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;background-color:#fff}.nas-calendar-new__asterisk{font-size:.67em;top:-.36em;margin-left:.1em}.nas-calendar-new__footer{display:flex;justify-content:center}.nas-calendar-new__footer .nas-calendar-new__item{width:25px;height:25px;margin-right:3px}.nas-calendar-new__footer .nas-calendar-new__item--unavailable{border:1px solid #15273f}.nas-calendar-new__footer--item{margin-bottom:6px}.nas-calendar-new__footer--label{flex-shrink:0;margin-right:12px;display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:20px}@keyframes lowfare-item-in{0%{opacity:0;transform:scale(0)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: DateHelper }, { type: i1.DatePipe }, { type: CalendarService }]; }, propDecorators: { previousMonthRef: [{
+                type: ViewChild,
+                args: ['previousMonthRef']
+            }], nextMonthRef: [{
+                type: ViewChild,
+                args: ['nextMonthRef']
+            }], tableCells: [{
+                type: ViewChildren,
+                args: ['tableCells']
+            }], dateButtons: [{
+                type: ViewChildren,
+                args: ['dateButton']
+            }], calendarContent: [{
+                type: ViewChild,
+                args: ['calendarContent']
+            }], monthSelectRef: [{
+                type: ViewChild,
+                args: ['monthSelect']
+            }], noAvailableFlightsLabel: [{
+                type: Input
+            }], availableFlightsLabel: [{
+                type: Input
+            }], disablePastSelection: [{
+                type: Input
+            }], lowerLimitDate: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], weekStart: [{
+                type: Input
+            }], displayWeekNumbers: [{
+                type: Input
+            }], availability: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], availableDates: [{
+                type: Input
+            }], activeDate: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], nasFormGroup: [{
+                type: Input
+            }], nasFormControlName: [{
+                type: Input
+            }], dateDisplayFormat: [{
+                type: Input
+            }], ariaLabelPreviousMonth: [{
+                type: Input
+            }], ariaLabelNextMonth: [{
+                type: Input
+            }], monthChange: [{
+                type: Output
+            }], focusOnNextChange: [{
+                type: Output
+            }], selectedDateChange: [{
+                type: Output
+            }], activeDateChange: [{
+                type: Output
+            }], onPreviousMonthKeydown: [], onNextMonthKeydown: [], onNextMonthMousedown: [], onPreviousMonthMousedown: [] } });
+
+/**
+ * @description
+ * Norwegian Date Picker Component | New design | Beta
+ */
+class DatepickerNewComponent extends NasComponentBase {
+    get showBackdrop() {
+        return this.show && !this.exists(this.disableBackdrop);
+    }
+    set showBackdrop(value) {
+        if (this.show === value) {
+            return;
+        }
+        setTimeout(() => {
+            this.show = value;
+        });
+    }
+    /**
+     * @property Input
+     * @description
+     * The lowest date allowed.
+     */
+    get lowerLimitDate() {
+        return this.lowerLimitDateValue;
+    }
+    set lowerLimitDate(date) {
+        this.lowerLimitDateValue = date;
+        if (this.dateService.isLessThan(this.selectedDate, date, false, true, true)) {
+            this.selectedDate = date;
+        }
+    }
+    /**
+     * @property Input
+     * @description
+     * boolean value to disable or enable the input of the date picker.
+     */
+    get disabled() {
+        return this.disabledValue;
+    }
+    set disabled(value) {
+        this.disabledValue = value;
+        if (this.nasFormGroup && this.nasFormControlName) {
+            setTimeout(() => {
+                const control = this.nasFormGroup.get(this.nasFormControlName);
+                if (!control) {
+                    return;
+                }
+                if (value) {
+                    control.disable();
+                }
+                else {
+                    control.enable();
+                }
+            });
+        }
+    }
+    /**
+     * @property Input
+     * @description
+     * An array of times to be added in the time selector.
+     */
+    get times() {
+        return this.timesValue;
+    }
+    set times(times) {
+        if (!times) {
+            return;
+        }
+        this.timesValue = times;
+        this.timeOptions = times.map(x => {
+            x.year = new Date().getUTCFullYear();
+            const option = {
+                title: this.datePipe.transform(this.dateService.date(x), this.timeDisplayFormat, 'UTC', this.locale),
+                value: this.dateService.date(x).toISOString()
+            };
+            return option;
+        });
+        this.dateDisplayFormat = 'mediumDate';
+    }
+    /**
+     * @property Input
+     * @description
+     * The calendar is open or closed.
+     */
+    get open() {
+        return this.openValue;
+    }
+    set open(open) {
+        if (open === this.openValue) {
+            return;
+        }
+        this.openValue = open;
+        if (open) {
+            this.openCalendar();
+        }
+        else {
+            this.closeCalendar();
+        }
+    }
+    /**
+     * @property Input
+     * @description
+     * Set selected month.
+     */
+    get selectedMonth() {
+        return this.selectedMonthValue;
+    }
+    set selectedMonth(month) {
+        if (!month) {
+            return;
+        }
+        if (this.dateService.isSameMonth(this.selectedMonthValue, month)) {
+            return;
+        }
+        setTimeout(() => {
+            this.selectedMonthValue = month;
+            this.selectedMonthChange.emit(month);
+        });
+    }
+    /**
+     * @property Input
+     * @description
+     * Gets or sets the selected Date in the date picker. Setting this date will highlight the date in the date picker
+     * and user can change it by clicking from any other enabled dates
+     * or by navigating betrween months and selecting from different available month.
+     */
+    get selectedDate() {
+        return this.selectedDateValue;
+    }
+    set selectedDate(date) {
+        if (!date) {
+            return;
+        }
+        if (this.selectedDateValue && this.dateService.isSameDate(this.selectedDateValue, date)) {
+            return;
+        }
+        if (this.selectedTimeValue) {
+            date = new UtcDate(date.year, date.month, date.date, this.selectedTimeValue.hours, this.selectedTimeValue.minutes);
+        }
+        this.selectedDateValue = date;
+        if (this.nasFormGroup && this.nasFormControlName) {
+            const control = this.nasFormGroup.get(this.nasFormControlName);
+            if (control) {
+                const calendarDate = {
+                    model: this.datePipe.transform(this.dateService.date(date), this.dateDisplayFormat, 'UTC', this.locale),
+                    date: date
+                };
+                control.patchValue(calendarDate);
+            }
+        }
+        setTimeout(() => {
+            this.model = this.datePipe.transform(this.dateService.date(date), this.dateDisplayFormat, 'UTC', this.locale);
+        });
+        this.selectedDateChange.emit(date);
+        if (this.show) {
+            this.closeCalendar();
+        }
+    }
+    /**
+     * @property Input
+     * @description
+     * Sets the selected time in the time selector.
+     */
+    get selectedTime() {
+        return this.selectedTimeValue;
+    }
+    set selectedTime(time) {
+        if (!time) {
+            return;
+        }
+        this.selectedTimeValue = time;
+        if (this.timeOptions && this.timeOptions.length > 0) {
+            const timeOption = this.timeOptions.find(x => x.value === this.dateService.date(time).toISOString());
+            if (timeOption) {
+                this.selectedTimeOption = timeOption;
+            }
+        }
+        if (this.selectedDate) {
+            this.selectedDate = new UtcDate(this.selectedDate.year, this.selectedDate.month, this.selectedDate.date, this.selectedTimeValue.hours, this.selectedTimeValue.minutes);
+        }
+        else if (this.activeDate) {
+            this.selectedDate = new UtcDate(this.activeDate.year, this.activeDate.month, this.activeDate.date, this.selectedTimeValue.hours, this.selectedTimeValue.minutes);
+        }
+    }
+    get activeDate() {
+        if (this.selectedDate && this.activeDateValue &&
+            this.dateService.isLessThan(this.activeDateValue, this.selectedDate, false, true, true)) {
+            return this.activeDateValue;
+        }
+        if (this.activeDateValue) {
+            return this.activeDateValue;
+        }
+        else if (this.selectedDate) {
+            this.activeDateValue = this.selectedDate;
+        }
+        else {
+            const now = new Date();
+            this.activeDateValue = new UtcDate(now.getFullYear(), now.getMonth(), now.getDate());
+        }
+        return this.activeDateValue;
+    }
+    set activeDate(date) {
+        if (this.lowerLimitDate && this.dateService.isLessThan(date, this.lowerLimitDate, false, true, true)) {
+            return;
+        }
+        this.activeDateValue = date;
+        clearTimeout(this.activeDateTimeout);
+        this.activeDateTimeout = setTimeout(() => {
+            this.model = this.datePipe.transform(this.dateService.date(this.selectedDate), this.dateDisplayFormat, 'UTC', this.locale);
+        });
+    }
+    constructor(datePipe, dateService) {
+        super('nas-datepicker-new');
+        this.datePipe = datePipe;
+        this.dateService = dateService;
+        this.show = false;
+        this.showTimes = false;
+        /**
+         * @property Input
+         * @description
+         * The display format of the date when user has selected the date and it is being shown in the input box for the date picker.
+         * Please look at the angular Date pipe for valid formats and variations.
+         */
+        this.dateDisplayFormat = 'EEEE d, MMMM yyyy';
+        /**
+         * @property Input
+         * @description
+         * The time display format.
+         */
+        this.timeDisplayFormat = 'HH:mm';
+        /**
+         * @property Input
+         * @description
+         * A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.
+         * This requires that registerLocaleData is called with the respective locale.
+         */
+        this.locale = 'en-US';
+        /**
+         * @property Output
+         * @description
+         * Date selected by the user by clicking in date-picker date-box.
+         */
+        this.selectedDateChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * Month selected by the user by clicking in drop down for month selection or month navigation buttons.
+         */
+        this.selectedMonthChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * The calendar is open or closed.
+         */
+        this.openChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * When a user has actively changed the date.
+         */
+        this.focusOnNextChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * When a user has pressed shift + tab to go to previous control.
+         */
+        this.focusOnPreviousChange = new EventEmitter();
+        this.forceNotOpenCalendar = false;
+    }
+    ngOnInit() {
+        if (this.nasFormGroup && this.nasFormControlName) {
+            this.nasFormGroup
+                .get(this.nasFormControlName)
+                .valueChanges
+                .subscribe(value => {
+                if (this.model === value?.model) {
+                    return;
+                }
+                setTimeout(() => {
+                    this.model = value?.model;
+                    this.selectedDateValue = value?.date;
+                });
+            });
+        }
+    }
+    onInputKeydownShiftTab(event) {
+        this.closeCalendar();
+        this.focusOnPreviousChange.emit(event);
+    }
+    onCalendarKeyDown(event) {
+        let currentActiveDate = this.activeDate.date;
+        let date;
+        if (document.activeElement === this.input.nativeElement) {
+            event.stopImmediatePropagation();
+        }
+        switch (event.key) {
+            case 'ArrowRight':
+                if (this.isActiveElementMonthButtons()) {
+                    event.preventDefault();
+                    break;
+                }
+                currentActiveDate++;
+                this.activeDate = this.dateService.utcDate(new Date(Date.UTC(this.activeDate.year, this.activeDate.month, currentActiveDate)));
+                this.setFocusOnActiveDateAsync();
+                break;
+            case 'ArrowLeft':
+                if (this.isActiveElementMonthButtons()) {
+                    event.preventDefault();
+                    break;
+                }
+                currentActiveDate--;
+                date = this.dateService.utcDate(new Date(Date.UTC(this.activeDate.year, this.activeDate.month, currentActiveDate)));
+                if (this.exists(this.disablePastSelection) && this.dateService.isInThePast(date)) {
+                    break;
+                }
+                this.activeDate = date;
+                this.setFocusOnActiveDateAsync();
+                break;
+            case 'ArrowUp':
+                if (this.isActiveElementMonthButtons()) {
+                    event.preventDefault();
+                    break;
+                }
+                currentActiveDate -= 7;
+                date = this.dateService.utcDate(new Date(Date.UTC(this.activeDate.year, this.activeDate.month, currentActiveDate)));
+                if (this.exists(this.disablePastSelection) && this.dateService.isInThePast(date)) {
+                    break;
+                }
+                this.activeDate = date;
+                this.setFocusOnActiveDateAsync();
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+                if (this.isActiveElementMonthButtons()) {
+                    event.preventDefault();
+                    break;
+                }
+                currentActiveDate += 7;
+                this.activeDateValue = this.dateService.utcDate(new Date(Date.UTC(this.activeDate.year, this.activeDate.month, currentActiveDate)));
+                this.setFocusOnActiveDateAsync();
+                event.preventDefault();
+                break;
+            case 'Escape':
+                this.closeCalendar();
+                this.forceNotOpenCalendar = true;
+                if (this.input) {
+                    this.input.nativeElement.select();
+                }
+                break;
+            case 'Enter':
+                if (this.isActiveElementMonthButtons()) {
+                    return;
+                }
+                this.setFocusOnTimeSelectorOrNext(event);
+                break;
+        }
+    }
+    onTimeSelectorKeydown(event) {
+        if (event.key === 'Tab') {
+            if (event.shiftKey) {
+                this.openCalendar();
+            }
+            else {
+                this.focusOnNextChange.emit(event);
+            }
+            event.preventDefault();
+        }
+    }
+    setFocusOnTimeSelectorOrNext(event) {
+        if (this.timeOptions) {
+            setTimeout(() => {
+                const selectElement = this.timeSelector.select.nativeElement;
+                if (selectElement) {
+                    selectElement.focus();
+                }
+            });
+        }
+        else {
+            this.focusOnNextChange.emit(event);
+        }
+        this.closeCalendar();
+    }
+    onMonthChange(currentMonth) {
+        this.selectedMonth = currentMonth;
+    }
+    onMouseDownDatepicker() {
+        this.openCalendar();
+    }
+    openCalendar() {
+        if (this.show || this.disabled || this.forceNotOpenCalendar) {
+            this.forceNotOpenCalendar = false;
+            return;
+        }
+        setTimeout(() => {
+            this.show = true;
+        });
+        this.activeDate = this.selectedDate;
+        clearTimeout(this.openCalendarTimeout);
+        this.openCalendarTimeout = setTimeout(() => {
+            this.input.nativeElement.select();
+            this.openChange.emit(this.show);
+        }, 100);
+    }
+    onTimeSelected(option) {
+        this.selectedTime = this.dateService.utcDate(option.value);
+        this.focusOnNextChange.emit();
+    }
+    onTimeSelectorClick() {
+    }
+    getMainClass() {
+        return this.getContainerClass('', [(this.exists(this.timeOptions) && 'has-time'),
+            (this.exists(this.compact) && 'compact')]);
+    }
+    getLabelClass() {
+        if (this.exists(this.disabled)) {
+            return this.getClass('date-picker-label', ['disabled']);
+        }
+        else {
+            return this.getClass('date-picker-label');
+        }
+    }
+    closeCalendar() {
+        setTimeout(() => {
+            this.show = false;
+        });
+        this.openChange.emit(false);
+    }
+    selectDate(event) {
+        if (!this.isModelValid()) {
+            return;
+        }
+        this.activeDate = this.date();
+        if (!this.someValidDaysEqualsSelectedDay(this.activeDate)) {
+            return;
+        }
+        this.selectedDate = this.activeDate;
+        this.setFocusOnTimeSelectorOrNext(event);
+        this.closeCalendar();
+    }
+    isActiveElementMonthButtons() {
+        return document.activeElement === this.calendar.nextMonthRef.nativeElement ||
+            document.activeElement === this.calendar.previousMonthRef.nativeElement ||
+            this.calendar.monthSelectRef && document.activeElement === this.calendar.monthSelectRef.select.nativeElement;
+    }
+    setFocusOnActiveDateAsync() {
+        setTimeout(() => {
+            const elmementToFocus = this.calendar.activeDateCell;
+            if (elmementToFocus) {
+                elmementToFocus.focus();
+            }
+        }, 200);
+    }
+    isModelValid() {
+        const timestamp = Date.parse(this.model);
+        return isNaN(timestamp) !== true;
+    }
+    allDays() {
+        const allDays = new Array();
+        if (this.calendar) {
+            this.calendar.weeks.forEach(x => x && x.days.forEach(d => allDays.push(d)));
+        }
+        return allDays;
+    }
+    someValidDaysEqualsSelectedDay(selectedDay) {
+        return this.allDays()
+            .some(x => x
+            && this.dateService.isSameDate(this.dateService.utcDate(x.date), selectedDay)
+            && (x.isAvailable || !x.isDisabled));
+    }
+    date() {
+        const modelDate = new Date(this.model);
+        const modelUtcDate = new UtcDate(modelDate.getFullYear(), modelDate.getMonth(), modelDate.getDate());
+        return modelUtcDate;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerNewComponent, deps: [{ token: i1.DatePipe }, { token: DateHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: DatepickerNewComponent, selector: "nas-datepicker-new", inputs: { ariaLabelBackdrop: "ariaLabelBackdrop", disableBackdrop: "disableBackdrop", noAvailableFlightsLabel: "noAvailableFlightsLabel", availableFlightsLabel: "availableFlightsLabel", disablePastSelection: "disablePastSelection", lowerLimitDate: "lowerLimitDate", availability: "availability", availableDates: "availableDates", disabled: "disabled", placeholder: "placeholder", required: "required", ariaDescribedby: "ariaDescribedby", ariaLabel: "ariaLabel", dateDisplayFormat: "dateDisplayFormat", timeDisplayFormat: "timeDisplayFormat", locale: "locale", compact: "compact", nasFormGroup: "nasFormGroup", nasFormControlName: "nasFormControlName", times: "times", open: "open", selectedMonth: "selectedMonth", selectedDate: "selectedDate", selectedTime: "selectedTime", ariaLabelPreviousMonth: "ariaLabelPreviousMonth", ariaLabelNextMonth: "ariaLabelNextMonth" }, outputs: { selectedDateChange: "selectedDateChange", selectedMonthChange: "selectedMonthChange", openChange: "openChange", focusOnNextChange: "focusOnNextChange", focusOnPreviousChange: "focusOnPreviousChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "datePickerContent", first: true, predicate: ["datePickerContent"], descendants: true }, { propertyName: "timeSelector", first: true, predicate: ["timeSelector"], descendants: true }, { propertyName: "time", first: true, predicate: ["time"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<label [nasClass]=\"getMainClass()\">\n  <div [nasClass]=\"getClass('date-picker-content')\">\n    <div [nasClass]=\"getClass('date-picker-wrapper')\">\n      <div [nasClass]=\"getClass('controls', show && 'active')\"\n        (mousedown)=\"onMouseDownDatepicker()\">\n        <div #datePickerContent\n          [nasClass]=\"getLabelClass()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n        <input #input\n          [nasClass]=\"getClass('date-picker')\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.aria-label]=\"ariaLabel\"\n          [attr.aria-describedby]=\"ariaDescribedby\"\n          [attr.aria-required]=\"required\"\n          [attr.aria-haspopup]=\"true\"\n          (keydown.tab)=\"selectDate($event)\"\n          (keydown.shift.tab)=\"onInputKeydownShiftTab($event)\"\n          (keydown.enter)=\"selectDate($event)\"\n          (keydown.arrowdown)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowleft)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowright)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowup)=\"onCalendarKeyDown($event)\"\n          (focus)=\"openCalendar()\"\n          [(ngModel)]=\"model\" />\n      </div>\n      <div [nasClass]=\"getClass('calendar-icon')\">\n        <nas-icon *ngIf=\"exists(disabled); else regularIcon\"\n          [icon]=\"'calendar--disabled'\"\n          [ngStyle]=\"{'pointer-events': 'none'}\">\n        </nas-icon>\n        <ng-template #regularIcon>\n          <nas-icon icon=\"calendar\"\n            (click)=\"openCalendar()\">\n          </nas-icon>\n        </ng-template>\n      </div>\n      <nas-calendar-new #calendar *ngIf=\"show\"\n        [nasFormGroup]=\"nasFormGroup\"\n        [nasFormControlName]=\"nasFormControlName\"\n        [dateDisplayFormat]=\"dateDisplayFormat\"\n        [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n        [availableFlightsLabel]=\"availableFlightsLabel\"\n        [availability]=\"exists(availability)\"\n        [availableDates]=\"availableDates\"\n        [lowerLimitDate]=\"lowerLimitDate\"\n        [disablePastSelection]=\"exists(disablePastSelection)\"\n        [locale]=\"locale\"\n        [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n        [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n        [(activeDate)]=\"activeDate\"\n        [(selectedDate)]=\"selectedDate\"\n        (focusOnNextChange)=\"setFocusOnTimeSelectorOrNext($event)\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n        (monthChange)=\"onMonthChange($event)\">\n      </nas-calendar-new>\n    </div>\n    <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>\n  </div>\n</label>\n<div *ngIf=\"timeOptions\"\n  [nasClass]=\"getClass('time-selector-wrapper')\">\n  <nas-select #timeSelector\n    [nasClass]=\"getClass('time-picker')\"\n    [selected]=\"selectedTimeOption\"\n    (selectedChange)=\"onTimeSelected($event)\"\n    (keydown)=\"onTimeSelectorKeydown($event)\">\n    <div [nasClass]=\"getClass('arrow')\">\n      <div [nasClass]=\"getClass('icon-left')\">\n          <nas-icon [type]=\"'arrow-left'\"></nas-icon>\n      </div>\n    </div>\n    <nas-option #time *ngFor=\"let time of timeOptions\"\n      [option]=\"time\"></nas-option>\n      <div [nasClass]=\"getClass('arrow')\">\n        <div [nasClass]=\"getClass('icon-right')\">\n            <nas-icon [type]=\"'arrow-right'\"></nas-icon>\n        </div>\n    </div>\n  </nas-select>\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Lag en metode som sender inn value til det klokkeslettet som er valgt -->\n<!-- div som er clickable for hver time? -->\n<!-- input-text-new?  -->", 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{display:flex}.nas-datepicker-new{position:relative;top:0;left:0;width:100%;height:100%;overflow-x:visible;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px;max-height:98vh;overflow-y:visible;margin-bottom:8px}.nas-datepicker-new__time-picker{display:flex;gap:12px;justify-content:center}.nas-datepicker-new__date-picker-wrapper{border:2px solid #6f6f6f;position:relative}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker{display:block;width:100%;height:35px;padding:0 16px 9px;border:0;border-radius:0;transition:all .2s cubic-bezier(0,0,.1,1);font-family:inherit;outline:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;color:#15273f;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:26px;position:relative;z-index:3;background-color:inherit}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker[disabled]{color:#909090;background-color:#fff}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker:-moz-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker::-moz-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker:-ms-input-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker::-webkit-input-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker:focus~.nas-datepicker-new__input-line{border-color:#15273f}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__calendar-icon{position:absolute;right:15px;top:50%;margin-top:-12px;vertical-align:middle;cursor:pointer;z-index:3}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker-label{padding:9px 16px 0;position:relative;z-index:3;color:#15273f;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;background-color:inherit;display:flex}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker-label--disabled{color:#909090}.nas-datepicker-new__date-picker-wrapper nas-calendar-new{position:absolute;top:75px;vertical-align:middle;right:0px;z-index:4}@media (min-width: 640px){.nas-datepicker-new__date-picker-wrapper nas-calendar-new{right:-15px}}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__controls{background-color:#fff}.nas-datepicker-new__time-selector-wrapper nas-select-new{display:flex}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select{margin-bottom:0;margin-left:3px}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select:after{bottom:26px}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select select{border:3px solid #fff;background-color:#fff;height:64px}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select select{height:60px}}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select select:focus{border-color:#15273f}.nas-datepicker-new--has-time{padding-right:3px}.nas-datepicker-new nas-spinner{position:absolute;top:300px;left:45%;right:45%}.nas-datepicker-new__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:datepicker-backdrop .7s ease-out both}.nas-datepicker-new--compact{padding:0;margin-bottom:6px}@keyframes datepicker-backdrop{0%{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BackdropComponent, selector: "nas-backdrop", inputs: ["showBackdrop", "ariaLabelBackdrop"], outputs: ["showBackdropChange"] }, { kind: "component", type: CalendarNewComponent, selector: "nas-calendar-new", inputs: ["noAvailableFlightsLabel", "availableFlightsLabel", "disablePastSelection", "lowerLimitDate", "date", "weekStart", "displayWeekNumbers", "availability", "locale", "availableDates", "activeDate", "selectedDate", "nasFormGroup", "nasFormControlName", "dateDisplayFormat", "ariaLabelPreviousMonth", "ariaLabelNextMonth"], outputs: ["monthChange", "focusOnNextChange", "selectedDateChange", "activeDateChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerNewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nas-datepicker-new', encapsulation: ViewEncapsulation.None, template: "<label [nasClass]=\"getMainClass()\">\n  <div [nasClass]=\"getClass('date-picker-content')\">\n    <div [nasClass]=\"getClass('date-picker-wrapper')\">\n      <div [nasClass]=\"getClass('controls', show && 'active')\"\n        (mousedown)=\"onMouseDownDatepicker()\">\n        <div #datePickerContent\n          [nasClass]=\"getLabelClass()\">\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n        </div>\n        <input #input\n          [nasClass]=\"getClass('date-picker')\"\n          [required]=\"required\"\n          [disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\"\n          [attr.aria-label]=\"ariaLabel\"\n          [attr.aria-describedby]=\"ariaDescribedby\"\n          [attr.aria-required]=\"required\"\n          [attr.aria-haspopup]=\"true\"\n          (keydown.tab)=\"selectDate($event)\"\n          (keydown.shift.tab)=\"onInputKeydownShiftTab($event)\"\n          (keydown.enter)=\"selectDate($event)\"\n          (keydown.arrowdown)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowleft)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowright)=\"onCalendarKeyDown($event)\"\n          (keydown.arrowup)=\"onCalendarKeyDown($event)\"\n          (focus)=\"openCalendar()\"\n          [(ngModel)]=\"model\" />\n      </div>\n      <div [nasClass]=\"getClass('calendar-icon')\">\n        <nas-icon *ngIf=\"exists(disabled); else regularIcon\"\n          [icon]=\"'calendar--disabled'\"\n          [ngStyle]=\"{'pointer-events': 'none'}\">\n        </nas-icon>\n        <ng-template #regularIcon>\n          <nas-icon icon=\"calendar\"\n            (click)=\"openCalendar()\">\n          </nas-icon>\n        </ng-template>\n      </div>\n      <nas-calendar-new #calendar *ngIf=\"show\"\n        [nasFormGroup]=\"nasFormGroup\"\n        [nasFormControlName]=\"nasFormControlName\"\n        [dateDisplayFormat]=\"dateDisplayFormat\"\n        [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n        [availableFlightsLabel]=\"availableFlightsLabel\"\n        [availability]=\"exists(availability)\"\n        [availableDates]=\"availableDates\"\n        [lowerLimitDate]=\"lowerLimitDate\"\n        [disablePastSelection]=\"exists(disablePastSelection)\"\n        [locale]=\"locale\"\n        [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n        [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n        [(activeDate)]=\"activeDate\"\n        [(selectedDate)]=\"selectedDate\"\n        (focusOnNextChange)=\"setFocusOnTimeSelectorOrNext($event)\"\n        (keydown)=\"onCalendarKeyDown($event)\"\n        (monthChange)=\"onMonthChange($event)\">\n      </nas-calendar-new>\n    </div>\n    <nas-backdrop [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>\n  </div>\n</label>\n<div *ngIf=\"timeOptions\"\n  [nasClass]=\"getClass('time-selector-wrapper')\">\n  <nas-select #timeSelector\n    [nasClass]=\"getClass('time-picker')\"\n    [selected]=\"selectedTimeOption\"\n    (selectedChange)=\"onTimeSelected($event)\"\n    (keydown)=\"onTimeSelectorKeydown($event)\">\n    <div [nasClass]=\"getClass('arrow')\">\n      <div [nasClass]=\"getClass('icon-left')\">\n          <nas-icon [type]=\"'arrow-left'\"></nas-icon>\n      </div>\n    </div>\n    <nas-option #time *ngFor=\"let time of timeOptions\"\n      [option]=\"time\"></nas-option>\n      <div [nasClass]=\"getClass('arrow')\">\n        <div [nasClass]=\"getClass('icon-right')\">\n            <nas-icon [type]=\"'arrow-right'\"></nas-icon>\n        </div>\n    </div>\n  </nas-select>\n</div>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<!-- Lag en metode som sender inn value til det klokkeslettet som er valgt -->\n<!-- div som er clickable for hver time? -->\n<!-- input-text-new?  -->", 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{display:flex}.nas-datepicker-new{position:relative;top:0;left:0;width:100%;height:100%;overflow-x:visible;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px;max-height:98vh;overflow-y:visible;margin-bottom:8px}.nas-datepicker-new__time-picker{display:flex;gap:12px;justify-content:center}.nas-datepicker-new__date-picker-wrapper{border:2px solid #6f6f6f;position:relative}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker{display:block;width:100%;height:35px;padding:0 16px 9px;border:0;border-radius:0;transition:all .2s cubic-bezier(0,0,.1,1);font-family:inherit;outline:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;color:#15273f;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:26px;position:relative;z-index:3;background-color:inherit}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker[disabled]{color:#909090;background-color:#fff}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker:-moz-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker::-moz-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker:-ms-input-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker::-webkit-input-placeholder{line-height:normal}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker:focus~.nas-datepicker-new__input-line{border-color:#15273f}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__calendar-icon{position:absolute;right:15px;top:50%;margin-top:-12px;vertical-align:middle;cursor:pointer;z-index:3}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker-label{padding:9px 16px 0;position:relative;z-index:3;color:#15273f;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;background-color:inherit;display:flex}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__date-picker-label--disabled{color:#909090}.nas-datepicker-new__date-picker-wrapper nas-calendar-new{position:absolute;top:75px;vertical-align:middle;right:0px;z-index:4}@media (min-width: 640px){.nas-datepicker-new__date-picker-wrapper nas-calendar-new{right:-15px}}.nas-datepicker-new__date-picker-wrapper .nas-datepicker-new__controls{background-color:#fff}.nas-datepicker-new__time-selector-wrapper nas-select-new{display:flex}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select{margin-bottom:0;margin-left:3px}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select:after{bottom:26px}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select select{border:3px solid #fff;background-color:#fff;height:64px}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select select{height:60px}}.nas-datepicker-new__time-selector-wrapper nas-select-new ::ng-deep .nas-select select:focus{border-color:#15273f}.nas-datepicker-new--has-time{padding-right:3px}.nas-datepicker-new nas-spinner{position:absolute;top:300px;left:45%;right:45%}.nas-datepicker-new__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:datepicker-backdrop .7s ease-out both}.nas-datepicker-new--compact{padding:0;margin-bottom:6px}@keyframes datepicker-backdrop{0%{opacity:0}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: DateHelper }]; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input']
+            }], calendar: [{
+                type: ViewChild,
+                args: ['calendar']
+            }], datePickerContent: [{
+                type: ViewChild,
+                args: ['datePickerContent']
+            }], timeSelector: [{
+                type: ViewChild,
+                args: ['timeSelector']
+            }], time: [{
+                type: ViewChild,
+                args: ['time']
+            }], ariaLabelBackdrop: [{
+                type: Input
+            }], disableBackdrop: [{
+                type: Input
+            }], noAvailableFlightsLabel: [{
+                type: Input
+            }], availableFlightsLabel: [{
+                type: Input
+            }], disablePastSelection: [{
+                type: Input
+            }], lowerLimitDate: [{
+                type: Input
+            }], availability: [{
+                type: Input
+            }], availableDates: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], dateDisplayFormat: [{
+                type: Input
+            }], timeDisplayFormat: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], nasFormGroup: [{
+                type: Input
+            }], nasFormControlName: [{
+                type: Input
+            }], times: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], selectedMonth: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], selectedTime: [{
+                type: Input
+            }], ariaLabelPreviousMonth: [{
+                type: Input
+            }], ariaLabelNextMonth: [{
+                type: Input
+            }], selectedDateChange: [{
+                type: Output
+            }], selectedMonthChange: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }], focusOnNextChange: [{
+                type: Output
+            }], focusOnPreviousChange: [{
+                type: Output
+            }] } });
+
+class DatepickerNewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerNewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: DatepickerNewModule, declarations: [DatepickerNewComponent, CalendarNewComponent], imports: [CommonModule,
+            CoverModule,
+            SelectModule,
+            IconModule,
+            NasClassModule,
+            FormsModule,
+            SpinnerModule,
+            ReactiveFormsModule,
+            BackdropModule], exports: [DatepickerNewComponent, CalendarNewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerNewModule, providers: [DatePipe, DateHelper], imports: [CommonModule,
+            CoverModule,
+            SelectModule,
+            IconModule,
+            NasClassModule,
+            FormsModule,
+            SpinnerModule,
+            ReactiveFormsModule,
+            BackdropModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerNewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DatepickerNewComponent, CalendarNewComponent],
+                    imports: [
+                        CommonModule,
+                        CoverModule,
+                        SelectModule,
+                        IconModule,
+                        NasClassModule,
+                        FormsModule,
+                        SpinnerModule,
+                        ReactiveFormsModule,
+                        BackdropModule
+                    ],
+                    exports: [DatepickerNewComponent, CalendarNewComponent],
+                    providers: [DatePipe, DateHelper]
+                }]
+        }] });
+
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+/**
+ * @description
+ * Norwegian Datepicker Combo Component | New design | Beta
+ */
+class DatepickerComboNewComponent extends NasComponentBase {
+    /**
+     * @property Input
+     * @description
+     * Sets outbound datepicker open.
+     */
+    get outboundOpen() {
+        return this.outboundOpenValue;
+    }
+    set outboundOpen(value) {
+        if (this.outboundDisabled || value === this.outboundOpenValue) {
+            return;
+        }
+        setTimeout(() => {
+            this.outboundOpenValue = value;
+            this.outboundOpenChange.emit(value);
+            if (value && this.inboundOpen) {
+                this.inboundOpen = false;
+            }
+        });
+    }
+    /**
+     * @property Input
+     * @description
+     * Sets inbound datepicker open.
+     */
+    get inboundOpen() {
+        return this.inboundOpenValue;
+    }
+    set inboundOpen(value) {
+        if (this.inboundDisabled || value === this.inboundOpenValue) {
+            return;
+        }
+        if (this.outboundOnly) {
+            this.focusOnNextChange.emit();
+            return;
+        }
+        setTimeout(() => {
+            this.inboundOpenValue = value;
+            this.inboundOpenChange.emit(value);
+            if (value && this.outboundOpen) {
+                this.outboundOpen = false;
+            }
+        });
+    }
+    /**
+     * @property Input
+     * @description
+     * Selected datefor outbound calendar.
+     */
+    get outboundSelectedDate() {
+        return this.outboundSelectedDateValue;
+    }
+    set outboundSelectedDate(date) {
+        if (!date) {
+            return;
+        }
+        if (this.outboundSelectedDateValue && this.dateService.isSameDate(this.outboundSelectedDateValue, date)) {
+            return;
+        }
+        this.outboundSelectedDateValue = date;
+        this.inboundLowerLimitDate = new UtcDate(date.year, date.month, 1);
+        this.inboundLowerLimitDate.setDate(date.date + this.inboundLowerLimitDateOffset);
+        this.outboundSelectedDateChange.emit(date);
+    }
+    /**
+     * @property Input
+     * @description
+     * Selected datefor inbound calendar.
+     */
+    get inboundSelectedDate() {
+        return this.inboundSelectedDateValue;
+    }
+    set inboundSelectedDate(date) {
+        if (!date) {
+            return;
+        }
+        if (this.inboundSelectedDateValue && this.dateService.isSameDate(this.inboundSelectedDateValue, date)) {
+            return;
+        }
+        this.inboundSelectedDateValue = date;
+        this.inboundSelectedDateChange.emit(date);
+    }
+    get inboundSelectedMonth() {
+        return this.inboundSelectedMonthValue;
+    }
+    set inboundSelectedMonth(month) {
+        if (!month) {
+            return;
+        }
+        if (this.dateService.isSameMonth(month, this.inboundSelectedMonthValue)) {
+            return;
+        }
+        setTimeout(() => {
+            this.inboundSelectedMonthValue = month;
+            this.inboundMonthChange.emit(month);
+        });
+    }
+    constructor(dateService, deviceHelper, renderer) {
+        super('nas-datepicker-combo-new');
+        this.dateService = dateService;
+        this.deviceHelper = deviceHelper;
+        this.renderer = renderer;
+        /**
+         * @property Input
+         * @description
+         * The display format of the date when user has selected the date and it is being shown in the input box for the date picker.
+         * Please look at the angular Date pipe for valid formats and variations.
+         */
+        this.dateDisplayFormat = 'EEEE d, MMMM yyyy';
+        /**
+         * @property Input
+         * @description
+         * The time display format.
+         */
+        this.timeDisplayFormat = 'HH:mm';
+        /**
+         * @property Input
+         * @description
+         * A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.
+         * This requires that registerLocaleData is called with the respective locale.
+         */
+        this.locale = 'en-US';
+        /**
+         * @property Input
+         * @description
+         * Sets a relative number to decide when the inbound lower limit date should be based on selected outbound date.
+         *
+         * The lower limit date for inbound is set by default equal to the selected outbound date.
+         *
+         * If this number is positive, the inbound lower limit date will add the number of days to the selected outbound date.
+         * If this number is negative, the inbound lower limit date will subtract the number of days to the selected outbound date.
+         */
+        this.inboundLowerLimitDateOffset = 0;
+        /**
+         * @property Input
+         * @description
+         * Outbound and inbound dates will break horizontally in mobile view.
+         */
+        this.inlineFlex = 0;
+        /**
+         * @property Output
+         * @description
+         * When selected datehas been changed on the outbound calendar.
+         */
+        this.outboundSelectedDateChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * When selected datehas been changed on the inbound calendar.
+         */
+        this.inboundSelectedDateChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * Outbound datepicker is open or closed.
+         */
+        this.outboundOpenChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * Inbound datepicker is open or closed.
+         */
+        this.inboundOpenChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * Outbound calendar changes month.
+         */
+        this.outboundMonthChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * Inbound calendar changes month.
+         */
+        this.inboundMonthChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * When a user has actively changed the date.
+         */
+        this.focusOnNextChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * When a user has pressed shift + tab to go to previous control.
+         */
+        this.focusOnPreviousChange = new EventEmitter();
+        this.inboundOpenValue = false;
+        this.outboundOpenValue = false;
+        this.containerWidth = new BehaviorSubject(0);
+        window.onresize = () => {
+            this.updateContainerWidth();
+        };
+    }
+    ngOnInit() {
+        if (this.nasFormGroup) {
+            if (this.nasFormControlNameOutbound) {
+                this.outboundValueChangesSubscription = this.nasFormGroup.get(this.nasFormControlNameOutbound)
+                    .valueChanges
+                    .subscribe(outbound => {
+                    this.outboundSelectedDate = outbound?.date;
+                });
+            }
+            if (this.nasFormControlNameInbound) {
+                this.inboundValueChangesSubscription = this.nasFormGroup.get(this.nasFormControlNameInbound)
+                    .valueChanges
+                    .subscribe(inbound => {
+                    this.inboundSelectedDate = inbound?.date;
+                });
+            }
+        }
+    }
+    ngAfterViewChecked() {
+        this.updateContainerWidth();
+        this.setInlineFlex();
+    }
+    onFocusOnNext(event) {
+        this.focusOnNextChange.emit(event);
+    }
+    onFocusOnPrevious(event) {
+        this.focusOnPreviousChange.emit(event);
+    }
+    onInboundFocusOnPrevious() {
+        if (this.times && this.times.length > 0) {
+            const selectElement = this.datepickerOutbound.timeSelector?.select?.nativeElement;
+            setTimeout(() => {
+                selectElement?.focus();
+            });
+            this.inboundOpenChange.emit(false);
+        }
+        else {
+            this.outboundOpen = true;
+        }
+    }
+    onOutboundMonthChange(date) {
+        this.outboundMonthChange.emit(date);
+        this.inboundSelectedMonthValue = date;
+    }
+    getMainClass() {
+        const widths = [
+            this.deviceHelper.isWidthTablet(this.containerWidth.getValue()) && 'md',
+            this.deviceHelper.isWidthDesktop(this.containerWidth.getValue()) && 'lg'
+        ].filter(Boolean);
+        const classes = [...widths];
+        if (this.exists(this.compact)) {
+            classes.push('compact');
+        }
+        if (this.inlineFlex > 0) {
+            classes.push('inline-flex');
+        }
+        return this.getContainerClass('', classes);
+    }
+    checkOutboundOnly() {
+        return !(this.deviceHelper.isMobileWidth() && this.exists(this.outboundOnly));
+    }
+    checkInboundDisabled() {
+        return (!this.deviceHelper.isMobileWidth() && this.exists(this.outboundOnly))
+            || this.exists(this.inboundDisabled);
+    }
+    ngOnDestroy() {
+        this.inboundValueChangesSubscription?.unsubscribe();
+        this.outboundValueChangesSubscription?.unsubscribe();
+    }
+    updateContainerWidth() {
+        const containerOffsetWidth = this.container.nativeElement.offsetWidth;
+        if (containerOffsetWidth > 0) {
+            this.containerWidth.next(containerOffsetWidth);
+        }
+    }
+    setInlineFlex() {
+        if (this.inlineFlex > 0) {
+            const container = this.container.nativeElement;
+            this.renderer.addClass(container, 'nas-datepicker-combo-new--inline-flex');
+            container.style.width = `${this.inlineFlex}px`;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerComboNewComponent, deps: [{ token: DateHelper }, { token: DeviceHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: DatepickerComboNewComponent, selector: "nas-datepicker-combo-new", inputs: { ariaLabelBackdrop: "ariaLabelBackdrop", outboundOpen: "outboundOpen", inboundOpen: "inboundOpen", noAvailableFlightsLabel: "noAvailableFlightsLabel", availableFlightsLabel: "availableFlightsLabel", disablePastSelection: "disablePastSelection", outboundDisabled: "outboundDisabled", inboundDisabled: "inboundDisabled", outboundOnly: "outboundOnly", outboundLabel: "outboundLabel", inboundLabel: "inboundLabel", availability: "availability", outboundAvailableDates: "outboundAvailableDates", inboundAvailableDates: "inboundAvailableDates", times: "times", dateDisplayFormat: "dateDisplayFormat", timeDisplayFormat: "timeDisplayFormat", locale: "locale", compact: "compact", nasFormGroup: "nasFormGroup", nasFormControlNameOutbound: "nasFormControlNameOutbound", nasFormControlNameInbound: "nasFormControlNameInbound", outboundSelectedDate: "outboundSelectedDate", inboundSelectedDate: "inboundSelectedDate", disableBackdrop: "disableBackdrop", outboundSelectedTime: "outboundSelectedTime", inboundSelectedTime: "inboundSelectedTime", ariaLabelPreviousMonth: "ariaLabelPreviousMonth", ariaLabelNextMonth: "ariaLabelNextMonth", inboundLowerLimitDateOffset: "inboundLowerLimitDateOffset", inlineFlex: "inlineFlex" }, outputs: { outboundSelectedDateChange: "outboundSelectedDateChange", inboundSelectedDateChange: "inboundSelectedDateChange", outboundOpenChange: "outboundOpenChange", inboundOpenChange: "inboundOpenChange", outboundMonthChange: "outboundMonthChange", inboundMonthChange: "inboundMonthChange", focusOnNextChange: "focusOnNextChange", focusOnPreviousChange: "focusOnPreviousChange" }, viewQueries: [{ propertyName: "datepickerOutbound", first: true, predicate: ["datepickerOutbound"], descendants: true }, { propertyName: "datepickerInbound", first: true, predicate: ["datepickerInbound"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getMainClass()\" #container>\n  <div [nasClass]=\"getClass('date-picker')\">\n    <nas-datepicker-new #datepickerOutbound\n      compact\n      [disableBackdrop]=\"disableBackdrop\"\n      [nasFormGroup]=\"nasFormGroup\"\n      [nasFormControlName]=\"nasFormControlNameOutbound\"\n      [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n      [availableFlightsLabel]=\"availableFlightsLabel\"\n      [disablePastSelection]=\"exists(disablePastSelection)\"\n      [availability]=\"exists(availability)\"\n      [availableDates]=\"outboundAvailableDates\"\n      [times]=\"times\"\n      [selectedTime]=\"outboundSelectedTime\"\n      [dateDisplayFormat]=\"dateDisplayFormat\"\n      [timeDisplayFormat]=\"timeDisplayFormat\"\n      [locale]=\"locale\"\n      [disabled]=\"exists(outboundDisabled)\"\n      [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n      [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n      (focusOnNextChange)=\"inboundOpen = true\"\n      (focusOnPreviousChange)=\"onFocusOnPrevious($event)\"\n      (selectedMonthChange)=\"onOutboundMonthChange($event)\"\n      [(open)]=\"outboundOpen\"\n      [(selectedDate)]=\"outboundSelectedDate\">{{outboundLabel}}</nas-datepicker-new>\n  </div>\n  <span [nasClass]=\"getClass('separator')\"></span>\n  <div *ngIf=\"checkOutboundOnly()\"\n    [nasClass]=\"getClass('date-picker')\">\n    <nas-datepicker-new #datepickerInbound\n      compact\n      [disableBackdrop]=\"disableBackdrop\"\n      [nasFormGroup]=\"nasFormGroup\"\n      [nasFormControlName]=\"nasFormControlNameInbound\"\n      [disabled]=\"checkInboundDisabled()\"\n      [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n      [availableFlightsLabel]=\"availableFlightsLabel\"\n      [disablePastSelection]=\"exists(disablePastSelection)\"\n      [availability]=\"exists(availability)\"\n      [availableDates]=\"inboundAvailableDates\"\n      [lowerLimitDate]=\"inboundLowerLimitDate\"\n      [times]=\"times\"\n      [selectedTime]=\"inboundSelectedTime\"\n      [dateDisplayFormat]=\"dateDisplayFormat\"\n      [timeDisplayFormat]=\"timeDisplayFormat\"\n      [locale]=\"locale\"\n      [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n      [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n      (focusOnNextChange)=\"onFocusOnNext($event)\"\n      (focusOnPreviousChange)=\"onInboundFocusOnPrevious()\"\n      [(open)]=\"inboundOpen\"\n      [(selectedMonth)]=\"inboundSelectedMonth\"\n      [(selectedDate)]=\"inboundSelectedDate\">{{inboundLabel}}</nas-datepicker-new>\n  </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-datepicker-combo-new{display:flex;margin:24px auto;flex-wrap:wrap;flex-direction:column}.nas-datepicker-combo-new nas-datepicker-new{display:flex}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper{padding-left:3px;padding-bottom:3px}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select{margin-bottom:0}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select:after{bottom:25px}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select select{background-color:#fff;height:68px;border:2px solid #6f6f6f}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select select:focus{border-color:#15273f}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__date-picker-wrapper nas-calendar-new{top:68px;right:0;left:0;margin-inline:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-datepicker-combo-new__date-picker{width:100%}.nas-datepicker-combo-new__date-picker:first-child nas-datepicker-new ::ng-deep .nas-datepicker__date-picker-wrapper{border-bottom:none}.nas-datepicker-combo-new__date-picker:first-child nas-datepicker-new ::ng-deep .nas-datepicker__time-selector-wrapper{border-bottom:none}.nas-datepicker-combo-new__separator{display:none}.nas-datepicker-combo-new--md,.nas-datepicker-combo-new--lg{flex-wrap:nowrap;flex-direction:row}.nas-datepicker-combo-new--md .nas-datepicker-combo-new__separator,.nas-datepicker-combo-new--lg .nas-datepicker-combo-new__separator{display:block;position:relative;align-self:flex-end;flex-shrink:0;width:3px}.nas-datepicker-combo-new--compact{margin:0 auto}.nas-datepicker-combo-new--inline-flex{flex-wrap:nowrap;flex-direction:row;gap:4px;position:relative;margin:0}.nas-datepicker-combo-new--inline-flex .nas-datepicker-combo-new__separator{display:none}.nas-datepicker-combo-new--inline-flex nas-datepicker-new ::ng-deep .nas-datepicker-new{position:unset}.nas-datepicker-combo-new--inline-flex nas-datepicker-new ::ng-deep .nas-datepicker-new__date-picker-wrapper{position:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatepickerNewComponent, selector: "nas-datepicker-new", inputs: ["ariaLabelBackdrop", "disableBackdrop", "noAvailableFlightsLabel", "availableFlightsLabel", "disablePastSelection", "lowerLimitDate", "availability", "availableDates", "disabled", "placeholder", "required", "ariaDescribedby", "ariaLabel", "dateDisplayFormat", "timeDisplayFormat", "locale", "compact", "nasFormGroup", "nasFormControlName", "times", "open", "selectedMonth", "selectedDate", "selectedTime", "ariaLabelPreviousMonth", "ariaLabelNextMonth"], outputs: ["selectedDateChange", "selectedMonthChange", "openChange", "focusOnNextChange", "focusOnPreviousChange"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerComboNewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nas-datepicker-combo-new', encapsulation: ViewEncapsulation.Emulated, template: "<div [nasClass]=\"getMainClass()\" #container>\n  <div [nasClass]=\"getClass('date-picker')\">\n    <nas-datepicker-new #datepickerOutbound\n      compact\n      [disableBackdrop]=\"disableBackdrop\"\n      [nasFormGroup]=\"nasFormGroup\"\n      [nasFormControlName]=\"nasFormControlNameOutbound\"\n      [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n      [availableFlightsLabel]=\"availableFlightsLabel\"\n      [disablePastSelection]=\"exists(disablePastSelection)\"\n      [availability]=\"exists(availability)\"\n      [availableDates]=\"outboundAvailableDates\"\n      [times]=\"times\"\n      [selectedTime]=\"outboundSelectedTime\"\n      [dateDisplayFormat]=\"dateDisplayFormat\"\n      [timeDisplayFormat]=\"timeDisplayFormat\"\n      [locale]=\"locale\"\n      [disabled]=\"exists(outboundDisabled)\"\n      [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n      [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n      (focusOnNextChange)=\"inboundOpen = true\"\n      (focusOnPreviousChange)=\"onFocusOnPrevious($event)\"\n      (selectedMonthChange)=\"onOutboundMonthChange($event)\"\n      [(open)]=\"outboundOpen\"\n      [(selectedDate)]=\"outboundSelectedDate\">{{outboundLabel}}</nas-datepicker-new>\n  </div>\n  <span [nasClass]=\"getClass('separator')\"></span>\n  <div *ngIf=\"checkOutboundOnly()\"\n    [nasClass]=\"getClass('date-picker')\">\n    <nas-datepicker-new #datepickerInbound\n      compact\n      [disableBackdrop]=\"disableBackdrop\"\n      [nasFormGroup]=\"nasFormGroup\"\n      [nasFormControlName]=\"nasFormControlNameInbound\"\n      [disabled]=\"checkInboundDisabled()\"\n      [noAvailableFlightsLabel]=\"noAvailableFlightsLabel\"\n      [availableFlightsLabel]=\"availableFlightsLabel\"\n      [disablePastSelection]=\"exists(disablePastSelection)\"\n      [availability]=\"exists(availability)\"\n      [availableDates]=\"inboundAvailableDates\"\n      [lowerLimitDate]=\"inboundLowerLimitDate\"\n      [times]=\"times\"\n      [selectedTime]=\"inboundSelectedTime\"\n      [dateDisplayFormat]=\"dateDisplayFormat\"\n      [timeDisplayFormat]=\"timeDisplayFormat\"\n      [locale]=\"locale\"\n      [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n      [ariaLabelPreviousMonth]=\"ariaLabelPreviousMonth\"\n      [ariaLabelNextMonth]=\"ariaLabelNextMonth\"\n      (focusOnNextChange)=\"onFocusOnNext($event)\"\n      (focusOnPreviousChange)=\"onInboundFocusOnPrevious()\"\n      [(open)]=\"inboundOpen\"\n      [(selectedMonth)]=\"inboundSelectedMonth\"\n      [(selectedDate)]=\"inboundSelectedDate\">{{inboundLabel}}</nas-datepicker-new>\n  </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-datepicker-combo-new{display:flex;margin:24px auto;flex-wrap:wrap;flex-direction:column}.nas-datepicker-combo-new nas-datepicker-new{display:flex}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper{padding-left:3px;padding-bottom:3px}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select{margin-bottom:0}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select:after{bottom:25px}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select select{background-color:#fff;height:68px;border:2px solid #6f6f6f}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__time-selector-wrapper .nas-select select:focus{border-color:#15273f}.nas-datepicker-combo-new nas-datepicker-new ::ng-deep .nas-datepicker-new__date-picker-wrapper nas-calendar-new{top:68px;right:0;left:0;margin-inline:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-datepicker-combo-new__date-picker{width:100%}.nas-datepicker-combo-new__date-picker:first-child nas-datepicker-new ::ng-deep .nas-datepicker__date-picker-wrapper{border-bottom:none}.nas-datepicker-combo-new__date-picker:first-child nas-datepicker-new ::ng-deep .nas-datepicker__time-selector-wrapper{border-bottom:none}.nas-datepicker-combo-new__separator{display:none}.nas-datepicker-combo-new--md,.nas-datepicker-combo-new--lg{flex-wrap:nowrap;flex-direction:row}.nas-datepicker-combo-new--md .nas-datepicker-combo-new__separator,.nas-datepicker-combo-new--lg .nas-datepicker-combo-new__separator{display:block;position:relative;align-self:flex-end;flex-shrink:0;width:3px}.nas-datepicker-combo-new--compact{margin:0 auto}.nas-datepicker-combo-new--inline-flex{flex-wrap:nowrap;flex-direction:row;gap:4px;position:relative;margin:0}.nas-datepicker-combo-new--inline-flex .nas-datepicker-combo-new__separator{display:none}.nas-datepicker-combo-new--inline-flex nas-datepicker-new ::ng-deep .nas-datepicker-new{position:unset}.nas-datepicker-combo-new--inline-flex nas-datepicker-new ::ng-deep .nas-datepicker-new__date-picker-wrapper{position:unset}\n"] }]
+        }], ctorParameters: function () { return [{ type: DateHelper }, { type: DeviceHelper }, { type: i0.Renderer2 }]; }, propDecorators: { datepickerOutbound: [{
+                type: ViewChild,
+                args: ['datepickerOutbound']
+            }], datepickerInbound: [{
+                type: ViewChild,
+                args: ['datepickerInbound']
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
+            }], ariaLabelBackdrop: [{
+                type: Input
+            }], outboundOpen: [{
+                type: Input
+            }], inboundOpen: [{
+                type: Input
+            }], noAvailableFlightsLabel: [{
+                type: Input
+            }], availableFlightsLabel: [{
+                type: Input
+            }], disablePastSelection: [{
+                type: Input
+            }], outboundDisabled: [{
+                type: Input
+            }], inboundDisabled: [{
+                type: Input
+            }], outboundOnly: [{
+                type: Input
+            }], outboundLabel: [{
+                type: Input
+            }], inboundLabel: [{
+                type: Input
+            }], availability: [{
+                type: Input
+            }], outboundAvailableDates: [{
+                type: Input
+            }], inboundAvailableDates: [{
+                type: Input
+            }], times: [{
+                type: Input
+            }], dateDisplayFormat: [{
+                type: Input
+            }], timeDisplayFormat: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], nasFormGroup: [{
+                type: Input
+            }], nasFormControlNameOutbound: [{
+                type: Input
+            }], nasFormControlNameInbound: [{
+                type: Input
+            }], outboundSelectedDate: [{
+                type: Input
+            }], inboundSelectedDate: [{
+                type: Input
+            }], disableBackdrop: [{
+                type: Input
+            }], outboundSelectedTime: [{
+                type: Input
+            }], inboundSelectedTime: [{
+                type: Input
+            }], ariaLabelPreviousMonth: [{
+                type: Input
+            }], ariaLabelNextMonth: [{
+                type: Input
+            }], inboundLowerLimitDateOffset: [{
+                type: Input
+            }], inlineFlex: [{
+                type: Input
+            }], outboundSelectedDateChange: [{
+                type: Output
+            }], inboundSelectedDateChange: [{
+                type: Output
+            }], outboundOpenChange: [{
+                type: Output
+            }], inboundOpenChange: [{
+                type: Output
+            }], outboundMonthChange: [{
+                type: Output
+            }], inboundMonthChange: [{
+                type: Output
+            }], focusOnNextChange: [{
+                type: Output
+            }], focusOnPreviousChange: [{
+                type: Output
+            }] } });
+
+class DatepickerComboNewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerComboNewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: DatepickerComboNewModule, declarations: [DatepickerComboNewComponent], imports: [CommonModule,
+            DatepickerNewModule,
+            NasClassModule], exports: [DatepickerComboNewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerComboNewModule, providers: [DeviceHelper, DateHelper], imports: [CommonModule,
+            DatepickerNewModule,
+            NasClassModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DatepickerComboNewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DatepickerComboNewComponent],
+                    imports: [
+                        CommonModule,
+                        DatepickerNewModule,
+                        NasClassModule
+                    ],
+                    exports: [DatepickerComboNewComponent],
+                    providers: [DeviceHelper, DateHelper]
+                }]
+        }] });
+
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+/**
+ * @description
+ * Norwegian Phone number Component | Form Controls
+ */
+class PhoneNumberComponent extends NasComponentBase {
+    get model() {
+        return this.modelValue;
+    }
+    set model(value) {
+        this.modelValue = value;
+        this.modelChange.emit(this.modelValue);
+    }
+    /**
+     * @property Input
+     * @description
+     * Gets or sets the selected value.
+     * @example
+     * <nas-phone-number [(selected)]="selected"></nas-phone-number>
+    */
+    get selected() {
+        return this.selectedValue;
+    }
+    set selected(option) {
+        if (!option) {
+            return;
+        }
+        this.selectedValue = option;
+        this.selectedChange.emit(this.selectedValue);
+    }
+    constructor() {
+        super('nas-phone-number');
+        /**
+         * @property Input
+         * @description
+         * The type of the native input element. Default value is number
+         * @example
+         * <nas-phone-number [type]="'text'"></nas-phone-number>
+        */
+        this.type = 'number';
+        /**
+         * @property Output
+         * @description
+         * An output event that fies when input value changes.
+         * @example
+         * <nas-phone-number (modelChange)="onModelChange()"></nas-phone-number>
+        */
+        this.modelChange = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * An event that is fired every time a selection is done.
+         * @example
+         * <nas-phone-number (selectedChange)="onSelectedChange($event)"></nas-phone-number>
+        */
+        this.selectedChange = new EventEmitter();
+    }
+    mainClass() {
+        const { error, disabled, loading, spaceless } = this;
+        return this.getClass('', [
+            this.exists(this.error) && 'error',
+            this.exists(this.disabled) && 'disabled',
+            this.exists(this.loading) && 'loading',
+            this.exists(this.spaceless) && 'spaceless'
+        ]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PhoneNumberComponent, selector: "nas-phone-number", inputs: { options: "options", preferredOptions: "preferredOptions", prefixCountryCode: "prefixCountryCode", label: "label", optionsLabel: "optionsLabel", preferredOptionsLabel: "preferredOptionsLabel", placeholder: "placeholder", id: "id", type: "type", error: "error", disabled: "disabled", spaceless: "spaceless", loading: "loading", errorMessage: "errorMessage", info: "info", icon: "icon", readonly: "readonly", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], required: "required", nasFormControlName: "nasFormControlName", nasFormControlNamePrefix: "nasFormControlNamePrefix", nasFormGroup: "nasFormGroup", model: "model", cssClass: "cssClass", selectedValue: "selectedValue", selected: "selected" }, outputs: { modelChange: "modelChange", selectedChange: "selectedChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClass()\">\n  <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n  <div [nasClass]=\"getClass('controls')\">\n    <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCode>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [(ngModel)]=\"model\" />\n      </div>\n    </ng-container>\n    <ng-template #reactiveForm>\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCodeReactive>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n            [nasFormGroup]=\"nasFormGroup\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [formControlName]=\"nasFormControlName\" />\n      </div>\n    </ng-template>\n  </div>\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n    <nas-icon icon=\"alert--error\"></nas-icon>\n  </span>\n\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n    <nas-icon [icon]=\"icon\"></nas-icon>\n  </span>\n  <span [nasClass]=\"getClass('line')\"></span>\n\n  <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n  <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-phone-number--error .nas-phone-number__line{background-color:#e5212d}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#15273f;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#15273f}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: SelectComponent, selector: "nas-select", inputs: ["id", "inline", "label", "block", "spaceless", "stretch", "compact", "simple", "light", "fill", "error", "errorMessage", "disabled", "autogrow", "cssClass", "nasFormControlName", "nasFormGroup", "options", "selectedValue", "selected"], outputs: ["selectedChange", "keydown"] }, { kind: "component", type: OptionComponent, selector: "nas-option", inputs: ["option"] }, { kind: "component", type: OptgroupComponent, selector: "nas-optgroup", inputs: ["label"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nas-phone-number', template: "<div [nasClass]=\"mainClass()\">\n  <label [nasClass]=\"getClass('label')\" *ngIf=\"label\" [attr.for]=\"id\">{{label}}</label>\n\n  <div [nasClass]=\"getClass('controls')\">\n    <ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCode\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCode>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [selectedValue]=\"selectedValue\" [(selected)]=\"selected\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [(ngModel)]=\"model\" />\n      </div>\n    </ng-container>\n    <ng-template #reactiveForm>\n      <div [nasClass]=\"getClass('prefix')\" *ngIf=\"prefixCountryCode else selectCountryCodeReactive\">\n        {{prefixCountryCode}}\n      </div>\n      <ng-template #selectCountryCodeReactive>\n        <div [nasClass]=\"getClass('country-code')\">\n          <nas-select *ngIf=\"!preferredOptions\" [options]=\"options\" [error]=\"error\" [disabled]=\"disabled\"\n            [spaceless]=\"spaceless\" [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\"\n            [nasFormGroup]=\"nasFormGroup\">\n          </nas-select>\n          <nas-select *ngIf=\"preferredOptions\" [error]=\"error\" [disabled]=\"disabled\" [spaceless]=\"spaceless\"\n            [cssClass]=\"cssClass\" [nasFormControlName]=\"nasFormControlNamePrefix\" [nasFormGroup]=\"nasFormGroup\">\n            <nas-optgroup [label]=\"preferredOptionsLabel\">\n              <nas-option *ngFor=\"let option of preferredOptions\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n            <nas-optgroup [label]=\"optionsLabel\">\n              <nas-option *ngFor=\"let option of options\" [option]=\"option\"></nas-option>\n            </nas-optgroup>\n          </nas-select>\n        </div>\n      </ng-template>\n      <div [nasClass]=\"getClass('number')\" [formGroup]=\"nasFormGroup\">\n        <input [nasClass]=\"getClass('text')\" [attr.id]=\"id\" [attr.type]=\"type\" [attr.disabled]=\"disabled\"\n          [attr.placeholder]=\"placeholder\" [attr.readonly]=\"readonly\" [required]=\"required\"\n          [attr.aria-describedby]=\"ariaDescribedby\" [attr.aria-invalid]=\"error\" [attr.aria-required]=\"required\"\n          [formControlName]=\"nasFormControlName\" />\n      </div>\n    </ng-template>\n  </div>\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"exists(error)\">\n    <nas-icon icon=\"alert--error\"></nas-icon>\n  </span>\n\n  <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon && !exists(error)\">\n    <nas-icon [icon]=\"icon\"></nas-icon>\n  </span>\n  <span [nasClass]=\"getClass('line')\"></span>\n\n  <p [nasClass]=\"getClass('error')\" *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n\n  <span [nasClass]=\"getClass('info')\" *ngIf=\"info\">{{info}}</span>\n\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-phone-number{margin-bottom:16px;position:relative}.nas-phone-number__label{display:flex;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-phone-number__label{letter-spacing:inherit;word-spacing:inherit}}.nas-phone-number__label~.nas-phone-number__icon{top:43px}.nas-phone-number__label~.nas-phone-number__icon--spinner{top:41px}.nas-phone-number__controls{display:flex}.nas-phone-number__prefix{display:flex;padding:3px 16px 0;justify-content:center;align-items:center;margin-bottom:3px;background-color:#f1f1f1}.nas-phone-number__number{flex:1}.nas-phone-number__text{position:relative;margin-bottom:3px;height:50px}.nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number__text[disabled]{opacity:.5}.nas-phone-number__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-phone-number__icon{position:absolute;pointer-events:none;right:12px;top:13px}.nas-phone-number__icon--spinner{top:12px}.nas-phone-number__info{display:block;margin-top:9px;margin-bottom:24px}.nas-phone-number--error .nas-phone-number__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-phone-number--error .nas-phone-number__error{display:block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#e5212d}.nas-phone-number--error .nas-phone-number__line{background-color:#e5212d}.nas-phone-number--error .nas-phone-number__text:focus~.nas-phone-number__line{background-color:#15273f}.nas-phone-number--disabled .nas-phone-number__text{opacity:.5}.nas-phone-number--loading .nas-phone-number__line{background-color:#15273f;animation:input-loader ease 1.5s;animation-iteration-count:infinite;animation-fill-mode:forwards;transform-origin:left}.nas-phone-number--spaceless{margin-bottom:0}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}.nas-phone-number:focus-within .nas-phone-number__line{background-color:#15273f}:host ::ng-deep .nas-select{margin-bottom:3px}:host ::ng-deep .nas-select select{padding:13px 34px 15px 12px;border:none;background-color:#f1f1f1;height:50px;line-height:24px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
+                type: Input
+            }], preferredOptions: [{
+                type: Input
+            }], prefixCountryCode: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], optionsLabel: [{
+                type: Input
+            }], preferredOptionsLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], spaceless: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], info: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], required: [{
+                type: Input
+            }], nasFormControlName: [{
+                type: Input
+            }], nasFormControlNamePrefix: [{
+                type: Input
+            }], nasFormGroup: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelChange: [{
+                type: Output
+            }], cssClass: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }] } });
+
+class PhoneNumberModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, declarations: [PhoneNumberComponent], imports: [CommonModule,
+            NasClassModule,
+            SelectModule,
+            InputModule,
+            FormsModule,
+            IconModule,
+            ReactiveFormsModule], exports: [PhoneNumberComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, imports: [CommonModule,
+            NasClassModule,
+            SelectModule,
+            InputModule,
+            FormsModule,
+            IconModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PhoneNumberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PhoneNumberComponent],
+                    imports: [
+                        CommonModule,
+                        NasClassModule,
+                        SelectModule,
                         InputModule,
                         FormsModule,
                         IconModule,
-                        ReactiveFormsModule,
+                        ReactiveFormsModule,
+                    ],
+                    exports: [PhoneNumberComponent]
+                }]
+        }] });
+
+let nextId$7 = 0;
+/**
+ * @description
+ * Norwegian Airport Select Component | Form Controls
+ */
+class AutocompleteComponent extends NasComponentBase {
+    get showBackdrop() {
+        return !this.exists(this.disableBackdrop) && this.open;
+    }
+    set showBackdrop(value) {
+        if (!value) {
+            this.blur();
+        }
+    }
+    /**
+     * @property Input
+     * @description
+     * An array of items that will appear inside the dropdown list.
+     */
+    get items() {
+        return this.itemsValue;
+    }
+    set items(items) {
+        if (!items || items.length <= 0) {
+            return;
+        }
+        this.itemsValue = items;
+        this.filter();
+    }
+    /**
+     * @property Input
+     * @description
+     * Can set and listen to wheather the dropdown list is or should be open or not.
+     */
+    get open() {
+        return this.openValue;
+    }
+    set open(open) {
+        if (this.open === open || !this.items) {
+            return;
+        }
+        this.openValue = open;
+        this.openChange.emit(open);
+    }
+    /**
+     * @property Input
+     * @description
+     * Can set and listen to changes in the model of the text field.
+     */
+    get model() {
+        return this.modelValue;
+    }
+    set model(model) {
+        if (this.modelValue === model) {
+            return;
+        }
+        this.modelValue = model;
+        if (model && this.filteredItems) {
+            this.index = this.filteredItems.findIndex(x => x.title === model);
+        }
+        this.pathReactiveFormControl(model);
+        this.modelChange.emit(model);
+    }
+    constructor(document) {
+        super('nas-autocomplete');
+        this.document = document;
+        this.filteredItems = this.items;
+        /**
+         * @property Input
+         * @description
+         * A placeholder that will appear inside the text field.
+         */
+        this.placeholder = '';
+        /**
+         * @property Output
+         * @description
+         * Is fired when the next element should be focused.
+         */
+        this.focusOnNext = new EventEmitter();
+        /**
+         * @property Output
+         * @description
+         * Is fired when the user selects an item in the dropdown list.
+         */
+        this.selectedChange = new EventEmitter();
+        this.openChange = new EventEmitter();
+        this.modelChange = new EventEmitter();
+        this.index = -1;
+        this.openValue = false;
+        this.componentId = nextId$7++;
+    }
+    ngOnInit() {
+        if (!this.ariaLabelClear) {
+            this.warnMissingAccessibiltyInput('ariaLabelClear');
+        }
+        if (!this.ariaLabelBackdrop) {
+            this.warnMissingAccessibiltyInput('ariaLabelBackdrop');
+        }
+    }
+    getResultsId() {
+        return `nas-autocomplete-results-${this.componentId}`;
+    }
+    getLabelId() {
+        return `nas-autocomplete-label-${this.componentId}`;
+    }
+    getInputId() {
+        return `nas-autocomplete-input-${this.componentId}`;
+    }
+    setOpen() {
+        this.input.nativeElement.select();
+        this.open = true;
+    }
+    filter() {
+        if (!this.items) {
+            return;
+        }
+        if (!this.model && (!this.nasFormGroup || !this.nasFormControlName)) {
+            this.filteredItems = this.items;
+            return;
+        }
+        let currentModel = this.model;
+        if (this.nasFormGroup && this.nasFormControlName) {
+            const control = this.nasFormGroup.get(this.nasFormControlName);
+            currentModel = control.value;
+        }
+        this.filteredItems = this.items.filter(x => (x.title && x.title.toLowerCase().includes(currentModel.toLowerCase())) ||
+            (x.preamble && x.preamble.toLowerCase().includes(currentModel.toLowerCase())));
+        if (currentModel === '' || this.input.nativeElement.value === '') {
+            this.filteredItems = this.items;
+        }
+        this.index = 0;
+        if (this.filteredItems) {
+            this.focused = this.filteredItems[this.index];
+            this.open = true;
+        }
+        else {
+            this.open = false;
+        }
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.open = false;
+                this.blur();
+                break;
+            case 'Tab':
+            case 'Enter':
+                if (!event.shiftKey) {
+                    event.preventDefault();
+                    this.focusOnNext.emit(event);
+                }
+                if (this.focused) {
+                    this.modelValue = this.focused.title;
+                    this.selectedChange.emit(this.focused);
+                    this.pathReactiveFormControl(this.modelValue);
+                }
+                this.blur();
+                break;
+            case 'ArrowDown':
+            case 'Down':
+                this.focusDown();
+                break;
+            case 'ArrowUp':
+            case 'Up':
+                this.focusUp();
+                break;
+            default:
+                break;
+        }
+    }
+    clearSelected(event) {
+        event.preventDefault();
+        this.focused = null;
+        this.filteredItems = this.items;
+        this.model = '';
+        this.open = true;
+        this.index = -1;
+        this.input.nativeElement.focus();
+    }
+    select(item) {
+        this.focused = item;
+        this.model = item.title;
+        this.selectedChange.emit(item);
+        if (this.filteredItems) {
+            this.index = this.filteredItems.findIndex(x => x.id === item.id);
+        }
+        this.open = false;
+        this.focusOnNext.emit();
+    }
+    blur() {
+        this.open = false;
+        this.openChange.emit(false);
+    }
+    focusDown() {
+        ++this.index;
+        if (this.filteredItems) {
+            if (!this.filteredItems[this.index]) {
+                this.index = 0;
+            }
+            this.focused = this.filteredItems[this.index];
+        }
+        if (this.index === 0) {
+            this.autoScroll(0);
+        }
+        else {
+            this.autoScroll(131);
+        }
+    }
+    focusUp() {
+        --this.index;
+        if (this.index < 0) {
+            this.index = 0;
+            this.blur();
+            return;
+        }
+        if (this.filteredItems) {
+            this.focused = this.filteredItems[this.index];
+        }
+        this.autoScroll(0);
+    }
+    pathReactiveFormControl(model) {
+        if (this.nasFormGroup && this.nasFormControlName) {
+            const formControl = this.nasFormGroup.get(this.nasFormControlName);
+            formControl.patchValue(model);
+        }
+    }
+    autoScroll(extraOffset) {
+        if (!this.results) {
+            return;
+        }
+        const results = this.results.nativeElement;
+        const focusedItem = this.document.querySelector('.nas-autocomplete__list-item--focus');
+        if (focusedItem) {
+            results.scrollTo(0, 0);
+            results.scrollTo(0, focusedItem.offsetTop + extraOffset - results.clientHeight);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AutocompleteComponent, selector: "nas-autocomplete", inputs: { label: "label", placeholder: "placeholder", icon: "icon", items: "items", open: "open", model: "model", disableBackdrop: "disableBackdrop", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", ariaLabelBackdrop: "ariaLabelBackdrop", ariaLabelClear: "ariaLabelClear" }, outputs: { focusOnNext: "focusOnNext", selectedChange: "selectedChange", openChange: "openChange", modelChange: "modelChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "results", first: true, predicate: ["results"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [nasClass]=\"getClass('input')\"\n      [(ngModel)]=\"model\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-container>\n<ng-template #reactiveForm>\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\"\n    [formGroup]=\"nasFormGroup\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [formControlName]=\"nasFormControlName\"\n      [nasClass]=\"getClass('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-template>\n<div [id]=\"getResultsId()\"\n  [nasClass]=\"getClass('results-wrapper')\"\n  [attr.aria-expanded]=\"open ? 'true' : 'false'\">\n  <ul #results\n    role=\"listbox\"\n    *ngIf=\"open\"\n    [attr.aria-labelledby]=\"getLabelId()\"\n    [nasClass]=\"getClass('results')\">\n    <li role=\"option\"\n      *ngFor=\"let item of filteredItems\"\n      [id]=\"item.id\"\n      [nasClass]=\"getClass('list-item', item.id === focused?.id && 'focus')\">\n      <button type=\"button\"\n        [nasClass]=\"getClass('item', item.id === focused?.id && 'focus')\"\n        (click)=\"select(item)\"\n        tabindex=\"-1\">\n        <span [nasClass]=\"getClass('title')\">{{item.title}}</span>\n        <span [nasClass]=\"getClass('preamble')\">{{item.preamble}}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<nas-backdrop *ngIf=\"!exists(disableBackdrop)\"\n  [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n  [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>", 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-autocomplete__wrapper{position:relative;display:block;z-index:3}.nas-autocomplete__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:block;position:relative;z-index:3;padding:9px 16px 0;background-color:#fff;margin-bottom:auto}.nas-autocomplete__input{height:35px;position:relative;z-index:3;line-height:1;margin:0}.nas-autocomplete__input[type=text]{padding:0 16px 9px}.nas-autocomplete__input:focus~.nas-autocomplete__input-line{border-color:#15273f}.nas-autocomplete__icon{position:absolute;z-index:4;right:24px;bottom:24px}.nas-autocomplete__input-line{display:block;position:relative;z-index:3;margin-top:3px;margin-bottom:-9px;border-top:3px solid #c3c3c3}.nas-autocomplete__results-wrapper{position:relative;z-index:4;perspective:1000px;margin-top:6px}.nas-autocomplete__results{position:absolute;z-index:3;width:100%;left:0;max-height:50vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;border:3px solid #15273f;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:results .65s ease both}.nas-autocomplete__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:backdrop .7s ease-out both}.nas-autocomplete__item{display:block;position:relative;z-index:2;width:100%;text-align:left;padding:12px;margin-top:-1px;outline:0}.nas-autocomplete__item--focus,.nas-autocomplete__item:hover,.nas-autocomplete__item:focus{background-color:#15273f}.nas-autocomplete__item--focus,.nas-autocomplete__item--focus .nas-autocomplete__title,.nas-autocomplete__item--focus .nas-autocomplete__preamble,.nas-autocomplete__item:hover,.nas-autocomplete__item:hover .nas-autocomplete__title,.nas-autocomplete__item:hover .nas-autocomplete__preamble,.nas-autocomplete__item:focus,.nas-autocomplete__item:focus .nas-autocomplete__title,.nas-autocomplete__item:focus .nas-autocomplete__preamble{color:#fff}.nas-autocomplete__title{display:inline-block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;color:#15273f;margin-bottom:3px}.nas-autocomplete__preamble{display:block;font-size:14px}@keyframes results{0%{transform:rotateX(-90deg)}40%{transform:rotateX(20deg)}to{transform:rotateX(0)}}@keyframes backdrop{0%{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: BackdropComponent, selector: "nas-backdrop", inputs: ["showBackdrop", "ariaLabelBackdrop"], outputs: ["showBackdropChange"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nas-autocomplete', template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [nasClass]=\"getClass('input')\"\n      [(ngModel)]=\"model\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-container>\n<ng-template #reactiveForm>\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\"\n    [formGroup]=\"nasFormGroup\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [formControlName]=\"nasFormControlName\"\n      [nasClass]=\"getClass('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-template>\n<div [id]=\"getResultsId()\"\n  [nasClass]=\"getClass('results-wrapper')\"\n  [attr.aria-expanded]=\"open ? 'true' : 'false'\">\n  <ul #results\n    role=\"listbox\"\n    *ngIf=\"open\"\n    [attr.aria-labelledby]=\"getLabelId()\"\n    [nasClass]=\"getClass('results')\">\n    <li role=\"option\"\n      *ngFor=\"let item of filteredItems\"\n      [id]=\"item.id\"\n      [nasClass]=\"getClass('list-item', item.id === focused?.id && 'focus')\">\n      <button type=\"button\"\n        [nasClass]=\"getClass('item', item.id === focused?.id && 'focus')\"\n        (click)=\"select(item)\"\n        tabindex=\"-1\">\n        <span [nasClass]=\"getClass('title')\">{{item.title}}</span>\n        <span [nasClass]=\"getClass('preamble')\">{{item.preamble}}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<nas-backdrop *ngIf=\"!exists(disableBackdrop)\"\n  [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n  [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>", 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-autocomplete__wrapper{position:relative;display:block;z-index:3}.nas-autocomplete__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:block;position:relative;z-index:3;padding:9px 16px 0;background-color:#fff;margin-bottom:auto}.nas-autocomplete__input{height:35px;position:relative;z-index:3;line-height:1;margin:0}.nas-autocomplete__input[type=text]{padding:0 16px 9px}.nas-autocomplete__input:focus~.nas-autocomplete__input-line{border-color:#15273f}.nas-autocomplete__icon{position:absolute;z-index:4;right:24px;bottom:24px}.nas-autocomplete__input-line{display:block;position:relative;z-index:3;margin-top:3px;margin-bottom:-9px;border-top:3px solid #c3c3c3}.nas-autocomplete__results-wrapper{position:relative;z-index:4;perspective:1000px;margin-top:6px}.nas-autocomplete__results{position:absolute;z-index:3;width:100%;left:0;max-height:50vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;border:3px solid #15273f;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:results .65s ease both}.nas-autocomplete__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:backdrop .7s ease-out both}.nas-autocomplete__item{display:block;position:relative;z-index:2;width:100%;text-align:left;padding:12px;margin-top:-1px;outline:0}.nas-autocomplete__item--focus,.nas-autocomplete__item:hover,.nas-autocomplete__item:focus{background-color:#15273f}.nas-autocomplete__item--focus,.nas-autocomplete__item--focus .nas-autocomplete__title,.nas-autocomplete__item--focus .nas-autocomplete__preamble,.nas-autocomplete__item:hover,.nas-autocomplete__item:hover .nas-autocomplete__title,.nas-autocomplete__item:hover .nas-autocomplete__preamble,.nas-autocomplete__item:focus,.nas-autocomplete__item:focus .nas-autocomplete__title,.nas-autocomplete__item:focus .nas-autocomplete__preamble{color:#fff}.nas-autocomplete__title{display:inline-block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;color:#15273f;margin-bottom:3px}.nas-autocomplete__preamble{display:block;font-size:14px}@keyframes results{0%{transform:rotateX(-90deg)}40%{transform:rotateX(20deg)}to{transform:rotateX(0)}}@keyframes backdrop{0%{opacity:0}}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input']
+            }], results: [{
+                type: ViewChild,
+                args: ['results']
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], disableBackdrop: [{
+                type: Input
+            }], nasFormControlName: [{
+                type: Input
+            }], nasFormGroup: [{
+                type: Input
+            }], ariaLabelBackdrop: [{
+                type: Input
+            }], ariaLabelClear: [{
+                type: Input
+            }], focusOnNext: [{
+                type: Output
+            }], selectedChange: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }], modelChange: [{
+                type: Output
+            }] } });
+
+class AutocompleteModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, declarations: [AutocompleteComponent], imports: [CommonModule,
+            NasClassModule,
+            FormsModule,
+            IconModule,
+            SpinnerModule,
+            BackdropModule,
+            ReactiveFormsModule], exports: [AutocompleteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, imports: [CommonModule,
+            NasClassModule,
+            FormsModule,
+            IconModule,
+            SpinnerModule,
+            BackdropModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AutocompleteComponent],
+                    imports: [
+                        CommonModule,
+                        NasClassModule,
+                        FormsModule,
+                        IconModule,
+                        SpinnerModule,
+                        BackdropModule,
+                        ReactiveFormsModule
                     ],
-                    exports: [PhoneNumberComponent]
+                    exports: [AutocompleteComponent]
                 }]
         }] });
 
 let nextId$6 = 0;
 /**
  * @description
- * Norwegian Airport Select Component | Form Controls
+ * Norwegian Airport Select Component | New design | Beta
  */
-class AutocompleteComponent extends NasComponentBase {
+class AutocompleteNewComponent extends NasComponentBase {
     get showBackdrop() {
         return !this.exists(this.disableBackdrop) && this.open;
     }
@@ -11556,7 +13672,7 @@ class AutocompleteComponent extends NasComponentBase {
         this.modelChange.emit(model);
     }
     constructor(document) {
-        super('nas-autocomplete');
+        super('nas-autocomplete-new');
         this.document = document;
         this.filteredItems = this.items;
         /**
@@ -11592,13 +13708,13 @@ class AutocompleteComponent extends NasComponentBase {
         }
     }
     getResultsId() {
-        return `nas-autocomplete-results-${this.componentId}`;
+        return `nas-autocomplete-new-results-${this.componentId}`;
     }
     getLabelId() {
-        return `nas-autocomplete-label-${this.componentId}`;
+        return `nas-autocomplete-new-label-${this.componentId}`;
     }
     getInputId() {
-        return `nas-autocomplete-input-${this.componentId}`;
+        return `nas-autocomplete-new-input-${this.componentId}`;
     }
     setOpen() {
         this.input.nativeElement.select();
@@ -11723,27 +13839,41 @@ class AutocompleteComponent extends NasComponentBase {
             return;
         }
         const results = this.results.nativeElement;
-        const focusedItem = this.document.querySelector('.nas-autocomplete__list-item--focus');
+        const focusedItem = this.document.querySelector('.nas-autocomplete-new__list-item--focus');
         if (focusedItem) {
             results.scrollTo(0, 0);
             results.scrollTo(0, focusedItem.offsetTop + extraOffset - results.clientHeight);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AutocompleteComponent, selector: "nas-autocomplete", inputs: { label: "label", placeholder: "placeholder", icon: "icon", items: "items", open: "open", model: "model", disableBackdrop: "disableBackdrop", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", ariaLabelBackdrop: "ariaLabelBackdrop", ariaLabelClear: "ariaLabelClear" }, outputs: { focusOnNext: "focusOnNext", selectedChange: "selectedChange", openChange: "openChange", modelChange: "modelChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "results", first: true, predicate: ["results"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [nasClass]=\"getClass('input')\"\n      [(ngModel)]=\"model\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-container>\n<ng-template #reactiveForm>\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\"\n    [formGroup]=\"nasFormGroup\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [formControlName]=\"nasFormControlName\"\n      [nasClass]=\"getClass('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-template>\n<div [id]=\"getResultsId()\"\n  [nasClass]=\"getClass('results-wrapper')\"\n  [attr.aria-expanded]=\"open ? 'true' : 'false'\">\n  <ul #results\n    role=\"listbox\"\n    *ngIf=\"open\"\n    [attr.aria-labelledby]=\"getLabelId()\"\n    [nasClass]=\"getClass('results')\">\n    <li role=\"option\"\n      *ngFor=\"let item of filteredItems\"\n      [id]=\"item.id\"\n      [nasClass]=\"getClass('list-item', item.id === focused?.id && 'focus')\">\n      <button type=\"button\"\n        [nasClass]=\"getClass('item', item.id === focused?.id && 'focus')\"\n        (click)=\"select(item)\"\n        tabindex=\"-1\">\n        <span [nasClass]=\"getClass('title')\">{{item.title}}</span>\n        <span [nasClass]=\"getClass('preamble')\">{{item.preamble}}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<nas-backdrop *ngIf=\"!exists(disableBackdrop)\"\n  [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n  [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>", 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-autocomplete__wrapper{position:relative;display:block;z-index:3}.nas-autocomplete__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:block;position:relative;z-index:3;padding:9px 16px 0;background-color:#fff;margin-bottom:auto}.nas-autocomplete__input{height:35px;position:relative;z-index:3;line-height:1;margin:0}.nas-autocomplete__input[type=text]{padding:0 16px 9px}.nas-autocomplete__input:focus~.nas-autocomplete__input-line{border-color:#15273f}.nas-autocomplete__icon{position:absolute;z-index:4;right:24px;bottom:24px}.nas-autocomplete__input-line{display:block;position:relative;z-index:3;margin-top:3px;margin-bottom:-9px;border-top:3px solid #c3c3c3}.nas-autocomplete__results-wrapper{position:relative;z-index:4;perspective:1000px;margin-top:6px}.nas-autocomplete__results{position:absolute;z-index:3;width:100%;left:0;max-height:50vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;border:3px solid #15273f;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:results .65s ease both}.nas-autocomplete__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:backdrop .7s ease-out both}.nas-autocomplete__item{display:block;position:relative;z-index:2;width:100%;text-align:left;padding:12px;margin-top:-1px;outline:0}.nas-autocomplete__item--focus,.nas-autocomplete__item:hover,.nas-autocomplete__item:focus{background-color:#15273f}.nas-autocomplete__item--focus,.nas-autocomplete__item--focus .nas-autocomplete__title,.nas-autocomplete__item--focus .nas-autocomplete__preamble,.nas-autocomplete__item:hover,.nas-autocomplete__item:hover .nas-autocomplete__title,.nas-autocomplete__item:hover .nas-autocomplete__preamble,.nas-autocomplete__item:focus,.nas-autocomplete__item:focus .nas-autocomplete__title,.nas-autocomplete__item:focus .nas-autocomplete__preamble{color:#fff}.nas-autocomplete__title{display:inline-block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;color:#15273f;margin-bottom:3px}.nas-autocomplete__preamble{display:block;font-size:14px}@keyframes results{0%{transform:rotateX(-90deg)}40%{transform:rotateX(20deg)}to{transform:rotateX(0)}}@keyframes backdrop{0%{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: BackdropComponent, selector: "nas-backdrop", inputs: ["showBackdrop", "ariaLabelBackdrop"], outputs: ["showBackdropChange"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    onInput(event) {
+        const inputElement = event.target;
+        console.log('element', inputElement);
+        if (this.label.length > 0) {
+            this.input.nativeElement.style.borderColor = inputElement.value ? '#15273f' : '#6f6f6f';
+            this.span.nativeElement.style.borderColor = inputElement.value ? '#15273f' : '#6f6f6f';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteNewComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AutocompleteNewComponent, selector: "nas-autocomplete-new", inputs: { label: "label", placeholder: "placeholder", icon: "icon", items: "items", open: "open", model: "model", disableBackdrop: "disableBackdrop", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", ariaLabelBackdrop: "ariaLabelBackdrop", ariaLabelClear: "ariaLabelClear" }, outputs: { focusOnNext: "focusOnNext", selectedChange: "selectedChange", openChange: "openChange", modelChange: "modelChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "span", first: true, predicate: ["span"], descendants: true }, { propertyName: "results", first: true, predicate: ["results"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["labelDOM"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [id]=\"getLabelId()\" (input)=\"onInput($event)\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\" #labelElement>\n    <span [nasClass]=\"getClass('label')\" #span>{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [nasClass]=\"getClass('input')\"\n      [(ngModel)]=\"model\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n  </label>\n</ng-container>\n<ng-template #reactiveForm>\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\"\n    [formGroup]=\"nasFormGroup\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [formControlName]=\"nasFormControlName\"\n      [nasClass]=\"getClass('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n  </label>\n</ng-template>\n<div [id]=\"getResultsId()\"\n  [nasClass]=\"getClass('results-wrapper')\"\n  [attr.aria-expanded]=\"open ? 'true' : 'false'\">\n  <ul #results\n    role=\"listbox\"\n    *ngIf=\"open\"\n    [attr.aria-labelledby]=\"getLabelId()\"\n    [nasClass]=\"getClass('results')\">\n    <li role=\"option\"\n      *ngFor=\"let item of filteredItems\"\n      [id]=\"item.id\"\n      [nasClass]=\"getClass('list-item', item.id === focused?.id && 'focus')\">\n      <button type=\"button\"\n        [nasClass]=\"getClass('item', item.id === focused?.id && 'focus')\"\n        (click)=\"select(item)\"\n        tabindex=\"-1\">\n        <span [nasClass]=\"getClass('title')\">{{item.title}}</span>\n        <span [nasClass]=\"getClass('preamble')\">{{item.preamble}}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<nas-backdrop *ngIf=\"!exists(disableBackdrop)\"\n  [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n  [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>", 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-autocomplete-new__wrapper{position:relative;display:block;z-index:3}.nas-autocomplete-new__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:block;position:relative;z-index:3;padding:9px 16px 0;background-color:#fff;margin-bottom:none;border:2px solid #6f6f6f;border-bottom:none}.nas-autocomplete-new__input{height:35px;position:relative;z-index:3;line-height:1;margin:0;border:2px solid #6f6f6f;border-top:none}.nas-autocomplete-new__icon{position:absolute;z-index:4;right:24px;bottom:24px}.nas-autocomplete-new__results-wrapper{position:relative;z-index:4;perspective:1000px}.nas-autocomplete-new__results{margin-top:-8px;position:absolute;z-index:3;width:100%;left:0;max-height:50vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;border:2px solid #15273f;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:results .65s ease both;scrollbar-width:none;-ms-overflow-style:none}.nas-autocomplete-new__results::-webkit-scrollbar{display:none}.nas-autocomplete-new__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:backdrop .7s ease-out both}.nas-autocomplete-new__item{display:block;position:relative;z-index:2;width:100%;text-align:left;padding:12px;margin-top:-1px;outline:0;border-bottom:2px solid #E9E7E4}.nas-autocomplete-new__item--focus,.nas-autocomplete-new__item:focus{background-color:#ebf4ff;border-bottom-color:#15273f;border-top:2px solid #15273f}.nas-autocomplete-new__item--focus,.nas-autocomplete-new__item--focus .nas-autocomplete-new__title,.nas-autocomplete-new__item--focus .nas-autocomplete-new__preamble,.nas-autocomplete-new__item:focus,.nas-autocomplete-new__item:focus .nas-autocomplete-new__title,.nas-autocomplete-new__item:focus .nas-autocomplete-new__preamble{color:#15273f}.nas-autocomplete-new__item:hover{background-color:#f8f8f8}.nas-autocomplete-new__title{display:inline-block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;color:#15273f;margin-bottom:3px}.nas-autocomplete-new__preamble{display:block;font-size:14px}@keyframes results{0%{transform:rotateX(-90deg)}40%{transform:rotateX(20deg)}to{transform:rotateX(0)}}@keyframes backdrop{0%{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: BackdropComponent, selector: "nas-backdrop", inputs: ["showBackdrop", "ariaLabelBackdrop"], outputs: ["showBackdropChange"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteNewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-autocomplete', template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [nasClass]=\"getClass('input')\"\n      [(ngModel)]=\"model\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-container>\n<ng-template #reactiveForm>\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\"\n    [formGroup]=\"nasFormGroup\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [formControlName]=\"nasFormControlName\"\n      [nasClass]=\"getClass('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n    <span [nasClass]=\"getClass('input-line')\"></span>\n  </label>\n</ng-template>\n<div [id]=\"getResultsId()\"\n  [nasClass]=\"getClass('results-wrapper')\"\n  [attr.aria-expanded]=\"open ? 'true' : 'false'\">\n  <ul #results\n    role=\"listbox\"\n    *ngIf=\"open\"\n    [attr.aria-labelledby]=\"getLabelId()\"\n    [nasClass]=\"getClass('results')\">\n    <li role=\"option\"\n      *ngFor=\"let item of filteredItems\"\n      [id]=\"item.id\"\n      [nasClass]=\"getClass('list-item', item.id === focused?.id && 'focus')\">\n      <button type=\"button\"\n        [nasClass]=\"getClass('item', item.id === focused?.id && 'focus')\"\n        (click)=\"select(item)\"\n        tabindex=\"-1\">\n        <span [nasClass]=\"getClass('title')\">{{item.title}}</span>\n        <span [nasClass]=\"getClass('preamble')\">{{item.preamble}}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<nas-backdrop *ngIf=\"!exists(disableBackdrop)\"\n  [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n  [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>", 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-autocomplete__wrapper{position:relative;display:block;z-index:3}.nas-autocomplete__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:block;position:relative;z-index:3;padding:9px 16px 0;background-color:#fff;margin-bottom:auto}.nas-autocomplete__input{height:35px;position:relative;z-index:3;line-height:1;margin:0}.nas-autocomplete__input[type=text]{padding:0 16px 9px}.nas-autocomplete__input:focus~.nas-autocomplete__input-line{border-color:#15273f}.nas-autocomplete__icon{position:absolute;z-index:4;right:24px;bottom:24px}.nas-autocomplete__input-line{display:block;position:relative;z-index:3;margin-top:3px;margin-bottom:-9px;border-top:3px solid #c3c3c3}.nas-autocomplete__results-wrapper{position:relative;z-index:4;perspective:1000px;margin-top:6px}.nas-autocomplete__results{position:absolute;z-index:3;width:100%;left:0;max-height:50vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;border:3px solid #15273f;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:results .65s ease both}.nas-autocomplete__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:backdrop .7s ease-out both}.nas-autocomplete__item{display:block;position:relative;z-index:2;width:100%;text-align:left;padding:12px;margin-top:-1px;outline:0}.nas-autocomplete__item--focus,.nas-autocomplete__item:hover,.nas-autocomplete__item:focus{background-color:#15273f}.nas-autocomplete__item--focus,.nas-autocomplete__item--focus .nas-autocomplete__title,.nas-autocomplete__item--focus .nas-autocomplete__preamble,.nas-autocomplete__item:hover,.nas-autocomplete__item:hover .nas-autocomplete__title,.nas-autocomplete__item:hover .nas-autocomplete__preamble,.nas-autocomplete__item:focus,.nas-autocomplete__item:focus .nas-autocomplete__title,.nas-autocomplete__item:focus .nas-autocomplete__preamble{color:#fff}.nas-autocomplete__title{display:inline-block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;color:#15273f;margin-bottom:3px}.nas-autocomplete__preamble{display:block;font-size:14px}@keyframes results{0%{transform:rotateX(-90deg)}40%{transform:rotateX(20deg)}to{transform:rotateX(0)}}@keyframes backdrop{0%{opacity:0}}\n"] }]
+            args: [{ selector: 'nas-autocomplete-new', template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n  <label [id]=\"getLabelId()\" (input)=\"onInput($event)\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\" #labelElement>\n    <span [nasClass]=\"getClass('label')\" #span>{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-haspopup=\"true\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [nasClass]=\"getClass('input')\"\n      [(ngModel)]=\"model\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n  </label>\n</ng-container>\n<ng-template #reactiveForm>\n  <label [id]=\"getLabelId()\"\n    [attr.aria-label]=\"label\"\n    [nasClass]=\"getClass('wrapper')\"\n    [formGroup]=\"nasFormGroup\">\n    <span [nasClass]=\"getClass('label')\">{{label}}</span>\n    <input #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"none\"\n      autocomplete=\"off\"\n      [id]=\"getInputId()\"\n      [attr.aria-controls]=\"getResultsId()\"\n      [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n      [attr.aria-owns]=\"getResultsId()\"\n      [formControlName]=\"nasFormControlName\"\n      [nasClass]=\"getClass('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"setOpen()\"\n      (input)=\"filter()\"\n      (click)=\"setOpen()\"\n      (keydown)=\"onKeyDown($event)\" />\n    <span [nasClass]=\"getClass('icon')\">\n      <button type=\"button\"\n        role=\"button\"\n        tabindex=\"-1\"\n        *ngIf=\"model; else isEmpty\"\n        [attr.aria-label]=\"ariaLabelClear\"\n        (click)=\"clearSelected($event)\">\n        <nas-icon [type]=\"'remove'\"></nas-icon>\n      </button>\n      <ng-template #isEmpty>\n        <nas-icon [type]=\"'small'\"\n          [icon]=\"icon\"></nas-icon>\n      </ng-template>\n    </span>\n  </label>\n</ng-template>\n<div [id]=\"getResultsId()\"\n  [nasClass]=\"getClass('results-wrapper')\"\n  [attr.aria-expanded]=\"open ? 'true' : 'false'\">\n  <ul #results\n    role=\"listbox\"\n    *ngIf=\"open\"\n    [attr.aria-labelledby]=\"getLabelId()\"\n    [nasClass]=\"getClass('results')\">\n    <li role=\"option\"\n      *ngFor=\"let item of filteredItems\"\n      [id]=\"item.id\"\n      [nasClass]=\"getClass('list-item', item.id === focused?.id && 'focus')\">\n      <button type=\"button\"\n        [nasClass]=\"getClass('item', item.id === focused?.id && 'focus')\"\n        (click)=\"select(item)\"\n        tabindex=\"-1\">\n        <span [nasClass]=\"getClass('title')\">{{item.title}}</span>\n        <span [nasClass]=\"getClass('preamble')\">{{item.preamble}}</span>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<nas-backdrop *ngIf=\"!exists(disableBackdrop)\"\n  [ariaLabelBackdrop]=\"ariaLabelBackdrop\"\n  [(showBackdrop)]=\"showBackdrop\"></nas-backdrop>", 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-autocomplete-new__wrapper{position:relative;display:block;z-index:3}.nas-autocomplete-new__label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:block;position:relative;z-index:3;padding:9px 16px 0;background-color:#fff;margin-bottom:none;border:2px solid #6f6f6f;border-bottom:none}.nas-autocomplete-new__input{height:35px;position:relative;z-index:3;line-height:1;margin:0;border:2px solid #6f6f6f;border-top:none}.nas-autocomplete-new__icon{position:absolute;z-index:4;right:24px;bottom:24px}.nas-autocomplete-new__results-wrapper{position:relative;z-index:4;perspective:1000px}.nas-autocomplete-new__results{margin-top:-8px;position:absolute;z-index:3;width:100%;left:0;max-height:50vh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;border:2px solid #15273f;background-color:#fff;transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:results .65s ease both;scrollbar-width:none;-ms-overflow-style:none}.nas-autocomplete-new__results::-webkit-scrollbar{display:none}.nas-autocomplete-new__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:backdrop .7s ease-out both}.nas-autocomplete-new__item{display:block;position:relative;z-index:2;width:100%;text-align:left;padding:12px;margin-top:-1px;outline:0;border-bottom:2px solid #E9E7E4}.nas-autocomplete-new__item--focus,.nas-autocomplete-new__item:focus{background-color:#ebf4ff;border-bottom-color:#15273f;border-top:2px solid #15273f}.nas-autocomplete-new__item--focus,.nas-autocomplete-new__item--focus .nas-autocomplete-new__title,.nas-autocomplete-new__item--focus .nas-autocomplete-new__preamble,.nas-autocomplete-new__item:focus,.nas-autocomplete-new__item:focus .nas-autocomplete-new__title,.nas-autocomplete-new__item:focus .nas-autocomplete-new__preamble{color:#15273f}.nas-autocomplete-new__item:hover{background-color:#f8f8f8}.nas-autocomplete-new__title{display:inline-block;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;color:#15273f;margin-bottom:3px}.nas-autocomplete-new__preamble{display:block;font-size:14px}@keyframes results{0%{transform:rotateX(-90deg)}40%{transform:rotateX(20deg)}to{transform:rotateX(0)}}@keyframes backdrop{0%{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
+            }], span: [{
+                type: ViewChild,
+                args: ['span']
             }], results: [{
                 type: ViewChild,
                 args: ['results']
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['labelDOM']
             }], label: [{
                 type: Input
             }], placeholder: [{
@@ -11776,16 +13906,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Output
             }] } });
 
-class AutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, declarations: [AutocompleteComponent], imports: [CommonModule,
+class AutocompleteNewModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteNewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteNewModule, declarations: [AutocompleteNewComponent], imports: [CommonModule,
             NasClassModule,
             FormsModule,
             IconModule,
             SpinnerModule,
             BackdropModule,
-            ReactiveFormsModule], exports: [AutocompleteComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, imports: [CommonModule,
+            ReactiveFormsModule], exports: [AutocompleteNewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteNewModule, imports: [CommonModule,
             NasClassModule,
             FormsModule,
             IconModule,
@@ -11793,10 +13923,10 @@ class AutocompleteModule {
             BackdropModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AutocompleteNewModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [AutocompleteComponent],
+                    declarations: [AutocompleteNewComponent],
                     imports: [
                         CommonModule,
                         NasClassModule,
@@ -11806,7 +13936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         BackdropModule,
                         ReactiveFormsModule
                     ],
-                    exports: [AutocompleteComponent]
+                    exports: [AutocompleteNewComponent]
                 }]
         }] });
 
@@ -14096,5 +16226,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbandonedBasketService, AccordionComponent, AccordionModule, AirportSelectComponent, AirportSelectModule, AlertComponent, AlertModule, AnimateHelper, AutocompleteComponent, AutocompleteModule, BackdropComponent, BackdropModule, BemHelper, BoxComponent, BoxModule, ButtonComponent, ButtonModule, ButtonNewComponent, ButtonNewModule, CalendarComponent, CampaignHeaderComponent, CampaignHeaderModule, CheckboxComponent, CheckboxModule, CheckboxNewComponent, CheckboxNewModule, ChipComponent, ChipModule, ColComponent, ColumnComponent, ColumnGroupComponent, ContainerComponent, ContainerModule, ContinueComponent, ContinueModule, CoverComponent, CoverModule, DateHelper, DatepickerComboComponent, DatepickerComboModule, DatepickerComponent, DatepickerModule, DeviceHelper, DividerComponent, DividerModule, DropdownComponent, DropdownModule, FilterComponent, FilterModule, GeolocationService, GetPositionService, GridComponent, GridModule, HamburgerComponent, IconComponent, IconListComponent, IconListModule, IconModule, InfoComponent, InfoModule, InputComponent, InputModule, InputTextComponent, InputTextModule, JourneyAvailabilityComponent, JourneyAvailabilityListComponent, JourneyAvailabilityListModule, JourneyAvailabilityModule, JourneyComponent, JourneyModule, JourneySelectionComponent, JourneySelectionModule, JourneyStopoverComponent, JourneyStopoverModule, LanguageHelper, ListComponent, ListItemComponent, ListModule, MicroButtonComponent, MicroButtonModule, ModalComponent, ModalModule, NasClassDirective, NasClassModule, NasComponentBase, NumberFieldComponent, NumberFieldModule, NumberFieldNewComponent, NumberFieldNewModule, OldHamburgerComponent, OldSearchComponent, OptgroupComponent, OptionComponent, PageFooterComponent, PageFooterModule, PageHeaderComponent, PageHeaderModule, PageHeaderOldComponent, PageHeaderOldModule, PassengerSelectComponent, PassengerSelectModule, PassengerType, PhoneNumberComponent, PhoneNumberModule, PremiumToggleComponent, PremiumToggleModule, RadioComponent, RadioModule, RadioNewComponent, RadioNewModule, SearchComponent, SelectComponent, SelectModule, SimpleListComponent, SimpleListModule, SlideToggleComponent, SlideToggleModule, SlideToggleNewComponent, SlideToggleNewModule, SliderComponent, SliderModule, SortComponent, SortModule, SortService, SpinnerComponent, SpinnerModule, StatusBoxComponent, StatusBoxModule, SubsidyDiscountComponent, SubsidyDiscountModule, SuggestionsComponent, SuggestionsModule, TabComponent, TabGroupComponent, TabGroupModule, TableBodyComponent, TableComponent, TableDataComponent, TableFootComponent, TableHeadComponent, TableHeaderComponent, TableModule, TableRowComponent, TagComponent, TagModule, TextareaComponent, TextareaModule, ToggleComponent, ToggleModule, TripSummaryComponent, TripSummaryModule, TripType, UtcDate, ViewPortService, WeatherIconComponent, WeatherIconModule };
+export { AbandonedBasketService, AccordionComponent, AccordionModule, AirportSelectComponent, AirportSelectModule, AlertComponent, AlertModule, AnimateHelper, AutocompleteComponent, AutocompleteModule, AutocompleteNewComponent, AutocompleteNewModule, BackdropComponent, BackdropModule, BemHelper, BoxComponent, BoxModule, ButtonComponent, ButtonModule, ButtonNewComponent, ButtonNewModule, CalendarComponent, CalendarNewComponent, CampaignHeaderComponent, CampaignHeaderModule, CheckboxComponent, CheckboxModule, CheckboxNewComponent, CheckboxNewModule, ChipComponent, ChipModule, ColComponent, ColumnComponent, ColumnGroupComponent, ContainerComponent, ContainerModule, ContinueComponent, ContinueModule, CoverComponent, CoverModule, DateHelper, DatepickerComboComponent, DatepickerComboModule, DatepickerComboNewComponent, DatepickerComboNewModule, DatepickerComponent, DatepickerModule, DatepickerNewComponent, DatepickerNewModule, DeviceHelper, DividerComponent, DividerModule, DropdownComponent, DropdownModule, FilterComponent, FilterModule, GeolocationService, GetPositionService, GridComponent, GridModule, HamburgerComponent, IconComponent, IconListComponent, IconListModule, IconModule, InfoComponent, InfoModule, InputComponent, InputModule, InputTextComponent, InputTextModule, JourneyAvailabilityComponent, JourneyAvailabilityListComponent, JourneyAvailabilityListModule, JourneyAvailabilityModule, JourneyComponent, JourneyModule, JourneySelectionComponent, JourneySelectionModule, JourneyStopoverComponent, JourneyStopoverModule, LanguageHelper, ListComponent, ListItemComponent, ListModule, MicroButtonComponent, MicroButtonModule, ModalComponent, ModalModule, NasClassDirective, NasClassModule, NasComponentBase, NumberFieldComponent, NumberFieldModule, NumberFieldNewComponent, NumberFieldNewModule, OldHamburgerComponent, OldSearchComponent, OptgroupComponent, OptionComponent, PageFooterComponent, PageFooterModule, PageHeaderComponent, PageHeaderModule, PageHeaderOldComponent, PageHeaderOldModule, PassengerSelectComponent, PassengerSelectModule, PassengerType, PhoneNumberComponent, PhoneNumberModule, PremiumToggleComponent, PremiumToggleModule, RadioComponent, RadioModule, RadioNewComponent, RadioNewModule, SearchComponent, SelectComponent, SelectModule, SimpleListComponent, SimpleListModule, SlideToggleComponent, SlideToggleModule, SlideToggleNewComponent, SlideToggleNewModule, SliderComponent, SliderModule, SortComponent, SortModule, SortService, SpinnerComponent, SpinnerModule, StatusBoxComponent, StatusBoxModule, SubsidyDiscountComponent, SubsidyDiscountModule, SuggestionsComponent, SuggestionsModule, TabComponent, TabGroupComponent, TabGroupModule, TableBodyComponent, TableComponent, TableDataComponent, TableFootComponent, TableHeadComponent, TableHeaderComponent, TableModule, TableRowComponent, TagComponent, TagModule, TextareaComponent, TextareaModule, ToggleComponent, ToggleModule, TripSummaryComponent, TripSummaryModule, TripType, UtcDate, ViewPortService, WeatherIconComponent, WeatherIconModule };
 //# sourceMappingURL=norwegian-core-components.mjs.map