@norwegian/core-components 6.19.0 → 6.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/cover/cover.component.mjs +5 -5
- package/esm2022/lib/components/journey-availability/journey-availability.component.mjs +1 -1
- package/esm2022/lib/components/modal/modal.component.mjs +20 -3
- package/fesm2022/norwegian-core-components.mjs +24 -7
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/lib/components/cover/cover.component.d.ts +5 -5
- package/lib/components/modal/modal.component.d.ts +16 -1
- package/package.json +1 -1
|
@@ -2906,7 +2906,7 @@ class CoverComponent extends NasComponentBase {
|
|
|
2906
2906
|
getClasses() {
|
|
2907
2907
|
const classes = [
|
|
2908
2908
|
this.getClass('', [
|
|
2909
|
-
this.exists(this.
|
|
2909
|
+
this.exists(this.noIllustration) && 'no-illustration',
|
|
2910
2910
|
this.exists(this.spaceless) && 'spaceless',
|
|
2911
2911
|
this.exists(this.small) && 'small',
|
|
2912
2912
|
this.exists(this.fluid) && 'fluid',
|
|
@@ -2921,14 +2921,14 @@ class CoverComponent extends NasComponentBase {
|
|
|
2921
2921
|
return classes;
|
|
2922
2922
|
}
|
|
2923
2923
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2924
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CoverComponent, selector: "nas-cover", inputs: { wide: "wide",
|
|
2924
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CoverComponent, selector: "nas-cover", inputs: { wide: "wide", noIllustration: "noIllustration", spaceless: "spaceless", small: "small", title: "title", preamble: "preamble", cssClass: "cssClass", illustration: "illustration", fluid: "fluid", stripped: "stripped", description: "description", backLink: "backLink", useRouterLink: "useRouterLink" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClasses()\">\n <div *ngIf=\"backLink\">\n <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n </div>\n <header [nasClass]=\"getClass('header')\">\n <div [nasClass]=\"getClass('content')\">\n <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n <div [nasClass]=\"getClass('description')\">\n <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n <ng-template #descriptionContent>\n <ng-content select=\"[description]\"></ng-content>\n </ng-template>\n </div>\n </div>\n <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n <ng-content></ng-content>\n </div>\n </header>\n <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #003251}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#003251;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#003251;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--no-illustration .nas-cover__header{background-image:none}.nas-cover--no-illustration .nas-cover__additions{max-width:300px}.nas-cover--spaceless{margin-bottom:0}.nas-cover--small{margin-bottom:24px}.nas-cover--small .nas-cover__title{font-size:24px;line-height:30px}.nas-cover--small .nas-cover__header{height:auto;background-image:none;border-bottom:2px solid #003251}.nas-cover--small .nas-cover__additions{height:auto}.nas-cover--stripped .nas-cover__header{background-image:none;border-bottom:0}.nas-cover--fluid{max-width:100%}.nas-cover--fluid .nas-cover__header{padding-left:0;height:auto}.nas-cover--illustration .nas-cover__header{position:relative;background-image:none;height:114px}@media (min-width: 480px){.nas-cover--illustration .nas-cover__header{padding-right:240px}}@media (min-width: 1000px){.nas-cover--illustration .nas-cover__header{padding-right:270px}}.nas-cover--illustration .nas-cover__content{position:relative;z-index:2}::ng-deep .nas-cover .nas-icon-large{background-size:370px 150px}::ng-deep .nas-button--link{border-bottom:none;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "approve", "light", "large", "block", "flex", "compact", "right", "spaceless", "transparent", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target"], outputs: ["clickChange"] }] }); }
|
|
2925
2925
|
}
|
|
2926
2926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CoverComponent, decorators: [{
|
|
2927
2927
|
type: Component,
|
|
2928
|
-
args: [{ selector: 'nas-cover', template: "<div [nasClass]=\"getClasses()\">\n <div *ngIf=\"backLink\">\n <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n </div>\n <header [nasClass]=\"getClass('header')\">\n <div [nasClass]=\"getClass('content')\">\n <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n <div [nasClass]=\"getClass('description')\">\n <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n <ng-template #descriptionContent>\n <ng-content select=\"[description]\"></ng-content>\n </ng-template>\n </div>\n </div>\n <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n <ng-content></ng-content>\n </div>\n </header>\n <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #003251}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#003251;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#003251;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--
|
|
2928
|
+
args: [{ selector: 'nas-cover', template: "<div [nasClass]=\"getClasses()\">\n <div *ngIf=\"backLink\">\n <nas-icon [icon]=\"'arrow-left'\"></nas-icon>\n <nas-button link secondary [useRouterLink]=\"exists(useRouterLink)\"\n [href]=\"backLink.href\">{{backLink.text}}</nas-button>\n </div>\n <header [nasClass]=\"getClass('header')\">\n <div [nasClass]=\"getClass('content')\">\n <h1 [nasClass]=\"getClass('title')\">{{title}}</h1>\n <div [nasClass]=\"getClass('description')\">\n <ng-container *ngIf=\"description; else descriptionContent\">{{description}}</ng-container>\n <ng-template #descriptionContent>\n <ng-content select=\"[description]\"></ng-content>\n </ng-template>\n </div>\n </div>\n <nas-icon *ngIf=\"illustration\" type=\"large\" [icon]=\"illustration\" [nasClass]=\"getClass('illustration')\"></nas-icon>\n <div *ngIf=\"!illustration\" [nasClass]=\"getClass('additions')\">\n <ng-content></ng-content>\n </div>\n </header>\n <p *ngIf=\"preamble\" [nasClass]=\"getClass('preamble')\">{{preamble}}</p>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-cover{max-width:820px;margin:24px auto 36px}.nas-cover__header{display:flex;align-items:flex-end;height:90px;background-image:url(\"data:image/svg+xml,%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 340 200%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23e3e3e3%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecloud-1%3C%2Ftitle%3E%3Cpath class%3D%22cls-1%22 d%3D%22M44.6%2C199.8H338.2a35.81%2C35.81%2C0%2C0%2C0%2C1.8-11.4%2C36.87%2C36.87%2C0%2C0%2C0-36.9-36.9%2C37.48%2C37.48%2C0%2C0%2C0-11.2%2C1.7A54%2C54%2C0%2C0%2C0%2C267%2C127.3a36.91%2C36.91%2C0%2C0%2C0-27.9-20.6%2C34.35%2C34.35%2C0%2C0%2C0%2C.4-5.6%2C36.92%2C36.92%2C0%2C0%2C0-60.6-28.3%2C36.9%2C36.9%2C0%2C0%2C0-70.7%2C14.8A35.65%2C35.65%2C0%2C0%2C0%2C110%2C98.9c-1.3-.1-2.6-.2-3.9-.2a36.91%2C36.91%2C0%2C0%2C0-26%2C63.1%2C36.12%2C36.12%2C0%2C0%2C0-4.7%2C10.6A37.58%2C37.58%2C0%2C0%2C0%2C44.6%2C199.8Z%22%2F%3E%3Cpath class%3D%22cls-2%22 d%3D%22M33.5%2C174.2h0v-1.5a27.23%2C27.23%2C0%2C0%2C1%2C47-18.7%2C34.05%2C34.05%2C0%2C0%2C1%2C58.8%2C20.3h1.6a34%2C34%2C0%2C0%2C1%2C33%2C25.7H.5A34%2C34%2C0%2C0%2C1%2C33.5%2C174.2Z%22%2F%3E%3C%2Fsvg%3E\");background-size:125px 75px;background-position:right bottom;background-repeat:no-repeat;border-bottom:3px solid #003251}@media (min-width: 821px){.nas-cover__header{padding-left:0;background-size:170px 100px}}.nas-cover__content{flex-grow:2}.nas-cover__title{font-size:24px;line-height:30px;color:#003251;padding-bottom:36px}@media (min-width: 640px){.nas-cover__title{font-size:42px;line-height:42px}}.nas-cover__description{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;color:#003251;font-size:16px;line-height:26px;margin:-48px 0 3px}.nas-cover__additions{display:none;align-items:flex-end;justify-content:flex-end;margin-left:auto;flex-grow:1;flex-shrink:1;height:90px;padding:0 9px;max-width:260px}@media (min-width: 640px){.nas-cover__additions{display:flex}}.nas-cover__preamble{font-size:16px;line-height:26px;margin:12px 6px 24px}.nas-cover__illustration{position:absolute;right:0;bottom:0;margin-bottom:-4px;transform-origin:right bottom;transform:scale(.6);display:none}@media (min-width: 480px){.nas-cover__illustration{display:block}}@media (min-width: 1000px){.nas-cover__illustration{transform:scale(.7)}}.nas-cover--wide{max-width:1132px}.nas-cover--no-illustration .nas-cover__header{background-image:none}.nas-cover--no-illustration .nas-cover__additions{max-width:300px}.nas-cover--spaceless{margin-bottom:0}.nas-cover--small{margin-bottom:24px}.nas-cover--small .nas-cover__title{font-size:24px;line-height:30px}.nas-cover--small .nas-cover__header{height:auto;background-image:none;border-bottom:2px solid #003251}.nas-cover--small .nas-cover__additions{height:auto}.nas-cover--stripped .nas-cover__header{background-image:none;border-bottom:0}.nas-cover--fluid{max-width:100%}.nas-cover--fluid .nas-cover__header{padding-left:0;height:auto}.nas-cover--illustration .nas-cover__header{position:relative;background-image:none;height:114px}@media (min-width: 480px){.nas-cover--illustration .nas-cover__header{padding-right:240px}}@media (min-width: 1000px){.nas-cover--illustration .nas-cover__header{padding-right:270px}}.nas-cover--illustration .nas-cover__content{position:relative;z-index:2}::ng-deep .nas-cover .nas-icon-large{background-size:370px 150px}::ng-deep .nas-button--link{border-bottom:none;font-weight:700}\n"] }]
|
|
2929
2929
|
}], ctorParameters: function () { return []; }, propDecorators: { wide: [{
|
|
2930
2930
|
type: Input
|
|
2931
|
-
}],
|
|
2931
|
+
}], noIllustration: [{
|
|
2932
2932
|
type: Input
|
|
2933
2933
|
}], spaceless: [{
|
|
2934
2934
|
type: Input
|
|
@@ -8293,7 +8293,22 @@ class ModalComponent extends NasComponentBase {
|
|
|
8293
8293
|
* <nas-modal [animated]="'false'"></nas-modal>
|
|
8294
8294
|
*/
|
|
8295
8295
|
this.animated = true;
|
|
8296
|
+
/**
|
|
8297
|
+
* @property Input
|
|
8298
|
+
* @description
|
|
8299
|
+
* Used to show or hide the close button in the modal
|
|
8300
|
+
* @example
|
|
8301
|
+
* <nas-modal [enableClose]="true"></nas-modal>
|
|
8302
|
+
*/
|
|
8296
8303
|
this.enableClose = true;
|
|
8304
|
+
/**
|
|
8305
|
+
* @property Input
|
|
8306
|
+
* @description
|
|
8307
|
+
* Disabling the event click outside to close the modal.
|
|
8308
|
+
* @example
|
|
8309
|
+
* <nas-modal [blockCloseOnClickOutside]="true"></nas-modal>
|
|
8310
|
+
*/
|
|
8311
|
+
this.blockCloseOnClickOutside = false;
|
|
8297
8312
|
this.showChange = new EventEmitter();
|
|
8298
8313
|
}
|
|
8299
8314
|
ngOnInit() {
|
|
@@ -8345,11 +8360,11 @@ class ModalComponent extends NasComponentBase {
|
|
|
8345
8360
|
}, 30);
|
|
8346
8361
|
}
|
|
8347
8362
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ModalComponent, deps: [{ token: AnimateHelper }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8348
|
-
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" }, 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 [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:30px}.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:#0019292b;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:#e3e3e3}.nas-modal--form .nas-modal__backdrop{background-color:#000f18b3}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "approve", "light", "large", "block", "flex", "compact", "right", "spaceless", "transparent", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target"], outputs: ["clickChange"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8363
|
+
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:30px}.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:#0019292b;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:#e3e3e3}.nas-modal--form .nas-modal__backdrop{background-color:#000f18b3}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "link", "approve", "light", "large", "block", "flex", "compact", "right", "spaceless", "transparent", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target"], outputs: ["clickChange"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8349
8364
|
}
|
|
8350
8365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ModalComponent, decorators: [{
|
|
8351
8366
|
type: Component,
|
|
8352
|
-
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 [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:30px}.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:#0019292b;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:#e3e3e3}.nas-modal--form .nas-modal__backdrop{background-color:#000f18b3}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"] }]
|
|
8367
|
+
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:30px}.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:#0019292b;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:#e3e3e3}.nas-modal--form .nas-modal__backdrop{background-color:#000f18b3}.nas-modal--tight .nas-modal__content{max-width:460px}.nas-modal--center{display:flex;align-items:center}\n"] }]
|
|
8353
8368
|
}], ctorParameters: function () { return [{ type: AnimateHelper }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { form: [{
|
|
8354
8369
|
type: Input
|
|
8355
8370
|
}], tight: [{
|
|
@@ -8368,6 +8383,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
8368
8383
|
type: Input
|
|
8369
8384
|
}], enableClose: [{
|
|
8370
8385
|
type: Input
|
|
8386
|
+
}], blockCloseOnClickOutside: [{
|
|
8387
|
+
type: Input
|
|
8371
8388
|
}], showChange: [{
|
|
8372
8389
|
type: Output
|
|
8373
8390
|
}], content: [{
|
|
@@ -9826,7 +9843,7 @@ class JourneyAvailabilityComponent extends NasComponentBase {
|
|
|
9826
9843
|
}
|
|
9827
9844
|
}
|
|
9828
9845
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: JourneyAvailabilityComponent, deps: [{ token: i1.DatePipe }, { token: DeviceHelper }, { token: DateHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9829
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: JourneyAvailabilityComponent, selector: "nas-journey-availability", inputs: { model: "model", selected: "selected", locale: "locale", timeDisplayFormat: "timeDisplayFormat", timeZone: "timeZone", displayJourneyDetails: "displayJourneyDetails" }, outputs: { displayJourneyDetailsChange: "displayJourneyDetailsChange", journeyAvailabilityClick: "journeyAvailabilityClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"model\" [nasClass]=\"getClass()\">\n <div [nasClass]=\"getClass('journey-details')\">\n <nas-modal [(show)]=\"displayJourneyDetails\" animated center>\n <nas-trip-summary [tripSummaryModel]=\"model?.tripSummary\" [expandTitle]=\"model?.journeyDetails?.expandTitle\"\n [transitLabel]=\"model?.journeyDetails?.transitLabel\" [arrivalLabel]=\"model?.journeyDetails?.arrivalLabel\"\n [departureLabel]=\"model?.journeyDetails?.departureLabel\"\n [transitHoursIndicator]=\"model?.journeyDetails?.hoursIndicator\"\n [transitMinutesIndicator]=\"model?.journeyDetails?.minutesIndicator\">\n </nas-trip-summary>\n </nas-modal>\n </div>\n\n <div [nasClass]=\"getClass('item', selected && 'selected')\" (click)=\"emitClick($event)\" role=\"button\"\n aria-pressed=\"false\" tabindex=\"0\">\n <article [nasClass]=\"getClass('trigger', model?.badge && 'badge-padding')\">\n <div [nasClass]=\"getClass('badge')\" *ngIf=\"model?.badge\">\n <span [nasClass]=\"getClass('badge-label')\">\n {{ model?.badgeLabel }}\n </span>\n </div>\n\n <div [nasClass]=\"getClass('overview')\">\n <div [nasClass]=\"getClass('overview-details')\">\n <section [nasClass]=\"getClass('flight-time')\" #journeyDetails>\n <div [nasClass]=\"getClass('flight-time-from-to')\">\n <div [nasClass]=\"getClass('flight-time-when')\">\n <div [nasClass]=\"getClass('flight-time-when-departure')\">\n <time #departureTimeText>\n {{ currentJourney?.departureTime }}\n </time>\n </div>\n\n <span> - </span>\n <div [nasClass]=\"getClass('flight-time-when-arrival')\">\n <time>{{ currentJourney?.arrivalTime }}</time>\n </div>\n </div>\n <div *ngIf=\"!isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n </div>\n <ng-container *ngIf=\"isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n </ng-container>\n </div>\n <div [nasClass]=\"getClass('flight-time-info')\" *ngIf=\"model?.journeyInfoLabel\">\n <span [nasClass]=\"getClass('flight-time-info-link-wrapper')\" (click)=\"toggleJourneyInfoDetails($event)\">\n <a [nasClass]=\"getClass('flight-time-info-link')\">\n {{ model?.journeyInfoLabel }}\n </a>\n </span>\n </div>\n </section>\n\n <div [nasClass]=\"getClass('selected-info')\">\n <div [nasClass]=\"getClass('selected-info', 'time-duration')\">\n <section *ngIf=\"!isSmallScreen\" [nasClass]=\"getClass('selected-info-graph')\"></section>\n <section [nasClass]=\"getClass('journey')\">\n <ng-container *ngIf=\"!isSmallScreen\">\n <div [nasClass]=\"getClass('journey-info')\" *ngIf=\"\n model?.journeyTransitInfo?.transitCount;\n else directFlightLabel\n \">\n <mark [nasClass]=\"getClass('journey-info-stops')\">\n {{ model?.journeyTransitInfo?.transitCount }}\n {{ model?.journeyTransitInfo?.transitLabel }}\n </mark>\n\n <span *ngIf=\"isSmallScreen\">, </span>\n\n <mark [nasClass]=\"getClass('journey-info-stops-details')\">\n {{ model?.journeyTransitInfo?.transitDetails }}\n </mark>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n </ng-container>\n\n <ng-template #airportCodes>\n <summary [nasClass]=\"getClass('flight-time-when-airports')\">\n {{ model?.origin }}-\n\n <span [nasClass]=\"\n getClass('flight-time-when-airports-stopovers')\n \" *ngIf=\"model?.stopovers\">\n <ng-container *ngFor=\"let stop of model?.stopovers\">\n {{ stop }} -\n </ng-container>\n </span>\n {{ model?.destination }}\n </summary>\n </ng-template>\n\n <ng-template #directFlightLabel>\n <div [nasClass]=\"getClass('journey-info')\">\n <mark [nasClass]=\"getClass('journey-info-stops')\">\n {{ model?.directLabel\n }}<span [nasClass]=\"getClass('journey-info-stops-format')\">, </span>\n </mark>\n </div>\n </ng-template>\n\n <figure *ngIf=\"!isSmallScreen; else journeyIcon\" [nasClass]=\"getClass('md-icon')\">\n <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n </figure>\n </section>\n </div>\n <div [nasClass]=\"getClass('operated-by')\" *ngIf=\"model?.operatingCarriers\">\n <label>{{ model?.operatingCarriers?.label }}\n <mark *ngFor=\"\n let operator of model?.operatingCarriers.operators;\n index as operatorIndex\n \">\n {{ operator\n }}<span *ngIf=\"\n model?.operatingCarriers?.operators?.length >\n operatorIndex + 1\n \">,</span>\n </mark>\n </label>\n </div>\n </div>\n\n <ng-template #TotalFlightTime>\n <section [nasClass]=\"getClass('flight-time-details')\">\n <label [nasClass]=\"getClass('flight-time-details-label')\">\n {{ model?.duration?.durationLabel }}\n </label>\n <time [nasClass]=\"getClass('flight-time-details-text')\">\n {{ model?.duration?.durationText }}\n </time>\n <time [nasClass]=\"getClass('flight-time-details-count')\" *ngIf=\"model?.duration?.dayCount\">\n +{{ model.duration.dayCount }} {{ model.duration.dayLabel }}\n </time>\n </section>\n </ng-template>\n\n <ng-template #journeyIcon>\n <figure [nasClass]=\"getClass('mobile-icon')\">\n <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n </figure>\n </ng-template>\n </div>\n </div>\n </article>\n </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-journey-availability{width:100%;background:#f1f1f1;position:relative;transform:all 3s;transition-duration:.3s}.nas-journey-availability--detailed-info{margin:auto 12px;width:auto}.nas-journey-availability__item{max-width:100%;perspective:1000px;background-color:#fff;outline:none;margin-bottom:2px;transform:all 3s;transition-duration:.3s}.nas-journey-availability__item:focus{transform:all 3s;transition-duration:.3s;box-shadow:0 0 0 3px #003251}.nas-journey-availability__item--selected{margin-top:12px;margin-bottom:12px}.nas-journey-availability__trigger{display:flex;align-items:stretch;justify-content:space-between;text-align:left;width:100%;flex:1;outline:0;padding:12px}@media (min-width: 1000px){.nas-journey-availability__trigger{padding:12px 12px 12px 36px}}.nas-journey-availability__trigger--badge-padding{padding:36px 12px 12px}@media (min-width: 1000px){.nas-journey-availability__trigger--badge-padding{padding:12px 12px 12px 36px}}.nas-journey-availability__badge{background-color:#e0ebff;margin:0;position:relative;position:absolute;left:0px;right:0px;top:0px;padding:3px;text-align:center}.nas-journey-availability__badge-label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#003251;text-transform:uppercase}@media (min-width: 1000px){.nas-journey-availability__badge-label{transform:rotate(270deg);transform-origin:0 0;float:left;position:absolute;left:3px;bottom:5px}}@media (min-width: 1000px){.nas-journey-availability__badge{position:relative;width:24px;min-width:24px;margin:-12px 12px -12px -36px}}.nas-journey-availability__overview{display:flex;width:100%;padding-right:9px;flex:2 1 auto}@media (min-width: 1000px){.nas-journey-availability__overview{flex-wrap:wrap}}.nas-journey-availability__overview-details{display:flex;flex-wrap:wrap;justify-content:space-between;flex:1}@media (min-width: 1000px){.nas-journey-availability__overview-details{width:100%;max-width:100%;flex:auto}}.nas-journey-availability__overview-details .nas-journey-availability__mobile-icon{position:absolute;right:20px;bottom:16px}.nas-journey-availability__overview-details .nas-journey-availability__info-details{cursor:pointer}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon{cursor:pointer;padding:6px}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon span{cursor:pointer}.nas-journey-availability__flight-time{display:flex;flex:1;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time{display:block;flex:1 1 60%}}.nas-journey-availability__flight-time-when{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:24px;line-height:30px;margin-top:-2px;color:#003251;display:flex;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time-when{display:inline-block;justify-content:initial}}.nas-journey-availability__flight-time-when-arrival,.nas-journey-availability__flight-time-when-departure{display:inline}.nas-journey-availability__flight-time-when-airports{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;flex:0 0 100%;color:#003251}@media (min-width: 1000px){.nas-journey-availability__flight-time-when-airports{flex:initial}}.nas-journey-availability__flight-time-when-airports-stopovers{color:#6f6f6f}.nas-journey-availability__flight-time-details{font-size:18px;line-height:26px;display:inline-block}.nas-journey-availability__flight-time-details-label{color:#003251;display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-label{display:inline}}.nas-journey-availability__flight-time-details-text{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-journey-availability__flight-time-details-count{display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-count{display:inline-block}}@media (min-width: 1000px){.nas-journey-availability__flight-time-details{padding-top:1px;padding-bottom:3px;display:initial}}.nas-journey-availability__flight-time-from-to{padding-right:24px}.nas-journey-availability__flight-time-info{margin-left:auto;justify-self:flex-end;text-align:end;font-size:14px;line-height:20px;padding-top:6px}.nas-journey-availability__flight-time-info-link-wrapper{cursor:pointer;padding:6px 0 12px 12px}@media (min-width: 1000px){.nas-journey-availability__flight-time-info-link-wrapper{padding:6px 0 0}}.nas-journey-availability__flight-time-info-link{color:#b12a0b;border-bottom-color:#d8d8d8}.nas-journey-availability__flight-time-info-link:hover{border-bottom-color:#003251}@media (min-width: 1000px){.nas-journey-availability__flight-time-info{position:absolute;bottom:12px}}.nas-journey-availability__journey-figure{margin-top:12px;max-height:12px}@media (min-width: 1000px){.nas-journey-availability__journey-figure{margin-top:0;max-height:initial}}.nas-journey-availability__selected-info{display:flex;flex:0 0 100%;flex-wrap:wrap}@media (min-width: 1000px){.nas-journey-availability__selected-info{flex:1 1 40%}}@media (min-width: 1000px){.nas-journey-availability__selected-info-graph{align-self:center}}.nas-journey-availability__journey mark{background-color:transparent}.nas-journey-availability__journey-label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#003251;white-space:nowrap;display:inline}.nas-journey-availability__journey-airport{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-availability__journey-info{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:18px;line-height:26px;display:inline-block;vertical-align:top}@media (min-width: 1000px){.nas-journey-availability__journey-info{display:block}}.nas-journey-availability__journey-info-stops{display:inline-block;margin-bottom:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#003251}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#6f6f6f}}.nas-journey-availability__journey-info-stops-format{display:inline;color:#6f6f6f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-format{display:none}}.nas-journey-availability__journey-info-stops-details{display:none}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-details{display:inline}}@media (min-width: 1000px){.nas-journey-availability__journey .nas-journey-availability__md-icon{min-height:22px}}.nas-journey-availability__operated-by{font-size:14px;line-height:20px;display:none}@media (min-width: 1000px){.nas-journey-availability__operated-by{display:block;flex:0 0 100%;display:inline-block;margin-top:6px}}.nas-journey-availability__operated-by label,.nas-journey-availability__operated-by caption{display:inline}.nas-journey-availability__operated-by mark{background-color:transparent}.nas-journey-availability__stopover{transform:rotate(90deg)}@media (min-width: 1000px){.nas-journey-availability__stopover{transform:rotate(0);align-self:center;margin-right:12px}}.nas-journey-availability__animate{display:block}.nas-journey-availability__animate--animate{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.48s}.nas-journey-availability__animate--animate:nth-child(1){animation-delay:.18s}.nas-journey-availability__animate--animate:nth-child(2){animation-delay:.21s}.nas-journey-availability__animate--animate:nth-child(3){animation-delay:.24s}.nas-journey-availability__animate--animate:nth-child(4){animation-delay:.27s}.nas-journey-availability__animate--animate:nth-child(5){animation-delay:.3s}.nas-journey-availability__animate--animate:nth-child(6){animation-delay:.33s}.nas-journey-availability__animate--animate:nth-child(7){animation-delay:.36s}.nas-journey-availability__animate--animate:nth-child(8){animation-delay:.39s}.nas-journey-availability__animate--animate:nth-child(9){animation-delay:.42s}.nas-journey-availability__animate--animate:nth-child(10){animation-delay:.45s}@keyframes arrival-fly-in{0%{opacity:0;transform:translate(-260px,-100px) rotate(10deg)}25%{opacity:1}}@keyframes departure-fly-off{75%{opacity:1}to{opacity:0;transform:translate(260px,-100px) rotate(-20deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: ModalComponent, selector: "nas-modal", inputs: ["form", "tight", "center", "outlined", "title", "closeLabel", "animated", "show", "enableClose"], outputs: ["showChange"] }, { kind: "component", type: TripSummaryComponent, selector: "nas-trip-summary", inputs: ["tripSummaryModel", "expanded", "collapsable", "displayMinimumInfo", "expandTitle", "arrivalLabel", "departureLabel", "arrivalEstimatedLabel", "departureEstimatedLabel", "dateFormat", "timeFormat", "transitHoursIndicator", "transitMinutesIndicator", "transitLabel", "locale", "timeZone"] }] }); }
|
|
9846
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: JourneyAvailabilityComponent, selector: "nas-journey-availability", inputs: { model: "model", selected: "selected", locale: "locale", timeDisplayFormat: "timeDisplayFormat", timeZone: "timeZone", displayJourneyDetails: "displayJourneyDetails" }, outputs: { displayJourneyDetailsChange: "displayJourneyDetailsChange", journeyAvailabilityClick: "journeyAvailabilityClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"model\" [nasClass]=\"getClass()\">\n <div [nasClass]=\"getClass('journey-details')\">\n <nas-modal [(show)]=\"displayJourneyDetails\" animated center>\n <nas-trip-summary [tripSummaryModel]=\"model?.tripSummary\" [expandTitle]=\"model?.journeyDetails?.expandTitle\"\n [transitLabel]=\"model?.journeyDetails?.transitLabel\" [arrivalLabel]=\"model?.journeyDetails?.arrivalLabel\"\n [departureLabel]=\"model?.journeyDetails?.departureLabel\"\n [transitHoursIndicator]=\"model?.journeyDetails?.hoursIndicator\"\n [transitMinutesIndicator]=\"model?.journeyDetails?.minutesIndicator\">\n </nas-trip-summary>\n </nas-modal>\n </div>\n\n <div [nasClass]=\"getClass('item', selected && 'selected')\" (click)=\"emitClick($event)\" role=\"button\"\n aria-pressed=\"false\" tabindex=\"0\">\n <article [nasClass]=\"getClass('trigger', model?.badge && 'badge-padding')\">\n <div [nasClass]=\"getClass('badge')\" *ngIf=\"model?.badge\">\n <span [nasClass]=\"getClass('badge-label')\">\n {{ model?.badgeLabel }}\n </span>\n </div>\n\n <div [nasClass]=\"getClass('overview')\">\n <div [nasClass]=\"getClass('overview-details')\">\n <section [nasClass]=\"getClass('flight-time')\" #journeyDetails>\n <div [nasClass]=\"getClass('flight-time-from-to')\">\n <div [nasClass]=\"getClass('flight-time-when')\">\n <div [nasClass]=\"getClass('flight-time-when-departure')\">\n <time #departureTimeText>\n {{ currentJourney?.departureTime }}\n </time>\n </div>\n\n <span> - </span>\n <div [nasClass]=\"getClass('flight-time-when-arrival')\">\n <time>{{ currentJourney?.arrivalTime }}</time>\n </div>\n </div>\n <div *ngIf=\"!isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n </div>\n <ng-container *ngIf=\"isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n </ng-container>\n </div>\n <div [nasClass]=\"getClass('flight-time-info')\" *ngIf=\"model?.journeyInfoLabel\">\n <span [nasClass]=\"getClass('flight-time-info-link-wrapper')\" (click)=\"toggleJourneyInfoDetails($event)\">\n <a [nasClass]=\"getClass('flight-time-info-link')\">\n {{ model?.journeyInfoLabel }}\n </a>\n </span>\n </div>\n </section>\n\n <div [nasClass]=\"getClass('selected-info')\">\n <div [nasClass]=\"getClass('selected-info', 'time-duration')\">\n <section *ngIf=\"!isSmallScreen\" [nasClass]=\"getClass('selected-info-graph')\"></section>\n <section [nasClass]=\"getClass('journey')\">\n <ng-container *ngIf=\"!isSmallScreen\">\n <div [nasClass]=\"getClass('journey-info')\" *ngIf=\"\n model?.journeyTransitInfo?.transitCount;\n else directFlightLabel\n \">\n <mark [nasClass]=\"getClass('journey-info-stops')\">\n {{ model?.journeyTransitInfo?.transitCount }}\n {{ model?.journeyTransitInfo?.transitLabel }}\n </mark>\n\n <span *ngIf=\"isSmallScreen\">, </span>\n\n <mark [nasClass]=\"getClass('journey-info-stops-details')\">\n {{ model?.journeyTransitInfo?.transitDetails }}\n </mark>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"TotalFlightTime\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isSmallScreen\">\n <ng-container *ngTemplateOutlet=\"airportCodes\"></ng-container>\n </ng-container>\n\n <ng-template #airportCodes>\n <summary [nasClass]=\"getClass('flight-time-when-airports')\">\n {{ model?.origin }}-\n\n <span [nasClass]=\"\n getClass('flight-time-when-airports-stopovers')\n \" *ngIf=\"model?.stopovers\">\n <ng-container *ngFor=\"let stop of model?.stopovers\">\n {{ stop }} -\n </ng-container>\n </span>\n {{ model?.destination }}\n </summary>\n </ng-template>\n\n <ng-template #directFlightLabel>\n <div [nasClass]=\"getClass('journey-info')\">\n <mark [nasClass]=\"getClass('journey-info-stops')\">\n {{ model?.directLabel\n }}<span [nasClass]=\"getClass('journey-info-stops-format')\">, </span>\n </mark>\n </div>\n </ng-template>\n\n <figure *ngIf=\"!isSmallScreen; else journeyIcon\" [nasClass]=\"getClass('md-icon')\">\n <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n </figure>\n </section>\n </div>\n <div [nasClass]=\"getClass('operated-by')\" *ngIf=\"model?.operatingCarriers\">\n <label>{{ model?.operatingCarriers?.label }}\n <mark *ngFor=\"\n let operator of model?.operatingCarriers.operators;\n index as operatorIndex\n \">\n {{ operator\n }}<span *ngIf=\"\n model?.operatingCarriers?.operators?.length >\n operatorIndex + 1\n \">,</span>\n </mark>\n </label>\n </div>\n </div>\n\n <ng-template #TotalFlightTime>\n <section [nasClass]=\"getClass('flight-time-details')\">\n <label [nasClass]=\"getClass('flight-time-details-label')\">\n {{ model?.duration?.durationLabel }}\n </label>\n <time [nasClass]=\"getClass('flight-time-details-text')\">\n {{ model?.duration?.durationText }}\n </time>\n <time [nasClass]=\"getClass('flight-time-details-count')\" *ngIf=\"model?.duration?.dayCount\">\n +{{ model.duration.dayCount }} {{ model.duration.dayLabel }}\n </time>\n </section>\n </ng-template>\n\n <ng-template #journeyIcon>\n <figure [nasClass]=\"getClass('mobile-icon')\">\n <nas-icon *ngIf=\"model?.journeyTransitInfo?.transitCount\" [type]=\"getIconType()\"></nas-icon>\n </figure>\n </ng-template>\n </div>\n </div>\n </article>\n </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-journey-availability{width:100%;background:#f1f1f1;position:relative;transform:all 3s;transition-duration:.3s}.nas-journey-availability--detailed-info{margin:auto 12px;width:auto}.nas-journey-availability__item{max-width:100%;perspective:1000px;background-color:#fff;outline:none;margin-bottom:2px;transform:all 3s;transition-duration:.3s}.nas-journey-availability__item:focus{transform:all 3s;transition-duration:.3s;box-shadow:0 0 0 3px #003251}.nas-journey-availability__item--selected{margin-top:12px;margin-bottom:12px}.nas-journey-availability__trigger{display:flex;align-items:stretch;justify-content:space-between;text-align:left;width:100%;flex:1;outline:0;padding:12px}@media (min-width: 1000px){.nas-journey-availability__trigger{padding:12px 12px 12px 36px}}.nas-journey-availability__trigger--badge-padding{padding:36px 12px 12px}@media (min-width: 1000px){.nas-journey-availability__trigger--badge-padding{padding:12px 12px 12px 36px}}.nas-journey-availability__badge{background-color:#e0ebff;margin:0;position:relative;position:absolute;left:0px;right:0px;top:0px;padding:3px;text-align:center}.nas-journey-availability__badge-label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;color:#003251;text-transform:uppercase}@media (min-width: 1000px){.nas-journey-availability__badge-label{transform:rotate(270deg);transform-origin:0 0;float:left;position:absolute;left:3px;bottom:5px}}@media (min-width: 1000px){.nas-journey-availability__badge{position:relative;width:24px;min-width:24px;margin:-12px 12px -12px -36px}}.nas-journey-availability__overview{display:flex;width:100%;padding-right:9px;flex:2 1 auto}@media (min-width: 1000px){.nas-journey-availability__overview{flex-wrap:wrap}}.nas-journey-availability__overview-details{display:flex;flex-wrap:wrap;justify-content:space-between;flex:1}@media (min-width: 1000px){.nas-journey-availability__overview-details{width:100%;max-width:100%;flex:auto}}.nas-journey-availability__overview-details .nas-journey-availability__mobile-icon{position:absolute;right:20px;bottom:16px}.nas-journey-availability__overview-details .nas-journey-availability__info-details{cursor:pointer}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon{cursor:pointer;padding:6px}.nas-journey-availability__overview-details .nas-journey-availability__info-details nas-icon span{cursor:pointer}.nas-journey-availability__flight-time{display:flex;flex:1;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time{display:block;flex:1 1 60%}}.nas-journey-availability__flight-time-when{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:24px;line-height:30px;margin-top:-2px;color:#003251;display:flex;justify-content:space-between}@media (min-width: 1000px){.nas-journey-availability__flight-time-when{display:inline-block;justify-content:initial}}.nas-journey-availability__flight-time-when-arrival,.nas-journey-availability__flight-time-when-departure{display:inline}.nas-journey-availability__flight-time-when-airports{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;line-height:26px;flex:0 0 100%;color:#003251}@media (min-width: 1000px){.nas-journey-availability__flight-time-when-airports{flex:initial}}.nas-journey-availability__flight-time-when-airports-stopovers{color:#6f6f6f}.nas-journey-availability__flight-time-details{font-size:18px;line-height:26px;display:inline-block}.nas-journey-availability__flight-time-details-label{color:#003251;display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-label{display:inline}}.nas-journey-availability__flight-time-details-text{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700}.nas-journey-availability__flight-time-details-count{display:none}@media (min-width: 1000px){.nas-journey-availability__flight-time-details-count{display:inline-block}}@media (min-width: 1000px){.nas-journey-availability__flight-time-details{padding-top:1px;padding-bottom:3px;display:initial}}.nas-journey-availability__flight-time-from-to{padding-right:24px}.nas-journey-availability__flight-time-info{margin-left:auto;justify-self:flex-end;text-align:end;font-size:14px;line-height:20px;padding-top:6px}.nas-journey-availability__flight-time-info-link-wrapper{cursor:pointer;padding:6px 0 12px 12px}@media (min-width: 1000px){.nas-journey-availability__flight-time-info-link-wrapper{padding:6px 0 0}}.nas-journey-availability__flight-time-info-link{color:#b12a0b;border-bottom-color:#d8d8d8}.nas-journey-availability__flight-time-info-link:hover{border-bottom-color:#003251}@media (min-width: 1000px){.nas-journey-availability__flight-time-info{position:absolute;bottom:12px}}.nas-journey-availability__journey-figure{margin-top:12px;max-height:12px}@media (min-width: 1000px){.nas-journey-availability__journey-figure{margin-top:0;max-height:initial}}.nas-journey-availability__selected-info{display:flex;flex:0 0 100%;flex-wrap:wrap}@media (min-width: 1000px){.nas-journey-availability__selected-info{flex:1 1 40%}}@media (min-width: 1000px){.nas-journey-availability__selected-info-graph{align-self:center}}.nas-journey-availability__journey mark{background-color:transparent}.nas-journey-availability__journey-label{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#003251;white-space:nowrap;display:inline}.nas-journey-availability__journey-airport{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:20px;display:inline-block;margin-bottom:0}.nas-journey-availability__journey-info{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:18px;line-height:26px;display:inline-block;vertical-align:top}@media (min-width: 1000px){.nas-journey-availability__journey-info{display:block}}.nas-journey-availability__journey-info-stops{display:inline-block;margin-bottom:0;font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;color:#003251}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops{font-family:Apercu,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;color:#6f6f6f}}.nas-journey-availability__journey-info-stops-format{display:inline;color:#6f6f6f}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-format{display:none}}.nas-journey-availability__journey-info-stops-details{display:none}@media (min-width: 1000px){.nas-journey-availability__journey-info-stops-details{display:inline}}@media (min-width: 1000px){.nas-journey-availability__journey .nas-journey-availability__md-icon{min-height:22px}}.nas-journey-availability__operated-by{font-size:14px;line-height:20px;display:none}@media (min-width: 1000px){.nas-journey-availability__operated-by{display:block;flex:0 0 100%;display:inline-block;margin-top:6px}}.nas-journey-availability__operated-by label,.nas-journey-availability__operated-by caption{display:inline}.nas-journey-availability__operated-by mark{background-color:transparent}.nas-journey-availability__stopover{transform:rotate(90deg)}@media (min-width: 1000px){.nas-journey-availability__stopover{transform:rotate(0);align-self:center;margin-right:12px}}.nas-journey-availability__animate{display:block}.nas-journey-availability__animate--animate{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.48s}.nas-journey-availability__animate--animate:nth-child(1){animation-delay:.18s}.nas-journey-availability__animate--animate:nth-child(2){animation-delay:.21s}.nas-journey-availability__animate--animate:nth-child(3){animation-delay:.24s}.nas-journey-availability__animate--animate:nth-child(4){animation-delay:.27s}.nas-journey-availability__animate--animate:nth-child(5){animation-delay:.3s}.nas-journey-availability__animate--animate:nth-child(6){animation-delay:.33s}.nas-journey-availability__animate--animate:nth-child(7){animation-delay:.36s}.nas-journey-availability__animate--animate:nth-child(8){animation-delay:.39s}.nas-journey-availability__animate--animate:nth-child(9){animation-delay:.42s}.nas-journey-availability__animate--animate:nth-child(10){animation-delay:.45s}@keyframes arrival-fly-in{0%{opacity:0;transform:translate(-260px,-100px) rotate(10deg)}25%{opacity:1}}@keyframes departure-fly-off{75%{opacity:1}to{opacity:0;transform:translate(260px,-100px) rotate(-20deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "component", type: ModalComponent, selector: "nas-modal", inputs: ["form", "tight", "center", "outlined", "title", "closeLabel", "animated", "show", "enableClose", "blockCloseOnClickOutside"], outputs: ["showChange"] }, { kind: "component", type: TripSummaryComponent, selector: "nas-trip-summary", inputs: ["tripSummaryModel", "expanded", "collapsable", "displayMinimumInfo", "expandTitle", "arrivalLabel", "departureLabel", "arrivalEstimatedLabel", "departureEstimatedLabel", "dateFormat", "timeFormat", "transitHoursIndicator", "transitMinutesIndicator", "transitLabel", "locale", "timeZone"] }] }); }
|
|
9830
9847
|
}
|
|
9831
9848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: JourneyAvailabilityComponent, decorators: [{
|
|
9832
9849
|
type: Component,
|