@impartner/design-components 1.0.5 → 1.1.0

package/fesm2020/impartner-design-components.mjs

@@ -4000,16 +4000,32 @@ class AlertComponent {
          */
         this.show = false;
         /**
-         * The heading text of the Alert.
+         * The heading text of the Alert. Content can also be projected in the heading area using a `heading` directive.
          */
         this.headingText = '';
+        /**
+         * The body text of the Alert. Content can also be projected into the body area using default projection.
+         */
+        this.bodyText = '';
+        /**
+         * By default, an Alert is a "floating" notification. When set to "inline", these "floating" styles are replaced.
+         */
+        this.inline = false;
+        /**
+         * Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
+         */
+        this.hideIcon = false;
+        /**
+         * Allows the Alert to be dismissed.
+         */
+        this.dismissible = true;
         /**
          * Event emitted when the Alert is dismissed.
          */
         this.dismiss = new EventEmitter();
     }
-    get alertColor() {
-        return this.theme === 'warning'
+    get componentClasses() {
+        const themeClass = this.theme === 'warning'
             ? 'alert-warning'
             : this.theme === 'info'
                 ? 'alert-info'
@@ -4018,23 +4034,48 @@ class AlertComponent {
                     : this.theme === 'success'
                         ? 'alert-success'
                         : '';
+        const inlineClass = this.inline ? ' alert-inline' : '';
+        const dismissibleClass = this.dismissible ? ' alert-dismissible' : '';
+        return themeClass + inlineClass + dismissibleClass;
+    }
+    get themeIconName() {
+        return this.theme === 'warning'
+            ? 'exclamation-circle'
+            : this.theme === 'info'
+                ? 'info-circle'
+                : this.theme === 'danger'
+                    ? 'times-circle'
+                    : this.theme === 'success'
+                        ? 'check-circle'
+                        : '';
     }
     closeAlert() {
+        if (!this.dismissible) {
+            return;
+        }
         this.show = false;
         this.dismiss.emit();
     }
 }
 AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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=\"alert alert-dismissible\" [ngClass]=\"alertColor\">\n  <div class=\"alert-heading\">\n    <span class=\"alert-heading-left\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <ng-container *ngIf=\"headingText\">\n        <span class=\"alert-heading-text\">{{ headingText }}</span>\n      </ng-container>\n    </span>\n    <div\n      (click)=\"closeAlert()\"\n      class=\"close-icon\"\n      data-bs-dismiss=\"alert\"\n      aria-label=\"Close\">\n      <span class=\"fas fa-times\"></span>\n    </div>\n  </div>\n  <div class=\"alert-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".alert-dismissible{padding-right:2rem}.icon{width:1.6rem;height:1.6rem;padding-right:1.4rem}.alert-heading{display:flex;align-items:center;font-weight:500;font-size:1.4rem;line-height:2rem}.alert-heading-left{display:inline-flex;align-items:center;gap:1rem}.alert-body{margin:.8rem 0}.heading-wrapper:first-child{margin:0}.close-icon{position:absolute;right:0;margin:1.75rem 1.4rem;font-size:1.6rem;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"alert alert-dismissible\" [ngClass]=\"alertColor\">\n  <div class=\"alert-heading\">\n    <span class=\"alert-heading-left\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <ng-container *ngIf=\"headingText\">\n        <span class=\"alert-heading-text\">{{ headingText }}</span>\n      </ng-container>\n    </span>\n    <div\n      (click)=\"closeAlert()\"\n      class=\"close-icon\"\n      data-bs-dismiss=\"alert\"\n      aria-label=\"Close\">\n      <span class=\"fas fa-times\"></span>\n    </div>\n  </div>\n  <div class=\"alert-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".alert-dismissible{padding-right:2rem}.icon{width:1.6rem;height:1.6rem;padding-right:1.4rem}.alert-heading{display:flex;align-items:center;font-weight:500;font-size:1.4rem;line-height:2rem}.alert-heading-left{display:inline-flex;align-items:center;gap:1rem}.alert-body{margin:.8rem 0}.heading-wrapper:first-child{margin:0}.close-icon{position:absolute;right:0;margin:1.75rem 1.4rem;font-size:1.6rem;cursor:pointer}\n"] }]
+            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"] }]
         }], propDecorators: { theme: [{
                 type: Input
             }], show: [{
                 type: Input
             }], headingText: [{
                 type: Input
+            }], bodyText: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], hideIcon: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
             }], dismiss: [{
                 type: Output
             }] } });
@@ -4042,14 +4083,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class AlertModule {
 }
 AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
-AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule] });
+AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule, IconModule], exports: [IconModule, AlertComponent] });
+AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule, IconModule, IconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, IconModule],
                     declarations: [AlertComponent],
-                    exports: [AlertComponent]
+                    exports: [IconModule, AlertComponent]
                 }]
         }] });