circletone/esm2022/lib/components/atoms/alert/alert.component.mjs

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";
/**
 * The alert component is responsible to show alerts for diverse elements. Including `FormErrorComponent` among others.
 */
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
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYWxlcnQvYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYWxlcnQvYWxlcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDL0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHdDQUF3QyxDQUFDOztBQUNyRTs7R0FFRztBQVFILE1BQU0sT0FBTyxjQUFjO0lBUDNCO1FBUVcsZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFDN0IsYUFBUSxHQUFZLElBQUksQ0FBQztRQUNQLFNBQUksR0FBRyxFQUFFLENBQUM7UUFDNUIsU0FBSSxHQUFzQixRQUFRLENBQUMsT0FBTyxDQUFDO1FBQzNDLFlBQU8sR0FBeUIsV0FBVyxDQUFDLEtBQUssQ0FBQztRQUNsRCxhQUFRLEdBQVksSUFBSSxDQUFDO1FBQ3hCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBaUI5QztJQWZDLElBQUksSUFBSTtRQUNOLFFBQVEsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2xCLEtBQUssUUFBUSxDQUFDLE9BQU8sQ0FBQztZQUN0QixLQUFLLFFBQVEsQ0FBQyxTQUFTO2dCQUNyQixPQUFPLG9CQUFvQixDQUFDO1lBQzlCLEtBQUssUUFBUSxDQUFDLEtBQUs7Z0JBQ2pCLE9BQU8sc0JBQXNCLENBQUM7WUFDaEMsS0FBSyxRQUFRLENBQUMsT0FBTztnQkFDbkIsT0FBTyxvQkFBb0IsQ0FBQztZQUM5QixLQUFLLFFBQVEsQ0FBQyxPQUFPO2dCQUNuQixPQUFPLGNBQWMsQ0FBQztZQUN4QjtnQkFDRSxPQUFPLEVBQUUsQ0FBQztRQUNkLENBQUM7SUFDSCxDQUFDOzhHQXZCVSxjQUFjO2tHQUFkLGNBQWMseU9DaEIzQixxNUNBNEJBLDRDRGhCWSxhQUFhLCtIQUFFLGVBQWUsdUlBQUUsT0FBTzs7MkZBSXRDLGNBQWM7a0JBUDFCLFNBQVM7K0JBQ0UsVUFBVSxjQUNSLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRSxlQUFlLEVBQUUsT0FBTyxDQUFDLG1CQUVqQyx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ3FCLElBQUk7c0JBQTlCLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUNoQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVHlwZUVudW0gfSBmcm9tICcuLi8uLi8uLi9tb2RlbC9jb21wb25lbnRzL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IFZhcmlhbnRFbnVtIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWwvY29tcG9uZW50cy92YXJpYW50LmVudW0nO1xuLyoqXG4gKiBUaGUgYWxlcnQgY29tcG9uZW50IGlzIHJlc3BvbnNpYmxlIHRvIHNob3cgYWxlcnRzIGZvciBkaXZlcnNlIGVsZW1lbnRzLiBJbmNsdWRpbmcgYEZvcm1FcnJvckNvbXBvbmVudGAgYW1vbmcgb3RoZXJzLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjdC1hbGVydCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtJY29uQ29tcG9uZW50LCBCdXR0b25Db21wb25lbnQsIE5nQ2xhc3NdLFxuICB0ZW1wbGF0ZVVybDogJy4vYWxlcnQuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQWxlcnRDb21wb25lbnQge1xuICBASW5wdXQoKSBkaXNtaXNzYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBmdWxsU2l6ZTogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHRleHQgPSAnJztcbiAgQElucHV0KCkgdHlwZTogVHlwZUVudW0gfCBzdHJpbmcgPSBUeXBlRW51bS5QUklNQVJZO1xuICBASW5wdXQoKSB2YXJpYW50OiBWYXJpYW50RW51bSB8IHN0cmluZyA9IFZhcmlhbnRFbnVtLlNPTElEO1xuICBASW5wdXQoKSB3aXRoSWNvbjogYm9vbGVhbiA9IHRydWU7XG4gIEBPdXRwdXQoKSBkaXNtaXNzID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIGdldCBpY29uKCk6IHN0cmluZyB7XG4gICAgc3dpdGNoICh0aGlzLnR5cGUpIHtcbiAgICAgIGNhc2UgVHlwZUVudW0uUFJJTUFSWTpcbiAgICAgIGNhc2UgVHlwZUVudW0uU0VDT05EQVJZOlxuICAgICAgICByZXR1cm4gJ2luZm9ybWF0aW9uLWNpcmNsZSc7XG4gICAgICBjYXNlIFR5cGVFbnVtLkVSUk9SOlxuICAgICAgICByZXR1cm4gJ2V4Y2xhbWF0aW9uLXRyaWFuZ2xlJztcbiAgICAgIGNhc2UgVHlwZUVudW0uV0FSTklORzpcbiAgICAgICAgcmV0dXJuICdleGNsYW1hdGlvbi1jaXJjbGUnO1xuICAgICAgY2FzZSBUeXBlRW51bS5TVUNDRVNTOlxuICAgICAgICByZXR1cm4gJ2NoZWNrLWNpcmNsZSc7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gJyc7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwibWItNCBmbGV4IGZsZXgtcm93IGl0ZW1zLWNlbnRlciBnYXAtMSByb3VuZGVkLWxnXCJcbiAgW2NsYXNzLnctZml0XT1cIiFmdWxsU2l6ZVwiXG4gIFtjbGFzcy53LWZ1bGxdPVwiZnVsbFNpemVcIlxuICByb2xlPVwiYWxlcnRcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgJ2JnLXN1cmZhY2UtdmFyaWFudCBkYXJrOmJnLXN1cmZhY2UtdmFyaWFudC1kYXJrIHRleHQtb24tc3VyZmFjZSBkYXJrOnRleHQtb24tc3VyZmFjZS1kYXJrJzpcbiAgICAgIHR5cGUgPT09ICdwcmltYXJ5JyAmJiB2YXJpYW50ID09PSAnc29saWQnLFxuICAgICdiZy13YXJuaW5nIGRhcms6Ymctd2FybmluZy1kYXJrIHRleHQtb24td2FybmluZyBkYXJrOnRleHQtb24td2FybmluZy1kYXJrJzpcbiAgICAgIHR5cGUgPT09ICd3YXJuaW5nJyAmJiB2YXJpYW50ID09PSAnc29saWQnLFxuICAgICdiZy1lcnJvciBkYXJrOmJnLWVycm9yLWRhcmsgdGV4dC1vbi1lcnJvciBkYXJrOnRleHQtb24tZXJyb3ItZGFyayc6IHR5cGUgPT09ICdlcnJvcicgJiYgdmFyaWFudCA9PT0gJ3NvbGlkJyxcbiAgICAnYmctc3VjY2VzcyBkYXJrOmJnLXN1Y2Nlc3MtZGFyayB0ZXh0LW9uLXN1Y2Nlc3MgZGFyazp0ZXh0LW9uLXN1Y2Nlc3MtZGFyayc6XG4gICAgICB0eXBlID09PSAnc3VjY2VzcycgJiYgdmFyaWFudCA9PT0gJ3NvbGlkJyxcbiAgICBib3JkZXI6IHZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAnYm9yZGVyLXN1cmZhY2UtdmFyaWFudCBkYXJrOmJvcmRlci1zdXJmYWNlLXZhcmlhbnQtZGFyayc6IHR5cGUgPT09ICdwcmltYXJ5JyAmJiB2YXJpYW50ID09PSAnb3V0bGluZScsXG4gICAgJ2JvcmRlci13YXJuaW5nIGRhcms6Ym9yZGVyLXdhcm5pbmctZGFyayc6IHR5cGUgPT09ICd3YXJuaW5nJyAmJiB2YXJpYW50ID09PSAnb3V0bGluZScsXG4gICAgJ2JvcmRlci1lcnJvciBkYXJrOmJvcmRlci1lcnJvci1kYXJrJzogdHlwZSA9PT0gJ2Vycm9yJyAmJiB2YXJpYW50ID09PSAnb3V0bGluZScsXG4gICAgJ2JvcmRlci1zdWNjZXNzIGRhcms6Ym9yZGVyLXN1Y2Nlc3MtZGFyayc6IHR5cGUgPT09ICdzdWNjZXNzJyAmJiB2YXJpYW50ID09PSAnb3V0bGluZScsXG4gICAgJ3B4LTQgcHktMic6IHZhcmlhbnQgIT09ICdibGFuaydcbiAgfVwiPlxuICBAaWYgKHdpdGhJY29uKSB7XG4gICAgPGN0LWljb24gW2ljb25dPVwidGhpcy5pY29uXCIgLz5cbiAgfVxuICA8c3BhbiBjbGFzcz1cImdyb3cgdGV4dC1zbSBmb250LXNlbWlib2xkXCI+e3sgdGV4dCB9fTwvc3Bhbj5cbiAgQGlmIChkaXNtaXNzYWJsZSkge1xuICAgIDxjdC1idXR0b24gaWNvbj1cIngtbWFya1wiIHNpemU9XCJzbVwiIHZhcmlhbnQ9XCJibGFua1wiIFt0eXBlXT1cInR5cGVcIiAoY2xpY2spPVwiZGlzbWlzcy5lbWl0KClcIiAvPlxuICB9XG48L2Rpdj5cbiJdfQ==