@porscheinformatik/material-addons 17.4.3 → 17.4.4

package/esm2022/lib/alert/alert.component.mjs

@@ -0,0 +1,60 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/material/button";
+export class AlertComponent {
+    constructor() {
+        this.type = 'info';
+        this.message = '';
+        this.size = 'medium';
+        this.actionText = '';
+        this.closeable = true;
+        this.close = new EventEmitter();
+        this.action = new EventEmitter();
+    }
+    get icon() {
+        switch (this.type) {
+            case 'success':
+                return 'check_circle';
+            case 'info':
+                return 'info';
+            case 'warning':
+                return 'warning';
+            case 'error':
+                return 'error';
+            default:
+                return '';
+        }
+    }
+    closeAlert() {
+        this.close.emit();
+    }
+    onAction() {
+        this.action.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: AlertComponent, isStandalone: true, selector: "mad-alert", inputs: { type: "type", message: "message", size: "size", actionText: "actionText", closeable: "closeable" }, outputs: { close: "close", action: "action" }, ngImport: i0, template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"><mat-icon>{{ icon }}</mat-icon></span>\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"closeable\">\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"closeAlert()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mad-alert', standalone: true, imports: [CommonModule, MatIconModule, MatButtonModule], template: "<div data-cy=\"alert\" class=\"alert\" [ngClass]=\"[type, size]\">\n  <span data-cy=\"alert-icon\" class=\"icon\"><mat-icon>{{ icon }}</mat-icon></span>\n  <span data-cy=\"alert-message\" class=\"message\">{{ message }}</span>\n  <ng-container *ngIf=\"actionText\">\n    <span data-cy=\"alert-action-btn\" class=\"action-btn\" (click)=\"onAction()\">{{ actionText }}</span>\n  </ng-container>\n  <ng-container *ngIf=\"closeable\">\n    <button mat-icon-button data-cy=\"alert-close-btn\" class=\"close-btn\" (click)=\"closeAlert()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</div>\n", styles: [".alert{display:flex;align-items:center;padding:16px;border-radius:4px;margin:8px 0;font-size:14px;position:relative;border:1px solid transparent}.alert.small{padding:0 8px;font-size:14px}.alert.medium{padding:8px;font-size:16px}.alert.large{padding:12px 8px;font-size:18px}.alert .icon{margin-right:8px}.alert .message{flex:1}.alert .action-btn,.alert .close-btn{color:inherit;margin-left:auto;padding:0}.alert .action-btn{text-decoration:underline;cursor:pointer}.alert.success{background-color:var(--alert-success-background-color);border-color:var(--alert-success-border-color);color:var(--alert-success-text-color)}.alert.info{background-color:var(--alert-info-background-color);border-color:var(--alert-info-border-color);color:var(--alert-info-text-color)}.alert.warning{background-color:var(--alert-warning-background-color);border-color:var(--alert-warning-border-color);color:var(--alert-warning-text-color)}.alert.error{background-color:var(--alert-error-background-color);border-color:var(--alert-error-border-color);color:var(--alert-error-text-color)}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], actionText: [{
+                type: Input
+            }], closeable: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], action: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0ZXJpYWwtYWRkb25zL3NyYy9saWIvYWxlcnQvYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWF0ZXJpYWwtYWRkb25zL3NyYy9saWIvYWxlcnQvYWxlcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7Ozs7QUFZM0QsTUFBTSxPQUFPLGNBQWM7SUFQM0I7UUFRVyxTQUFJLEdBQWMsTUFBTSxDQUFDO1FBQ3pCLFlBQU8sR0FBVyxFQUFFLENBQUM7UUFDckIsU0FBSSxHQUFjLFFBQVEsQ0FBQztRQUMzQixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBQ3hCLGNBQVMsR0FBWSxJQUFJLENBQUM7UUFDekIsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFDakMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0F3QjdDO0lBdEJDLElBQUksSUFBSTtRQUNOLFFBQVEsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNqQixLQUFLLFNBQVM7Z0JBQ1osT0FBTyxjQUFjLENBQUM7WUFDeEIsS0FBSyxNQUFNO2dCQUNULE9BQU8sTUFBTSxDQUFDO1lBQ2hCLEtBQUssU0FBUztnQkFDWixPQUFPLFNBQVMsQ0FBQztZQUNuQixLQUFLLE9BQU87Z0JBQ1YsT0FBTyxPQUFPLENBQUM7WUFDakI7Z0JBQ0UsT0FBTyxFQUFFLENBQUM7U0FDYjtJQUNILENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQzs4R0E5QlUsY0FBYztrR0FBZCxjQUFjLGtPQ2YzQixxbUJBWUEsbW1DRERZLFlBQVksZ09BQUUsYUFBYSxtTEFBRSxlQUFlOzsyRkFJM0MsY0FBYztrQkFQMUIsU0FBUzsrQkFDRSxXQUFXLGNBQ1QsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUM7OEJBSzlDLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDSSxLQUFLO3NCQUFkLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBNYXRJY29uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvaWNvbic7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuXG5leHBvcnQgdHlwZSBBbGVydFR5cGUgPSAnc3VjY2VzcycgfCAnaW5mbycgfCAnd2FybmluZycgfCAnZXJyb3InO1xuZXhwb3J0IHR5cGUgQWxlcnRTaXplID0gJ3NtYWxsJyB8ICdtZWRpdW0nIHwgJ2xhcmdlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbWFkLWFsZXJ0JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgTWF0SWNvbk1vZHVsZSwgTWF0QnV0dG9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2FsZXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2FsZXJ0LmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgQWxlcnRDb21wb25lbnQge1xuICBASW5wdXQoKSB0eXBlOiBBbGVydFR5cGUgPSAnaW5mbyc7XG4gIEBJbnB1dCgpIG1lc3NhZ2U6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBzaXplOiBBbGVydFNpemUgPSAnbWVkaXVtJztcbiAgQElucHV0KCkgYWN0aW9uVGV4dDogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGNsb3NlYWJsZTogYm9vbGVhbiA9IHRydWU7XG4gIEBPdXRwdXQoKSBjbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgQE91dHB1dCgpIGFjdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBnZXQgaWNvbigpIHtcbiAgICBzd2l0Y2ggKHRoaXMudHlwZSkge1xuICAgICAgY2FzZSAnc3VjY2Vzcyc6XG4gICAgICAgIHJldHVybiAnY2hlY2tfY2lyY2xlJztcbiAgICAgIGNhc2UgJ2luZm8nOlxuICAgICAgICByZXR1cm4gJ2luZm8nO1xuICAgICAgY2FzZSAnd2FybmluZyc6XG4gICAgICAgIHJldHVybiAnd2FybmluZyc7XG4gICAgICBjYXNlICdlcnJvcic6XG4gICAgICAgIHJldHVybiAnZXJyb3InO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuICcnO1xuICAgIH1cbiAgfVxuXG4gIGNsb3NlQWxlcnQoKSB7XG4gICAgdGhpcy5jbG9zZS5lbWl0KCk7XG4gIH1cblxuICBvbkFjdGlvbigpIHtcbiAgICB0aGlzLmFjdGlvbi5lbWl0KCk7XG4gIH1cbn1cbiIsIjxkaXYgZGF0YS1jeT1cImFsZXJ0XCIgY2xhc3M9XCJhbGVydFwiIFtuZ0NsYXNzXT1cIlt0eXBlLCBzaXplXVwiPlxuICA8c3BhbiBkYXRhLWN5PVwiYWxlcnQtaWNvblwiIGNsYXNzPVwiaWNvblwiPjxtYXQtaWNvbj57eyBpY29uIH19PC9tYXQtaWNvbj48L3NwYW4+XG4gIDxzcGFuIGRhdGEtY3k9XCJhbGVydC1tZXNzYWdlXCIgY2xhc3M9XCJtZXNzYWdlXCI+e3sgbWVzc2FnZSB9fTwvc3Bhbj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImFjdGlvblRleHRcIj5cbiAgICA8c3BhbiBkYXRhLWN5PVwiYWxlcnQtYWN0aW9uLWJ0blwiIGNsYXNzPVwiYWN0aW9uLWJ0blwiIChjbGljayk9XCJvbkFjdGlvbigpXCI+e3sgYWN0aW9uVGV4dCB9fTwvc3Bhbj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJjbG9zZWFibGVcIj5cbiAgICA8YnV0dG9uIG1hdC1pY29uLWJ1dHRvbiBkYXRhLWN5PVwiYWxlcnQtY2xvc2UtYnRuXCIgY2xhc3M9XCJjbG9zZS1idG5cIiAoY2xpY2spPVwiY2xvc2VBbGVydCgpXCI+XG4gICAgICA8bWF0LWljb24+Y2xvc2U8L21hdC1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuIl19