| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
- import { TypeEnum } from '../../../model/components/type.enum';
- import { IconComponent } from '../icon/icon.component';
- import { NgClass } from '@angular/common';
- import { ButtonComponent } from '../button/button.component';
- import { VariantEnum } from '../../../model/components/variant.enum';
- import * as i0 from "@angular/core";
- export class AlertComponent {
- constructor() {
- this.dismissable = false;
- this.fullSize = true;
- this.text = '';
- this.type = TypeEnum.PRIMARY;
- this.variant = VariantEnum.SOLID;
- this.withIcon = true;
- this.dismiss = new EventEmitter();
- }
- get icon() {
- switch (this.type) {
- case TypeEnum.PRIMARY:
- case TypeEnum.SECONDARY:
- return 'information-circle';
- case TypeEnum.ERROR:
- return 'exclamation-triangle';
- case TypeEnum.WARNING:
- return 'exclamation-circle';
- case TypeEnum.SUCCESS:
- return 'check-circle';
- default:
- return '';
- }
- }
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AlertComponent, isStandalone: true, selector: "ct-alert", inputs: { dismissable: "dismissable", fullSize: "fullSize", text: "text", type: "type", variant: "variant", withIcon: "withIcon" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div\n class=\"mb-4 flex flex-row items-center gap-1 rounded-lg\"\n [class.w-fit]=\"!fullSize\"\n [class.w-full]=\"fullSize\"\n role=\"alert\"\n [ngClass]=\"{\n 'bg-surface-variant dark:bg-surface-variant-dark text-on-surface dark:text-on-surface-dark':\n type === 'primary' && variant === 'solid',\n 'bg-warning dark:bg-warning-dark text-on-warning dark:text-on-warning-dark':\n type === 'warning' && variant === 'solid',\n 'bg-error dark:bg-error-dark text-on-error dark:text-on-error-dark': type === 'error' && variant === 'solid',\n 'bg-success dark:bg-success-dark text-on-success dark:text-on-success-dark':\n type === 'success' && variant === 'solid',\n border: variant === 'outline',\n 'border-surface-variant dark:border-surface-variant-dark': type === 'primary' && variant === 'outline',\n 'border-warning dark:border-warning-dark': type === 'warning' && variant === 'outline',\n 'border-error dark:border-error-dark': type === 'error' && variant === 'outline',\n 'border-success dark:border-success-dark': type === 'success' && variant === 'outline',\n 'px-4 py-2': variant !== 'blank'\n }\">\n @if (withIcon) {\n <ct-icon [icon]=\"this.icon\" />\n }\n <span class=\"grow text-sm font-semibold\">{{ text }}</span>\n @if (dismissable) {\n <ct-button icon=\"x-mark\" size=\"sm\" variant=\"blank\" [type]=\"type\" (click)=\"dismiss.emit()\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "component", type: ButtonComponent, selector: "ct-button", inputs: ["text", "icon", "iconPosition", "fullSize", "size", "type", "variant"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AlertComponent, decorators: [{
- type: Component,
- args: [{ selector: 'ct-alert', standalone: true, imports: [IconComponent, ButtonComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"mb-4 flex flex-row items-center gap-1 rounded-lg\"\n [class.w-fit]=\"!fullSize\"\n [class.w-full]=\"fullSize\"\n role=\"alert\"\n [ngClass]=\"{\n 'bg-surface-variant dark:bg-surface-variant-dark text-on-surface dark:text-on-surface-dark':\n type === 'primary' && variant === 'solid',\n 'bg-warning dark:bg-warning-dark text-on-warning dark:text-on-warning-dark':\n type === 'warning' && variant === 'solid',\n 'bg-error dark:bg-error-dark text-on-error dark:text-on-error-dark': type === 'error' && variant === 'solid',\n 'bg-success dark:bg-success-dark text-on-success dark:text-on-success-dark':\n type === 'success' && variant === 'solid',\n border: variant === 'outline',\n 'border-surface-variant dark:border-surface-variant-dark': type === 'primary' && variant === 'outline',\n 'border-warning dark:border-warning-dark': type === 'warning' && variant === 'outline',\n 'border-error dark:border-error-dark': type === 'error' && variant === 'outline',\n 'border-success dark:border-success-dark': type === 'success' && variant === 'outline',\n 'px-4 py-2': variant !== 'blank'\n }\">\n @if (withIcon) {\n <ct-icon [icon]=\"this.icon\" />\n }\n <span class=\"grow text-sm font-semibold\">{{ text }}</span>\n @if (dismissable) {\n <ct-button icon=\"x-mark\" size=\"sm\" variant=\"blank\" [type]=\"type\" (click)=\"dismiss.emit()\" />\n }\n</div>\n" }]
- }], propDecorators: { dismissable: [{
- type: Input
- }], fullSize: [{
- type: Input
- }], text: [{
- type: Input,
- args: [{ required: true }]
- }], type: [{
- type: Input
- }], variant: [{
- type: Input
- }], withIcon: [{
- type: Input
- }], dismiss: [{
- type: Output
- }] } });
|
