@ng-matero/extensions
Version:
Angular Material Extensions
46 lines • 10.9 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, ViewEncapsulation, booleanAttribute, } from '@angular/core';
import { MatIconButton } from '@angular/material/button';
import * as i0 from "@angular/core";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9leHRlbnNpb25zL2FsZXJ0L2FsZXJ0LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9hbGVydC9hbGVydC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsRUFDakIsZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7QUFtQnpELE1BQU0sT0FBTyxRQUFRO0lBQ25CLElBQ0ksY0FBYztRQUNoQixPQUFPLGFBQWEsSUFBSSxDQUFDLElBQUksbUJBQW1CLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuRSxDQUFDO0lBY0QsWUFBb0Isa0JBQXFDO1FBQXJDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBbUI7UUFaekQsb0ZBQW9GO1FBQzNFLFNBQUksR0FBaUIsU0FBUyxDQUFDO1FBRXhDLGlEQUFpRDtRQUNULGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRTVELG9DQUFvQztRQUMzQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBRXZCLDJDQUEyQztRQUNqQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztJQUVZLENBQUM7SUFFN0QsU0FBUztRQUNQLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO2lJQXZCVSxRQUFRO3FIQUFSLFFBQVEsaUhBVUMsZ0JBQWdCLGtSQ3hDdEMsNGNBVUEsMDJDRGtCWSxhQUFhOzsyRkFFWixRQUFRO2tCQWZwQixTQUFTOytCQUNFLFdBQVcsWUFDWCxVQUFVLFFBQ2Q7d0JBQ0osT0FBTyxFQUFFLFdBQVc7d0JBQ3BCLCtCQUErQixFQUFFLGFBQWE7d0JBQzlDLE1BQU0sRUFBRSxPQUFPO3FCQUNoQixpQkFHYyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLElBQUksV0FDUCxDQUFDLGFBQWEsQ0FBQztzRkFJcEIsY0FBYztzQkFEakIsV0FBVzt1QkFBQyxPQUFPO2dCQU1YLElBQUk7c0JBQVosS0FBSztnQkFHa0MsV0FBVztzQkFBbEQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFHN0IsU0FBUztzQkFBakIsS0FBSztnQkFHSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIGJvb2xlYW5BdHRyaWJ1dGUsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0SWNvbkJ1dHRvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7XG5cbmV4cG9ydCB0eXBlIE10eEFsZXJ0VHlwZSA9ICdkZWZhdWx0JyB8ICdpbmZvJyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdkYW5nZXInO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtdHgtYWxlcnQnLFxuICBleHBvcnRBczogJ210eEFsZXJ0JyxcbiAgaG9zdDoge1xuICAgICdjbGFzcyc6ICdtdHgtYWxlcnQnLFxuICAgICdbY2xhc3MubXR4LWFsZXJ0LWRpc21pc3NpYmxlXSc6ICdkaXNtaXNzaWJsZScsXG4gICAgJ3JvbGUnOiAnYWxlcnQnLFxuICB9LFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9hbGVydC5zY3NzJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtNYXRJY29uQnV0dG9uXSxcbn0pXG5leHBvcnQgY2xhc3MgTXR4QWxlcnQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IF9ob3N0Q2xhc3NMaXN0KCkge1xuICAgIHJldHVybiBgbXR4LWFsZXJ0LSR7dGhpcy50eXBlfSBtYXQtZWxldmF0aW9uLXoke3RoaXMuZWxldmF0aW9ufWA7XG4gIH1cblxuICAvKiogVGhlIGFsZXJ0J3MgdHlwZS4gQ2FuIGJlIGBkZWZhdWx0YCwgYGluZm9gLCBgc3VjY2Vzc2AsIGB3YXJuaW5nYCBvciBgZGFuZ2VyYC4gKi9cbiAgQElucHV0KCkgdHlwZTogTXR4QWxlcnRUeXBlID0gJ2RlZmF1bHQnO1xuXG4gIC8qKiBXaGV0aGVyIHRvIGRpc3BsYXkgYW4gaW5saW5lIGNsb3NlIGJ1dHRvbi4gKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGRpc21pc3NpYmxlID0gZmFsc2U7XG5cbiAgLyoqIFRoZSBhbGVydCdzIGVsZXZhdGlvbiAoMH4yNCkuICovXG4gIEBJbnB1dCgpIGVsZXZhdGlvbiA9IDA7XG5cbiAgLyoqIEV2ZW50IGVtaXR0ZWQgd2hlbiB0aGUgYWxlcnQgY2xvc2VkLiAqL1xuICBAT3V0cHV0KCkgY2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcjxNdHhBbGVydD4oKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9jaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgX29uQ2xvc2VkKCk6IHZvaWQge1xuICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIHRoaXMuY2xvc2VkLmVtaXQodGhpcyk7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbkBpZiAoZGlzbWlzc2libGUpIHtcbiAgPGRpdiBjbGFzcz1cIm10eC1hbGVydC1jbG9zZVwiPlxuICAgIDxidXR0b24gbWF0LWljb24tYnV0dG9uIHR5cGU9XCJidXR0b25cIiBhcmlhLWxhYmVsPVwiQ2xvc2VcIiAoY2xpY2spPVwiX29uQ2xvc2VkKClcIj5cbiAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAyNCAyNFwiIHdpZHRoPVwiMjRweFwiIGhlaWdodD1cIjI0cHhcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgZm9jdXNhYmxlPVwiZmFsc2VcIj5cbiAgICAgICAgPHBhdGggZD1cIk0xOSw2LjQxTDE3LjU5LDVMMTIsMTAuNTlMNi40MSw1TDUsNi40MUwxMC41OSwxMkw1LDE3LjU5TDYuNDEsMTlMMTIsMTMuNDFMMTcuNTksMTlMMTksMTcuNTlMMTMuNDEsMTJMMTksNi40MVpcIiAvPlxuICAgICAgPC9zdmc+XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxufVxuIl19