@norwegian/core-components 7.11.0 → 7.11.3

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

@@ -82,7 +82,7 @@ export class InfoComponent extends NasComponentBase {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InfoComponent, selector: "nas-info", inputs: { info: "info", error: "error", warning: "warning", information: "information", success: "success", outlined: "outlined", stackTraceLabel: "stackTraceLabel", removeIcon: "removeIcon", show: "show", sanitized: "sanitized" }, outputs: { showChange: "showChange" }, viewQueries: [{ propertyName: "infoContainer", first: true, predicate: ["infoContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"exists(show)\" #infoContainer [nasClass]=\"getContainerClass()\">\n  <div [nasClass]=\"getClass('content', modifiers)\">\n    <div *ngIf=\"info?.timestamp\" [nasClass]=\"getClass('timestamp')\">\n      <small>{{info?.timestamp | date:'full'}}</small>\n      <small *ngIf=\"info?.server\"> ({{info?.server}})</small>\n    </div>\n    <div *ngIf=\"exists(error) || exists(success); else titleTemplate\" [nasClass]=\"getClass('error-title')\">\n      <nas-icon *ngIf=\"exists(error)\" [nasClass]=\"getClass('error-icon')\" icon=\"alert--error\" type=\"small\"></nas-icon>\n      <nas-icon *ngIf=\"exists(success)\" [nasClass]=\"getClass('error-icon')\" icon=\"alert--success\" type=\"small\"></nas-icon>\n      <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    </div>\n    <ul *ngIf=\"info?.messages?.length > 0\" [nasClass]=\"getListClass('', 'spaceless')\">\n      <li *ngFor=\"let message of info?.messages\"> \n        <span *ngIf=\"exists(sanitized)\" [innerHTML]=\"message\"></span>\n        <span *ngIf=\"!exists(sanitized)\">{{message}}</span>\n      </li>\n    </ul>\n    <div [nasClass]=\"getClass('custom-content')\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"info?.link\">\n      <nas-button link [href]=\"info.link.href\">{{info.link.text}}</nas-button>\n    </div>\n    <div *ngIf=\"info?.stackTrace\" [nasClass]=\"getClass('stack-trace')\">\n      <nas-accordion simple [title]=\"stackTraceLabel\">\n        {{info?.stackTrace}}\n      </nas-accordion>\n    </div>\n  </div>\n  <div [nasClass]=\"getClass('remove-box')\" *ngIf=\"exists(removeIcon);\">\n    <nas-icon type=\"remove\" (click)=\"removeInfoBox()\"></nas-icon>\n  </div>\n</div>\n\n<ng-template #titleTemplate>\n  <h3 [nasClass]=\"getClass('title')\" [innerHTML]=\"info?.title\"></h3>\n</ng-template>\n\n\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-info{perspective:1000px;margin-top:36px;margin-bottom:36px;position:relative}@media (min-width: 1000px){.nas-info{margin-bottom:12px}}.nas-info__remove-box{position:absolute;right:10px;top:10px;cursor:pointer}.nas-info__custom-content{padding-top:16px}.nas-info__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.3s;padding:16px;background-color:#fff}.nas-info__content--information{background-color:#fff}.nas-info__content--warning{background-color:#fff6ec}.nas-info__content--error{background-color:#fff;border:3px solid #E5212D}.nas-info__content--success{background-color:#fff;border:3px solid #238E00}.nas-info__content--outlined{border:3px solid #15273F}.nas-info__stack-trace{margin-top:12px;word-break:break-word}.nas-info__error-title{display:flex;margin-bottom:9px}.nas-info__error-title>:first-child{margin-right:12px}.nas-info__timestamp{margin-bottom:12px}.nas-info__error-icon{padding-top:3px}\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: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.AccordionComponent, selector: "nas-accordion", inputs: ["expanded", "title", "badge", "icon", "simple", "spaced", "small", "inverted", "containerOnToggle", "nopadding", "transparent", "approve", "primary", "warning", "badgeInfo", "badgeSuccess", "badgeWarning", "badgeError", "cssClass", "cssStyle"], outputs: ["toggleChange"] }, { kind: "component", type: i4.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i5.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InfoComponent, selector: "nas-info", inputs: { info: "info", error: "error", warning: "warning", information: "information", success: "success", outlined: "outlined", stackTraceLabel: "stackTraceLabel", removeIcon: "removeIcon", show: "show", sanitized: "sanitized" }, outputs: { showChange: "showChange" }, viewQueries: [{ propertyName: "infoContainer", first: true, predicate: ["infoContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"exists(show)\" #infoContainer [nasClass]=\"getContainerClass()\">\n  <div [nasClass]=\"getClass('content', modifiers)\">\n    <div *ngIf=\"info?.timestamp\" [nasClass]=\"getClass('timestamp')\">\n      <small>{{info?.timestamp | date:'full'}}</small>\n      <small *ngIf=\"info?.server\"> ({{info?.server}})</small>\n    </div>\n    <div *ngIf=\"exists(error) || exists(success); else titleTemplate\" [nasClass]=\"getClass('error-title')\">\n      <nas-icon *ngIf=\"exists(error)\" [nasClass]=\"getClass('error-icon')\" icon=\"alert--error\" type=\"small\"></nas-icon>\n      <nas-icon *ngIf=\"exists(success)\" [nasClass]=\"getClass('error-icon')\" icon=\"alert--success\" type=\"small\"></nas-icon>\n      <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    </div>\n    <ul *ngIf=\"info?.messages?.length > 0\" [nasClass]=\"getListClass('', 'spaceless')\">\n      <li *ngFor=\"let message of info?.messages\"> \n        <span *ngIf=\"exists(sanitized)\" [innerHTML]=\"message\"></span>\n        <span *ngIf=\"!exists(sanitized)\">{{message}}</span>\n      </li>\n    </ul>\n    <div [nasClass]=\"getClass('custom-content')\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"info?.link\">\n      <nas-button link [href]=\"info.link.href\">{{info.link.text}}</nas-button>\n    </div>\n    <div *ngIf=\"info?.stackTrace\" [nasClass]=\"getClass('stack-trace')\">\n      <nas-accordion simple [title]=\"stackTraceLabel\">\n        {{info?.stackTrace}}\n      </nas-accordion>\n    </div>\n  </div>\n  <div [nasClass]=\"getClass('remove-box')\" *ngIf=\"exists(removeIcon);\">\n    <nas-icon type=\"remove\" (click)=\"removeInfoBox()\"></nas-icon>\n  </div>\n</div>\n\n<ng-template #titleTemplate>\n  <h3 [nasClass]=\"getClass('title')\" [innerHTML]=\"info?.title\"></h3>\n</ng-template>\n\n\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-info{perspective:1000px;margin-top:36px;margin-bottom:36px;position:relative}@media (min-width: 1000px){.nas-info{margin-bottom:12px}}.nas-info__remove-box{position:absolute;right:10px;top:10px;cursor:pointer}.nas-info__custom-content{padding-top:16px}.nas-info__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.3s;padding:16px;background-color:#fff}.nas-info__content--information{background-color:#fff}.nas-info__content--warning{background-color:#fff6ec}.nas-info__content--error{background-color:#fff;border:3px solid #E5212D}.nas-info__content--success{background-color:#fff;border:3px solid #238E00}.nas-info__content--outlined{border:3px solid #15273F}.nas-info__stack-trace{margin-top:12px;word-break:break-word}.nas-info__error-title{display:flex;margin-bottom:9px}.nas-info__error-title>:first-child{margin-right:12px}.nas-info__timestamp{margin-bottom:12px}.nas-info__error-icon{padding-top:3px}\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: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.AccordionComponent, selector: "nas-accordion", inputs: ["expanded", "title", "badge", "icon", "simple", "spaced", "small", "inverted", "containerOnToggle", "nopadding", "transparent", "approve", "primary", "warning", "badgeInfo", "badgeSuccess", "badgeWarning", "badgeError", "cssClass", "cssStyle"], outputs: ["toggleChange"] }, { kind: "component", type: i4.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i5.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "tertiary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,

package/esm2022/lib/components/journey-availability/journey-availability.component.mjs

@@ -103,11 +103,11 @@ export class JourneyAvailabilityComponent extends NasComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JourneyAvailabilityComponent, deps: [{ token: i1.DatePipe }, { token: i2.DeviceHelper }, { token: i3.DateHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JourneyAvailabilityComponent, selector: "nas-journey-availability", inputs: { model: "model", selected: "selected", locale: "locale", timeDisplayFormat: "timeDisplayFormat", timeZone: "timeZone", displayJourneyDetails: "displayJourneyDetails" }, outputs: { displayJourneyDetailsChange: "displayJourneyDetailsChange", journeyAvailabilityClick: "journeyAvailabilityClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"model\" [nasClass]=\"getClass()\">\n  <div [nasClass]=\"getClass('journey-details')\">\n    <nas-modal [(show)]=\"displayJourneyDetails\" animated center>\n      <nas-trip-summary [tripSummaryModel]=\"model?.tripSummary\" [expandTitle]=\"model?.journeyDetails?.expandTitle\"\n        [transitLabel]=\"model?.journeyDetails?.transitLabel\" [arrivalLabel]=\"model?.journeyDetails?.arrivalLabel\"\n        [departureLabel]=\"model?.journeyDetails?.departureLabel\"\n        [transitHoursIndicator]=\"model?.journeyDetails?.hoursIndicator\"\n        [transitMinutesIndicator]=\"model?.journeyDetails?.minutesIndicator\">\n      </nas-trip-summary>\n    </nas-modal>\n  </div>\n\n  <div [nasClass]=\"getClass('item', selected && 'selected')\" (click)=\"emitClick($event)\" role=\"button\"\n    aria-pressed=\"false\" tabindex=\"0\">\n    <article [nasClass]=\"getClass('trigger', model?.badge && 'badge-padding')\">\n      <div [nasClass]=\"getClass('badge')\" *ngIf=\"model?.badge\">\n        <span [nasClass]=\"getClass('badge-label')\">\n          {{ model?.badgeLabel }}\n        </span>\n      </div>\n\n      <div [nasClass]=\"getClass('overview')\">\n        <div [nasClass]=\"getClass('overview-details')\">\n          <section [nasClass]=\"getClass('flight-time')\" #journeyDetails>\n            <div [nasClass]=\"getClass('flight-time-from-to')\">\n              <div [nasClass]=\"getClass('flight-time-when')\">\n                <div [nasClass]=\"getClass('flight-time-when-departure')\">\n                  <time #departureTimeText>\n                    {{ currentJourney?.departureTime }}\n                  </time>\n                </div>\n\n                <span>&nbsp;-&nbsp;</span>\n                <div [nasClass]=\"getClass('flight-time-when-arrival')\">\n                  <time>{{ currentJourney?.arrivalTime }}</time>\n                </div>\n              </div>\n              <div *ngIf=\"!isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n              </div>\n              <ng-container *ngIf=\"isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n              </ng-container>\n            </div>\n            <div [nasClass]=\"getClass('flight-time-info')\" *ngIf=\"model?.journeyInfoLabel\">\n              <span [nasClass]=\"getClass('flight-time-info-link-wrapper')\" (click)=\"toggleJourneyInfoDetails($event)\">\n                <a [nasClass]=\"getClass('flight-time-info-link')\">\n                  {{ model?.journeyInfoLabel }}\n                </a>\n              </span>\n            </div>\n          </section>\n\n          <div [nasClass]=\"getClass('selected-info')\">\n            <div [nasClass]=\"getClass('selected-info', 'time-duration')\">\n              <section *ngIf=\"!isSmallScreen\" [nasClass]=\"getClass('selected-info-graph')\"></section>\n              <section [nasClass]=\"getClass('journey')\">\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <div [nasClass]=\"getClass('journey-info')\" *ngIf=\"\n                      model?.journeyTransitInfo?.transitCount;\n                      else directFlightLabel\n                    \">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.journeyTransitInfo?.transitCount }}\n                      {{ model?.journeyTransitInfo?.transitLabel }}\n                    </mark>\n\n                    <span *ngIf=\"isSmallScreen\">,&nbsp;</span>\n\n                    <mark [nasClass]=\"getClass('journey-info-stops-details')\">\n                      {{ model?.journeyTransitInfo?.transitDetails }}\n                    </mark>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n                </ng-container>\n\n                <ng-template #airportCodes>\n                  <summary [nasClass]=\"getClass('flight-time-when-airports')\">\n                    {{ model?.origin }}-\n\n                    <span [nasClass]=\"\n                        getClass('flight-time-when-airports-stopovers')\n                      \" *ngIf=\"model?.stopovers\">\n                      <ng-container *ngFor=\"let stop of model?.stopovers\">\n                        {{ stop }} -\n                      </ng-container>\n                    </span>\n                    {{ model?.destination }}\n                  </summary>\n                </ng-template>\n\n                <ng-template #directFlightLabel>\n                  <div [nasClass]=\"getClass('journey-info')\">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.directLabel\n                      }}<span [nasClass]=\"getClass('journey-info-stops-format')\">,&nbsp;</span>\n                    </mark>\n                  </div>\n                </ng-template>\n\n                <figure *ngIf=\"!isSmallScreen; else journeyIcon\" [nasClass]=\"getClass('md-icon')\">\n                  <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n                </figure>\n              </section>\n            </div>\n            <div [nasClass]=\"getClass('operated-by')\" *ngIf=\"model?.operatingCarriers\">\n              <label>{{ model?.operatingCarriers?.label }}\n                <mark *ngFor=\"\n                    let operator of model?.operatingCarriers.operators;\n                    index as operatorIndex\n                  \">\n                  {{ operator\n                  }}<span *ngIf=\"\n                      model?.operatingCarriers?.operators?.length >\n                      operatorIndex + 1\n                    \">,</span>\n                </mark>\n              </label>\n            </div>\n          </div>\n\n          <ng-template #TotalFlightTime>\n            <section [nasClass]=\"getClass('flight-time-details')\">\n              <label [nasClass]=\"getClass('flight-time-details-label')\">\n                {{ model?.duration?.durationLabel }}\n              </label>\n              <time [nasClass]=\"getClass('flight-time-details-text')\">\n                {{ model?.duration?.durationText }}\n              </time>\n              <time [nasClass]=\"getClass('flight-time-details-count')\" *ngIf=\"model?.duration?.dayCount\">\n                +{{ model.duration.dayCount }} {{ model.duration.dayLabel }}\n              </time>\n            </section>\n          </ng-template>\n\n          <ng-template #journeyIcon>\n            <figure [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n            </figure>\n          </ng-template>\n        </div>\n      </div>\n    </article>\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-journey-availability{width:100%;background:#f1f1f1;position:relative;transform:all 3s;transition-duration:.3s}.nas-journey-availability--detailed-info{margin:auto 12px;width:auto}.nas-journey-availability__item{max-width:100%;perspective:1000px;background-color:#fff;outline:none;margin-bottom:2px;transform:all 3s;transition-duration:.3s}.nas-journey-availability__item:focus{transform:all 3s;transition-duration:.3s;box-shadow:0 0 0 3px #15273f}.nas-journey-availability__item--selected{margin-top:12px;margin-bottom:12px}.nas-journey-availability__trigger{display:flex;align-items:stretch;justify-content:space-between;text-align:left;width:100%;flex:1;outline:0;padding:12px}@media (min-width: 1000px){.nas-journey-availability__trigger{padding:12px 12px 12px 36px}}.nas-journey-availability__trigger--badge-padding{padding:36px 12px 12px}@media (min-width: 1000px){.nas-journey-availability__trigger--badge-padding{padding:12px 12px 12px 36px}}.nas-journey-availability__badge{background-color:#e9e7e4;margin:0;position:relative;position:absolute;left:0;right:0;top:0;padding:3px;text-align:center}.nas-journey-availability__badge-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#15273f;text-transform:uppercase}@media (min-width: 1000px){.nas-journey-availability__badge-label{transform:rotate(270deg);transform-origin:0 0;float:left;position:absolute;left:3px;bottom:5px}}@media (min-width: 1000px){.nas-journey-availability__badge{position:relative;width:24px;min-width:24px;margin:-12px 12px -12px -36px}}.nas-journey-availability__overview{display:flex;width:100%;padding-right:9px;flex:2 1 auto}@media (min-width: 1000px){.nas-journey-availability__overview{flex-wrap:wrap}}.nas-journey-availability__overview-details{display:flex;flex-wrap:wrap;justify-content:space-between;flex:1}@media (min-width: 1000px){.nas-journey-availability__overview-details{width:100%;max-width:100%;flex:auto}}.nas-journey-availability__overview-details .nas-journey-availability__mobile-icon{position:absolute;right:20px;bottom:16px}.nas-journey-availability__overview-details .nas-journey-availability__info-details{cursor:pointer}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon{cursor:pointer;padding:6px}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon span{cursor:pointer}.nas-journey-availability__flight-time{display:flex;flex:1;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time{display:block;flex:1 1 60%}}.nas-journey-availability__flight-time-when{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;margin-top:-2px;color:#15273f;display:flex;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time-when{display:inline-block;justify-content:initial}}.nas-journey-availability__flight-time-when-arrival,.nas-journey-availability__flight-time-when-departure{display:inline}.nas-journey-availability__flight-time-when-airports{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;flex:0 0 100%;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-when-airports{flex:initial}}.nas-journey-availability__flight-time-when-airports-stopovers{color:#6f6f6f}.nas-journey-availability__flight-time-details{font-size:18px;line-height:24px;display:inline-block}.nas-journey-availability__flight-time-details-label{color:#15273f;display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-label{display:inline}}.nas-journey-availability__flight-time-details-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-availability__flight-time-details-count{display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-count{display:inline-block}}@media (min-width: 1000px){.nas-journey-availability__flight-time-details{padding-top:1px;padding-bottom:3px;display:initial}}.nas-journey-availability__flight-time-from-to{padding-right:24px}.nas-journey-availability__flight-time-info{margin-left:auto;justify-self:flex-end;text-align:end;font-size:14px;line-height:20px;padding-top:6px}.nas-journey-availability__flight-time-info-link-wrapper{cursor:pointer;padding:6px 0 12px 12px}@media (min-width: 1000px){.nas-journey-availability__flight-time-info-link-wrapper{padding:6px 0 0}}.nas-journey-availability__flight-time-info-link{color:#b12a0b;border-bottom-color:#e9e7e4}.nas-journey-availability__flight-time-info-link:hover{border-bottom-color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-info{position:absolute;bottom:12px}}.nas-journey-availability__journey-figure{margin-top:12px;max-height:12px}@media (min-width: 1000px){.nas-journey-availability__journey-figure{margin-top:0;max-height:initial}}.nas-journey-availability__selected-info{display:flex;flex:0 0 100%;flex-wrap:wrap}@media (min-width: 1000px){.nas-journey-availability__selected-info{flex:1 1 40%}}@media (min-width: 1000px){.nas-journey-availability__selected-info-graph{align-self:center}}.nas-journey-availability__journey mark{background-color:transparent}.nas-journey-availability__journey-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#15273f;white-space:nowrap;display:inline}.nas-journey-availability__journey-airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-availability__journey-info{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;display:inline-block;vertical-align:top}@media (min-width: 1000px){.nas-journey-availability__journey-info{display:block}}.nas-journey-availability__journey-info-stops{display:inline-block;margin-bottom:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;color:#6f6f6f}}.nas-journey-availability__journey-info-stops-format{display:inline;color:#6f6f6f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-format{display:none}}.nas-journey-availability__journey-info-stops-details{display:none}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-details{display:inline}}@media (min-width: 1000px){.nas-journey-availability__journey .nas-journey-availability__md-icon{min-height:22px}}.nas-journey-availability__operated-by{font-size:14px;line-height:20px;display:none}@media (min-width: 1000px){.nas-journey-availability__operated-by{display:block;flex:0 0 100%;display:inline-block;margin-top:6px}}.nas-journey-availability__operated-by label,.nas-journey-availability__operated-by caption{display:inline}.nas-journey-availability__operated-by mark{background-color:transparent}.nas-journey-availability__stopover{transform:rotate(90deg)}@media (min-width: 1000px){.nas-journey-availability__stopover{transform:rotate(0);align-self:center;margin-right:12px}}.nas-journey-availability__animate{display:block}.nas-journey-availability__animate--animate{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.48s}.nas-journey-availability__animate--animate:nth-child(1){animation-delay:.18s}.nas-journey-availability__animate--animate:nth-child(2){animation-delay:.21s}.nas-journey-availability__animate--animate:nth-child(3){animation-delay:.24s}.nas-journey-availability__animate--animate:nth-child(4){animation-delay:.27s}.nas-journey-availability__animate--animate:nth-child(5){animation-delay:.3s}.nas-journey-availability__animate--animate:nth-child(6){animation-delay:.33s}.nas-journey-availability__animate--animate:nth-child(7){animation-delay:.36s}.nas-journey-availability__animate--animate:nth-child(8){animation-delay:.39s}.nas-journey-availability__animate--animate:nth-child(9){animation-delay:.42s}.nas-journey-availability__animate--animate:nth-child(10){animation-delay:.45s}@keyframes arrival-fly-in{0%{opacity:0;transform:translate(-260px,-100px) rotate(10deg)}25%{opacity:1}}@keyframes departure-fly-off{75%{opacity:1}to{opacity:0;transform:translate(260px,-100px) rotate(-20deg)}}\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: i4.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i5.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i6.ModalComponent, selector: "nas-modal", inputs: ["form", "tight", "center", "outlined", "title", "closeLabel", "animated", "show", "enableClose", "blockCloseOnClickOutside"], outputs: ["showChange"] }, { kind: "component", type: i7.TripSummaryComponent, selector: "nas-trip-summary", inputs: ["tripSummaryModel", "expanded", "collapsable", "displayMinimumInfo", "expandTitle", "arrivalLabel", "departureLabel", "arrivalEstimatedLabel", "departureEstimatedLabel", "dateFormat", "timeFormat", "transitHoursIndicator", "transitMinutesIndicator", "transitLabel", "locale", "timeZone"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JourneyAvailabilityComponent, selector: "nas-journey-availability", inputs: { model: "model", selected: "selected", locale: "locale", timeDisplayFormat: "timeDisplayFormat", timeZone: "timeZone", displayJourneyDetails: "displayJourneyDetails" }, outputs: { displayJourneyDetailsChange: "displayJourneyDetailsChange", journeyAvailabilityClick: "journeyAvailabilityClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"model\" [nasClass]=\"getClass()\">\n  <div [nasClass]=\"getClass('journey-details')\">\n    <nas-modal [(show)]=\"displayJourneyDetails\" animated center>\n      <nas-trip-summary [tripSummaryModel]=\"model?.tripSummary\" [expandTitle]=\"model?.journeyDetails?.expandTitle\"\n        [transitLabel]=\"model?.journeyDetails?.transitLabel\" [arrivalLabel]=\"model?.journeyDetails?.arrivalLabel\"\n        [departureLabel]=\"model?.journeyDetails?.departureLabel\"\n        [transitHoursIndicator]=\"model?.journeyDetails?.hoursIndicator\"\n        [transitMinutesIndicator]=\"model?.journeyDetails?.minutesIndicator\">\n      </nas-trip-summary>\n    </nas-modal>\n  </div>\n\n  <div [nasClass]=\"getClass('item', selected && 'selected')\" (click)=\"emitClick($event)\" role=\"button\"\n    aria-pressed=\"false\" tabindex=\"0\">\n    <article [nasClass]=\"getClass('trigger', model?.badge && 'badge-padding')\">\n      <div [nasClass]=\"getClass('badge')\" *ngIf=\"model?.badge\">\n        <span [nasClass]=\"getClass('badge-label')\">\n          {{ model?.badgeLabel }}\n        </span>\n      </div>\n\n      <div [nasClass]=\"getClass('overview')\">\n        <div [nasClass]=\"getClass('overview-details')\">\n          <section [nasClass]=\"getClass('flight-time')\" #journeyDetails>\n            <div [nasClass]=\"getClass('flight-time-from-to')\">\n              <div [nasClass]=\"getClass('flight-time-when')\">\n                <div [nasClass]=\"getClass('flight-time-when-departure')\">\n                  <time #departureTimeText>\n                    {{ currentJourney?.departureTime }}\n                  </time>\n                </div>\n\n                <span>&nbsp;-&nbsp;</span>\n                <div [nasClass]=\"getClass('flight-time-when-arrival')\">\n                  <time>{{ currentJourney?.arrivalTime }}</time>\n                </div>\n              </div>\n              <div *ngIf=\"!isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n              </div>\n              <ng-container *ngIf=\"isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n              </ng-container>\n            </div>\n            <div [nasClass]=\"getClass('flight-time-info')\" *ngIf=\"model?.journeyInfoLabel\">\n              <span [nasClass]=\"getClass('flight-time-info-link-wrapper')\" (click)=\"toggleJourneyInfoDetails($event)\">\n                <a [nasClass]=\"getClass('flight-time-info-link')\">\n                  {{ model?.journeyInfoLabel }}\n                </a>\n              </span>\n            </div>\n          </section>\n\n          <div [nasClass]=\"getClass('selected-info')\">\n            <div [nasClass]=\"getClass('selected-info', 'time-duration')\">\n              <section *ngIf=\"!isSmallScreen\" [nasClass]=\"getClass('selected-info-graph')\"></section>\n              <section [nasClass]=\"getClass('journey')\">\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <div [nasClass]=\"getClass('journey-info')\" *ngIf=\"\n                      model?.journeyTransitInfo?.transitCount;\n                      else directFlightLabel\n                    \">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.journeyTransitInfo?.transitCount }}\n                      {{ model?.journeyTransitInfo?.transitLabel }}\n                    </mark>\n\n                    <span *ngIf=\"isSmallScreen\">,&nbsp;</span>\n\n                    <mark [nasClass]=\"getClass('journey-info-stops-details')\">\n                      {{ model?.journeyTransitInfo?.transitDetails }}\n                    </mark>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n                </ng-container>\n\n                <ng-template #airportCodes>\n                  <summary [nasClass]=\"getClass('flight-time-when-airports')\">\n                    {{ model?.origin }}-\n\n                    <span [nasClass]=\"\n                        getClass('flight-time-when-airports-stopovers')\n                      \" *ngIf=\"model?.stopovers\">\n                      <ng-container *ngFor=\"let stop of model?.stopovers\">\n                        {{ stop }} -\n                      </ng-container>\n                    </span>\n                    {{ model?.destination }}\n                  </summary>\n                </ng-template>\n\n                <ng-template #directFlightLabel>\n                  <div [nasClass]=\"getClass('journey-info')\">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.directLabel\n                      }}<span [nasClass]=\"getClass('journey-info-stops-format')\">,&nbsp;</span>\n                    </mark>\n                  </div>\n                </ng-template>\n\n                <figure *ngIf=\"!isSmallScreen; else journeyIcon\" [nasClass]=\"getClass('md-icon')\">\n                  <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n                </figure>\n              </section>\n            </div>\n            <div [nasClass]=\"getClass('operated-by')\" *ngIf=\"model?.operatingCarriers\">\n              <label>{{ model?.operatingCarriers?.label }}\n                <mark *ngFor=\"\n                    let operator of model?.operatingCarriers.operators;\n                    index as operatorIndex\n                  \">\n                  {{ operator\n                  }}<span *ngIf=\"\n                      model?.operatingCarriers?.operators?.length >\n                      operatorIndex + 1\n                    \">,</span>\n                </mark>\n              </label>\n            </div>\n          </div>\n\n          <ng-template #TotalFlightTime>\n            <section [nasClass]=\"getClass('flight-time-details')\">\n              <label [nasClass]=\"getClass('flight-time-details-label')\">\n                {{ model?.duration?.durationLabel }}\n              </label>\n              <time [nasClass]=\"getClass('flight-time-details-text')\">\n                {{ model?.duration?.durationText }}\n              </time>\n              <time [nasClass]=\"getClass('flight-time-details-count')\" *ngIf=\"model?.duration?.dayCount\">\n                +{{ model.duration.dayCount }} {{ model.duration.dayLabel }}\n              </time>\n            </section>\n          </ng-template>\n\n          <ng-template #journeyIcon>\n            <figure [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n            </figure>\n          </ng-template>\n        </div>\n      </div>\n    </article>\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-journey-availability{width:100%;background:#f1f1f1;position:relative;transform:all 3s;transition-duration:.3s}.nas-journey-availability--detailed-info{margin:auto 12px;width:auto}.nas-journey-availability__item{max-width:100%;perspective:1000px;background-color:#fff;outline:none;margin-bottom:2px;transform:all 3s;transition-duration:.3s}.nas-journey-availability__item:focus{transform:all 3s;transition-duration:.3s;box-shadow:0 0 0 3px #15273f}.nas-journey-availability__item--selected{margin-top:12px;margin-bottom:12px}.nas-journey-availability__trigger{display:flex;align-items:stretch;justify-content:space-between;text-align:left;width:100%;flex:1;outline:0;padding:12px}@media (min-width: 1000px){.nas-journey-availability__trigger{padding:12px 12px 12px 36px}}.nas-journey-availability__trigger--badge-padding{padding:36px 12px 12px}@media (min-width: 1000px){.nas-journey-availability__trigger--badge-padding{padding:12px 12px 12px 36px}}.nas-journey-availability__badge{background-color:#e9e7e4;margin:0;position:relative;position:absolute;left:0;right:0;top:0;padding:3px;text-align:center}.nas-journey-availability__badge-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#15273f;text-transform:uppercase}@media (min-width: 1000px){.nas-journey-availability__badge-label{transform:rotate(270deg);transform-origin:0 0;float:left;position:absolute;left:3px;bottom:5px}}@media (min-width: 1000px){.nas-journey-availability__badge{position:relative;width:24px;min-width:24px;margin:-12px 12px -12px -36px}}.nas-journey-availability__overview{display:flex;width:100%;padding-right:9px;flex:2 1 auto}@media (min-width: 1000px){.nas-journey-availability__overview{flex-wrap:wrap}}.nas-journey-availability__overview-details{display:flex;flex-wrap:wrap;justify-content:space-between;flex:1}@media (min-width: 1000px){.nas-journey-availability__overview-details{width:100%;max-width:100%;flex:auto}}.nas-journey-availability__overview-details .nas-journey-availability__mobile-icon{position:absolute;right:20px;bottom:16px}.nas-journey-availability__overview-details .nas-journey-availability__info-details{cursor:pointer}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon{cursor:pointer;padding:6px}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon span{cursor:pointer}.nas-journey-availability__flight-time{display:flex;flex:1;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time{display:block;flex:1 1 60%}}.nas-journey-availability__flight-time-when{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;margin-top:-2px;color:#15273f;display:flex;justify-content:space-between}@media (max-width: 639px){.nas-journey-availability__flight-time-when{font-size:20px;line-height:28px}}@media (min-width: 1000px){.nas-journey-availability__flight-time-when{display:inline-block;justify-content:initial}}.nas-journey-availability__flight-time-when-arrival,.nas-journey-availability__flight-time-when-departure{display:inline}.nas-journey-availability__flight-time-when-airports{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;flex:0 0 100%;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-when-airports{flex:initial}}.nas-journey-availability__flight-time-when-airports-stopovers{color:#6f6f6f}.nas-journey-availability__flight-time-details{font-size:18px;line-height:24px;display:inline-block}.nas-journey-availability__flight-time-details-label{color:#15273f;display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-label{display:inline}}.nas-journey-availability__flight-time-details-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-availability__flight-time-details-count{display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-count{display:inline-block}}@media (min-width: 1000px){.nas-journey-availability__flight-time-details{padding-top:1px;padding-bottom:3px;display:initial}}.nas-journey-availability__flight-time-from-to{padding-right:24px}.nas-journey-availability__flight-time-info{margin-left:auto;justify-self:flex-end;text-align:end;font-size:14px;line-height:20px;padding-top:6px}.nas-journey-availability__flight-time-info-link-wrapper{cursor:pointer;padding:6px 0 12px 12px}@media (min-width: 1000px){.nas-journey-availability__flight-time-info-link-wrapper{padding:6px 0 0}}.nas-journey-availability__flight-time-info-link{color:#b12a0b;border-bottom-color:#e9e7e4}.nas-journey-availability__flight-time-info-link:hover{border-bottom-color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-info{position:absolute;bottom:12px}}.nas-journey-availability__journey-figure{margin-top:12px;max-height:12px}@media (min-width: 1000px){.nas-journey-availability__journey-figure{margin-top:0;max-height:initial}}.nas-journey-availability__selected-info{display:flex;flex:0 0 100%;flex-wrap:wrap}@media (min-width: 1000px){.nas-journey-availability__selected-info{flex:1 1 40%}}@media (min-width: 1000px){.nas-journey-availability__selected-info-graph{align-self:center}}.nas-journey-availability__journey mark{background-color:transparent}.nas-journey-availability__journey-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#15273f;white-space:nowrap;display:inline}.nas-journey-availability__journey-airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-availability__journey-info{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;display:inline-block;vertical-align:top}@media (min-width: 1000px){.nas-journey-availability__journey-info{display:block}}.nas-journey-availability__journey-info-stops{display:inline-block;margin-bottom:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;color:#6f6f6f}}.nas-journey-availability__journey-info-stops-format{display:inline;color:#6f6f6f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-format{display:none}}.nas-journey-availability__journey-info-stops-details{display:none}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-details{display:inline}}@media (min-width: 1000px){.nas-journey-availability__journey .nas-journey-availability__md-icon{min-height:22px}}.nas-journey-availability__operated-by{font-size:14px;line-height:20px;display:none}@media (min-width: 1000px){.nas-journey-availability__operated-by{display:block;flex:0 0 100%;display:inline-block;margin-top:6px}}.nas-journey-availability__operated-by label,.nas-journey-availability__operated-by caption{display:inline}.nas-journey-availability__operated-by mark{background-color:transparent}.nas-journey-availability__stopover{transform:rotate(90deg)}@media (min-width: 1000px){.nas-journey-availability__stopover{transform:rotate(0);align-self:center;margin-right:12px}}.nas-journey-availability__animate{display:block}.nas-journey-availability__animate--animate{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.48s}.nas-journey-availability__animate--animate:nth-child(1){animation-delay:.18s}.nas-journey-availability__animate--animate:nth-child(2){animation-delay:.21s}.nas-journey-availability__animate--animate:nth-child(3){animation-delay:.24s}.nas-journey-availability__animate--animate:nth-child(4){animation-delay:.27s}.nas-journey-availability__animate--animate:nth-child(5){animation-delay:.3s}.nas-journey-availability__animate--animate:nth-child(6){animation-delay:.33s}.nas-journey-availability__animate--animate:nth-child(7){animation-delay:.36s}.nas-journey-availability__animate--animate:nth-child(8){animation-delay:.39s}.nas-journey-availability__animate--animate:nth-child(9){animation-delay:.42s}.nas-journey-availability__animate--animate:nth-child(10){animation-delay:.45s}@keyframes arrival-fly-in{0%{opacity:0;transform:translate(-260px,-100px) rotate(10deg)}25%{opacity:1}}@keyframes departure-fly-off{75%{opacity:1}to{opacity:0;transform:translate(260px,-100px) rotate(-20deg)}}\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: i4.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i5.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i6.ModalComponent, selector: "nas-modal", inputs: ["form", "tight", "center", "outlined", "title", "closeLabel", "animated", "show", "enableClose", "blockCloseOnClickOutside"], outputs: ["showChange"] }, { kind: "component", type: i7.TripSummaryComponent, selector: "nas-trip-summary", inputs: ["tripSummaryModel", "expanded", "collapsable", "displayMinimumInfo", "expandTitle", "arrivalLabel", "departureLabel", "arrivalEstimatedLabel", "departureEstimatedLabel", "dateFormat", "timeFormat", "transitHoursIndicator", "transitMinutesIndicator", "transitLabel", "locale", "timeZone"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JourneyAvailabilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-journey-availability', template: "<div *ngIf=\"model\" [nasClass]=\"getClass()\">\n  <div [nasClass]=\"getClass('journey-details')\">\n    <nas-modal [(show)]=\"displayJourneyDetails\" animated center>\n      <nas-trip-summary [tripSummaryModel]=\"model?.tripSummary\" [expandTitle]=\"model?.journeyDetails?.expandTitle\"\n        [transitLabel]=\"model?.journeyDetails?.transitLabel\" [arrivalLabel]=\"model?.journeyDetails?.arrivalLabel\"\n        [departureLabel]=\"model?.journeyDetails?.departureLabel\"\n        [transitHoursIndicator]=\"model?.journeyDetails?.hoursIndicator\"\n        [transitMinutesIndicator]=\"model?.journeyDetails?.minutesIndicator\">\n      </nas-trip-summary>\n    </nas-modal>\n  </div>\n\n  <div [nasClass]=\"getClass('item', selected && 'selected')\" (click)=\"emitClick($event)\" role=\"button\"\n    aria-pressed=\"false\" tabindex=\"0\">\n    <article [nasClass]=\"getClass('trigger', model?.badge && 'badge-padding')\">\n      <div [nasClass]=\"getClass('badge')\" *ngIf=\"model?.badge\">\n        <span [nasClass]=\"getClass('badge-label')\">\n          {{ model?.badgeLabel }}\n        </span>\n      </div>\n\n      <div [nasClass]=\"getClass('overview')\">\n        <div [nasClass]=\"getClass('overview-details')\">\n          <section [nasClass]=\"getClass('flight-time')\" #journeyDetails>\n            <div [nasClass]=\"getClass('flight-time-from-to')\">\n              <div [nasClass]=\"getClass('flight-time-when')\">\n                <div [nasClass]=\"getClass('flight-time-when-departure')\">\n                  <time #departureTimeText>\n                    {{ currentJourney?.departureTime }}\n                  </time>\n                </div>\n\n                <span>&nbsp;-&nbsp;</span>\n                <div [nasClass]=\"getClass('flight-time-when-arrival')\">\n                  <time>{{ currentJourney?.arrivalTime }}</time>\n                </div>\n              </div>\n              <div *ngIf=\"!isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n              </div>\n              <ng-container *ngIf=\"isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n              </ng-container>\n            </div>\n            <div [nasClass]=\"getClass('flight-time-info')\" *ngIf=\"model?.journeyInfoLabel\">\n              <span [nasClass]=\"getClass('flight-time-info-link-wrapper')\" (click)=\"toggleJourneyInfoDetails($event)\">\n                <a [nasClass]=\"getClass('flight-time-info-link')\">\n                  {{ model?.journeyInfoLabel }}\n                </a>\n              </span>\n            </div>\n          </section>\n\n          <div [nasClass]=\"getClass('selected-info')\">\n            <div [nasClass]=\"getClass('selected-info', 'time-duration')\">\n              <section *ngIf=\"!isSmallScreen\" [nasClass]=\"getClass('selected-info-graph')\"></section>\n              <section [nasClass]=\"getClass('journey')\">\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <div [nasClass]=\"getClass('journey-info')\" *ngIf=\"\n                      model?.journeyTransitInfo?.transitCount;\n                      else directFlightLabel\n                    \">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.journeyTransitInfo?.transitCount }}\n                      {{ model?.journeyTransitInfo?.transitLabel }}\n                    </mark>\n\n                    <span *ngIf=\"isSmallScreen\">,&nbsp;</span>\n\n                    <mark [nasClass]=\"getClass('journey-info-stops-details')\">\n                      {{ model?.journeyTransitInfo?.transitDetails }}\n                    </mark>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n                </ng-container>\n\n                <ng-template #airportCodes>\n                  <summary [nasClass]=\"getClass('flight-time-when-airports')\">\n                    {{ model?.origin }}-\n\n                    <span [nasClass]=\"\n                        getClass('flight-time-when-airports-stopovers')\n                      \" *ngIf=\"model?.stopovers\">\n                      <ng-container *ngFor=\"let stop of model?.stopovers\">\n                        {{ stop }} -\n                      </ng-container>\n                    </span>\n                    {{ model?.destination }}\n                  </summary>\n                </ng-template>\n\n                <ng-template #directFlightLabel>\n                  <div [nasClass]=\"getClass('journey-info')\">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.directLabel\n                      }}<span [nasClass]=\"getClass('journey-info-stops-format')\">,&nbsp;</span>\n                    </mark>\n                  </div>\n                </ng-template>\n\n                <figure *ngIf=\"!isSmallScreen; else journeyIcon\" [nasClass]=\"getClass('md-icon')\">\n                  <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n                </figure>\n              </section>\n            </div>\n            <div [nasClass]=\"getClass('operated-by')\" *ngIf=\"model?.operatingCarriers\">\n              <label>{{ model?.operatingCarriers?.label }}\n                <mark *ngFor=\"\n                    let operator of model?.operatingCarriers.operators;\n                    index as operatorIndex\n                  \">\n                  {{ operator\n                  }}<span *ngIf=\"\n                      model?.operatingCarriers?.operators?.length >\n                      operatorIndex + 1\n                    \">,</span>\n                </mark>\n              </label>\n            </div>\n          </div>\n\n          <ng-template #TotalFlightTime>\n            <section [nasClass]=\"getClass('flight-time-details')\">\n              <label [nasClass]=\"getClass('flight-time-details-label')\">\n                {{ model?.duration?.durationLabel }}\n              </label>\n              <time [nasClass]=\"getClass('flight-time-details-text')\">\n                {{ model?.duration?.durationText }}\n              </time>\n              <time [nasClass]=\"getClass('flight-time-details-count')\" *ngIf=\"model?.duration?.dayCount\">\n                +{{ model.duration.dayCount }} {{ model.duration.dayLabel }}\n              </time>\n            </section>\n          </ng-template>\n\n          <ng-template #journeyIcon>\n            <figure [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n            </figure>\n          </ng-template>\n        </div>\n      </div>\n    </article>\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-journey-availability{width:100%;background:#f1f1f1;position:relative;transform:all 3s;transition-duration:.3s}.nas-journey-availability--detailed-info{margin:auto 12px;width:auto}.nas-journey-availability__item{max-width:100%;perspective:1000px;background-color:#fff;outline:none;margin-bottom:2px;transform:all 3s;transition-duration:.3s}.nas-journey-availability__item:focus{transform:all 3s;transition-duration:.3s;box-shadow:0 0 0 3px #15273f}.nas-journey-availability__item--selected{margin-top:12px;margin-bottom:12px}.nas-journey-availability__trigger{display:flex;align-items:stretch;justify-content:space-between;text-align:left;width:100%;flex:1;outline:0;padding:12px}@media (min-width: 1000px){.nas-journey-availability__trigger{padding:12px 12px 12px 36px}}.nas-journey-availability__trigger--badge-padding{padding:36px 12px 12px}@media (min-width: 1000px){.nas-journey-availability__trigger--badge-padding{padding:12px 12px 12px 36px}}.nas-journey-availability__badge{background-color:#e9e7e4;margin:0;position:relative;position:absolute;left:0;right:0;top:0;padding:3px;text-align:center}.nas-journey-availability__badge-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#15273f;text-transform:uppercase}@media (min-width: 1000px){.nas-journey-availability__badge-label{transform:rotate(270deg);transform-origin:0 0;float:left;position:absolute;left:3px;bottom:5px}}@media (min-width: 1000px){.nas-journey-availability__badge{position:relative;width:24px;min-width:24px;margin:-12px 12px -12px -36px}}.nas-journey-availability__overview{display:flex;width:100%;padding-right:9px;flex:2 1 auto}@media (min-width: 1000px){.nas-journey-availability__overview{flex-wrap:wrap}}.nas-journey-availability__overview-details{display:flex;flex-wrap:wrap;justify-content:space-between;flex:1}@media (min-width: 1000px){.nas-journey-availability__overview-details{width:100%;max-width:100%;flex:auto}}.nas-journey-availability__overview-details .nas-journey-availability__mobile-icon{position:absolute;right:20px;bottom:16px}.nas-journey-availability__overview-details .nas-journey-availability__info-details{cursor:pointer}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon{cursor:pointer;padding:6px}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon span{cursor:pointer}.nas-journey-availability__flight-time{display:flex;flex:1;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time{display:block;flex:1 1 60%}}.nas-journey-availability__flight-time-when{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;margin-top:-2px;color:#15273f;display:flex;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time-when{display:inline-block;justify-content:initial}}.nas-journey-availability__flight-time-when-arrival,.nas-journey-availability__flight-time-when-departure{display:inline}.nas-journey-availability__flight-time-when-airports{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;flex:0 0 100%;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-when-airports{flex:initial}}.nas-journey-availability__flight-time-when-airports-stopovers{color:#6f6f6f}.nas-journey-availability__flight-time-details{font-size:18px;line-height:24px;display:inline-block}.nas-journey-availability__flight-time-details-label{color:#15273f;display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-label{display:inline}}.nas-journey-availability__flight-time-details-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-availability__flight-time-details-count{display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-count{display:inline-block}}@media (min-width: 1000px){.nas-journey-availability__flight-time-details{padding-top:1px;padding-bottom:3px;display:initial}}.nas-journey-availability__flight-time-from-to{padding-right:24px}.nas-journey-availability__flight-time-info{margin-left:auto;justify-self:flex-end;text-align:end;font-size:14px;line-height:20px;padding-top:6px}.nas-journey-availability__flight-time-info-link-wrapper{cursor:pointer;padding:6px 0 12px 12px}@media (min-width: 1000px){.nas-journey-availability__flight-time-info-link-wrapper{padding:6px 0 0}}.nas-journey-availability__flight-time-info-link{color:#b12a0b;border-bottom-color:#e9e7e4}.nas-journey-availability__flight-time-info-link:hover{border-bottom-color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-info{position:absolute;bottom:12px}}.nas-journey-availability__journey-figure{margin-top:12px;max-height:12px}@media (min-width: 1000px){.nas-journey-availability__journey-figure{margin-top:0;max-height:initial}}.nas-journey-availability__selected-info{display:flex;flex:0 0 100%;flex-wrap:wrap}@media (min-width: 1000px){.nas-journey-availability__selected-info{flex:1 1 40%}}@media (min-width: 1000px){.nas-journey-availability__selected-info-graph{align-self:center}}.nas-journey-availability__journey mark{background-color:transparent}.nas-journey-availability__journey-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#15273f;white-space:nowrap;display:inline}.nas-journey-availability__journey-airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-availability__journey-info{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;display:inline-block;vertical-align:top}@media (min-width: 1000px){.nas-journey-availability__journey-info{display:block}}.nas-journey-availability__journey-info-stops{display:inline-block;margin-bottom:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;color:#6f6f6f}}.nas-journey-availability__journey-info-stops-format{display:inline;color:#6f6f6f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-format{display:none}}.nas-journey-availability__journey-info-stops-details{display:none}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-details{display:inline}}@media (min-width: 1000px){.nas-journey-availability__journey .nas-journey-availability__md-icon{min-height:22px}}.nas-journey-availability__operated-by{font-size:14px;line-height:20px;display:none}@media (min-width: 1000px){.nas-journey-availability__operated-by{display:block;flex:0 0 100%;display:inline-block;margin-top:6px}}.nas-journey-availability__operated-by label,.nas-journey-availability__operated-by caption{display:inline}.nas-journey-availability__operated-by mark{background-color:transparent}.nas-journey-availability__stopover{transform:rotate(90deg)}@media (min-width: 1000px){.nas-journey-availability__stopover{transform:rotate(0);align-self:center;margin-right:12px}}.nas-journey-availability__animate{display:block}.nas-journey-availability__animate--animate{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.48s}.nas-journey-availability__animate--animate:nth-child(1){animation-delay:.18s}.nas-journey-availability__animate--animate:nth-child(2){animation-delay:.21s}.nas-journey-availability__animate--animate:nth-child(3){animation-delay:.24s}.nas-journey-availability__animate--animate:nth-child(4){animation-delay:.27s}.nas-journey-availability__animate--animate:nth-child(5){animation-delay:.3s}.nas-journey-availability__animate--animate:nth-child(6){animation-delay:.33s}.nas-journey-availability__animate--animate:nth-child(7){animation-delay:.36s}.nas-journey-availability__animate--animate:nth-child(8){animation-delay:.39s}.nas-journey-availability__animate--animate:nth-child(9){animation-delay:.42s}.nas-journey-availability__animate--animate:nth-child(10){animation-delay:.45s}@keyframes arrival-fly-in{0%{opacity:0;transform:translate(-260px,-100px) rotate(10deg)}25%{opacity:1}}@keyframes departure-fly-off{75%{opacity:1}to{opacity:0;transform:translate(260px,-100px) rotate(-20deg)}}\n"] }]
+            args: [{ selector: 'nas-journey-availability', template: "<div *ngIf=\"model\" [nasClass]=\"getClass()\">\n  <div [nasClass]=\"getClass('journey-details')\">\n    <nas-modal [(show)]=\"displayJourneyDetails\" animated center>\n      <nas-trip-summary [tripSummaryModel]=\"model?.tripSummary\" [expandTitle]=\"model?.journeyDetails?.expandTitle\"\n        [transitLabel]=\"model?.journeyDetails?.transitLabel\" [arrivalLabel]=\"model?.journeyDetails?.arrivalLabel\"\n        [departureLabel]=\"model?.journeyDetails?.departureLabel\"\n        [transitHoursIndicator]=\"model?.journeyDetails?.hoursIndicator\"\n        [transitMinutesIndicator]=\"model?.journeyDetails?.minutesIndicator\">\n      </nas-trip-summary>\n    </nas-modal>\n  </div>\n\n  <div [nasClass]=\"getClass('item', selected && 'selected')\" (click)=\"emitClick($event)\" role=\"button\"\n    aria-pressed=\"false\" tabindex=\"0\">\n    <article [nasClass]=\"getClass('trigger', model?.badge && 'badge-padding')\">\n      <div [nasClass]=\"getClass('badge')\" *ngIf=\"model?.badge\">\n        <span [nasClass]=\"getClass('badge-label')\">\n          {{ model?.badgeLabel }}\n        </span>\n      </div>\n\n      <div [nasClass]=\"getClass('overview')\">\n        <div [nasClass]=\"getClass('overview-details')\">\n          <section [nasClass]=\"getClass('flight-time')\" #journeyDetails>\n            <div [nasClass]=\"getClass('flight-time-from-to')\">\n              <div [nasClass]=\"getClass('flight-time-when')\">\n                <div [nasClass]=\"getClass('flight-time-when-departure')\">\n                  <time #departureTimeText>\n                    {{ currentJourney?.departureTime }}\n                  </time>\n                </div>\n\n                <span>&nbsp;-&nbsp;</span>\n                <div [nasClass]=\"getClass('flight-time-when-arrival')\">\n                  <time>{{ currentJourney?.arrivalTime }}</time>\n                </div>\n              </div>\n              <div *ngIf=\"!isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n              </div>\n              <ng-container *ngIf=\"isSmallScreen\">\n                <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n              </ng-container>\n            </div>\n            <div [nasClass]=\"getClass('flight-time-info')\" *ngIf=\"model?.journeyInfoLabel\">\n              <span [nasClass]=\"getClass('flight-time-info-link-wrapper')\" (click)=\"toggleJourneyInfoDetails($event)\">\n                <a [nasClass]=\"getClass('flight-time-info-link')\">\n                  {{ model?.journeyInfoLabel }}\n                </a>\n              </span>\n            </div>\n          </section>\n\n          <div [nasClass]=\"getClass('selected-info')\">\n            <div [nasClass]=\"getClass('selected-info', 'time-duration')\">\n              <section *ngIf=\"!isSmallScreen\" [nasClass]=\"getClass('selected-info-graph')\"></section>\n              <section [nasClass]=\"getClass('journey')\">\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <div [nasClass]=\"getClass('journey-info')\" *ngIf=\"\n                      model?.journeyTransitInfo?.transitCount;\n                      else directFlightLabel\n                    \">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.journeyTransitInfo?.transitCount }}\n                      {{ model?.journeyTransitInfo?.transitLabel }}\n                    </mark>\n\n                    <span *ngIf=\"isSmallScreen\">,&nbsp;</span>\n\n                    <mark [nasClass]=\"getClass('journey-info-stops-details')\">\n                      {{ model?.journeyTransitInfo?.transitDetails }}\n                    </mark>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngIf=\"isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n                </ng-container>\n\n                <ng-container *ngIf=\"!isSmallScreen\">\n                  <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n                </ng-container>\n\n                <ng-template #airportCodes>\n                  <summary [nasClass]=\"getClass('flight-time-when-airports')\">\n                    {{ model?.origin }}-\n\n                    <span [nasClass]=\"\n                        getClass('flight-time-when-airports-stopovers')\n                      \" *ngIf=\"model?.stopovers\">\n                      <ng-container *ngFor=\"let stop of model?.stopovers\">\n                        {{ stop }} -\n                      </ng-container>\n                    </span>\n                    {{ model?.destination }}\n                  </summary>\n                </ng-template>\n\n                <ng-template #directFlightLabel>\n                  <div [nasClass]=\"getClass('journey-info')\">\n                    <mark [nasClass]=\"getClass('journey-info-stops')\">\n                      {{ model?.directLabel\n                      }}<span [nasClass]=\"getClass('journey-info-stops-format')\">,&nbsp;</span>\n                    </mark>\n                  </div>\n                </ng-template>\n\n                <figure *ngIf=\"!isSmallScreen; else journeyIcon\" [nasClass]=\"getClass('md-icon')\">\n                  <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n                </figure>\n              </section>\n            </div>\n            <div [nasClass]=\"getClass('operated-by')\" *ngIf=\"model?.operatingCarriers\">\n              <label>{{ model?.operatingCarriers?.label }}\n                <mark *ngFor=\"\n                    let operator of model?.operatingCarriers.operators;\n                    index as operatorIndex\n                  \">\n                  {{ operator\n                  }}<span *ngIf=\"\n                      model?.operatingCarriers?.operators?.length >\n                      operatorIndex + 1\n                    \">,</span>\n                </mark>\n              </label>\n            </div>\n          </div>\n\n          <ng-template #TotalFlightTime>\n            <section [nasClass]=\"getClass('flight-time-details')\">\n              <label [nasClass]=\"getClass('flight-time-details-label')\">\n                {{ model?.duration?.durationLabel }}\n              </label>\n              <time [nasClass]=\"getClass('flight-time-details-text')\">\n                {{ model?.duration?.durationText }}\n              </time>\n              <time [nasClass]=\"getClass('flight-time-details-count')\" *ngIf=\"model?.duration?.dayCount\">\n                +{{ model.duration.dayCount }} {{ model.duration.dayLabel }}\n              </time>\n            </section>\n          </ng-template>\n\n          <ng-template #journeyIcon>\n            <figure [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n            </figure>\n          </ng-template>\n        </div>\n      </div>\n    </article>\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-journey-availability{width:100%;background:#f1f1f1;position:relative;transform:all 3s;transition-duration:.3s}.nas-journey-availability--detailed-info{margin:auto 12px;width:auto}.nas-journey-availability__item{max-width:100%;perspective:1000px;background-color:#fff;outline:none;margin-bottom:2px;transform:all 3s;transition-duration:.3s}.nas-journey-availability__item:focus{transform:all 3s;transition-duration:.3s;box-shadow:0 0 0 3px #15273f}.nas-journey-availability__item--selected{margin-top:12px;margin-bottom:12px}.nas-journey-availability__trigger{display:flex;align-items:stretch;justify-content:space-between;text-align:left;width:100%;flex:1;outline:0;padding:12px}@media (min-width: 1000px){.nas-journey-availability__trigger{padding:12px 12px 12px 36px}}.nas-journey-availability__trigger--badge-padding{padding:36px 12px 12px}@media (min-width: 1000px){.nas-journey-availability__trigger--badge-padding{padding:12px 12px 12px 36px}}.nas-journey-availability__badge{background-color:#e9e7e4;margin:0;position:relative;position:absolute;left:0;right:0;top:0;padding:3px;text-align:center}.nas-journey-availability__badge-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#15273f;text-transform:uppercase}@media (min-width: 1000px){.nas-journey-availability__badge-label{transform:rotate(270deg);transform-origin:0 0;float:left;position:absolute;left:3px;bottom:5px}}@media (min-width: 1000px){.nas-journey-availability__badge{position:relative;width:24px;min-width:24px;margin:-12px 12px -12px -36px}}.nas-journey-availability__overview{display:flex;width:100%;padding-right:9px;flex:2 1 auto}@media (min-width: 1000px){.nas-journey-availability__overview{flex-wrap:wrap}}.nas-journey-availability__overview-details{display:flex;flex-wrap:wrap;justify-content:space-between;flex:1}@media (min-width: 1000px){.nas-journey-availability__overview-details{width:100%;max-width:100%;flex:auto}}.nas-journey-availability__overview-details .nas-journey-availability__mobile-icon{position:absolute;right:20px;bottom:16px}.nas-journey-availability__overview-details .nas-journey-availability__info-details{cursor:pointer}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon{cursor:pointer;padding:6px}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon span{cursor:pointer}.nas-journey-availability__flight-time{display:flex;flex:1;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time{display:block;flex:1 1 60%}}.nas-journey-availability__flight-time-when{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;margin-top:-2px;color:#15273f;display:flex;justify-content:space-between}@media (max-width: 639px){.nas-journey-availability__flight-time-when{font-size:20px;line-height:28px}}@media (min-width: 1000px){.nas-journey-availability__flight-time-when{display:inline-block;justify-content:initial}}.nas-journey-availability__flight-time-when-arrival,.nas-journey-availability__flight-time-when-departure{display:inline}.nas-journey-availability__flight-time-when-airports{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;flex:0 0 100%;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-when-airports{flex:initial}}.nas-journey-availability__flight-time-when-airports-stopovers{color:#6f6f6f}.nas-journey-availability__flight-time-details{font-size:18px;line-height:24px;display:inline-block}.nas-journey-availability__flight-time-details-label{color:#15273f;display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-label{display:inline}}.nas-journey-availability__flight-time-details-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-availability__flight-time-details-count{display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-count{display:inline-block}}@media (min-width: 1000px){.nas-journey-availability__flight-time-details{padding-top:1px;padding-bottom:3px;display:initial}}.nas-journey-availability__flight-time-from-to{padding-right:24px}.nas-journey-availability__flight-time-info{margin-left:auto;justify-self:flex-end;text-align:end;font-size:14px;line-height:20px;padding-top:6px}.nas-journey-availability__flight-time-info-link-wrapper{cursor:pointer;padding:6px 0 12px 12px}@media (min-width: 1000px){.nas-journey-availability__flight-time-info-link-wrapper{padding:6px 0 0}}.nas-journey-availability__flight-time-info-link{color:#b12a0b;border-bottom-color:#e9e7e4}.nas-journey-availability__flight-time-info-link:hover{border-bottom-color:#15273f}@media (min-width: 1000px){.nas-journey-availability__flight-time-info{position:absolute;bottom:12px}}.nas-journey-availability__journey-figure{margin-top:12px;max-height:12px}@media (min-width: 1000px){.nas-journey-availability__journey-figure{margin-top:0;max-height:initial}}.nas-journey-availability__selected-info{display:flex;flex:0 0 100%;flex-wrap:wrap}@media (min-width: 1000px){.nas-journey-availability__selected-info{flex:1 1 40%}}@media (min-width: 1000px){.nas-journey-availability__selected-info-graph{align-self:center}}.nas-journey-availability__journey mark{background-color:transparent}.nas-journey-availability__journey-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#15273f;white-space:nowrap;display:inline}.nas-journey-availability__journey-airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-availability__journey-info{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:18px;line-height:24px;display:inline-block;vertical-align:top}@media (min-width: 1000px){.nas-journey-availability__journey-info{display:block}}.nas-journey-availability__journey-info-stops{display:inline-block;margin-bottom:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;color:#15273f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;color:#6f6f6f}}.nas-journey-availability__journey-info-stops-format{display:inline;color:#6f6f6f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-format{display:none}}.nas-journey-availability__journey-info-stops-details{display:none}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-details{display:inline}}@media (min-width: 1000px){.nas-journey-availability__journey .nas-journey-availability__md-icon{min-height:22px}}.nas-journey-availability__operated-by{font-size:14px;line-height:20px;display:none}@media (min-width: 1000px){.nas-journey-availability__operated-by{display:block;flex:0 0 100%;display:inline-block;margin-top:6px}}.nas-journey-availability__operated-by label,.nas-journey-availability__operated-by caption{display:inline}.nas-journey-availability__operated-by mark{background-color:transparent}.nas-journey-availability__stopover{transform:rotate(90deg)}@media (min-width: 1000px){.nas-journey-availability__stopover{transform:rotate(0);align-self:center;margin-right:12px}}.nas-journey-availability__animate{display:block}.nas-journey-availability__animate--animate{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.48s}.nas-journey-availability__animate--animate:nth-child(1){animation-delay:.18s}.nas-journey-availability__animate--animate:nth-child(2){animation-delay:.21s}.nas-journey-availability__animate--animate:nth-child(3){animation-delay:.24s}.nas-journey-availability__animate--animate:nth-child(4){animation-delay:.27s}.nas-journey-availability__animate--animate:nth-child(5){animation-delay:.3s}.nas-journey-availability__animate--animate:nth-child(6){animation-delay:.33s}.nas-journey-availability__animate--animate:nth-child(7){animation-delay:.36s}.nas-journey-availability__animate--animate:nth-child(8){animation-delay:.39s}.nas-journey-availability__animate--animate:nth-child(9){animation-delay:.42s}.nas-journey-availability__animate--animate:nth-child(10){animation-delay:.45s}@keyframes arrival-fly-in{0%{opacity:0;transform:translate(-260px,-100px) rotate(10deg)}25%{opacity:1}}@keyframes departure-fly-off{75%{opacity:1}to{opacity:0;transform:translate(260px,-100px) rotate(-20deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i2.DeviceHelper }, { type: i3.DateHelper }]; }, propDecorators: { model: [{
                 type: Input
             }], selected: [{

package/esm2022/lib/components/journey-selection/journey-selection.component.mjs

@@ -91,11 +91,11 @@ export class JourneySelectionComponent extends NasComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JourneySelectionComponent, deps: [{ token: i1.DateHelper }, { token: i2.DatePipe }, { token: i3.DeviceHelper }, { token: i4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JourneySelectionComponent, selector: "nas-journey-selection", inputs: { model: "model", collapse: "collapse", compact: "compact", ariaLabel: "ariaLabel", timeZone: "timeZone" }, outputs: { collapseChange: "collapseChange", selectedDateChanged: "selectedDateChanged" }, viewQueries: [{ propertyName: "imageMain", first: true, predicate: ["imageMain"], descendants: true }, { propertyName: "destinationCode", first: true, predicate: ["destinationCode"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [nasClass]=\"getClass()\">\n  <div *ngIf=\"collapse; else expandedSelection\"\n    [nasClass]=\"getClass('collapsed', [animateDown === false && 'animate-up', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n\n    <div [nasClass]=\"getClass('destination')\">\n      <div [nasClass]=\"getClass('destination-image')\" #imageMain>\n        <label [nasClass]=\"getClass('destination-image-content')\">\n          <ng-container *ngIf=\"!deviceService?.isMobileWidth();\">\n            <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n          </ng-container>\n\n          <div [nasClass]=\"getClass('destination-image-sm')\" *ngIf=\"deviceService?.isMobileWidth()\">\n            <span [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\" [lightCircularBackground]=\"true\"></nas-icon>\n            </span>\n            <div [nasClass]=\"getClass('airport')\">\n              <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n              <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n                <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n                  {{stop}}&nbsp;-&nbsp;\n                </ng-container>\n              </span>\n              <span>{{model?.collapsed?.destination}}</span>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n\n    <section [nasClass]=\"getClass('flights')\">\n      <div [nasClass]=\"getClass('flights-information')\">\n        <div [nasClass]=\"getClass('airport')\">\n          <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n\n          <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n            <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n              {{stop}}&nbsp;-&nbsp;\n            </ng-container>\n          </span>\n\n\n          <span>{{model?.collapsed?.destination}}</span>\n        </div>\n        <div *ngIf=\"model?.collapsed?.operatingCarriers\" [nasClass]=\"getClass('operators')\">\n          <label [nasClass]=\"getClass('operators', 'label')\">\n            {{model?.collapsed?.operatingCarriers?.label}}&nbsp;\n          </label>\n          <span [nasClass]=\"getClass('operators', 'text')\">\n            {{model?.collapsed?.operatingCarriers?.operators[0]}}\n          </span>\n          <output *ngIf=\"model?.collapsed?.operatingCarriers?.operators?.length > 1\"\n            [nasClass]=\"getClass('operators', 'count')\">\n            &nbsp; +{{model?.collapsed?.operatingCarriers?.operators?.length - 1}}\n          </output>\n        </div>\n      </div>\n\n      <div [nasClass]=\"getClass('change-flight')\">\n\n        <label [nasClass]=\"getClass('change-flight-content')\" *ngIf=\"deviceService?.isMobileWidth()\">\n          <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n        </label>\n\n        <ng-template #flightInfo>\n          <summary [nasClass]=\"getClass('destination-image-caption')\">\n            <header [nasClass]=\"getClass('sub-title')\">\n              {{model?.collapsed?.title}}\n            </header>\n          </summary>\n\n          <section [nasClass]=\"getClass('journey')\">\n            <legend [nasClass]=\"getClass('journey-information')\">\n\n              <label>\n                {{model?.collapsed?.departureLabel}}:&nbsp;\n              </label>\n              <time>{{transformDisplayDate(model?.dateFormat)}}</time>\n            </legend>\n            <div>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.fromLabel}}:&nbsp;</label>\n                <span>{{model?.collapsed?.originDisplayName}}&nbsp;({{model?.collapsed?.origin}})</span>\n              </legend>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.collapsed?.durationLabel}}:&nbsp;</label>\n                <time>{{model?.collapsed?.durationTimeInfo}},&nbsp;{{model?.collapsed?.transitionInfo}} </time>\n              </legend>\n            </div>\n          </section>\n        </ng-template>\n        <nas-button compact secondary (click)=\"changeFlightDate()\">{{model?.collapsed?.changeFlightLabel}}</nas-button>\n      </div>\n    </section>\n  </div>\n\n  <ng-template #expandedSelection>\n    <div [nasClass]=\"getClass('expanded', [animateDown && 'animate-down', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n      <figure [nasClass]=\"getClass('destination-code')\" #destinationCode>\n        <figcaption [nasClass]=\"getClass('destination-code-value', model?.expanded?.destination?.length > 3 && 'wrap-text')\" [innerHTML]=\"getDestinationCode()\">\n        </figcaption>\n      </figure>\n      <div [nasClass]=\"getClass('selection')\">\n        <label [nasClass]=\"getClass('heading')\">\n\n          <ng-container *ngIf=\"deviceService.isMobileWidth(); else desktopIcon\">\n            <ng-container *ngTemplateOutlet=\"desktopIcon\"></ng-container>\n          </ng-container>\n\n          <header [nasClass]=\"getClass('heading-text')\">\n            {{model?.expanded?.title}}\n          </header>\n          <span [nasClass]=\"getClass('heading-join')\">&nbsp;-&nbsp;</span>\n          <time [nasClass]=\"getClass('heading-time')\">\n            {{transformDisplayDate(model?.expanded?.dateFormat)}}\n          </time>\n\n          <ng-template #desktopIcon>\n            <span [nasClass]=\"getClass('heading-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\"></nas-icon>\n            </span>\n          </ng-template>\n\n        </label>\n        <summary [nasClass]=\"getClass('details')\">\n          <div>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.fromLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.originDisplayName}} ({{model?.expanded?.origin}})</span>\n            <span> | </span>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.expanded?.toLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.destinationDisplayName}} ({{model?.expanded?.destination}})</span>\n          </div>\n        </summary>\n      </div>\n    </div>\n  </ng-template>\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-journey-selection__collapsed{display:flex;flex-direction:column;max-width:820px;margin:16px auto;background-color:#fff;perspective:1000px;box-shadow:0 5px 20px #0000001a}.nas-journey-selection__collapsed--animate-up{animation:collapse-animation .4s ease-out both}@media (min-width: 640px){.nas-journey-selection__collapsed{flex-direction:row}}.nas-journey-selection__collapsed--compact{margin:0 auto}.nas-journey-selection__destination{flex:1 1 50%;display:flex}.nas-journey-selection__destination-enter,.nas-journey-selection__destination-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__destination-enter{animation:flip-in .55s ease both}.nas-journey-selection__destination-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__destination--imagesize{height:100%;display:block}@media (min-width: 640px){.nas-journey-selection__destination--imagesize{height:300px;margin-bottom:0}}.nas-journey-selection__destination-image{position:relative;flex-shrink:0;width:100%;background-size:cover;background-position:center;background-color:#15273f}.nas-journey-selection__destination-image-content{padding:24px;margin-bottom:0;display:flex;flex-direction:column;justify-content:center;height:100%}.nas-journey-selection__destination-image-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 -12.4%,#15273f 95.51%)}.nas-journey-selection__destination-image-caption{display:flex;margin-bottom:6px}@media (min-width: 640px){.nas-journey-selection__destination-image-caption{margin-bottom:0}}.nas-journey-selection__destination-image-sm{display:flex;z-index:1;flex-direction:column;width:100%;align-items:center;justify-content:center}.nas-journey-selection__destination-image-sm .nas-journey-selection__mobile-icon{height:40px;margin-top:15px}.nas-journey-selection__destination-image-sm .nas-journey-selection__airport{margin-top:12px;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;color:#fff}.nas-journey-selection .nas-journey-selection__sub-title{z-index:1;text-align:left;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;align-self:center;margin-bottom:6px;width:100%}@media (min-width: 640px){.nas-journey-selection .nas-journey-selection__sub-title{color:#fff}}.nas-journey-selection__journey{z-index:1}.nas-journey-selection__journey-information{margin:0;display:flex}.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px}@media (min-width: 640px){.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{color:#fff}}.nas-journey-selection__journey-information label{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#fff;display:inline-block;margin-bottom:0}.nas-journey-selection__flights{padding:6px;flex:1 1 50%;display:flex;flex-direction:column;justify-content:space-between;overflow-x:auto;background-color:#fff}.nas-journey-selection__flights-enter,.nas-journey-selection__flights-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__flights-enter{animation:flip-in .55s ease both}.nas-journey-selection__flights-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__flights .nas-journey-selection__airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;line-height:24px;margin-bottom:0}.nas-journey-selection__flights .nas-journey-selection__airport .nas-journey-selection__stopover{position:relative;display:inline-block;color:#6f6f6f}.nas-journey-selection__flights-information{justify-content:space-between;padding-bottom:12px;border-bottom:2px solid #E9E7E4;display:flex;flex-direction:column;align-items:flex-start;display:none}.nas-journey-selection__flights-information .nas-journey-selection__operators--label,.nas-journey-selection__flights-information .nas-journey-selection__operators--text,.nas-journey-selection__flights-information .nas-journey-selection__operators--count{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#15273f;display:inline}@media (min-width: 640px){.nas-journey-selection__flights-information{display:flex}}@media (min-width: 640px){.nas-journey-selection__flights{padding:24px}}.nas-journey-selection__change-flight{padding:12px}@media (min-width: 640px){.nas-journey-selection__change-flight{padding:0;margin-top:12px}}.nas-journey-selection__change-flight-content{margin-bottom:16px}@media (min-width: 640px){.nas-journey-selection__change-flight-content{margin-bottom:0}}.nas-journey-selection__change-flight-content label{color:#15273f;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-selection__expanded{max-width:820px;perspective:1000px;background-color:transparent;margin:16px auto;display:flex;align-items:center}.nas-journey-selection__expanded--animate-down{animation:expand-animation .4s ease-out both}.nas-journey-selection__expanded .nas-journey-selection__destination-code{width:60px;height:60px;border-radius:50%;position:relative;margin-right:24px;background-size:cover;vertical-align:top;display:flex;align-items:center;justify-content:center;background-color:#15273f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__destination-code{vertical-align:initial}}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;color:#fff;z-index:1}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value--wrap-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;line-height:16px}.nas-journey-selection__expanded .nas-journey-selection__destination-code:after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-radius:50%;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 50%,#15273f 99%)}.nas-journey-selection__expanded .nas-journey-selection__selection{width:calc(100% - 85px);display:inline-block}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading{display:inline-block;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;vertical-align:center;padding-bottom:6px;margin-bottom:0;width:100%}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-text{display:inline}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:none}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:inline-block}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:24px;line-height:32px;display:block;color:#6f6f6f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{display:inline-block;color:#15273f}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{float:initial;margin-right:11px;vertical-align:middle;position:relative}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{margin-right:initial;float:right}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{padding-top:6px;border-top:2px solid #E9E7E4;display:none}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-right:6px;color:#6f6f6f}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;color:#6f6f6f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{display:block}}.nas-journey-selection__expanded--compact{margin:0 auto}::ng-deep .nas-journey-selection__destination-image-caption nas-icon{z-index:10;align-self:center;margin-right:20px;display:none}@media (min-width: 640px){::ng-deep .nas-journey-selection__destination-image-caption nas-icon{display:block}}::ng-deep .nas-journey-selection .nas-icon-small--light-background:after{top:-14.5px;left:-15px;width:55px;height:55px}::ng-deep .nas-journey-selection button.nas-button--compact{margin-bottom:0}@keyframes journey-selection-animation{0%{opacity:0}}@keyframes expand-animation{0%{transform:translateY(-20px)}to{transform:translate(0)}}@keyframes collapse-animation{0%{transform:translateY(20px)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i6.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "component", type: i7.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: JourneySelectionComponent, selector: "nas-journey-selection", inputs: { model: "model", collapse: "collapse", compact: "compact", ariaLabel: "ariaLabel", timeZone: "timeZone" }, outputs: { collapseChange: "collapseChange", selectedDateChanged: "selectedDateChanged" }, viewQueries: [{ propertyName: "imageMain", first: true, predicate: ["imageMain"], descendants: true }, { propertyName: "destinationCode", first: true, predicate: ["destinationCode"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [nasClass]=\"getClass()\">\n  <div *ngIf=\"collapse; else expandedSelection\"\n    [nasClass]=\"getClass('collapsed', [animateDown === false && 'animate-up', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n\n    <div [nasClass]=\"getClass('destination')\">\n      <div [nasClass]=\"getClass('destination-image')\" #imageMain>\n        <label [nasClass]=\"getClass('destination-image-content')\">\n          <ng-container *ngIf=\"!deviceService?.isMobileWidth();\">\n            <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n          </ng-container>\n\n          <div [nasClass]=\"getClass('destination-image-sm')\" *ngIf=\"deviceService?.isMobileWidth()\">\n            <span [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\" [lightCircularBackground]=\"true\"></nas-icon>\n            </span>\n            <div [nasClass]=\"getClass('airport')\">\n              <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n              <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n                <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n                  {{stop}}&nbsp;-&nbsp;\n                </ng-container>\n              </span>\n              <span>{{model?.collapsed?.destination}}</span>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n\n    <section [nasClass]=\"getClass('flights')\">\n      <div [nasClass]=\"getClass('flights-information')\">\n        <div [nasClass]=\"getClass('airport')\">\n          <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n\n          <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n            <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n              {{stop}}&nbsp;-&nbsp;\n            </ng-container>\n          </span>\n\n\n          <span>{{model?.collapsed?.destination}}</span>\n        </div>\n        <div *ngIf=\"model?.collapsed?.operatingCarriers\" [nasClass]=\"getClass('operators')\">\n          <label [nasClass]=\"getClass('operators', 'label')\">\n            {{model?.collapsed?.operatingCarriers?.label}}&nbsp;\n          </label>\n          <span [nasClass]=\"getClass('operators', 'text')\">\n            {{model?.collapsed?.operatingCarriers?.operators[0]}}\n          </span>\n          <output *ngIf=\"model?.collapsed?.operatingCarriers?.operators?.length > 1\"\n            [nasClass]=\"getClass('operators', 'count')\">\n            &nbsp; +{{model?.collapsed?.operatingCarriers?.operators?.length - 1}}\n          </output>\n        </div>\n      </div>\n\n      <div [nasClass]=\"getClass('change-flight')\">\n\n        <label [nasClass]=\"getClass('change-flight-content')\" *ngIf=\"deviceService?.isMobileWidth()\">\n          <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n        </label>\n\n        <ng-template #flightInfo>\n          <summary [nasClass]=\"getClass('destination-image-caption')\">\n            <header [nasClass]=\"getClass('sub-title')\">\n              {{model?.collapsed?.title}}\n            </header>\n          </summary>\n\n          <section [nasClass]=\"getClass('journey')\">\n            <legend [nasClass]=\"getClass('journey-information')\">\n\n              <label>\n                {{model?.collapsed?.departureLabel}}:&nbsp;\n              </label>\n              <time>{{transformDisplayDate(model?.dateFormat)}}</time>\n            </legend>\n            <div>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.fromLabel}}:&nbsp;</label>\n                <span>{{model?.collapsed?.originDisplayName}}&nbsp;({{model?.collapsed?.origin}})</span>\n              </legend>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.collapsed?.durationLabel}}:&nbsp;</label>\n                <time>{{model?.collapsed?.durationTimeInfo}},&nbsp;{{model?.collapsed?.transitionInfo}} </time>\n              </legend>\n            </div>\n          </section>\n        </ng-template>\n        <nas-button compact secondary (click)=\"changeFlightDate()\">{{model?.collapsed?.changeFlightLabel}}</nas-button>\n      </div>\n    </section>\n  </div>\n\n  <ng-template #expandedSelection>\n    <div [nasClass]=\"getClass('expanded', [animateDown && 'animate-down', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n      <figure [nasClass]=\"getClass('destination-code')\" #destinationCode>\n        <figcaption [nasClass]=\"getClass('destination-code-value', model?.expanded?.destination?.length > 3 && 'wrap-text')\" [innerHTML]=\"getDestinationCode()\">\n        </figcaption>\n      </figure>\n      <div [nasClass]=\"getClass('selection')\">\n        <label [nasClass]=\"getClass('heading')\">\n\n          <ng-container *ngIf=\"deviceService.isMobileWidth(); else desktopIcon\">\n            <ng-container *ngTemplateOutlet=\"desktopIcon\"></ng-container>\n          </ng-container>\n\n          <header [nasClass]=\"getClass('heading-text')\">\n            {{model?.expanded?.title}}\n          </header>\n          <span [nasClass]=\"getClass('heading-join')\">&nbsp;-&nbsp;</span>\n          <time [nasClass]=\"getClass('heading-time')\">\n            {{transformDisplayDate(model?.expanded?.dateFormat)}}\n          </time>\n\n          <ng-template #desktopIcon>\n            <span [nasClass]=\"getClass('heading-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\"></nas-icon>\n            </span>\n          </ng-template>\n\n        </label>\n        <summary [nasClass]=\"getClass('details')\">\n          <div>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.fromLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.originDisplayName}} ({{model?.expanded?.origin}})</span>\n            <span> | </span>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.expanded?.toLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.destinationDisplayName}} ({{model?.expanded?.destination}})</span>\n          </div>\n        </summary>\n      </div>\n    </div>\n  </ng-template>\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-journey-selection__collapsed{display:flex;flex-direction:column;max-width:820px;margin:16px auto;background-color:#fff;perspective:1000px;box-shadow:0 5px 20px #0000001a}.nas-journey-selection__collapsed--animate-up{animation:collapse-animation .4s ease-out both}@media (min-width: 640px){.nas-journey-selection__collapsed{flex-direction:row}}.nas-journey-selection__collapsed--compact{margin:0 auto}.nas-journey-selection__destination{flex:1 1 50%;display:flex}.nas-journey-selection__destination-enter,.nas-journey-selection__destination-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__destination-enter{animation:flip-in .55s ease both}.nas-journey-selection__destination-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__destination--imagesize{height:100%;display:block}@media (min-width: 640px){.nas-journey-selection__destination--imagesize{height:300px;margin-bottom:0}}.nas-journey-selection__destination-image{position:relative;flex-shrink:0;width:100%;background-size:cover;background-position:center;background-color:#15273f}.nas-journey-selection__destination-image-content{padding:24px;margin-bottom:0;display:flex;flex-direction:column;justify-content:center;height:100%}.nas-journey-selection__destination-image-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 -12.4%,#15273f 95.51%)}.nas-journey-selection__destination-image-caption{display:flex;margin-bottom:6px}@media (min-width: 640px){.nas-journey-selection__destination-image-caption{margin-bottom:0}}.nas-journey-selection__destination-image-sm{display:flex;z-index:1;flex-direction:column;width:100%;align-items:center;justify-content:center}.nas-journey-selection__destination-image-sm .nas-journey-selection__mobile-icon{height:40px;margin-top:15px}.nas-journey-selection__destination-image-sm .nas-journey-selection__airport{margin-top:12px;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;color:#fff}@media (max-width: 639px){.nas-journey-selection__destination-image-sm .nas-journey-selection__airport{font-size:20px;line-height:28px}}.nas-journey-selection .nas-journey-selection__sub-title{z-index:1;text-align:left;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;align-self:center;margin-bottom:6px;width:100%}@media (max-width: 639px){.nas-journey-selection .nas-journey-selection__sub-title{font-size:20px;line-height:28px}}@media (min-width: 640px){.nas-journey-selection .nas-journey-selection__sub-title{color:#fff}}.nas-journey-selection__journey{z-index:1}.nas-journey-selection__journey-information{margin:0;display:flex}.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px}@media (min-width: 640px){.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{color:#fff}}.nas-journey-selection__journey-information label{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#fff;display:inline-block;margin-bottom:0}.nas-journey-selection__flights{padding:6px;flex:1 1 50%;display:flex;flex-direction:column;justify-content:space-between;overflow-x:auto;background-color:#fff}.nas-journey-selection__flights-enter,.nas-journey-selection__flights-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__flights-enter{animation:flip-in .55s ease both}.nas-journey-selection__flights-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__flights .nas-journey-selection__airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;line-height:24px;margin-bottom:0}@media (max-width: 639px){.nas-journey-selection__flights .nas-journey-selection__airport{font-size:20px;line-height:28px}}.nas-journey-selection__flights .nas-journey-selection__airport .nas-journey-selection__stopover{position:relative;display:inline-block;color:#6f6f6f}.nas-journey-selection__flights-information{justify-content:space-between;padding-bottom:12px;border-bottom:2px solid #E9E7E4;display:flex;flex-direction:column;align-items:flex-start;display:none}.nas-journey-selection__flights-information .nas-journey-selection__operators--label,.nas-journey-selection__flights-information .nas-journey-selection__operators--text,.nas-journey-selection__flights-information .nas-journey-selection__operators--count{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#15273f;display:inline}@media (min-width: 640px){.nas-journey-selection__flights-information{display:flex}}@media (min-width: 640px){.nas-journey-selection__flights{padding:24px}}.nas-journey-selection__change-flight{padding:12px}@media (min-width: 640px){.nas-journey-selection__change-flight{padding:0;margin-top:12px}}.nas-journey-selection__change-flight-content{margin-bottom:16px}@media (min-width: 640px){.nas-journey-selection__change-flight-content{margin-bottom:0}}.nas-journey-selection__change-flight-content label{color:#15273f;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-selection__expanded{max-width:820px;perspective:1000px;background-color:transparent;margin:16px auto;display:flex;align-items:center}.nas-journey-selection__expanded--animate-down{animation:expand-animation .4s ease-out both}.nas-journey-selection__expanded .nas-journey-selection__destination-code{width:60px;height:60px;border-radius:50%;position:relative;margin-right:24px;background-size:cover;vertical-align:top;display:flex;align-items:center;justify-content:center;background-color:#15273f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__destination-code{vertical-align:initial}}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;color:#fff;z-index:1}@media (max-width: 639px){.nas-journey-selection__expanded .nas-journey-selection__destination-code-value{font-size:20px;line-height:28px}}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value--wrap-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;line-height:16px}.nas-journey-selection__expanded .nas-journey-selection__destination-code:after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-radius:50%;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 50%,#15273f 99%)}.nas-journey-selection__expanded .nas-journey-selection__selection{width:calc(100% - 85px);display:inline-block}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading{display:inline-block;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;vertical-align:center;padding-bottom:6px;margin-bottom:0;width:100%}@media (max-width: 639px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading{font-size:20px;line-height:28px}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-text{display:inline}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:none}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:inline-block}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:24px;line-height:32px;display:block;color:#6f6f6f}@media (max-width: 639px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{font-size:20px;line-height:28px}}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{display:inline-block;color:#15273f}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{float:initial;margin-right:11px;vertical-align:middle;position:relative}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{margin-right:initial;float:right}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{padding-top:6px;border-top:2px solid #E9E7E4;display:none}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-right:6px;color:#6f6f6f}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;color:#6f6f6f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{display:block}}.nas-journey-selection__expanded--compact{margin:0 auto}::ng-deep .nas-journey-selection__destination-image-caption nas-icon{z-index:10;align-self:center;margin-right:20px;display:none}@media (min-width: 640px){::ng-deep .nas-journey-selection__destination-image-caption nas-icon{display:block}}::ng-deep .nas-journey-selection .nas-icon-small--light-background:after{top:-14.5px;left:-15px;width:55px;height:55px}::ng-deep .nas-journey-selection button.nas-button--compact{margin-bottom:0}@keyframes journey-selection-animation{0%{opacity:0}}@keyframes expand-animation{0%{transform:translateY(-20px)}to{transform:translate(0)}}@keyframes collapse-animation{0%{transform:translateY(20px)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i6.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "tertiary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "component", type: i7.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JourneySelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-journey-selection', template: "<div [nasClass]=\"getClass()\">\n  <div *ngIf=\"collapse; else expandedSelection\"\n    [nasClass]=\"getClass('collapsed', [animateDown === false && 'animate-up', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n\n    <div [nasClass]=\"getClass('destination')\">\n      <div [nasClass]=\"getClass('destination-image')\" #imageMain>\n        <label [nasClass]=\"getClass('destination-image-content')\">\n          <ng-container *ngIf=\"!deviceService?.isMobileWidth();\">\n            <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n          </ng-container>\n\n          <div [nasClass]=\"getClass('destination-image-sm')\" *ngIf=\"deviceService?.isMobileWidth()\">\n            <span [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\" [lightCircularBackground]=\"true\"></nas-icon>\n            </span>\n            <div [nasClass]=\"getClass('airport')\">\n              <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n              <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n                <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n                  {{stop}}&nbsp;-&nbsp;\n                </ng-container>\n              </span>\n              <span>{{model?.collapsed?.destination}}</span>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n\n    <section [nasClass]=\"getClass('flights')\">\n      <div [nasClass]=\"getClass('flights-information')\">\n        <div [nasClass]=\"getClass('airport')\">\n          <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n\n          <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n            <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n              {{stop}}&nbsp;-&nbsp;\n            </ng-container>\n          </span>\n\n\n          <span>{{model?.collapsed?.destination}}</span>\n        </div>\n        <div *ngIf=\"model?.collapsed?.operatingCarriers\" [nasClass]=\"getClass('operators')\">\n          <label [nasClass]=\"getClass('operators', 'label')\">\n            {{model?.collapsed?.operatingCarriers?.label}}&nbsp;\n          </label>\n          <span [nasClass]=\"getClass('operators', 'text')\">\n            {{model?.collapsed?.operatingCarriers?.operators[0]}}\n          </span>\n          <output *ngIf=\"model?.collapsed?.operatingCarriers?.operators?.length > 1\"\n            [nasClass]=\"getClass('operators', 'count')\">\n            &nbsp; +{{model?.collapsed?.operatingCarriers?.operators?.length - 1}}\n          </output>\n        </div>\n      </div>\n\n      <div [nasClass]=\"getClass('change-flight')\">\n\n        <label [nasClass]=\"getClass('change-flight-content')\" *ngIf=\"deviceService?.isMobileWidth()\">\n          <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n        </label>\n\n        <ng-template #flightInfo>\n          <summary [nasClass]=\"getClass('destination-image-caption')\">\n            <header [nasClass]=\"getClass('sub-title')\">\n              {{model?.collapsed?.title}}\n            </header>\n          </summary>\n\n          <section [nasClass]=\"getClass('journey')\">\n            <legend [nasClass]=\"getClass('journey-information')\">\n\n              <label>\n                {{model?.collapsed?.departureLabel}}:&nbsp;\n              </label>\n              <time>{{transformDisplayDate(model?.dateFormat)}}</time>\n            </legend>\n            <div>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.fromLabel}}:&nbsp;</label>\n                <span>{{model?.collapsed?.originDisplayName}}&nbsp;({{model?.collapsed?.origin}})</span>\n              </legend>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.collapsed?.durationLabel}}:&nbsp;</label>\n                <time>{{model?.collapsed?.durationTimeInfo}},&nbsp;{{model?.collapsed?.transitionInfo}} </time>\n              </legend>\n            </div>\n          </section>\n        </ng-template>\n        <nas-button compact secondary (click)=\"changeFlightDate()\">{{model?.collapsed?.changeFlightLabel}}</nas-button>\n      </div>\n    </section>\n  </div>\n\n  <ng-template #expandedSelection>\n    <div [nasClass]=\"getClass('expanded', [animateDown && 'animate-down', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n      <figure [nasClass]=\"getClass('destination-code')\" #destinationCode>\n        <figcaption [nasClass]=\"getClass('destination-code-value', model?.expanded?.destination?.length > 3 && 'wrap-text')\" [innerHTML]=\"getDestinationCode()\">\n        </figcaption>\n      </figure>\n      <div [nasClass]=\"getClass('selection')\">\n        <label [nasClass]=\"getClass('heading')\">\n\n          <ng-container *ngIf=\"deviceService.isMobileWidth(); else desktopIcon\">\n            <ng-container *ngTemplateOutlet=\"desktopIcon\"></ng-container>\n          </ng-container>\n\n          <header [nasClass]=\"getClass('heading-text')\">\n            {{model?.expanded?.title}}\n          </header>\n          <span [nasClass]=\"getClass('heading-join')\">&nbsp;-&nbsp;</span>\n          <time [nasClass]=\"getClass('heading-time')\">\n            {{transformDisplayDate(model?.expanded?.dateFormat)}}\n          </time>\n\n          <ng-template #desktopIcon>\n            <span [nasClass]=\"getClass('heading-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\"></nas-icon>\n            </span>\n          </ng-template>\n\n        </label>\n        <summary [nasClass]=\"getClass('details')\">\n          <div>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.fromLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.originDisplayName}} ({{model?.expanded?.origin}})</span>\n            <span> | </span>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.expanded?.toLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.destinationDisplayName}} ({{model?.expanded?.destination}})</span>\n          </div>\n        </summary>\n      </div>\n    </div>\n  </ng-template>\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-journey-selection__collapsed{display:flex;flex-direction:column;max-width:820px;margin:16px auto;background-color:#fff;perspective:1000px;box-shadow:0 5px 20px #0000001a}.nas-journey-selection__collapsed--animate-up{animation:collapse-animation .4s ease-out both}@media (min-width: 640px){.nas-journey-selection__collapsed{flex-direction:row}}.nas-journey-selection__collapsed--compact{margin:0 auto}.nas-journey-selection__destination{flex:1 1 50%;display:flex}.nas-journey-selection__destination-enter,.nas-journey-selection__destination-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__destination-enter{animation:flip-in .55s ease both}.nas-journey-selection__destination-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__destination--imagesize{height:100%;display:block}@media (min-width: 640px){.nas-journey-selection__destination--imagesize{height:300px;margin-bottom:0}}.nas-journey-selection__destination-image{position:relative;flex-shrink:0;width:100%;background-size:cover;background-position:center;background-color:#15273f}.nas-journey-selection__destination-image-content{padding:24px;margin-bottom:0;display:flex;flex-direction:column;justify-content:center;height:100%}.nas-journey-selection__destination-image-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 -12.4%,#15273f 95.51%)}.nas-journey-selection__destination-image-caption{display:flex;margin-bottom:6px}@media (min-width: 640px){.nas-journey-selection__destination-image-caption{margin-bottom:0}}.nas-journey-selection__destination-image-sm{display:flex;z-index:1;flex-direction:column;width:100%;align-items:center;justify-content:center}.nas-journey-selection__destination-image-sm .nas-journey-selection__mobile-icon{height:40px;margin-top:15px}.nas-journey-selection__destination-image-sm .nas-journey-selection__airport{margin-top:12px;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;color:#fff}.nas-journey-selection .nas-journey-selection__sub-title{z-index:1;text-align:left;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;align-self:center;margin-bottom:6px;width:100%}@media (min-width: 640px){.nas-journey-selection .nas-journey-selection__sub-title{color:#fff}}.nas-journey-selection__journey{z-index:1}.nas-journey-selection__journey-information{margin:0;display:flex}.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px}@media (min-width: 640px){.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{color:#fff}}.nas-journey-selection__journey-information label{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#fff;display:inline-block;margin-bottom:0}.nas-journey-selection__flights{padding:6px;flex:1 1 50%;display:flex;flex-direction:column;justify-content:space-between;overflow-x:auto;background-color:#fff}.nas-journey-selection__flights-enter,.nas-journey-selection__flights-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__flights-enter{animation:flip-in .55s ease both}.nas-journey-selection__flights-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__flights .nas-journey-selection__airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;line-height:24px;margin-bottom:0}.nas-journey-selection__flights .nas-journey-selection__airport .nas-journey-selection__stopover{position:relative;display:inline-block;color:#6f6f6f}.nas-journey-selection__flights-information{justify-content:space-between;padding-bottom:12px;border-bottom:2px solid #E9E7E4;display:flex;flex-direction:column;align-items:flex-start;display:none}.nas-journey-selection__flights-information .nas-journey-selection__operators--label,.nas-journey-selection__flights-information .nas-journey-selection__operators--text,.nas-journey-selection__flights-information .nas-journey-selection__operators--count{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#15273f;display:inline}@media (min-width: 640px){.nas-journey-selection__flights-information{display:flex}}@media (min-width: 640px){.nas-journey-selection__flights{padding:24px}}.nas-journey-selection__change-flight{padding:12px}@media (min-width: 640px){.nas-journey-selection__change-flight{padding:0;margin-top:12px}}.nas-journey-selection__change-flight-content{margin-bottom:16px}@media (min-width: 640px){.nas-journey-selection__change-flight-content{margin-bottom:0}}.nas-journey-selection__change-flight-content label{color:#15273f;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-selection__expanded{max-width:820px;perspective:1000px;background-color:transparent;margin:16px auto;display:flex;align-items:center}.nas-journey-selection__expanded--animate-down{animation:expand-animation .4s ease-out both}.nas-journey-selection__expanded .nas-journey-selection__destination-code{width:60px;height:60px;border-radius:50%;position:relative;margin-right:24px;background-size:cover;vertical-align:top;display:flex;align-items:center;justify-content:center;background-color:#15273f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__destination-code{vertical-align:initial}}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;color:#fff;z-index:1}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value--wrap-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;line-height:16px}.nas-journey-selection__expanded .nas-journey-selection__destination-code:after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-radius:50%;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 50%,#15273f 99%)}.nas-journey-selection__expanded .nas-journey-selection__selection{width:calc(100% - 85px);display:inline-block}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading{display:inline-block;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;vertical-align:center;padding-bottom:6px;margin-bottom:0;width:100%}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-text{display:inline}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:none}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:inline-block}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:24px;line-height:32px;display:block;color:#6f6f6f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{display:inline-block;color:#15273f}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{float:initial;margin-right:11px;vertical-align:middle;position:relative}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{margin-right:initial;float:right}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{padding-top:6px;border-top:2px solid #E9E7E4;display:none}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-right:6px;color:#6f6f6f}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;color:#6f6f6f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{display:block}}.nas-journey-selection__expanded--compact{margin:0 auto}::ng-deep .nas-journey-selection__destination-image-caption nas-icon{z-index:10;align-self:center;margin-right:20px;display:none}@media (min-width: 640px){::ng-deep .nas-journey-selection__destination-image-caption nas-icon{display:block}}::ng-deep .nas-journey-selection .nas-icon-small--light-background:after{top:-14.5px;left:-15px;width:55px;height:55px}::ng-deep .nas-journey-selection button.nas-button--compact{margin-bottom:0}@keyframes journey-selection-animation{0%{opacity:0}}@keyframes expand-animation{0%{transform:translateY(-20px)}to{transform:translate(0)}}@keyframes collapse-animation{0%{transform:translateY(20px)}to{transform:translate(0)}}\n"] }]
+            args: [{ selector: 'nas-journey-selection', template: "<div [nasClass]=\"getClass()\">\n  <div *ngIf=\"collapse; else expandedSelection\"\n    [nasClass]=\"getClass('collapsed', [animateDown === false && 'animate-up', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n\n    <div [nasClass]=\"getClass('destination')\">\n      <div [nasClass]=\"getClass('destination-image')\" #imageMain>\n        <label [nasClass]=\"getClass('destination-image-content')\">\n          <ng-container *ngIf=\"!deviceService?.isMobileWidth();\">\n            <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n          </ng-container>\n\n          <div [nasClass]=\"getClass('destination-image-sm')\" *ngIf=\"deviceService?.isMobileWidth()\">\n            <span [nasClass]=\"getClass('mobile-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\" [lightCircularBackground]=\"true\"></nas-icon>\n            </span>\n            <div [nasClass]=\"getClass('airport')\">\n              <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n              <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n                <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n                  {{stop}}&nbsp;-&nbsp;\n                </ng-container>\n              </span>\n              <span>{{model?.collapsed?.destination}}</span>\n            </div>\n          </div>\n        </label>\n      </div>\n    </div>\n\n    <section [nasClass]=\"getClass('flights')\">\n      <div [nasClass]=\"getClass('flights-information')\">\n        <div [nasClass]=\"getClass('airport')\">\n          <span>{{model?.collapsed?.origin}}&nbsp; - &nbsp;</span>\n\n          <span [nasClass]=\"getClass('stopover')\" *ngIf=\"model?.collapsed?.stopverAirportCodes\">\n            <ng-container *ngFor=\"let stop of model?.collapsed?.stopverAirportCodes\">\n              {{stop}}&nbsp;-&nbsp;\n            </ng-container>\n          </span>\n\n\n          <span>{{model?.collapsed?.destination}}</span>\n        </div>\n        <div *ngIf=\"model?.collapsed?.operatingCarriers\" [nasClass]=\"getClass('operators')\">\n          <label [nasClass]=\"getClass('operators', 'label')\">\n            {{model?.collapsed?.operatingCarriers?.label}}&nbsp;\n          </label>\n          <span [nasClass]=\"getClass('operators', 'text')\">\n            {{model?.collapsed?.operatingCarriers?.operators[0]}}\n          </span>\n          <output *ngIf=\"model?.collapsed?.operatingCarriers?.operators?.length > 1\"\n            [nasClass]=\"getClass('operators', 'count')\">\n            &nbsp; +{{model?.collapsed?.operatingCarriers?.operators?.length - 1}}\n          </output>\n        </div>\n      </div>\n\n      <div [nasClass]=\"getClass('change-flight')\">\n\n        <label [nasClass]=\"getClass('change-flight-content')\" *ngIf=\"deviceService?.isMobileWidth()\">\n          <ng-container *ngTemplateOutlet=\"flightInfo\"></ng-container>\n        </label>\n\n        <ng-template #flightInfo>\n          <summary [nasClass]=\"getClass('destination-image-caption')\">\n            <header [nasClass]=\"getClass('sub-title')\">\n              {{model?.collapsed?.title}}\n            </header>\n          </summary>\n\n          <section [nasClass]=\"getClass('journey')\">\n            <legend [nasClass]=\"getClass('journey-information')\">\n\n              <label>\n                {{model?.collapsed?.departureLabel}}:&nbsp;\n              </label>\n              <time>{{transformDisplayDate(model?.dateFormat)}}</time>\n            </legend>\n            <div>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.fromLabel}}:&nbsp;</label>\n                <span>{{model?.collapsed?.originDisplayName}}&nbsp;({{model?.collapsed?.origin}})</span>\n              </legend>\n              <legend [nasClass]=\"getClass('journey-information')\">\n                <label>{{model?.collapsed?.durationLabel}}:&nbsp;</label>\n                <time>{{model?.collapsed?.durationTimeInfo}},&nbsp;{{model?.collapsed?.transitionInfo}} </time>\n              </legend>\n            </div>\n          </section>\n        </ng-template>\n        <nas-button compact secondary (click)=\"changeFlightDate()\">{{model?.collapsed?.changeFlightLabel}}</nas-button>\n      </div>\n    </section>\n  </div>\n\n  <ng-template #expandedSelection>\n    <div [nasClass]=\"getClass('expanded', [animateDown && 'animate-down', exists(compact) && 'compact'])\" role=\"region\" [attr.aria-label]=\"ariaLabel\">\n      <figure [nasClass]=\"getClass('destination-code')\" #destinationCode>\n        <figcaption [nasClass]=\"getClass('destination-code-value', model?.expanded?.destination?.length > 3 && 'wrap-text')\" [innerHTML]=\"getDestinationCode()\">\n        </figcaption>\n      </figure>\n      <div [nasClass]=\"getClass('selection')\">\n        <label [nasClass]=\"getClass('heading')\">\n\n          <ng-container *ngIf=\"deviceService.isMobileWidth(); else desktopIcon\">\n            <ng-container *ngTemplateOutlet=\"desktopIcon\"></ng-container>\n          </ng-container>\n\n          <header [nasClass]=\"getClass('heading-text')\">\n            {{model?.expanded?.title}}\n          </header>\n          <span [nasClass]=\"getClass('heading-join')\">&nbsp;-&nbsp;</span>\n          <time [nasClass]=\"getClass('heading-time')\">\n            {{transformDisplayDate(model?.expanded?.dateFormat)}}\n          </time>\n\n          <ng-template #desktopIcon>\n            <span [nasClass]=\"getClass('heading-icon')\">\n              <nas-icon [icon]=\"model?.icon\" [type]=\"'small'\"></nas-icon>\n            </span>\n          </ng-template>\n\n        </label>\n        <summary [nasClass]=\"getClass('details')\">\n          <div>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.fromLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.originDisplayName}} ({{model?.expanded?.origin}})</span>\n            <span> | </span>\n            <label [nasClass]=\"getClass('details-label')\">{{model?.expanded?.toLabel}}:</label>\n            <span [nasClass]=\"getClass('details-value')\">{{model?.expanded?.destinationDisplayName}} ({{model?.expanded?.destination}})</span>\n          </div>\n        </summary>\n      </div>\n    </div>\n  </ng-template>\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-journey-selection__collapsed{display:flex;flex-direction:column;max-width:820px;margin:16px auto;background-color:#fff;perspective:1000px;box-shadow:0 5px 20px #0000001a}.nas-journey-selection__collapsed--animate-up{animation:collapse-animation .4s ease-out both}@media (min-width: 640px){.nas-journey-selection__collapsed{flex-direction:row}}.nas-journey-selection__collapsed--compact{margin:0 auto}.nas-journey-selection__destination{flex:1 1 50%;display:flex}.nas-journey-selection__destination-enter,.nas-journey-selection__destination-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__destination-enter{animation:flip-in .55s ease both}.nas-journey-selection__destination-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__destination--imagesize{height:100%;display:block}@media (min-width: 640px){.nas-journey-selection__destination--imagesize{height:300px;margin-bottom:0}}.nas-journey-selection__destination-image{position:relative;flex-shrink:0;width:100%;background-size:cover;background-position:center;background-color:#15273f}.nas-journey-selection__destination-image-content{padding:24px;margin-bottom:0;display:flex;flex-direction:column;justify-content:center;height:100%}.nas-journey-selection__destination-image-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 -12.4%,#15273f 95.51%)}.nas-journey-selection__destination-image-caption{display:flex;margin-bottom:6px}@media (min-width: 640px){.nas-journey-selection__destination-image-caption{margin-bottom:0}}.nas-journey-selection__destination-image-sm{display:flex;z-index:1;flex-direction:column;width:100%;align-items:center;justify-content:center}.nas-journey-selection__destination-image-sm .nas-journey-selection__mobile-icon{height:40px;margin-top:15px}.nas-journey-selection__destination-image-sm .nas-journey-selection__airport{margin-top:12px;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;color:#fff}@media (max-width: 639px){.nas-journey-selection__destination-image-sm .nas-journey-selection__airport{font-size:20px;line-height:28px}}.nas-journey-selection .nas-journey-selection__sub-title{z-index:1;text-align:left;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;align-self:center;margin-bottom:6px;width:100%}@media (max-width: 639px){.nas-journey-selection .nas-journey-selection__sub-title{font-size:20px;line-height:28px}}@media (min-width: 640px){.nas-journey-selection .nas-journey-selection__sub-title{color:#fff}}.nas-journey-selection__journey{z-index:1}.nas-journey-selection__journey-information{margin:0;display:flex}.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px}@media (min-width: 640px){.nas-journey-selection__journey-information time,.nas-journey-selection__journey-information span{color:#fff}}.nas-journey-selection__journey-information label{z-index:1;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#fff;display:inline-block;margin-bottom:0}.nas-journey-selection__flights{padding:6px;flex:1 1 50%;display:flex;flex-direction:column;justify-content:space-between;overflow-x:auto;background-color:#fff}.nas-journey-selection__flights-enter,.nas-journey-selection__flights-leave-active{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}.nas-journey-selection__flights-enter{animation:flip-in .55s ease both}.nas-journey-selection__flights-leave-active{animation:flip-out .2s ease-out both}.nas-journey-selection__flights .nas-journey-selection__airport{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;line-height:24px;margin-bottom:0}@media (max-width: 639px){.nas-journey-selection__flights .nas-journey-selection__airport{font-size:20px;line-height:28px}}.nas-journey-selection__flights .nas-journey-selection__airport .nas-journey-selection__stopover{position:relative;display:inline-block;color:#6f6f6f}.nas-journey-selection__flights-information{justify-content:space-between;padding-bottom:12px;border-bottom:2px solid #E9E7E4;display:flex;flex-direction:column;align-items:flex-start;display:none}.nas-journey-selection__flights-information .nas-journey-selection__operators--label,.nas-journey-selection__flights-information .nas-journey-selection__operators--text,.nas-journey-selection__flights-information .nas-journey-selection__operators--count{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:14px;line-height:20px;color:#15273f;display:inline}@media (min-width: 640px){.nas-journey-selection__flights-information{display:flex}}@media (min-width: 640px){.nas-journey-selection__flights{padding:24px}}.nas-journey-selection__change-flight{padding:12px}@media (min-width: 640px){.nas-journey-selection__change-flight{padding:0;margin-top:12px}}.nas-journey-selection__change-flight-content{margin-bottom:16px}@media (min-width: 640px){.nas-journey-selection__change-flight-content{margin-bottom:0}}.nas-journey-selection__change-flight-content label{color:#15273f;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-selection__expanded{max-width:820px;perspective:1000px;background-color:transparent;margin:16px auto;display:flex;align-items:center}.nas-journey-selection__expanded--animate-down{animation:expand-animation .4s ease-out both}.nas-journey-selection__expanded .nas-journey-selection__destination-code{width:60px;height:60px;border-radius:50%;position:relative;margin-right:24px;background-size:cover;vertical-align:top;display:flex;align-items:center;justify-content:center;background-color:#15273f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__destination-code{vertical-align:initial}}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:24px;line-height:32px;color:#fff;z-index:1}@media (max-width: 639px){.nas-journey-selection__expanded .nas-journey-selection__destination-code-value{font-size:20px;line-height:28px}}.nas-journey-selection__expanded .nas-journey-selection__destination-code-value--wrap-text{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;line-height:16px}.nas-journey-selection__expanded .nas-journey-selection__destination-code:after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-radius:50%;height:100%;max-height:100%;background:linear-gradient(180deg,#00325100 50%,#15273f 99%)}.nas-journey-selection__expanded .nas-journey-selection__selection{width:calc(100% - 85px);display:inline-block}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading{display:inline-block;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:24px;line-height:32px;vertical-align:center;padding-bottom:6px;margin-bottom:0;width:100%}@media (max-width: 639px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading{font-size:20px;line-height:28px}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-text{display:inline}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:none}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-join{display:inline-block}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:24px;line-height:32px;display:block;color:#6f6f6f}@media (max-width: 639px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{font-size:20px;line-height:28px}}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-time{display:inline-block;color:#15273f}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{float:initial;margin-right:11px;vertical-align:middle;position:relative}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__heading-icon{margin-right:initial;float:right}}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{padding-top:6px;border-top:2px solid #E9E7E4;display:none}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-right:6px;color:#6f6f6f}.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details-value{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:400;font-size:14px;line-height:20px;display:inline-block;color:#6f6f6f}@media (min-width: 640px){.nas-journey-selection__expanded .nas-journey-selection__selection .nas-journey-selection__details{display:block}}.nas-journey-selection__expanded--compact{margin:0 auto}::ng-deep .nas-journey-selection__destination-image-caption nas-icon{z-index:10;align-self:center;margin-right:20px;display:none}@media (min-width: 640px){::ng-deep .nas-journey-selection__destination-image-caption nas-icon{display:block}}::ng-deep .nas-journey-selection .nas-icon-small--light-background:after{top:-14.5px;left:-15px;width:55px;height:55px}::ng-deep .nas-journey-selection button.nas-button--compact{margin-bottom:0}@keyframes journey-selection-animation{0%{opacity:0}}@keyframes expand-animation{0%{transform:translateY(-20px)}to{transform:translate(0)}}@keyframes collapse-animation{0%{transform:translateY(20px)}to{transform:translate(0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DateHelper }, { type: i2.DatePipe }, { type: i3.DeviceHelper }, { type: i4.DomSanitizer }]; }, propDecorators: { imageMain: [{
                 type: ViewChild,
                 args: ['imageMain']

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

@@ -119,11 +119,11 @@ export class ModalComponent extends NasComponentBase {
         }, 30);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: i1.AnimateHelper }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "nas-modal", inputs: { form: "form", tight: "tight", center: "center", outlined: "outlined", title: "title", closeLabel: "closeLabel", animated: "animated", show: "show", enableClose: "enableClose", blockCloseOnClickOutside: "blockCloseOnClickOutside" }, outputs: { showChange: "showChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [nasClass]=\"getClass('', [exists(form) && 'form', exists(tight) && 'tight', exists(center) && 'center'])\"\n  *ngIf=\"show\">\n  <div #content\n    [nasClass]=\"getClass('content', [exists(outlined) && 'outlined'])\"\n    [ngStyle]=\"animation\"\n    tabindex=\"0\">\n    <nas-button *ngIf=\"enableClose\"\n      [overrideBaseCssClass]=\"true\"\n      [cssClass]=\"getClass('close')\"\n      [ariaLabel]=\"closeLabel\"\n      (clickChange)=\"onClose()\">\n      <nas-icon [type]=\"'remove'\"></nas-icon>\n    </nas-button>\n    <h2 [nasClass]=\"getClass('title')\"\n      *ngIf=\"title\">{{title}}</h2>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\"\n    #backdrop\n    [disabled]=\"!enableClose\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"onClose()\"\n    [disabled]=\"blockCloseOnClickOutside\"\n    [ngStyle]=\"backdropStyle\">{{closeLabel}}</button>\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-modal{position:fixed;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;z-index:40;max-height:98vh;overflow-y:scroll}@media (min-width: 640px){.nas-modal{padding:36px}}.nas-modal__title{margin-bottom:24px;font-size:24px;line-height:32px}.nas-modal__actions{display:flex;flex-wrap:wrap;align-items:baseline}.nas-modal__action{margin:16px 0 0}.nas-modal__action:not(:last-child){margin-right:24px}.nas-modal__content{position:relative;z-index:3;width:100%;max-width:600px;margin:auto;padding:24px;transform-origin:left top;box-shadow:0 0 50px #0000001a;background-color:#fff;outline:0}@media (min-width: 640px){.nas-modal__content{padding:36px}}.nas-modal__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .7s ease-out both;overflow-y:scroll}.nas-modal__close{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%}@media (min-width: 640px){.nas-modal__close{top:12px;right:12px}}.nas-modal__close:hover,.nas-modal__close:focus{z-index:100;background-color:#f8f8f8}.nas-modal--form .nas-modal__content{background-color:#e9e7e4}.nas-modal--form .nas-modal__backdrop{background-color:#0b14202b}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "component", type: i5.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalComponent, selector: "nas-modal", inputs: { form: "form", tight: "tight", center: "center", outlined: "outlined", title: "title", closeLabel: "closeLabel", animated: "animated", show: "show", enableClose: "enableClose", blockCloseOnClickOutside: "blockCloseOnClickOutside" }, outputs: { showChange: "showChange" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "backdrop", first: true, predicate: ["backdrop"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [nasClass]=\"getClass('', [exists(form) && 'form', exists(tight) && 'tight', exists(center) && 'center'])\"\n  *ngIf=\"show\">\n  <div #content\n    [nasClass]=\"getClass('content', [exists(outlined) && 'outlined'])\"\n    [ngStyle]=\"animation\"\n    tabindex=\"0\">\n    <nas-button *ngIf=\"enableClose\"\n      [overrideBaseCssClass]=\"true\"\n      [cssClass]=\"getClass('close')\"\n      [ariaLabel]=\"closeLabel\"\n      (clickChange)=\"onClose()\">\n      <nas-icon [type]=\"'remove'\"></nas-icon>\n    </nas-button>\n    <h2 [nasClass]=\"getClass('title')\"\n      *ngIf=\"title\">{{title}}</h2>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\"\n    #backdrop\n    [disabled]=\"!enableClose\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"onClose()\"\n    [disabled]=\"blockCloseOnClickOutside\"\n    [ngStyle]=\"backdropStyle\">{{closeLabel}}</button>\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-modal{position:fixed;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;z-index:40;max-height:98vh;overflow-y:scroll}@media (min-width: 640px){.nas-modal{padding:36px}}.nas-modal__title{margin-bottom:24px;font-size:24px;line-height:32px}@media (max-width: 639px){.nas-modal__title{font-size:20px;line-height:28px}}.nas-modal__actions{display:flex;flex-wrap:wrap;align-items:baseline}.nas-modal__action{margin:16px 0 0}.nas-modal__action:not(:last-child){margin-right:24px}.nas-modal__content{position:relative;z-index:3;width:100%;max-width:600px;margin:auto;padding:24px;transform-origin:left top;box-shadow:0 0 50px #0000001a;background-color:#fff;outline:0}@media (min-width: 640px){.nas-modal__content{padding:36px}}.nas-modal__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .7s ease-out both;overflow-y:scroll}.nas-modal__close{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%}@media (min-width: 640px){.nas-modal__close{top:12px;right:12px}}.nas-modal__close:hover,.nas-modal__close:focus{z-index:100;background-color:#f8f8f8}.nas-modal--form .nas-modal__content{background-color:#e9e7e4}.nas-modal--form .nas-modal__backdrop{background-color:#0b14202b}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "tertiary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "component", type: i5.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-modal', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClass('', [exists(form) && 'form', exists(tight) && 'tight', exists(center) && 'center'])\"\n  *ngIf=\"show\">\n  <div #content\n    [nasClass]=\"getClass('content', [exists(outlined) && 'outlined'])\"\n    [ngStyle]=\"animation\"\n    tabindex=\"0\">\n    <nas-button *ngIf=\"enableClose\"\n      [overrideBaseCssClass]=\"true\"\n      [cssClass]=\"getClass('close')\"\n      [ariaLabel]=\"closeLabel\"\n      (clickChange)=\"onClose()\">\n      <nas-icon [type]=\"'remove'\"></nas-icon>\n    </nas-button>\n    <h2 [nasClass]=\"getClass('title')\"\n      *ngIf=\"title\">{{title}}</h2>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\"\n    #backdrop\n    [disabled]=\"!enableClose\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"onClose()\"\n    [disabled]=\"blockCloseOnClickOutside\"\n    [ngStyle]=\"backdropStyle\">{{closeLabel}}</button>\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-modal{position:fixed;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;z-index:40;max-height:98vh;overflow-y:scroll}@media (min-width: 640px){.nas-modal{padding:36px}}.nas-modal__title{margin-bottom:24px;font-size:24px;line-height:32px}.nas-modal__actions{display:flex;flex-wrap:wrap;align-items:baseline}.nas-modal__action{margin:16px 0 0}.nas-modal__action:not(:last-child){margin-right:24px}.nas-modal__content{position:relative;z-index:3;width:100%;max-width:600px;margin:auto;padding:24px;transform-origin:left top;box-shadow:0 0 50px #0000001a;background-color:#fff;outline:0}@media (min-width: 640px){.nas-modal__content{padding:36px}}.nas-modal__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .7s ease-out both;overflow-y:scroll}.nas-modal__close{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%}@media (min-width: 640px){.nas-modal__close{top:12px;right:12px}}.nas-modal__close:hover,.nas-modal__close:focus{z-index:100;background-color:#f8f8f8}.nas-modal--form .nas-modal__content{background-color:#e9e7e4}.nas-modal--form .nas-modal__backdrop{background-color:#0b14202b}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'nas-modal', encapsulation: ViewEncapsulation.None, template: "<div [nasClass]=\"getClass('', [exists(form) && 'form', exists(tight) && 'tight', exists(center) && 'center'])\"\n  *ngIf=\"show\">\n  <div #content\n    [nasClass]=\"getClass('content', [exists(outlined) && 'outlined'])\"\n    [ngStyle]=\"animation\"\n    tabindex=\"0\">\n    <nas-button *ngIf=\"enableClose\"\n      [overrideBaseCssClass]=\"true\"\n      [cssClass]=\"getClass('close')\"\n      [ariaLabel]=\"closeLabel\"\n      (clickChange)=\"onClose()\">\n      <nas-icon [type]=\"'remove'\"></nas-icon>\n    </nas-button>\n    <h2 [nasClass]=\"getClass('title')\"\n      *ngIf=\"title\">{{title}}</h2>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\"\n    #backdrop\n    [disabled]=\"!enableClose\"\n    [nasClass]=\"getClass('backdrop')\"\n    (click)=\"onClose()\"\n    [disabled]=\"blockCloseOnClickOutside\"\n    [ngStyle]=\"backdropStyle\">{{closeLabel}}</button>\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-modal{position:fixed;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;z-index:40;max-height:98vh;overflow-y:scroll}@media (min-width: 640px){.nas-modal{padding:36px}}.nas-modal__title{margin-bottom:24px;font-size:24px;line-height:32px}@media (max-width: 639px){.nas-modal__title{font-size:20px;line-height:28px}}.nas-modal__actions{display:flex;flex-wrap:wrap;align-items:baseline}.nas-modal__action{margin:16px 0 0}.nas-modal__action:not(:last-child){margin-right:24px}.nas-modal__content{position:relative;z-index:3;width:100%;max-width:600px;margin:auto;padding:24px;transform-origin:left top;box-shadow:0 0 50px #0000001a;background-color:#fff;outline:0}@media (min-width: 640px){.nas-modal__content{padding:36px}}.nas-modal__backdrop{display:block;position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;color:transparent;background-color:#0b14202b;animation:fade-in .7s ease-out both;overflow-y:scroll}.nas-modal__close{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%}@media (min-width: 640px){.nas-modal__close{top:12px;right:12px}}.nas-modal__close:hover,.nas-modal__close:focus{z-index:100;background-color:#f8f8f8}.nas-modal--form .nas-modal__content{background-color:#e9e7e4}.nas-modal--form .nas-modal__backdrop{background-color:#0b14202b}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.AnimateHelper }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { form: [{
                 type: Input
             }], tight: [{

package/esm2022/lib/components/number-field/number-field.component.mjs

@@ -120,7 +120,7 @@ export class NumberFieldComponent extends NasComponentBase {
         return { icon: 'minus', styling: 'subtract', disabled: false };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberFieldComponent, selector: "nas-number-field", inputs: { id: "id", number: "number", max: "max", min: "min", label: "label", compact: "compact", spaceless: "spaceless", simple: "simple", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", hideInput: "hideInput", ariaLabelSubtract: "ariaLabelSubtract", ariaLabelAdd: "ariaLabelAdd", ariaLabel: "ariaLabel" }, outputs: { numberChange: "numberChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n  <div\n    [nasClass]=\"getClass('', [exists(compact) && 'compact', exists(spaceless) && 'spaceless', exists(simple) && 'simple', exists(hideInput) && 'hidden'])\">\n    <label [nasClass]=\"getClass('title')\" *ngIf=\"label\">{{label}}</label>\n    <div [nasClass]=\"getClass('wrapper')\">\n      <nas-button [id]=\"inputId + '__sub'\" [overrideBaseCssClass]=\"true\"\n        [cssClass]=\"getClass('button', getMinusConfig().styling)\" [disabled]=\"getMinusConfig().disabled\" [tabindex]=\"-1\"\n        [ariaLabel]=\"ariaLabelSubtract\" (clickChange)=\"subtract()\">\n        <nas-icon [type]=\"getMinusConfig().icon\"></nas-icon>\n      </nas-button>\n      <input #input [id]=\"inputId\" type=\"number\" [nasClass]=\"getClass('input')\" [attr.min]=\"min\" [attr.max]=\"max\"\n        [attr.value]=\"number\" [attr.aria-valuenow]=\"number\" [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\"\n        [attr.aria-label]=\"!ariaLabel ? label : ariaLabel\" [(ngModel)]=\"number\" (focus)=\"inputFocus()\"\n        (keydown.arrowright)=\"add()\" (keydown.arrowleft)=\"subtract()\">\n      <nas-button [id]=\"inputId + '__add'\" [overrideBaseCssClass]=\"true\"\n        [cssClass]=\"getClass('button', getPlusConfig().styling)\" [disabled]=\"getPlusConfig().disabled\" [tabindex]=\"-1\"\n        [ariaLabel]=\"ariaLabelAdd\" (clickChange)=\"add()\">\n        <nas-icon [type]=\"getPlusConfig().icon\"></nas-icon>\n      </nas-button>\n    </div>\n  </div>\n</ng-container>\n<ng-template #reactiveForm>\n  <div\n    [nasClass]=\"getClass('', [exists(compact) && 'compact', exists(spaceless) && 'spaceless', exists(simple) && 'simple', exists(hideInput) && 'hidden'])\"\n    [formGroup]=\"nasFormGroup\">\n    <label [nasClass]=\"getClass('title')\" *ngIf=\"label\">{{label}}</label>\n    <div [nasClass]=\"getClass('wrapper')\">\n      <nas-button [overrideBaseCssClass]=\"true\" [cssClass]=\"getClass('button', getMinusConfig().styling)\"\n        [id]=\"inputId + '__sub'\" [disabled]=\"getMinusConfig().disabled\" [tabindex]=\"-1\" [ariaLabel]=\"ariaLabelSubtract\"\n        (clickChange)=\"subtract()\">\n        <nas-icon [type]=\"getMinusConfig().icon\"></nas-icon>\n      </nas-button>\n      <input #input [id]=\"inputId\" type=\"number\" [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('input')\"\n        [attr.min]=\"min\" [attr.max]=\"max\" [attr.value]=\"number\" [attr.aria-valuenow]=\"number\" [attr.aria-valuemin]=\"min\"\n        [attr.aria-valuemax]=\"max\" [attr.aria-label]=\"!ariaLabel ? label : ariaLabel\" (focus)=\"inputFocus()\"\n        (keydown.arrowright)=\"add()\" (keydown.arrowleft)=\"subtract()\">\n      <nas-button [overrideBaseCssClass]=\"true\" [cssClass]=\"getClass('button',  getPlusConfig().styling)\"\n        [id]=\"inputId + '__add'\" [disabled]=\"getPlusConfig().disabled\" [tabindex]=\"-1\" [ariaLabel]=\"ariaLabelAdd\"\n        (clickChange)=\"add()\">\n        <nas-icon [type]=\"getPlusConfig().icon\"></nas-icon>\n      </nas-button>\n    </div>\n  </div>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-number-field{position:relative;display:inline-block;width:135px;max-width:100%;margin-bottom:24px}.nas-number-field__title{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;display:block;text-align:left}.nas-number-field__input{font-weight:700;font-size:16px;line-height:24px;color:#15273f;max-height:40px;text-align:center;flex-grow:2;flex-grow:0}.nas-number-field__input[type=number]{padding:0;width:40px;height:40px}.nas-number-field__button{flex-shrink:0;flex-grow:0;position:relative;padding:12px 0;height:40px;width:40px;color:transparent;overflow:hidden;background-color:#e9e7e4;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-number-field__button [class^=nas-icon-]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nas-number-field__button[disabled]{pointer-events:none;background-color:#e9e7e4}.nas-number-field__button--subtract{background-color:#e9e7e4}.nas-number-field__button--subtract--active{background-color:#15273f}.nas-number-field__button--add{background-color:#e9e7e4}.nas-number-field__button--add--active{background-color:#15273f}.nas-number-field__wrapper{position:relative;display:flex;height:40px}.nas-number-field--compact{width:108px}.nas-number-field--compact .nas-number-field__button{height:35px;width:36px}.nas-number-field--compact .nas-number-field__input{font-size:14px;line-height:20px;max-height:35px}.nas-number-field--compact .nas-number-field__input[type=number]{width:36px}.nas-number-field--compact .nas-number-field__title{font-size:14px;line-height:20px;margin-bottom:2px}.nas-number-field--compact .nas-number-field__wrapper{height:35px}.nas-number-field--spaceless{margin-bottom:0}.nas-number-field--hidden.nas-number-field--compact .nas-number-field__button{width:52.5px}.nas-number-field--hidden .nas-number-field__input{visibility:hidden}.nas-number-field--hidden .nas-number-field__input[type=number]{padding:0;width:3px}.nas-number-field--hidden .nas-number-field__button{width:66px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NumberFieldComponent, selector: "nas-number-field", inputs: { id: "id", number: "number", max: "max", min: "min", label: "label", compact: "compact", spaceless: "spaceless", simple: "simple", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", hideInput: "hideInput", ariaLabelSubtract: "ariaLabelSubtract", ariaLabelAdd: "ariaLabelAdd", ariaLabel: "ariaLabel" }, outputs: { numberChange: "numberChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormGroup || !nasFormControlName; else reactiveForm\">\n  <div\n    [nasClass]=\"getClass('', [exists(compact) && 'compact', exists(spaceless) && 'spaceless', exists(simple) && 'simple', exists(hideInput) && 'hidden'])\">\n    <label [nasClass]=\"getClass('title')\" *ngIf=\"label\">{{label}}</label>\n    <div [nasClass]=\"getClass('wrapper')\">\n      <nas-button [id]=\"inputId + '__sub'\" [overrideBaseCssClass]=\"true\"\n        [cssClass]=\"getClass('button', getMinusConfig().styling)\" [disabled]=\"getMinusConfig().disabled\" [tabindex]=\"-1\"\n        [ariaLabel]=\"ariaLabelSubtract\" (clickChange)=\"subtract()\">\n        <nas-icon [type]=\"getMinusConfig().icon\"></nas-icon>\n      </nas-button>\n      <input #input [id]=\"inputId\" type=\"number\" [nasClass]=\"getClass('input')\" [attr.min]=\"min\" [attr.max]=\"max\"\n        [attr.value]=\"number\" [attr.aria-valuenow]=\"number\" [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\"\n        [attr.aria-label]=\"!ariaLabel ? label : ariaLabel\" [(ngModel)]=\"number\" (focus)=\"inputFocus()\"\n        (keydown.arrowright)=\"add()\" (keydown.arrowleft)=\"subtract()\">\n      <nas-button [id]=\"inputId + '__add'\" [overrideBaseCssClass]=\"true\"\n        [cssClass]=\"getClass('button', getPlusConfig().styling)\" [disabled]=\"getPlusConfig().disabled\" [tabindex]=\"-1\"\n        [ariaLabel]=\"ariaLabelAdd\" (clickChange)=\"add()\">\n        <nas-icon [type]=\"getPlusConfig().icon\"></nas-icon>\n      </nas-button>\n    </div>\n  </div>\n</ng-container>\n<ng-template #reactiveForm>\n  <div\n    [nasClass]=\"getClass('', [exists(compact) && 'compact', exists(spaceless) && 'spaceless', exists(simple) && 'simple', exists(hideInput) && 'hidden'])\"\n    [formGroup]=\"nasFormGroup\">\n    <label [nasClass]=\"getClass('title')\" *ngIf=\"label\">{{label}}</label>\n    <div [nasClass]=\"getClass('wrapper')\">\n      <nas-button [overrideBaseCssClass]=\"true\" [cssClass]=\"getClass('button', getMinusConfig().styling)\"\n        [id]=\"inputId + '__sub'\" [disabled]=\"getMinusConfig().disabled\" [tabindex]=\"-1\" [ariaLabel]=\"ariaLabelSubtract\"\n        (clickChange)=\"subtract()\">\n        <nas-icon [type]=\"getMinusConfig().icon\"></nas-icon>\n      </nas-button>\n      <input #input [id]=\"inputId\" type=\"number\" [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('input')\"\n        [attr.min]=\"min\" [attr.max]=\"max\" [attr.value]=\"number\" [attr.aria-valuenow]=\"number\" [attr.aria-valuemin]=\"min\"\n        [attr.aria-valuemax]=\"max\" [attr.aria-label]=\"!ariaLabel ? label : ariaLabel\" (focus)=\"inputFocus()\"\n        (keydown.arrowright)=\"add()\" (keydown.arrowleft)=\"subtract()\">\n      <nas-button [overrideBaseCssClass]=\"true\" [cssClass]=\"getClass('button',  getPlusConfig().styling)\"\n        [id]=\"inputId + '__add'\" [disabled]=\"getPlusConfig().disabled\" [tabindex]=\"-1\" [ariaLabel]=\"ariaLabelAdd\"\n        (clickChange)=\"add()\">\n        <nas-icon [type]=\"getPlusConfig().icon\"></nas-icon>\n      </nas-button>\n    </div>\n  </div>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-number-field{position:relative;display:inline-block;width:135px;max-width:100%;margin-bottom:24px}.nas-number-field__title{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;display:block;text-align:left}.nas-number-field__input{font-weight:700;font-size:16px;line-height:24px;color:#15273f;max-height:40px;text-align:center;flex-grow:2;flex-grow:0}.nas-number-field__input[type=number]{padding:0;width:40px;height:40px}.nas-number-field__button{flex-shrink:0;flex-grow:0;position:relative;padding:12px 0;height:40px;width:40px;color:transparent;overflow:hidden;background-color:#e9e7e4;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-number-field__button [class^=nas-icon-]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nas-number-field__button[disabled]{pointer-events:none;background-color:#e9e7e4}.nas-number-field__button--subtract{background-color:#e9e7e4}.nas-number-field__button--subtract--active{background-color:#15273f}.nas-number-field__button--add{background-color:#e9e7e4}.nas-number-field__button--add--active{background-color:#15273f}.nas-number-field__wrapper{position:relative;display:flex;height:40px}.nas-number-field--compact{width:108px}.nas-number-field--compact .nas-number-field__button{height:35px;width:36px}.nas-number-field--compact .nas-number-field__input{font-size:14px;line-height:20px;max-height:35px}.nas-number-field--compact .nas-number-field__input[type=number]{width:36px}.nas-number-field--compact .nas-number-field__title{font-size:14px;line-height:20px;margin-bottom:2px}.nas-number-field--compact .nas-number-field__wrapper{height:35px}.nas-number-field--spaceless{margin-bottom:0}.nas-number-field--hidden.nas-number-field--compact .nas-number-field__button{width:52.5px}.nas-number-field--hidden .nas-number-field__input{visibility:hidden}.nas-number-field--hidden .nas-number-field__input[type=number]{padding:0;width:3px}.nas-number-field--hidden .nas-number-field__button{width:66px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "tertiary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,