@norwegian/core-components 6.56.1 → 6.57.0
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @license
|
|
3
3
|
* Copyright Norwegian Air Shuttle. All Rights Reserved.
|
|
4
4
|
*/
|
|
5
|
-
import { Component, Input } from '@angular/core';
|
|
5
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
6
6
|
import { NasComponentBase } from '../../core/base/nas-component.base';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
import * as i1 from "@angular/common";
|
|
@@ -22,6 +22,24 @@ export class RibbonBannerComponent extends NasComponentBase {
|
|
|
22
22
|
* Display ribbon banner, true is default
|
|
23
23
|
*/
|
|
24
24
|
this.enable = true;
|
|
25
|
+
/**
|
|
26
|
+
* @property Output
|
|
27
|
+
* @description
|
|
28
|
+
* Change event when clicking on button.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* <nas-button (closeChange)="myFunction()">Close</nas-button>
|
|
32
|
+
*/
|
|
33
|
+
this.closeChange = new EventEmitter();
|
|
34
|
+
/**
|
|
35
|
+
* @property Output
|
|
36
|
+
* @description
|
|
37
|
+
* Change event when clicking on button.
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* <nas-button (onRedirectChange)="redirect()">Read more</nas-button>
|
|
41
|
+
*/
|
|
42
|
+
this.onRedirectChange = new EventEmitter();
|
|
25
43
|
}
|
|
26
44
|
getModifiers() {
|
|
27
45
|
return [
|
|
@@ -37,14 +55,19 @@ export class RibbonBannerComponent extends NasComponentBase {
|
|
|
37
55
|
return this.exists(this.warning) ? 'warning--secondary' : 'info';
|
|
38
56
|
}
|
|
39
57
|
onClickClose() {
|
|
58
|
+
this.closeChange.emit();
|
|
40
59
|
this.enable = false;
|
|
41
60
|
}
|
|
61
|
+
onRedirect() {
|
|
62
|
+
this.onRedirectChange.emit();
|
|
63
|
+
window.location.href = this.infoModel.link.href;
|
|
64
|
+
}
|
|
42
65
|
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
|
|
66
|
+
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" }, outputs: { closeChange: "closeChange", onRedirectChange: "onRedirectChange" }, 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 (clickChange)=\"onRedirect()\">{{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
67
|
}
|
|
45
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RibbonBannerComponent, decorators: [{
|
|
46
69
|
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
|
|
70
|
+
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 (clickChange)=\"onRedirect()\">{{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
71
|
}], ctorParameters: function () { return []; }, propDecorators: { enable: [{
|
|
49
72
|
type: Input
|
|
50
73
|
}], infoModel: [{
|
|
@@ -53,5 +76,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
53
76
|
type: Input
|
|
54
77
|
}], warning: [{
|
|
55
78
|
type: Input
|
|
79
|
+
}], closeChange: [{
|
|
80
|
+
type: Output
|
|
81
|
+
}], onRedirectChange: [{
|
|
82
|
+
type: Output
|
|
56
83
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
84
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmliYm9uLWJhbm5lci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3JpYmJvbi1iYW5uZXIvcmliYm9uLWJhbm5lci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL3JpYmJvbi1iYW5uZXIvcmliYm9uLWJhbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFFSCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7Ozs7QUFFdEU7OztHQUdHO0FBTUgsTUFBTSxPQUFPLHFCQUFzQixTQUFRLGdCQUFnQjtJQTZDM0Q7UUFDSSxLQUFLLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQTdDN0I7Ozs7VUFJRTtRQUNPLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFtQnZCOzs7Ozs7O1dBT0c7UUFDTyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDbEQ7Ozs7Ozs7V0FPRztRQUNPLHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7SUFLdkQsQ0FBQztJQUVELFlBQVk7UUFDUixPQUFPO1lBQ0wsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksTUFBTTtZQUNoQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxTQUFTO1NBQ3ZDLENBQUM7SUFDSixDQUFDO0lBRUgsVUFBVSxDQUFDLE9BQWdCLEVBQUUsU0FBZTtRQUMxQyxNQUFNLE9BQU8sR0FBc0IsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDO1FBQ3ZFLE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCxPQUFPO1FBQ0gsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQTtJQUNwRSxDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDdEIsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDN0IsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO0lBQ2xELENBQUM7OEdBekVVLHFCQUFxQjtrR0FBckIscUJBQXFCLHVQQ2xCbEMsa2pDQW9CTTs7MkZERk8scUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLG1CQUFtQjswRUFVcEIsTUFBTTtzQkFBZCxLQUFLO2dCQU1HLFNBQVM7c0JBQWpCLEtBQUs7Z0JBTUcsSUFBSTtzQkFBWixLQUFLO2dCQU1HLE9BQU87c0JBQWYsS0FBSztnQkFTSSxXQUFXO3NCQUFwQixNQUFNO2dCQVNHLGdCQUFnQjtzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBOb3J3ZWdpYW4gQWlyIFNodXR0bGUuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENsYXNzTW9kZWwgfSBmcm9tICcuLi8uLi9jb3JlL21vZGVscy9jbGFzcy5tb2RlbCc7XG5pbXBvcnQgeyBOYXNDb21wb25lbnRCYXNlIH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlL25hcy1jb21wb25lbnQuYmFzZSc7XG5pbXBvcnQgeyBJbmZvTW9kZWwgfSBmcm9tICcuLi9pbmZvJztcbi8qKlxuICogQGRlc2NyaXB0aW9uXG4gKiBOb3J3ZWdpYW4gUmliYm9uIEJhbm5lciBDb21wb25lbnQgfCBEaWFsb2dzIGFuZCBNb2RhbHNcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmFzLXJpYmJvbi1iYW5uZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcmliYm9uLWJhbm5lci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3JpYmJvbi1iYW5uZXIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBSaWJib25CYW5uZXJDb21wb25lbnQgZXh0ZW5kcyBOYXNDb21wb25lbnRCYXNlIHtcbiAgLyoqXG4gICAqIEBwcm9wZXJ0eSBJbnB1dFxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogRGlzcGxheSByaWJib24gYmFubmVyLCB0cnVlIGlzIGRlZmF1bHRcbiAgKi9cbiAgQElucHV0KCkgZW5hYmxlID0gdHJ1ZTtcbiAgLyoqXG4gICAqIEBwcm9wZXJ0eSBJbnB1dFxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogU2V0cyBSaWJib24gYmFubmVyIHRvIGluZm8gc3R5bGluZ1xuICAqL1xuICBASW5wdXQoKSBpbmZvTW9kZWw6IEluZm9Nb2RlbDtcbiAgLyoqXG4gICAqIEBwcm9wZXJ0eSBJbnB1dFxuICAgKiBAZGVzY3JpcHRpb25cbiAgICogU2V0cyBSaWJib24gYmFubmVyIHRvIGluZm8gc3R5bGluZ1xuICAqL1xuICBASW5wdXQoKSBpbmZvOiBib29sZWFuO1xuICAvKipcbiAgICogQHByb3BlcnR5IElucHV0XG4gICAqIEBkZXNjcmlwdGlvblxuICAgKiBTZXRzIFJpYmJvbiBiYW5uZXIgdG8gd2FybmluZyBzdHlsaW5nXG4gICovXG4gIEBJbnB1dCgpIHdhcm5pbmc6IGJvb2xlYW47XG4gIC8qKlxuICAgKiBAcHJvcGVydHkgT3V0cHV0XG4gICAqIEBkZXNjcmlwdGlvblxuICAgKiBDaGFuZ2UgZXZlbnQgd2hlbiBjbGlja2luZyBvbiBidXR0b24uXG4gICAqXG4gICAqIEBleGFtcGxlXG4gICAqIDxuYXMtYnV0dG9uIChjbG9zZUNoYW5nZSk9XCJteUZ1bmN0aW9uKClcIj5DbG9zZTwvbmFzLWJ1dHRvbj5cbiAgICovXG4gIEBPdXRwdXQoKSBjbG9zZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG4gIC8qKlxuICAgKiBAcHJvcGVydHkgT3V0cHV0XG4gICAqIEBkZXNjcmlwdGlvblxuICAgKiBDaGFuZ2UgZXZlbnQgd2hlbiBjbGlja2luZyBvbiBidXR0b24uXG4gICAqXG4gICAqIEBleGFtcGxlXG4gICAqIDxuYXMtYnV0dG9uIChvblJlZGlyZWN0Q2hhbmdlKT1cInJlZGlyZWN0KClcIj5SZWFkIG1vcmU8L25hcy1idXR0b24+XG4gICAqL1xuICBAT3V0cHV0KCkgb25SZWRpcmVjdENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG5cblxuY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoJ25hcy1yaWJib24tYmFubmVyJyk7XG4gIH1cblxuICBnZXRNb2RpZmllcnMoKTogQXJyYXk8c3RyaW5nPiB7XG4gICAgICByZXR1cm4gW1xuICAgICAgICB0aGlzLmV4aXN0cyh0aGlzLmluZm8pICYmICdpbmZvJyxcbiAgICAgICAgdGhpcy5leGlzdHModGhpcy53YXJuaW5nKSAmJiAnd2FybmluZydcbiAgICAgIF07XG4gICAgfVxuICBcbiAgZ2V0Q2xhc3NlcyhlbGVtZW50Pzogc3RyaW5nLCBtb2RpZmllcnM/OiBhbnkpOiBBcnJheTxDbGFzc01vZGVsPiB7XG4gICAgY29uc3QgY2xhc3NlczogQXJyYXk8Q2xhc3NNb2RlbD4gPSBbdGhpcy5nZXRDbGFzcyhlbGVtZW50LCBtb2RpZmllcnMpXTtcbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxuXG4gIGdldEljb24oKTogc3RyaW5nIHtcbiAgICAgIHJldHVybiB0aGlzLmV4aXN0cyh0aGlzLndhcm5pbmcpID8gJ3dhcm5pbmctLXNlY29uZGFyeScgOiAnaW5mbydcbiAgfVxuXG4gIG9uQ2xpY2tDbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLmNsb3NlQ2hhbmdlLmVtaXQoKTtcbiAgICB0aGlzLmVuYWJsZSA9IGZhbHNlO1xuICB9XG5cbiAgb25SZWRpcmVjdCgpOiB2b2lkIHtcbiAgICB0aGlzLm9uUmVkaXJlY3RDaGFuZ2UuZW1pdCgpO1xuICAgIHdpbmRvdy5sb2NhdGlvbi5ocmVmID0gdGhpcy5pbmZvTW9kZWwubGluay5ocmVmO1xuICB9XG4gIFxufVxuIiwiPGRpdiAqbmdJZj1cImVuYWJsZSAmJiBpbmZvTW9kZWxcIiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3NlcygnJylcIj5cbiAgPGRpdiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3NlcygnY29udGFpbmVyJywgZ2V0TW9kaWZpZXJzKCkpXCI+XG4gICAgPGRpdiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3NlcygnY29sLTEnKVwiPlxuICAgICAgPGRpdiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3Nlcygnc3RhdHVzJywgIWluZm9Nb2RlbC50aXRsZSAmJiAnYWxpZ25lZCcpXCI+XG4gICAgICAgIDxuYXMtaWNvbiBbaWNvbl09XCJnZXRJY29uKClcIj48L25hcy1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IFtuYXNDbGFzc109XCJnZXRDbGFzc2VzKCdjb250ZW50JylcIj5cbiAgICAgICAgICA8aDIgKm5nSWY9XCJpbmZvTW9kZWwudGl0bGVcIiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3NlcygndGl0bGUnKVwiPnt7aW5mb01vZGVsLnRpdGxlfX08L2gyPlxuICAgICAgICAgIDxkaXYgW25hc0NsYXNzXT1cImdldENsYXNzZXMoJ2Rlc2NyaXB0aW9uJylcIj5cbiAgICAgICAgICAgIDxzcGFuIFtuYXNDbGFzc109XCJnZXRDbGFzc2VzKCdtZXNzYWdlJylcIiAqbmdGb3I9XCJsZXQgbWVzc2FnZSBvZiBpbmZvTW9kZWw/Lm1lc3NhZ2VzXCI+e3ttZXNzYWdlfX08L3NwYW4+XG4gICAgICAgICAgICA8bmFzLWJ1dHRvbiAqbmdJZj1cImluZm9Nb2RlbD8ubGluaz8udGV4dFwiIGxpbmsgKGNsaWNrQ2hhbmdlKT1cIm9uUmVkaXJlY3QoKVwiPnt7aW5mb01vZGVsPy5saW5rLnRleHR9fTwvbmFzLWJ1dHRvbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgW25hc0NsYXNzXT1cImdldENsYXNzZXMoJ2NvbC0yJylcIj5cbiAgICAgICAgPGJ1dHRvbiBbbmFzQ2xhc3NdPVwiZ2V0Q2xhc3NlcygnY2xvc2UnKVwiIChjbGljayk9XCJvbkNsaWNrQ2xvc2UoKVwiPlxuICAgICAgICAgIDxuYXMtaWNvbiBbaWNvbl09XCInY2xvc2UnXCIgW3R5cGVdPVwiJ3NtYWxsJ1wiPjwvbmFzLWljb24+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
@@ -19127,6 +19127,24 @@ class RibbonBannerComponent extends NasComponentBase {
|
|
|
19127
19127
|
* Display ribbon banner, true is default
|
|
19128
19128
|
*/
|
|
19129
19129
|
this.enable = true;
|
|
19130
|
+
/**
|
|
19131
|
+
* @property Output
|
|
19132
|
+
* @description
|
|
19133
|
+
* Change event when clicking on button.
|
|
19134
|
+
*
|
|
19135
|
+
* @example
|
|
19136
|
+
* <nas-button (closeChange)="myFunction()">Close</nas-button>
|
|
19137
|
+
*/
|
|
19138
|
+
this.closeChange = new EventEmitter();
|
|
19139
|
+
/**
|
|
19140
|
+
* @property Output
|
|
19141
|
+
* @description
|
|
19142
|
+
* Change event when clicking on button.
|
|
19143
|
+
*
|
|
19144
|
+
* @example
|
|
19145
|
+
* <nas-button (onRedirectChange)="redirect()">Read more</nas-button>
|
|
19146
|
+
*/
|
|
19147
|
+
this.onRedirectChange = new EventEmitter();
|
|
19130
19148
|
}
|
|
19131
19149
|
getModifiers() {
|
|
19132
19150
|
return [
|
|
@@ -19142,14 +19160,19 @@ class RibbonBannerComponent extends NasComponentBase {
|
|
|
19142
19160
|
return this.exists(this.warning) ? 'warning--secondary' : 'info';
|
|
19143
19161
|
}
|
|
19144
19162
|
onClickClose() {
|
|
19163
|
+
this.closeChange.emit();
|
|
19145
19164
|
this.enable = false;
|
|
19146
19165
|
}
|
|
19166
|
+
onRedirect() {
|
|
19167
|
+
this.onRedirectChange.emit();
|
|
19168
|
+
window.location.href = this.infoModel.link.href;
|
|
19169
|
+
}
|
|
19147
19170
|
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
|
|
19171
|
+
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" }, outputs: { closeChange: "closeChange", onRedirectChange: "onRedirectChange" }, 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 (clickChange)=\"onRedirect()\">{{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
19172
|
}
|
|
19150
19173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RibbonBannerComponent, decorators: [{
|
|
19151
19174
|
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
|
|
19175
|
+
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 (clickChange)=\"onRedirect()\">{{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
19176
|
}], ctorParameters: function () { return []; }, propDecorators: { enable: [{
|
|
19154
19177
|
type: Input
|
|
19155
19178
|
}], infoModel: [{
|
|
@@ -19158,6 +19181,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
|
|
|
19158
19181
|
type: Input
|
|
19159
19182
|
}], warning: [{
|
|
19160
19183
|
type: Input
|
|
19184
|
+
}], closeChange: [{
|
|
19185
|
+
type: Output
|
|
19186
|
+
}], onRedirectChange: [{
|
|
19187
|
+
type: Output
|
|
19161
19188
|
}] } });
|
|
19162
19189
|
|
|
19163
19190
|
class RibbonBannerModule {
|