@norwegian/core-components 7.4.2 → 7.4.4

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.1.5", 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.1.5", 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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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"] }, { 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.1.5", 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"] }, { kind: "component", type: i7.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", 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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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,Apercu,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}.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"] }]
         }], 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/journey-stopover/journey-stopover.component.mjs

@@ -104,11 +104,11 @@ export class JourneyStopoverComponent extends NasComponentBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: JourneyStopoverComponent, deps: [{ token: i1.DatePipe }, { token: i2.DateHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: JourneyStopoverComponent, selector: "nas-journey-stopover", inputs: { journeyStopoverModel: "journeyStopoverModel", transitLabel: "transitLabel", arrivalTimeLabel: "arrivalTimeLabel", departureTimeLabel: "departureTimeLabel", timeFormat: "timeFormat", dateFormat: "dateFormat", transitHoursIndicator: "transitHoursIndicator", transitMinutesIndicator: "transitMinutesIndicator", locale: "locale", timeZone: "timeZone" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [nasClass]=\"getClass()\" *ngIf=\"journeyStopoverModel\">\n  <span [nasClass]=\"lineClass\"></span>\n\n  <div [nasClass]=\"getClass('stopover-details')\">\n    <div\n      [nasClass]=\"getClass('', ['stopover-time'])\"\n      *ngIf=\"displayStopoverTime\"\n    >\n      {{ transitLabel }}\n      (<span *ngIf=\"stopoverTime?.numberOfHours\"\n        >{{ stopoverTime?.numberOfHours\n        }}{{ transitHoursIndicator }}&nbsp;</span\n      >\n      <span *ngIf=\"stopoverTime?.numberOfMinutes\"\n        >{{ stopoverTime?.numberOfMinutes }} {{ transitMinutesIndicator }}</span\n      >)\n    </div>\n    <div [nasClass]=\"getClass('', ['place'])\">\n      {{ journeyStopoverModel?.airportName }}\n      {{ journeyStopoverModel?.airportCode }}\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedArrivalTime, currentStopover?.estimatedArrivalDate)\">\n      <div [nasClass]=\"getClass('', ['arrival'])\">\n        <span>{{arrivalTimeLabel}} {{currentStopover?.arrivalDate}} {{currentStopover?.arrivalTime}}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedArrivalDate || currentStopover?.estimatedArrivalTime\">\n        {{ arrivalTimeLabel }} {{ currentStopover?.estimatedArrivalDate }}\n        {{ currentStopover?.estimatedArrivalTime }}\n      </div>\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedDepartureTime, currentStopover?.estimatedDepartureDate)\">\n      <div [nasClass]=\"getClass('', ['departure'])\">\n        <span>{{ departureTimeLabel }} {{ currentStopover?.departureDate }} {{ currentStopover?.departureTime }}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedDepartureDate || currentStopover?.estimatedDepartureTime\">\n        {{ departureTimeLabel }} {{ currentStopover?.estimatedDepartureDate }}\n        {{ currentStopover?.estimatedDepartureTime }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-journey-stopover{position:relative}.nas-journey-stopover__line{position:absolute;top:20px;left:-31px;background-image:radial-gradient(circle closest-side,#E9E7E4 6px,transparent 100%);background-position:0 100%;background-repeat:repeat-x;background-size:6px 10px}.nas-journey-stopover__line--transit-label{top:0}.nas-journey-stopover__line:before{content:\"\";position:absolute;left:-.5px;width:8px;height:8px;border-radius:50%}.nas-journey-stopover__line:before{top:25px;background-color:#15273f}.nas-journey-stopover .nas-journey-stopover__stopover-details{padding-top:15px;padding-bottom:15px}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--stopover-time{font-size:12px;font-weight:600}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place .nas-journey-stopover__airport-code{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;top:-.5em;letter-spacing:0;vertical-align:super}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time{color:#6f6f6f}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time span{text-decoration:line-through}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--estimated-time{color:#b12a0b}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: JourneyStopoverComponent, selector: "nas-journey-stopover", inputs: { journeyStopoverModel: "journeyStopoverModel", transitLabel: "transitLabel", arrivalTimeLabel: "arrivalTimeLabel", departureTimeLabel: "departureTimeLabel", timeFormat: "timeFormat", dateFormat: "dateFormat", transitHoursIndicator: "transitHoursIndicator", transitMinutesIndicator: "transitMinutesIndicator", locale: "locale", timeZone: "timeZone" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [nasClass]=\"getClass()\" *ngIf=\"journeyStopoverModel\">\n  <span [nasClass]=\"lineClass\"></span>\n\n  <div [nasClass]=\"getClass('stopover-details')\">\n    <div\n      [nasClass]=\"getClass('', ['stopover-time'])\"\n      *ngIf=\"displayStopoverTime\"\n    >\n      {{ transitLabel }}\n      (<span *ngIf=\"stopoverTime?.numberOfHours\"\n        >{{ stopoverTime?.numberOfHours\n        }}{{ transitHoursIndicator }}&nbsp;</span\n      >\n      <span *ngIf=\"stopoverTime?.numberOfMinutes\"\n        >{{ stopoverTime?.numberOfMinutes }} {{ transitMinutesIndicator }}</span\n      >)\n    </div>\n    <div [nasClass]=\"getClass('', ['place'])\">\n      {{ journeyStopoverModel?.airportName }}\n      {{ journeyStopoverModel?.airportCode }}\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedArrivalTime, currentStopover?.estimatedArrivalDate)\">\n      <div [nasClass]=\"getClass('', ['arrival'])\">\n        <span>{{arrivalTimeLabel}} {{currentStopover?.arrivalDate}} {{currentStopover?.arrivalTime}}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedArrivalDate || currentStopover?.estimatedArrivalTime\">\n        {{ arrivalTimeLabel }} {{ currentStopover?.estimatedArrivalDate }}\n        {{ currentStopover?.estimatedArrivalTime }}\n      </div>\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedDepartureTime, currentStopover?.estimatedDepartureDate)\">\n      <div [nasClass]=\"getClass('', ['departure'])\">\n        <span>{{ departureTimeLabel }} {{ currentStopover?.departureDate }} {{ currentStopover?.departureTime }}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedDepartureDate || currentStopover?.estimatedDepartureTime\">\n        {{ departureTimeLabel }} {{ currentStopover?.estimatedDepartureDate }}\n        {{ currentStopover?.estimatedDepartureTime }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-journey-stopover{position:relative}.nas-journey-stopover__line{position:absolute;top:20px;left:-31px;background-image:radial-gradient(circle closest-side,#E9E7E4 6px,transparent 100%);background-position:0 100%;background-repeat:repeat-x;background-size:6px 10px}.nas-journey-stopover__line--transit-label{top:0}.nas-journey-stopover__line:before{content:\"\";position:absolute;left:-.5px;width:8px;height:8px;border-radius:50%}.nas-journey-stopover__line:before{top:25px;background-color:#15273f}.nas-journey-stopover .nas-journey-stopover__stopover-details{padding-top:15px;padding-bottom:15px}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--stopover-time{font-size:12px;font-weight:600}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place .nas-journey-stopover__airport-code{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;top:-.5em;letter-spacing:0;vertical-align:super}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time{color:#6f6f6f}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time span{text-decoration:line-through}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--estimated-time{color:#b12a0b}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: JourneyStopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-journey-stopover', template: "<div [nasClass]=\"getClass()\" *ngIf=\"journeyStopoverModel\">\n  <span [nasClass]=\"lineClass\"></span>\n\n  <div [nasClass]=\"getClass('stopover-details')\">\n    <div\n      [nasClass]=\"getClass('', ['stopover-time'])\"\n      *ngIf=\"displayStopoverTime\"\n    >\n      {{ transitLabel }}\n      (<span *ngIf=\"stopoverTime?.numberOfHours\"\n        >{{ stopoverTime?.numberOfHours\n        }}{{ transitHoursIndicator }}&nbsp;</span\n      >\n      <span *ngIf=\"stopoverTime?.numberOfMinutes\"\n        >{{ stopoverTime?.numberOfMinutes }} {{ transitMinutesIndicator }}</span\n      >)\n    </div>\n    <div [nasClass]=\"getClass('', ['place'])\">\n      {{ journeyStopoverModel?.airportName }}\n      {{ journeyStopoverModel?.airportCode }}\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedArrivalTime, currentStopover?.estimatedArrivalDate)\">\n      <div [nasClass]=\"getClass('', ['arrival'])\">\n        <span>{{arrivalTimeLabel}} {{currentStopover?.arrivalDate}} {{currentStopover?.arrivalTime}}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedArrivalDate || currentStopover?.estimatedArrivalTime\">\n        {{ arrivalTimeLabel }} {{ currentStopover?.estimatedArrivalDate }}\n        {{ currentStopover?.estimatedArrivalTime }}\n      </div>\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedDepartureTime, currentStopover?.estimatedDepartureDate)\">\n      <div [nasClass]=\"getClass('', ['departure'])\">\n        <span>{{ departureTimeLabel }} {{ currentStopover?.departureDate }} {{ currentStopover?.departureTime }}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedDepartureDate || currentStopover?.estimatedDepartureTime\">\n        {{ departureTimeLabel }} {{ currentStopover?.estimatedDepartureDate }}\n        {{ currentStopover?.estimatedDepartureTime }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-journey-stopover{position:relative}.nas-journey-stopover__line{position:absolute;top:20px;left:-31px;background-image:radial-gradient(circle closest-side,#E9E7E4 6px,transparent 100%);background-position:0 100%;background-repeat:repeat-x;background-size:6px 10px}.nas-journey-stopover__line--transit-label{top:0}.nas-journey-stopover__line:before{content:\"\";position:absolute;left:-.5px;width:8px;height:8px;border-radius:50%}.nas-journey-stopover__line:before{top:25px;background-color:#15273f}.nas-journey-stopover .nas-journey-stopover__stopover-details{padding-top:15px;padding-bottom:15px}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--stopover-time{font-size:12px;font-weight:600}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place .nas-journey-stopover__airport-code{font-family:NorwegianTextPro,Arial,Apercu,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;top:-.5em;letter-spacing:0;vertical-align:super}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time{color:#6f6f6f}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time span{text-decoration:line-through}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--estimated-time{color:#b12a0b}\n"] }]
+            args: [{ selector: 'nas-journey-stopover', template: "<div [nasClass]=\"getClass()\" *ngIf=\"journeyStopoverModel\">\n  <span [nasClass]=\"lineClass\"></span>\n\n  <div [nasClass]=\"getClass('stopover-details')\">\n    <div\n      [nasClass]=\"getClass('', ['stopover-time'])\"\n      *ngIf=\"displayStopoverTime\"\n    >\n      {{ transitLabel }}\n      (<span *ngIf=\"stopoverTime?.numberOfHours\"\n        >{{ stopoverTime?.numberOfHours\n        }}{{ transitHoursIndicator }}&nbsp;</span\n      >\n      <span *ngIf=\"stopoverTime?.numberOfMinutes\"\n        >{{ stopoverTime?.numberOfMinutes }} {{ transitMinutesIndicator }}</span\n      >)\n    </div>\n    <div [nasClass]=\"getClass('', ['place'])\">\n      {{ journeyStopoverModel?.airportName }}\n      {{ journeyStopoverModel?.airportCode }}\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedArrivalTime, currentStopover?.estimatedArrivalDate)\">\n      <div [nasClass]=\"getClass('', ['arrival'])\">\n        <span>{{arrivalTimeLabel}} {{currentStopover?.arrivalDate}} {{currentStopover?.arrivalTime}}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedArrivalDate || currentStopover?.estimatedArrivalTime\">\n        {{ arrivalTimeLabel }} {{ currentStopover?.estimatedArrivalDate }}\n        {{ currentStopover?.estimatedArrivalTime }}\n      </div>\n    </div>\n    <div [nasClass]=\"getTimeClass(currentStopover?.estimatedDepartureTime, currentStopover?.estimatedDepartureDate)\">\n      <div [nasClass]=\"getClass('', ['departure'])\">\n        <span>{{ departureTimeLabel }} {{ currentStopover?.departureDate }} {{ currentStopover?.departureTime }}</span>\n      </div>\n      <div [nasClass]=\"getClass('', ['estimated-time'])\"  *ngIf=\"currentStopover?.estimatedDepartureDate || currentStopover?.estimatedDepartureTime\">\n        {{ departureTimeLabel }} {{ currentStopover?.estimatedDepartureDate }}\n        {{ currentStopover?.estimatedDepartureTime }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-journey-stopover{position:relative}.nas-journey-stopover__line{position:absolute;top:20px;left:-31px;background-image:radial-gradient(circle closest-side,#E9E7E4 6px,transparent 100%);background-position:0 100%;background-repeat:repeat-x;background-size:6px 10px}.nas-journey-stopover__line--transit-label{top:0}.nas-journey-stopover__line:before{content:\"\";position:absolute;left:-.5px;width:8px;height:8px;border-radius:50%}.nas-journey-stopover__line:before{top:25px;background-color:#15273f}.nas-journey-stopover .nas-journey-stopover__stopover-details{padding-top:15px;padding-bottom:15px}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--stopover-time{font-size:12px;font-weight:600}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--place .nas-journey-stopover__airport-code{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:14px;line-height:20px;top:-.5em;letter-spacing:0;vertical-align:super}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time{color:#6f6f6f}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--crossed-time span{text-decoration:line-through}.nas-journey-stopover .nas-journey-stopover__stopover-details .nas-journey-stopover--estimated-time{color:#b12a0b}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DatePipe }, { type: i2.DateHelper }]; }, propDecorators: { journeyStopoverModel: [{
                 type: Input
             }], transitLabel: [{

package/esm2022/lib/components/micro-button/micro-button.component.mjs

@@ -64,11 +64,11 @@ export class MicroButtonComponent extends NasComponentBase {
         this.clickChange.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MicroButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: MicroButtonComponent, selector: "nas-micro-button", inputs: { icon: "icon", iconType: "iconType", href: "href", target: "target", primary: "primary", secondary: "secondary", white: "white", disabled: "disabled", iconLeft: "iconLeft", trackingvalue: "trackingvalue", ariaLabel: "ariaLabel", tabindex: "tabindex", type: "type" }, outputs: { clickChange: "clickChange" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n  <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </a>\n</div>\n\n<ng-template #buttonTemplate>\n  <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </button>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e9e7e4}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #15273F}.nas-micro-button--secondary:hover,.nas-micro-button--secondary:focus{color:#0a2033;background-color:transparent}.nas-micro-button--secondary:active{color:#071622;background:transparent}.nas-micro-button--secondary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--secondary:hover{border-color:#0a2033}.nas-micro-button--secondary:active{border-color:#071622}.nas-micro-button--secondary[disabled]{border:2px solid #E9E7E4}.nas-micro-button--white{color:#15273f;background-color:#fff}.nas-micro-button--white:hover,.nas-micro-button--white:focus{color:#15273f;background-color:#f1f1f1}.nas-micro-button--white:active{color:#15273f;background:#f8f8f8}.nas-micro-button--white:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button__content{display:flex;justify-content:center;gap:4px}.nas-micro-button__content--reverse{flex-direction:row-reverse}.nas-micro-button__icon{transform:scale(.75)}.nas-micro-button ::ng-deep .nas-icon-small{margin:-3px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: MicroButtonComponent, selector: "nas-micro-button", inputs: { icon: "icon", iconType: "iconType", href: "href", target: "target", primary: "primary", secondary: "secondary", white: "white", disabled: "disabled", iconLeft: "iconLeft", trackingvalue: "trackingvalue", ariaLabel: "ariaLabel", tabindex: "tabindex", type: "type" }, outputs: { clickChange: "clickChange" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n  <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </a>\n</div>\n\n<ng-template #buttonTemplate>\n  <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </button>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e9e7e4}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #15273F}.nas-micro-button--secondary:hover,.nas-micro-button--secondary:focus{color:#0a2033;background-color:transparent}.nas-micro-button--secondary:active{color:#071622;background:transparent}.nas-micro-button--secondary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--secondary:hover{border-color:#0a2033}.nas-micro-button--secondary:active{border-color:#071622}.nas-micro-button--secondary[disabled]{border:2px solid #E9E7E4}.nas-micro-button--white{color:#15273f;background-color:#fff}.nas-micro-button--white:hover,.nas-micro-button--white:focus{color:#15273f;background-color:#f1f1f1}.nas-micro-button--white:active{color:#15273f;background:#f8f8f8}.nas-micro-button--white:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button__content{display:flex;justify-content:center;align-items:center;gap:4px}.nas-micro-button__content--reverse{flex-direction:row-reverse}.nas-micro-button__icon{transform:scale(.75)}.nas-micro-button ::ng-deep .nas-icon-small{margin:-3px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i3.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: MicroButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-micro-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n  <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </a>\n</div>\n\n<ng-template #buttonTemplate>\n  <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </button>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e9e7e4}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #15273F}.nas-micro-button--secondary:hover,.nas-micro-button--secondary:focus{color:#0a2033;background-color:transparent}.nas-micro-button--secondary:active{color:#071622;background:transparent}.nas-micro-button--secondary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--secondary:hover{border-color:#0a2033}.nas-micro-button--secondary:active{border-color:#071622}.nas-micro-button--secondary[disabled]{border:2px solid #E9E7E4}.nas-micro-button--white{color:#15273f;background-color:#fff}.nas-micro-button--white:hover,.nas-micro-button--white:focus{color:#15273f;background-color:#f1f1f1}.nas-micro-button--white:active{color:#15273f;background:#f8f8f8}.nas-micro-button--white:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button__content{display:flex;justify-content:center;gap:4px}.nas-micro-button__content--reverse{flex-direction:row-reverse}.nas-micro-button__icon{transform:scale(.75)}.nas-micro-button ::ng-deep .nas-icon-small{margin:-3px 0 0}\n"] }]
+            args: [{ selector: 'nas-micro-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"href; else buttonTemplate\" [nasClass]=\"getClass()\">\n  <a [nasClass]=\"getClasses('', modifiers)\" [href]=\"href\" [target]=\"target\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </a>\n</div>\n\n<ng-template #buttonTemplate>\n  <button #button [nasClass]=\"getClasses('', modifiers)\" [disabled]=\"exists(disabled)\" [attr.type]=\"type\"\n    [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" (click)=\"emitTrackingAndClickEvent($event)\">\n    <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n      <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n        <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n      </span>\n    </span>\n  </button>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-micro-button{display:flex;width:-webkit-max-content;width:max-content;padding:6px 12px;border-radius:4px;font-size:12px;font-weight:500;line-height:16px;border-bottom:0;height:32px}.nas-micro-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f}.nas-micro-button--primary{color:#fff;background-color:#15273f}.nas-micro-button--primary:hover,.nas-micro-button--primary:focus{color:#fff;background-color:#0a2033}.nas-micro-button--primary:active{color:#fff;background:#071622}.nas-micro-button--primary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--primary[disabled]{background-color:#e9e7e4}.nas-micro-button--secondary{color:#15273f;background-color:transparent;padding:4px 12px;border:2px solid #15273F}.nas-micro-button--secondary:hover,.nas-micro-button--secondary:focus{color:#0a2033;background-color:transparent}.nas-micro-button--secondary:active{color:#071622;background:transparent}.nas-micro-button--secondary:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button--secondary:hover{border-color:#0a2033}.nas-micro-button--secondary:active{border-color:#071622}.nas-micro-button--secondary[disabled]{border:2px solid #E9E7E4}.nas-micro-button--white{color:#15273f;background-color:#fff}.nas-micro-button--white:hover,.nas-micro-button--white:focus{color:#15273f;background-color:#f1f1f1}.nas-micro-button--white:active{color:#15273f;background:#f8f8f8}.nas-micro-button--white:focus-visible{outline:2px solid #2A5980;outline-offset:2px}.nas-micro-button__content{display:flex;justify-content:center;align-items:center;gap:4px}.nas-micro-button__content--reverse{flex-direction:row-reverse}.nas-micro-button__icon{transform:scale(.75)}.nas-micro-button ::ng-deep .nas-icon-small{margin:-3px 0 0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
                 type: Input
             }], iconType: [{

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.1.5", 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.1.5", 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:#f1f1f1}.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"] }, { 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.1.5", 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"] }, { 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.1.5", 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:#f1f1f1}.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}.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,11 +120,11 @@ export class NumberFieldComponent extends NasComponentBase {
         return { icon: 'minus', styling: 'subtract', disabled: false };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", 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,Apercu,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"] }, { 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.1.5", 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"] }, { 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.1.5", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-number-field', encapsulation: ViewEncapsulation.None, 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,Apercu,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"] }]
+            args: [{ selector: 'nas-number-field', encapsulation: ViewEncapsulation.None, 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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']

package/esm2022/lib/components/page-footer/page-footer.component.mjs

@@ -35,11 +35,11 @@ export class PageFooterComponent extends NasComponentBase {
         window.scrollTo(0, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PageFooterComponent, selector: "nas-page-footer", inputs: { links: "links", buttonText: "buttonText", hideButton: "hideButton", bottomText: "bottomText" }, usesInheritance: true, ngImport: i0, template: "<footer>\n  <hr />\n  <nas-grid>\n    <nas-col>\n      <nas-button *ngIf=\"!hideButton\"\n        right\n        (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n      </nas-button>\n      <ul class=\"list list--horizontal\">\n        <li *ngFor=\"let link of links\">\n          <a *ngIf=\"link.link\"\n            href=\"{{link.link}}\">{{link.title}}</a>\n        </li>\n      </ul>\n    </nas-col>\n    <nas-col *ngIf=\"bottomText\">\n      <div class=\"spacing-top\"\n        [innerHTML]=\"bottomText\"></div>\n    </nas-col>\n  </nas-grid>\n</footer>", 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)}}footer{background:#f1f1f1;position:relative;padding:60px 0}footer .list{margin-bottom:24px;margin-left:24px;padding-top:3px}footer .list--horizontal{margin-left:0}footer .list--horizontal>li{display:inline-block;margin-right:24px}footer .spacing-top{margin-top:36px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.GridComponent, selector: "nas-grid", inputs: ["right", "center", "stretch", "wide", "tight", "xtight", "xxtight", "spaceless", "mobileview", "nopadding", "nomargin", "colGroup"] }, { kind: "component", type: i5.ColComponent, selector: "nas-col", inputs: ["base", "md", "lg", "xl", "colSize"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PageFooterComponent, selector: "nas-page-footer", inputs: { links: "links", buttonText: "buttonText", hideButton: "hideButton", bottomText: "bottomText" }, usesInheritance: true, ngImport: i0, template: "<footer>\n  <hr />\n  <nas-grid>\n    <nas-col>\n      <nas-button *ngIf=\"!hideButton\"\n        right\n        (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n      </nas-button>\n      <ul class=\"list list--horizontal\">\n        <li *ngFor=\"let link of links\">\n          <a *ngIf=\"link.link\"\n            href=\"{{link.link}}\">{{link.title}}</a>\n        </li>\n      </ul>\n    </nas-col>\n    <nas-col *ngIf=\"bottomText\">\n      <div class=\"spacing-top\"\n        [innerHTML]=\"bottomText\"></div>\n    </nas-col>\n  </nas-grid>\n</footer>", 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)}}footer{background:#f8f8f8;position:relative;padding:60px 0}footer .list{margin-bottom:24px;margin-left:24px;padding-top:3px}footer .list--horizontal{margin-left:0}footer .list--horizontal>li{display:inline-block;margin-right:24px}footer .spacing-top{margin-top:36px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: i3.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"] }, { kind: "component", type: i4.GridComponent, selector: "nas-grid", inputs: ["right", "center", "stretch", "wide", "tight", "xtight", "xxtight", "spaceless", "mobileview", "nopadding", "nomargin", "colGroup"] }, { kind: "component", type: i5.ColComponent, selector: "nas-col", inputs: ["base", "md", "lg", "xl", "colSize"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PageFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-page-footer', encapsulation: ViewEncapsulation.None, template: "<footer>\n  <hr />\n  <nas-grid>\n    <nas-col>\n      <nas-button *ngIf=\"!hideButton\"\n        right\n        (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n      </nas-button>\n      <ul class=\"list list--horizontal\">\n        <li *ngFor=\"let link of links\">\n          <a *ngIf=\"link.link\"\n            href=\"{{link.link}}\">{{link.title}}</a>\n        </li>\n      </ul>\n    </nas-col>\n    <nas-col *ngIf=\"bottomText\">\n      <div class=\"spacing-top\"\n        [innerHTML]=\"bottomText\"></div>\n    </nas-col>\n  </nas-grid>\n</footer>", 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)}}footer{background:#f1f1f1;position:relative;padding:60px 0}footer .list{margin-bottom:24px;margin-left:24px;padding-top:3px}footer .list--horizontal{margin-left:0}footer .list--horizontal>li{display:inline-block;margin-right:24px}footer .spacing-top{margin-top:36px}\n"] }]
+            args: [{ selector: 'nas-page-footer', encapsulation: ViewEncapsulation.None, template: "<footer>\n  <hr />\n  <nas-grid>\n    <nas-col>\n      <nas-button *ngIf=\"!hideButton\"\n        right\n        (clickChange)=\"scrollToTop()\">{{buttonText}}<nas-icon icon=\"arrow-up\"></nas-icon>\n      </nas-button>\n      <ul class=\"list list--horizontal\">\n        <li *ngFor=\"let link of links\">\n          <a *ngIf=\"link.link\"\n            href=\"{{link.link}}\">{{link.title}}</a>\n        </li>\n      </ul>\n    </nas-col>\n    <nas-col *ngIf=\"bottomText\">\n      <div class=\"spacing-top\"\n        [innerHTML]=\"bottomText\"></div>\n    </nas-col>\n  </nas-grid>\n</footer>", 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)}}footer{background:#f8f8f8;position:relative;padding:60px 0}footer .list{margin-bottom:24px;margin-left:24px;padding-top:3px}footer .list--horizontal{margin-left:0}footer .list--horizontal>li{display:inline-block;margin-right:24px}footer .spacing-top{margin-top:36px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { links: [{
                 type: Input
             }], buttonText: [{