@ng-matero/extensions
Version:
Angular Material Extensions
68 lines (63 loc) • 7.68 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconButton } from '@angular/material/button';
class MtxAlert {
get _hostClassList() {
return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;
}
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
/** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
this.type = 'default';
/** Whether to display an inline close button. */
this.dismissible = false;
/** The alert's elevation (0~24). */
this.elevation = 0;
/** Event emitted when the alert closed. */
this.closed = new EventEmitter();
}
_onClosed() {
this._changeDetectorRef.markForCheck();
this.closed.emit(this);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxAlert, isStandalone: true, selector: "mtx-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert-dismissible": "dismissible", "class": "this._hostClassList" }, classAttribute: "mtx-alert" }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n </svg>\n </button>\n </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-app-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-app-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-app-surface-container));color:var(--mtx-alert-text-color, var(--mat-app-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color);background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color);background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color);background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color);background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlert, decorators: [{
type: Component,
args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
'class': 'mtx-alert',
'[class.mtx-alert-dismissible]': 'dismissible',
'role': 'alert',
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconButton], template: "<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n </svg>\n </button>\n </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-app-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-app-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-app-surface-container));color:var(--mtx-alert-text-color, var(--mat-app-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color);background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color);background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color);background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color);background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _hostClassList: [{
type: HostBinding,
args: ['class']
}], type: [{
type: Input
}], dismissible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], elevation: [{
type: Input
}], closed: [{
type: Output
}] } });
class MtxAlertModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, MtxAlert],
exports: [MtxAlert],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MtxAlert, MtxAlertModule };
//# sourceMappingURL=mtxAlert.mjs.map