@impartner/design-components 1.0.5 → 1.1.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.
- package/esm2020/lib/alert/alert.component.mjs +48 -6
- package/esm2020/lib/alert/alert.module.mjs +6 -5
- package/fesm2015/impartner-design-components.mjs +50 -9
- package/fesm2015/impartner-design-components.mjs.map +1 -1
- package/fesm2020/impartner-design-components.mjs +50 -9
- package/fesm2020/impartner-design-components.mjs.map +1 -1
- package/lib/alert/alert.component.d.ts +20 -3
- package/lib/alert/alert.module.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
|
+
import * as i2 from "../icon/icon.component";
|
|
4
5
|
/**
|
|
5
6
|
* The `AlertComponent` (`<impdc-alert` or `<any impdc-alert`) is intended to show information or feedback inline with content.
|
|
6
7
|
* To use, import `AlertModule` or another module that imports and exports that module from `@impartner/design-components`.
|
|
@@ -16,16 +17,32 @@ export class AlertComponent {
|
|
|
16
17
|
*/
|
|
17
18
|
this.show = false;
|
|
18
19
|
/**
|
|
19
|
-
* The heading text of the Alert.
|
|
20
|
+
* The heading text of the Alert. Content can also be projected in the heading area using a `heading` directive.
|
|
20
21
|
*/
|
|
21
22
|
this.headingText = '';
|
|
23
|
+
/**
|
|
24
|
+
* The body text of the Alert. Content can also be projected into the body area using default projection.
|
|
25
|
+
*/
|
|
26
|
+
this.bodyText = '';
|
|
27
|
+
/**
|
|
28
|
+
* By default, an Alert is a "floating" notification. When set to "inline", these "floating" styles are replaced.
|
|
29
|
+
*/
|
|
30
|
+
this.inline = false;
|
|
31
|
+
/**
|
|
32
|
+
* Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
|
|
33
|
+
*/
|
|
34
|
+
this.hideIcon = false;
|
|
35
|
+
/**
|
|
36
|
+
* Allows the Alert to be dismissed.
|
|
37
|
+
*/
|
|
38
|
+
this.dismissible = true;
|
|
22
39
|
/**
|
|
23
40
|
* Event emitted when the Alert is dismissed.
|
|
24
41
|
*/
|
|
25
42
|
this.dismiss = new EventEmitter();
|
|
26
43
|
}
|
|
27
|
-
get
|
|
28
|
-
|
|
44
|
+
get componentClasses() {
|
|
45
|
+
const themeClass = this.theme === 'warning'
|
|
29
46
|
? 'alert-warning'
|
|
30
47
|
: this.theme === 'info'
|
|
31
48
|
? 'alert-info'
|
|
@@ -34,24 +51,49 @@ export class AlertComponent {
|
|
|
34
51
|
: this.theme === 'success'
|
|
35
52
|
? 'alert-success'
|
|
36
53
|
: '';
|
|
54
|
+
const inlineClass = this.inline ? ' alert-inline' : '';
|
|
55
|
+
const dismissibleClass = this.dismissible ? ' alert-dismissible' : '';
|
|
56
|
+
return themeClass + inlineClass + dismissibleClass;
|
|
57
|
+
}
|
|
58
|
+
get themeIconName() {
|
|
59
|
+
return this.theme === 'warning'
|
|
60
|
+
? 'exclamation-circle'
|
|
61
|
+
: this.theme === 'info'
|
|
62
|
+
? 'info-circle'
|
|
63
|
+
: this.theme === 'danger'
|
|
64
|
+
? 'times-circle'
|
|
65
|
+
: this.theme === 'success'
|
|
66
|
+
? 'check-circle'
|
|
67
|
+
: '';
|
|
37
68
|
}
|
|
38
69
|
closeAlert() {
|
|
70
|
+
if (!this.dismissible) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
39
73
|
this.show = false;
|
|
40
74
|
this.dismiss.emit();
|
|
41
75
|
}
|
|
42
76
|
}
|
|
43
77
|
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"
|
|
78
|
+
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n <ng-container *ngIf=\"!hideIcon\">\n <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n <span impdc-icon [name]=\"themeIconName\"></span>\n </span>\n </ng-container>\n\n <div class=\"alert-content\">\n <div class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n <span *ngIf=\"headingText\">{{ headingText }}</span>\n </div>\n\n <div\n #bodyContent\n class=\"alert-body\"\n [hidden]=\"!bodyContent.children.length\">\n <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n <ng-content></ng-content>\n\n <div\n #alertActions\n [hidden]=\"!alertActions.children.length\"\n class=\"alert-actions\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n </div>\n </div>\n\n <a\n *ngIf=\"dismissible\"\n class=\"close-icon\"\n (click)=\"closeAlert()\"\n data-bs-dismiss=\"alert\"\n aria-label=\"Close\">\n <span impdc-icon name=\"times\" theme=\"regular\"></span>\n </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
|
|
45
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
46
80
|
type: Component,
|
|
47
|
-
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"
|
|
81
|
+
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n <ng-container *ngIf=\"!hideIcon\">\n <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n <span impdc-icon [name]=\"themeIconName\"></span>\n </span>\n </ng-container>\n\n <div class=\"alert-content\">\n <div class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n <span *ngIf=\"headingText\">{{ headingText }}</span>\n </div>\n\n <div\n #bodyContent\n class=\"alert-body\"\n [hidden]=\"!bodyContent.children.length\">\n <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n <ng-content></ng-content>\n\n <div\n #alertActions\n [hidden]=\"!alertActions.children.length\"\n class=\"alert-actions\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n </div>\n </div>\n\n <a\n *ngIf=\"dismissible\"\n class=\"close-icon\"\n (click)=\"closeAlert()\"\n data-bs-dismiss=\"alert\"\n aria-label=\"Close\">\n <span impdc-icon name=\"times\" theme=\"regular\"></span>\n </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"] }]
|
|
48
82
|
}], propDecorators: { theme: [{
|
|
49
83
|
type: Input
|
|
50
84
|
}], show: [{
|
|
51
85
|
type: Input
|
|
52
86
|
}], headingText: [{
|
|
53
87
|
type: Input
|
|
88
|
+
}], bodyText: [{
|
|
89
|
+
type: Input
|
|
90
|
+
}], inline: [{
|
|
91
|
+
type: Input
|
|
92
|
+
}], hideIcon: [{
|
|
93
|
+
type: Input
|
|
94
|
+
}], dismissible: [{
|
|
95
|
+
type: Input
|
|
54
96
|
}], dismiss: [{
|
|
55
97
|
type: Output
|
|
56
98
|
}] } });
|
|
57
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
99
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWNvbXBvbmVudHMvc3JjL2xpYi9hbGVydC9hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXNpZ24tY29tcG9uZW50cy9zcmMvbGliL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFHdkU7OztHQUdHO0FBTUgsTUFBTSxPQUFPLGNBQWM7SUFMM0I7UUFNRTs7V0FFRztRQUVILFVBQUssR0FBZSxTQUFTLENBQUM7UUFFOUI7O1dBRUc7UUFDTSxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBRXRCOztXQUVHO1FBQ00sZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFFMUI7O1dBRUc7UUFDTSxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBRXZCOztXQUVHO1FBQ00sV0FBTSxHQUFHLEtBQUssQ0FBQztRQUV4Qjs7V0FFRztRQUNNLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFMUI7O1dBRUc7UUFDTSxnQkFBVyxHQUFHLElBQUksQ0FBQztRQUU1Qjs7V0FFRztRQUVILFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBcUNwQztJQW5DQyxJQUFJLGdCQUFnQjtRQUNsQixNQUFNLFVBQVUsR0FDZCxJQUFJLENBQUMsS0FBSyxLQUFLLFNBQVM7WUFDdEIsQ0FBQyxDQUFDLGVBQWU7WUFDakIsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUssTUFBTTtnQkFDdkIsQ0FBQyxDQUFDLFlBQVk7Z0JBQ2QsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUssUUFBUTtvQkFDekIsQ0FBQyxDQUFDLGNBQWM7b0JBQ2hCLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxLQUFLLFNBQVM7d0JBQzFCLENBQUMsQ0FBQyxlQUFlO3dCQUNqQixDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ1QsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDdkQsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ3RFLE9BQU8sVUFBVSxHQUFHLFdBQVcsR0FBRyxnQkFBZ0IsQ0FBQztJQUNyRCxDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLFNBQVM7WUFDN0IsQ0FBQyxDQUFDLG9CQUFvQjtZQUN0QixDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssS0FBSyxNQUFNO2dCQUN2QixDQUFDLENBQUMsYUFBYTtnQkFDZixDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssS0FBSyxRQUFRO29CQUN6QixDQUFDLENBQUMsY0FBYztvQkFDaEIsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUssU0FBUzt3QkFDMUIsQ0FBQyxDQUFDLGNBQWM7d0JBQ2hCLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDVCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3JCLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7NEdBN0VVLGNBQWM7Z0dBQWQsY0FBYyxtUUNaM0IseXVDQTBDQTs0RkQ5QmEsY0FBYztrQkFMMUIsU0FBUzsrQkFDRSw0QkFBNEI7OEJBU3RDLEtBQUs7c0JBREosS0FBSztnQkFNRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csV0FBVztzQkFBbkIsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFLRyxRQUFRO3NCQUFoQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBTU4sT0FBTztzQkFETixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFsZXJ0VGhlbWUgfSBmcm9tICcuL3RoZW1lJztcblxuLyoqXG4gKiBUaGUgYEFsZXJ0Q29tcG9uZW50YCAoYDxpbXBkYy1hbGVydGAgb3IgYDxhbnkgaW1wZGMtYWxlcnRgKSBpcyBpbnRlbmRlZCB0byBzaG93IGluZm9ybWF0aW9uIG9yIGZlZWRiYWNrIGlubGluZSB3aXRoIGNvbnRlbnQuXG4gKiBUbyB1c2UsIGltcG9ydCBgQWxlcnRNb2R1bGVgIG9yIGFub3RoZXIgbW9kdWxlIHRoYXQgaW1wb3J0cyBhbmQgZXhwb3J0cyB0aGF0IG1vZHVsZSBmcm9tIGBAaW1wYXJ0bmVyL2Rlc2lnbi1jb21wb25lbnRzYC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnaW1wZGMtYWxlcnQsIFtpbXBkYy1hbGVydF0nLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hbGVydC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEFsZXJ0Q29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFRoZSB0aGVtZSBvZiB0aGUgQWxlcnQgYWZmZWN0aW5nIHRleHQsIGljb25zLCBiYWNrZ3JvdW5kcywgYW5kIGJvcmRlcnMuXG4gICAqL1xuICBASW5wdXQoKVxuICB0aGVtZTogQWxlcnRUaGVtZSA9ICd3YXJuaW5nJztcblxuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiB0aGUgQWxlcnQgc2hvdWxkIGJlIHNob3duIGltbWVkaWF0ZWx5LlxuICAgKi9cbiAgQElucHV0KCkgc2hvdyA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUaGUgaGVhZGluZyB0ZXh0IG9mIHRoZSBBbGVydC4gQ29udGVudCBjYW4gYWxzbyBiZSBwcm9qZWN0ZWQgaW4gdGhlIGhlYWRpbmcgYXJlYSB1c2luZyBhIGBoZWFkaW5nYCBkaXJlY3RpdmUuXG4gICAqL1xuICBASW5wdXQoKSBoZWFkaW5nVGV4dCA9ICcnO1xuXG4gIC8qKlxuICAgKiBUaGUgYm9keSB0ZXh0IG9mIHRoZSBBbGVydC4gQ29udGVudCBjYW4gYWxzbyBiZSBwcm9qZWN0ZWQgaW50byB0aGUgYm9keSBhcmVhIHVzaW5nIGRlZmF1bHQgcHJvamVjdGlvbi5cbiAgICovXG4gIEBJbnB1dCgpIGJvZHlUZXh0ID0gJyc7XG5cbiAgLyoqXG4gICAqIEJ5IGRlZmF1bHQsIGFuIEFsZXJ0IGlzIGEgXCJmbG9hdGluZ1wiIG5vdGlmaWNhdGlvbi4gV2hlbiBzZXQgdG8gXCJpbmxpbmVcIiwgdGhlc2UgXCJmbG9hdGluZ1wiIHN0eWxlcyBhcmUgcmVwbGFjZWQuXG4gICAqL1xuICBASW5wdXQoKSBpbmxpbmUgPSBmYWxzZTtcblxuICAvKipcbiAgICogUmVtb3ZlcyB0aGUgQWxlcnQgaWNvbiBwcm92aWRlZCBieSB0aGUgdGhlbWUgb3IgcHJvamVjdGVkIGludG8gdGhlIGljb24gYXJlYSB1c2luZyB0aGUgYGljb25gIGRpcmVjdGl2ZS5cbiAgICovXG4gIEBJbnB1dCgpIGhpZGVJY29uID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEFsbG93cyB0aGUgQWxlcnQgdG8gYmUgZGlzbWlzc2VkLlxuICAgKi9cbiAgQElucHV0KCkgZGlzbWlzc2libGUgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBFdmVudCBlbWl0dGVkIHdoZW4gdGhlIEFsZXJ0IGlzIGRpc21pc3NlZC5cbiAgICovXG4gIEBPdXRwdXQoKVxuICBkaXNtaXNzID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIGdldCBjb21wb25lbnRDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgY29uc3QgdGhlbWVDbGFzcyA9XG4gICAgICB0aGlzLnRoZW1lID09PSAnd2FybmluZydcbiAgICAgICAgPyAnYWxlcnQtd2FybmluZydcbiAgICAgICAgOiB0aGlzLnRoZW1lID09PSAnaW5mbydcbiAgICAgICAgPyAnYWxlcnQtaW5mbydcbiAgICAgICAgOiB0aGlzLnRoZW1lID09PSAnZGFuZ2VyJ1xuICAgICAgICA/ICdhbGVydC1kYW5nZXInXG4gICAgICAgIDogdGhpcy50aGVtZSA9PT0gJ3N1Y2Nlc3MnXG4gICAgICAgID8gJ2FsZXJ0LXN1Y2Nlc3MnXG4gICAgICAgIDogJyc7XG4gICAgY29uc3QgaW5saW5lQ2xhc3MgPSB0aGlzLmlubGluZSA/ICcgYWxlcnQtaW5saW5lJyA6ICcnO1xuICAgIGNvbnN0IGRpc21pc3NpYmxlQ2xhc3MgPSB0aGlzLmRpc21pc3NpYmxlID8gJyBhbGVydC1kaXNtaXNzaWJsZScgOiAnJztcbiAgICByZXR1cm4gdGhlbWVDbGFzcyArIGlubGluZUNsYXNzICsgZGlzbWlzc2libGVDbGFzcztcbiAgfVxuXG4gIGdldCB0aGVtZUljb25OYW1lKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMudGhlbWUgPT09ICd3YXJuaW5nJ1xuICAgICAgPyAnZXhjbGFtYXRpb24tY2lyY2xlJ1xuICAgICAgOiB0aGlzLnRoZW1lID09PSAnaW5mbydcbiAgICAgID8gJ2luZm8tY2lyY2xlJ1xuICAgICAgOiB0aGlzLnRoZW1lID09PSAnZGFuZ2VyJ1xuICAgICAgPyAndGltZXMtY2lyY2xlJ1xuICAgICAgOiB0aGlzLnRoZW1lID09PSAnc3VjY2VzcydcbiAgICAgID8gJ2NoZWNrLWNpcmNsZSdcbiAgICAgIDogJyc7XG4gIH1cblxuICBjbG9zZUFsZXJ0KCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5kaXNtaXNzaWJsZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnNob3cgPSBmYWxzZTtcbiAgICB0aGlzLmRpc21pc3MuZW1pdCgpO1xuICB9XG59XG4iLCI8ZGl2ICpuZ0lmPVwic2hvd1wiIGNsYXNzPVwiaW1wZGMgYWxlcnRcIiBbbmdDbGFzc109XCJjb21wb25lbnRDbGFzc2VzXCI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCIhaGlkZUljb25cIj5cbiAgICA8c3BhbiAjYWxlcnRJY29uIFtoaWRkZW5dPVwiIWFsZXJ0SWNvbi5jaGlsZHJlbi5sZW5ndGhcIiBjbGFzcz1cImFsZXJ0LWljb25cIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltpY29uXVwiPjwvbmctY29udGVudD5cbiAgICA8L3NwYW4+XG4gICAgPHNwYW4gKm5nSWY9XCIhYWxlcnRJY29uLmNoaWxkcmVuLmxlbmd0aFwiIGNsYXNzPVwiYWxlcnQtaWNvblwiPlxuICAgICAgPHNwYW4gaW1wZGMtaWNvbiBbbmFtZV09XCJ0aGVtZUljb25OYW1lXCI+PC9zcGFuPlxuICAgIDwvc3Bhbj5cbiAgPC9uZy1jb250YWluZXI+XG5cbiAgPGRpdiBjbGFzcz1cImFsZXJ0LWNvbnRlbnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiYWxlcnQtaGVhZGluZ1wiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2hlYWRpbmddXCI+PC9uZy1jb250ZW50PlxuICAgICAgPHNwYW4gKm5nSWY9XCJoZWFkaW5nVGV4dFwiPnt7IGhlYWRpbmdUZXh0IH19PC9zcGFuPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdlxuICAgICAgI2JvZHlDb250ZW50XG4gICAgICBjbGFzcz1cImFsZXJ0LWJvZHlcIlxuICAgICAgW2hpZGRlbl09XCIhYm9keUNvbnRlbnQuY2hpbGRyZW4ubGVuZ3RoXCI+XG4gICAgICA8ZGl2ICpuZ0lmPVwiYm9keVRleHRcIj57eyBib2R5VGV4dCB9fTwvZGl2PlxuXG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cbiAgICAgIDxkaXZcbiAgICAgICAgI2FsZXJ0QWN0aW9uc1xuICAgICAgICBbaGlkZGVuXT1cIiFhbGVydEFjdGlvbnMuY2hpbGRyZW4ubGVuZ3RoXCJcbiAgICAgICAgY2xhc3M9XCJhbGVydC1hY3Rpb25zXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlthY3Rpb25dXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIDxhXG4gICAgKm5nSWY9XCJkaXNtaXNzaWJsZVwiXG4gICAgY2xhc3M9XCJjbG9zZS1pY29uXCJcbiAgICAoY2xpY2spPVwiY2xvc2VBbGVydCgpXCJcbiAgICBkYXRhLWJzLWRpc21pc3M9XCJhbGVydFwiXG4gICAgYXJpYS1sYWJlbD1cIkNsb3NlXCI+XG4gICAgPHNwYW4gaW1wZGMtaWNvbiBuYW1lPVwidGltZXNcIiB0aGVtZT1cInJlZ3VsYXJcIj48L3NwYW4+XG4gIDwvYT5cbjwvZGl2PlxuIl19
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { NgModule } from '@angular/core';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import { AlertComponent } from './alert.component';
|
|
4
|
+
import { IconModule } from '../icon';
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
5
6
|
export class AlertModule {
|
|
6
7
|
}
|
|
7
8
|
AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
8
|
-
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
|
|
9
|
-
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule] });
|
|
9
|
+
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] });
|
|
10
|
+
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] });
|
|
10
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
|
|
11
12
|
type: NgModule,
|
|
12
13
|
args: [{
|
|
13
|
-
imports: [CommonModule],
|
|
14
|
+
imports: [CommonModule, IconModule],
|
|
14
15
|
declarations: [AlertComponent],
|
|
15
|
-
exports: [AlertComponent]
|
|
16
|
+
exports: [IconModule, AlertComponent]
|
|
16
17
|
}]
|
|
17
18
|
}] });
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWNvbXBvbmVudHMvc3JjL2xpYi9hbGVydC9hbGVydC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxTQUFTLENBQUM7O0FBT3JDLE1BQU0sT0FBTyxXQUFXOzt5R0FBWCxXQUFXOzBHQUFYLFdBQVcsaUJBSFAsY0FBYyxhQURuQixZQUFZLEVBQUUsVUFBVSxhQUV4QixVQUFVLEVBQUUsY0FBYzswR0FFekIsV0FBVyxZQUpaLFlBQVksRUFBRSxVQUFVLEVBRXhCLFVBQVU7NEZBRVQsV0FBVztrQkFMdkIsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsVUFBVSxDQUFDO29CQUNuQyxZQUFZLEVBQUUsQ0FBQyxjQUFjLENBQUM7b0JBQzlCLE9BQU8sRUFBRSxDQUFDLFVBQVUsRUFBRSxjQUFjLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBBbGVydENvbXBvbmVudCB9IGZyb20gJy4vYWxlcnQuY29tcG9uZW50JztcbmltcG9ydCB7IEljb25Nb2R1bGUgfSBmcm9tICcuLi9pY29uJztcblxuQE5nTW9kdWxlKHtcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgSWNvbk1vZHVsZV0sXG4gIGRlY2xhcmF0aW9uczogW0FsZXJ0Q29tcG9uZW50XSxcbiAgZXhwb3J0czogW0ljb25Nb2R1bGUsIEFsZXJ0Q29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBBbGVydE1vZHVsZSB7fVxuIl19
|
|
@@ -4004,16 +4004,32 @@ class AlertComponent {
|
|
|
4004
4004
|
*/
|
|
4005
4005
|
this.show = false;
|
|
4006
4006
|
/**
|
|
4007
|
-
* The heading text of the Alert.
|
|
4007
|
+
* The heading text of the Alert. Content can also be projected in the heading area using a `heading` directive.
|
|
4008
4008
|
*/
|
|
4009
4009
|
this.headingText = '';
|
|
4010
|
+
/**
|
|
4011
|
+
* The body text of the Alert. Content can also be projected into the body area using default projection.
|
|
4012
|
+
*/
|
|
4013
|
+
this.bodyText = '';
|
|
4014
|
+
/**
|
|
4015
|
+
* By default, an Alert is a "floating" notification. When set to "inline", these "floating" styles are replaced.
|
|
4016
|
+
*/
|
|
4017
|
+
this.inline = false;
|
|
4018
|
+
/**
|
|
4019
|
+
* Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
|
|
4020
|
+
*/
|
|
4021
|
+
this.hideIcon = false;
|
|
4022
|
+
/**
|
|
4023
|
+
* Allows the Alert to be dismissed.
|
|
4024
|
+
*/
|
|
4025
|
+
this.dismissible = true;
|
|
4010
4026
|
/**
|
|
4011
4027
|
* Event emitted when the Alert is dismissed.
|
|
4012
4028
|
*/
|
|
4013
4029
|
this.dismiss = new EventEmitter();
|
|
4014
4030
|
}
|
|
4015
|
-
get
|
|
4016
|
-
|
|
4031
|
+
get componentClasses() {
|
|
4032
|
+
const themeClass = this.theme === 'warning'
|
|
4017
4033
|
? 'alert-warning'
|
|
4018
4034
|
: this.theme === 'info'
|
|
4019
4035
|
? 'alert-info'
|
|
@@ -4022,23 +4038,48 @@ class AlertComponent {
|
|
|
4022
4038
|
: this.theme === 'success'
|
|
4023
4039
|
? 'alert-success'
|
|
4024
4040
|
: '';
|
|
4041
|
+
const inlineClass = this.inline ? ' alert-inline' : '';
|
|
4042
|
+
const dismissibleClass = this.dismissible ? ' alert-dismissible' : '';
|
|
4043
|
+
return themeClass + inlineClass + dismissibleClass;
|
|
4044
|
+
}
|
|
4045
|
+
get themeIconName() {
|
|
4046
|
+
return this.theme === 'warning'
|
|
4047
|
+
? 'exclamation-circle'
|
|
4048
|
+
: this.theme === 'info'
|
|
4049
|
+
? 'info-circle'
|
|
4050
|
+
: this.theme === 'danger'
|
|
4051
|
+
? 'times-circle'
|
|
4052
|
+
: this.theme === 'success'
|
|
4053
|
+
? 'check-circle'
|
|
4054
|
+
: '';
|
|
4025
4055
|
}
|
|
4026
4056
|
closeAlert() {
|
|
4057
|
+
if (!this.dismissible) {
|
|
4058
|
+
return;
|
|
4059
|
+
}
|
|
4027
4060
|
this.show = false;
|
|
4028
4061
|
this.dismiss.emit();
|
|
4029
4062
|
}
|
|
4030
4063
|
}
|
|
4031
4064
|
AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4032
|
-
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"
|
|
4065
|
+
AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n <ng-container *ngIf=\"!hideIcon\">\n <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n <span impdc-icon [name]=\"themeIconName\"></span>\n </span>\n </ng-container>\n\n <div class=\"alert-content\">\n <div class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n <span *ngIf=\"headingText\">{{ headingText }}</span>\n </div>\n\n <div\n #bodyContent\n class=\"alert-body\"\n [hidden]=\"!bodyContent.children.length\">\n <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n <ng-content></ng-content>\n\n <div\n #alertActions\n [hidden]=\"!alertActions.children.length\"\n class=\"alert-actions\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n </div>\n </div>\n\n <a\n *ngIf=\"dismissible\"\n class=\"close-icon\"\n (click)=\"closeAlert()\"\n data-bs-dismiss=\"alert\"\n aria-label=\"Close\">\n <span impdc-icon name=\"times\" theme=\"regular\"></span>\n </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] });
|
|
4033
4066
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
4034
4067
|
type: Component,
|
|
4035
|
-
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"
|
|
4068
|
+
args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n <ng-container *ngIf=\"!hideIcon\">\n <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n <ng-content select=\"[icon]\"></ng-content>\n </span>\n <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n <span impdc-icon [name]=\"themeIconName\"></span>\n </span>\n </ng-container>\n\n <div class=\"alert-content\">\n <div class=\"alert-heading\">\n <ng-content select=\"[heading]\"></ng-content>\n <span *ngIf=\"headingText\">{{ headingText }}</span>\n </div>\n\n <div\n #bodyContent\n class=\"alert-body\"\n [hidden]=\"!bodyContent.children.length\">\n <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n <ng-content></ng-content>\n\n <div\n #alertActions\n [hidden]=\"!alertActions.children.length\"\n class=\"alert-actions\">\n <ng-content select=\"[action]\"></ng-content>\n </div>\n </div>\n </div>\n\n <a\n *ngIf=\"dismissible\"\n class=\"close-icon\"\n (click)=\"closeAlert()\"\n data-bs-dismiss=\"alert\"\n aria-label=\"Close\">\n <span impdc-icon name=\"times\" theme=\"regular\"></span>\n </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"] }]
|
|
4036
4069
|
}], propDecorators: { theme: [{
|
|
4037
4070
|
type: Input
|
|
4038
4071
|
}], show: [{
|
|
4039
4072
|
type: Input
|
|
4040
4073
|
}], headingText: [{
|
|
4041
4074
|
type: Input
|
|
4075
|
+
}], bodyText: [{
|
|
4076
|
+
type: Input
|
|
4077
|
+
}], inline: [{
|
|
4078
|
+
type: Input
|
|
4079
|
+
}], hideIcon: [{
|
|
4080
|
+
type: Input
|
|
4081
|
+
}], dismissible: [{
|
|
4082
|
+
type: Input
|
|
4042
4083
|
}], dismiss: [{
|
|
4043
4084
|
type: Output
|
|
4044
4085
|
}] } });
|
|
@@ -4046,14 +4087,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
4046
4087
|
class AlertModule {
|
|
4047
4088
|
}
|
|
4048
4089
|
AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4049
|
-
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
|
|
4050
|
-
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule] });
|
|
4090
|
+
AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] });
|
|
4091
|
+
AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] });
|
|
4051
4092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
|
|
4052
4093
|
type: NgModule,
|
|
4053
4094
|
args: [{
|
|
4054
|
-
imports: [CommonModule],
|
|
4095
|
+
imports: [CommonModule, IconModule],
|
|
4055
4096
|
declarations: [AlertComponent],
|
|
4056
|
-
exports: [AlertComponent]
|
|
4097
|
+
exports: [IconModule, AlertComponent]
|
|
4057
4098
|
}]
|
|
4058
4099
|
}] });
|
|
4059
4100
|
|