@norwegian/core-components 6.56.0 → 6.56.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.
|
@@ -40,11 +40,11 @@ export class RibbonBannerComponent extends NasComponentBase {
|
|
|
40
40
|
this.enable = false;
|
|
41
41
|
}
|
|
42
42
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RibbonBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
43
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RibbonBannerComponent, selector: "nas-ribbon-banner", inputs: { enable: "enable", infoModel: "infoModel", info: "info", warning: "warning" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#
|
|
43
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RibbonBannerComponent, selector: "nas-ribbon-banner", inputs: { enable: "enable", infoModel: "infoModel", info: "info", warning: "warning" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#ebf4ff}.nas-ribbon-banner__container--warning{background-color:#fff6ec}.nas-ribbon-banner__col-1{display:flex;margin:0 auto;padding-left:0}@media (min-width: 1000px){.nas-ribbon-banner__col-1{padding-left:72px}}.nas-ribbon-banner__col-2{display:flex}.nas-ribbon-banner__status{margin-right:8px}.nas-ribbon-banner__status--aligned,.nas-ribbon-banner__content{display:flex;flex-direction:column;justify-content:center}.nas-ribbon-banner__title{font-size:16px;line-height:26px;margin:0}.nas-ribbon-banner__message{display:inline;padding-right:6px}.nas-ribbon-banner__close{margin-left:8px;padding:8px 16px;border-left:1px solid #E9E7E4}@media (min-width: 640px){.nas-ribbon-banner__close{padding:16px 24px;margin-left:24px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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", "approve", "light", "large", "block", "flex", "compact", "right", "spaceless", "transparent", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target"], outputs: ["clickChange"] }] }); }
|
|
44
44
|
}
|
|
45
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RibbonBannerComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
47
|
-
args: [{ selector: 'nas-ribbon-banner', template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#
|
|
47
|
+
args: [{ selector: 'nas-ribbon-banner', template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#ebf4ff}.nas-ribbon-banner__container--warning{background-color:#fff6ec}.nas-ribbon-banner__col-1{display:flex;margin:0 auto;padding-left:0}@media (min-width: 1000px){.nas-ribbon-banner__col-1{padding-left:72px}}.nas-ribbon-banner__col-2{display:flex}.nas-ribbon-banner__status{margin-right:8px}.nas-ribbon-banner__status--aligned,.nas-ribbon-banner__content{display:flex;flex-direction:column;justify-content:center}.nas-ribbon-banner__title{font-size:16px;line-height:26px;margin:0}.nas-ribbon-banner__message{display:inline;padding-right:6px}.nas-ribbon-banner__close{margin-left:8px;padding:8px 16px;border-left:1px solid #E9E7E4}@media (min-width: 640px){.nas-ribbon-banner__close{padding:16px 24px;margin-left:24px}}\n"] }]
|
|
48
48
|
}], ctorParameters: function () { return []; }, propDecorators: { enable: [{
|
|
49
49
|
type: Input
|
|
50
50
|
}], infoModel: [{
|
|
@@ -19145,11 +19145,11 @@ class RibbonBannerComponent extends NasComponentBase {
|
|
|
19145
19145
|
this.enable = false;
|
|
19146
19146
|
}
|
|
19147
19147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RibbonBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RibbonBannerComponent, selector: "nas-ribbon-banner", inputs: { enable: "enable", infoModel: "infoModel", info: "info", warning: "warning" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#
|
|
19148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RibbonBannerComponent, selector: "nas-ribbon-banner", inputs: { enable: "enable", infoModel: "infoModel", info: "info", warning: "warning" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#ebf4ff}.nas-ribbon-banner__container--warning{background-color:#fff6ec}.nas-ribbon-banner__col-1{display:flex;margin:0 auto;padding-left:0}@media (min-width: 1000px){.nas-ribbon-banner__col-1{padding-left:72px}}.nas-ribbon-banner__col-2{display:flex}.nas-ribbon-banner__status{margin-right:8px}.nas-ribbon-banner__status--aligned,.nas-ribbon-banner__content{display:flex;flex-direction:column;justify-content:center}.nas-ribbon-banner__title{font-size:16px;line-height:26px;margin:0}.nas-ribbon-banner__message{display:inline;padding-right:6px}.nas-ribbon-banner__close{margin-left:8px;padding:8px 16px;border-left:1px solid #E9E7E4}@media (min-width: 640px){.nas-ribbon-banner__close{padding:16px 24px;margin-left:24px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: 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"] }] }); }
|
|
19149
19149
|
}
|
|
19150
19150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RibbonBannerComponent, decorators: [{
|
|
19151
19151
|
type: Component,
|
|
19152
|
-
args: [{ selector: 'nas-ribbon-banner', template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#
|
|
19152
|
+
args: [{ selector: 'nas-ribbon-banner', template: "<div *ngIf=\"enable && infoModel\" [nasClass]=\"getClasses('')\">\n <div [nasClass]=\"getClasses('container', getModifiers())\">\n <div [nasClass]=\"getClasses('col-1')\">\n <div [nasClass]=\"getClasses('status', !infoModel.title && 'aligned')\">\n <nas-icon [icon]=\"getIcon()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClasses('content')\">\n <h2 *ngIf=\"infoModel.title\" [nasClass]=\"getClasses('title')\">{{infoModel.title}}</h2>\n <div [nasClass]=\"getClasses('description')\">\n <span [nasClass]=\"getClasses('message')\" *ngFor=\"let message of infoModel?.messages\">{{message}}</span>\n <nas-button *ngIf=\"infoModel?.link?.text\" link [href]=\"infoModel?.link?.href\">{{infoModel?.link.text}}</nas-button>\n </div>\n </div>\n </div>\n <div [nasClass]=\"getClasses('col-2')\">\n <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n <nas-icon [icon]=\"'close'\" [type]=\"'small'\"></nas-icon>\n </button>\n </div>\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-ribbon-banner__container{display:flex;min-height:72px;padding:8px 0 8px 16px;background-color:#f8f8f8;justify-content:center}.nas-ribbon-banner__container--info{background-color:#ebf4ff}.nas-ribbon-banner__container--warning{background-color:#fff6ec}.nas-ribbon-banner__col-1{display:flex;margin:0 auto;padding-left:0}@media (min-width: 1000px){.nas-ribbon-banner__col-1{padding-left:72px}}.nas-ribbon-banner__col-2{display:flex}.nas-ribbon-banner__status{margin-right:8px}.nas-ribbon-banner__status--aligned,.nas-ribbon-banner__content{display:flex;flex-direction:column;justify-content:center}.nas-ribbon-banner__title{font-size:16px;line-height:26px;margin:0}.nas-ribbon-banner__message{display:inline;padding-right:6px}.nas-ribbon-banner__close{margin-left:8px;padding:8px 16px;border-left:1px solid #E9E7E4}@media (min-width: 640px){.nas-ribbon-banner__close{padding:16px 24px;margin-left:24px}}\n"] }]
|
|
19153
19153
|
}], ctorParameters: function () { return []; }, propDecorators: { enable: [{
|
|
19154
19154
|
type: Input
|
|
19155
19155
|
}], infoModel: [{
|