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

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { NgClass } from '@angular/common';
import { ButtonComponent } from '../button/button.component';
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 = 'primary';
        this.variant = 'solid';
        this.size = 'base';
        this.withIcon = true;
        this.dismiss = new EventEmitter();
    }
    get icon() {
        switch (this.type) {
            case 'primary':
            case 'secondary':
            case 'neutral':
                return 'information-circle';
            case 'error':
                return 'exclamation-triangle';
            case 'warning':
                return 'exclamation-circle';
            case 'success':
                return 'check-circle';
            default:
                return '';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: AlertComponent, isStandalone: true, selector: "ct-alert", inputs: { dismissable: "dismissable", fullSize: "fullSize", text: "text", type: "type", variant: "variant", size: "size", withIcon: "withIcon" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center gap-1 rounded-lg font-primary\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  role=\"alert\"\n  [ngClass]=\"{\n    'text-xs': size === 'xs' || size === 'sm',\n    'text-sm': size === 'base',\n    'text-base': size === 'lg' || size === 'xl',\n    'text-primary dark:text-on-primary-dark': type === 'primary' && variant !== 'solid',\n    'text-neutral dark:text-on-neutral-dark': type === 'neutral' && variant !== 'solid',\n    'text-warning dark:text-warning-variant-dark': type === 'warning' && variant !== 'solid',\n    'text-error dark:text-error-variant-dark': type === 'error' && variant !== 'solid',\n    'text-success dark:texts-success-variant-dark': type === 'success' && variant !== 'solid',\n\n    'bg-primary dark:bg-primary-dark text-on-primary dark:text-on-primary-dark':\n      type === 'primary' && variant === 'solid',\n    'bg-neutral dark:bg-neutral-dark text-on-neutral dark:text-on-neutral-dark':\n      type === 'neutral' && 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\n    border: variant === 'outline',\n    'border-primary dark:border-primary-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\" [size]=\"size\" />\n  }\n  <span class=\"grow font-semibold\">{{ text }}</span>\n  @if (dismissable) {\n    <ct-button\n      icon=\"x-mark\"\n      size=\"sm\"\n      [variant]=\"this.variant === 'solid' ? 'solid' : 'blank'\"\n      [type]=\"type\"\n      (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", "role", "disabled", "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.5", ngImport: i0, type: AlertComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-alert', standalone: true, imports: [IconComponent, ButtonComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-row items-center gap-1 rounded-lg font-primary\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  role=\"alert\"\n  [ngClass]=\"{\n    'text-xs': size === 'xs' || size === 'sm',\n    'text-sm': size === 'base',\n    'text-base': size === 'lg' || size === 'xl',\n    'text-primary dark:text-on-primary-dark': type === 'primary' && variant !== 'solid',\n    'text-neutral dark:text-on-neutral-dark': type === 'neutral' && variant !== 'solid',\n    'text-warning dark:text-warning-variant-dark': type === 'warning' && variant !== 'solid',\n    'text-error dark:text-error-variant-dark': type === 'error' && variant !== 'solid',\n    'text-success dark:texts-success-variant-dark': type === 'success' && variant !== 'solid',\n\n    'bg-primary dark:bg-primary-dark text-on-primary dark:text-on-primary-dark':\n      type === 'primary' && variant === 'solid',\n    'bg-neutral dark:bg-neutral-dark text-on-neutral dark:text-on-neutral-dark':\n      type === 'neutral' && 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\n    border: variant === 'outline',\n    'border-primary dark:border-primary-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\" [size]=\"size\" />\n  }\n  <span class=\"grow font-semibold\">{{ text }}</span>\n  @if (dismissable) {\n    <ct-button\n      icon=\"x-mark\"\n      size=\"sm\"\n      [variant]=\"this.variant === 'solid' ? 'solid' : 'blank'\"\n      [type]=\"type\"\n      (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
            }], size: [{
                type: Input
            }], withIcon: [{
                type: Input
            }], dismiss: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYWxlcnQvYWxlcnQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYWxlcnQvYWxlcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7QUFHN0Q7O0dBRUc7QUFRSCxNQUFNLE9BQU8sY0FBYztJQVAzQjtRQVFXLGdCQUFXLEdBQVksS0FBSyxDQUFDO1FBQzdCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFDUCxTQUFJLEdBQUcsRUFBRSxDQUFDO1FBQzVCLFNBQUksR0FBa0IsU0FBUyxDQUFDO1FBQ2hDLFlBQU8sR0FBcUIsT0FBTyxDQUFDO1FBQ3BDLFNBQUksR0FBa0IsTUFBTSxDQUFDO1FBQzdCLGFBQVEsR0FBWSxJQUFJLENBQUM7UUFDeEIsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FrQjlDO0lBaEJDLElBQUksSUFBSTtRQUNOLFFBQVEsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2xCLEtBQUssU0FBUyxDQUFDO1lBQ2YsS0FBSyxXQUFXLENBQUM7WUFDakIsS0FBSyxTQUFTO2dCQUNaLE9BQU8sb0JBQW9CLENBQUM7WUFDOUIsS0FBSyxPQUFPO2dCQUNWLE9BQU8sc0JBQXNCLENBQUM7WUFDaEMsS0FBSyxTQUFTO2dCQUNaLE9BQU8sb0JBQW9CLENBQUM7WUFDOUIsS0FBSyxTQUFTO2dCQUNaLE9BQU8sY0FBYyxDQUFDO1lBQ3hCO2dCQUNFLE9BQU8sRUFBRSxDQUFDO1FBQ2QsQ0FBQztJQUNILENBQUM7OEdBekJVLGNBQWM7a0dBQWQsY0FBYyx1UENqQjNCLHdxRUE2Q0EsNENEaENZLGFBQWEsK0hBQUUsZUFBZSwySkFBRSxPQUFPOzsyRkFJdEMsY0FBYztrQkFQMUIsU0FBUzsrQkFDRSxVQUFVLGNBQ1IsSUFBSSxXQUNQLENBQUMsYUFBYSxFQUFFLGVBQWUsRUFBRSxPQUFPLENBQUMsbUJBRWpDLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDcUIsSUFBSTtzQkFBOUIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ2hCLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tcG9uZW50VHlwZSB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvY29tcG9uZW50LXR5cGUudHlwZSc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IENvbXBvbmVudFZhcmlhbnQgfSBmcm9tICcuLi8uLi8uLi9tb2RlbC9jb21wb25lbnRzL2NvbXBvbmVudC12YXJpYW50LnR5cGUnO1xuaW1wb3J0IHsgQ29tcG9uZW50U2l6ZSB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvY29tcG9uZW50LXNpemUudHlwZSc7XG4vKipcbiAqIFRoZSBhbGVydCBjb21wb25lbnQgaXMgcmVzcG9uc2libGUgdG8gc2hvdyBhbGVydHMgZm9yIGRpdmVyc2UgZWxlbWVudHMuIEluY2x1ZGluZyBgRm9ybUVycm9yQ29tcG9uZW50YCBhbW9uZyBvdGhlcnMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LWFsZXJ0JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0ljb25Db21wb25lbnQsIEJ1dHRvbkNvbXBvbmVudCwgTmdDbGFzc10sXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBBbGVydENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGRpc21pc3NhYmxlOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGZ1bGxTaXplOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgdGV4dCA9ICcnO1xuICBASW5wdXQoKSB0eXBlOiBDb21wb25lbnRUeXBlID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSB2YXJpYW50OiBDb21wb25lbnRWYXJpYW50ID0gJ3NvbGlkJztcbiAgQElucHV0KCkgc2l6ZTogQ29tcG9uZW50U2l6ZSA9ICdiYXNlJztcbiAgQElucHV0KCkgd2l0aEljb246IGJvb2xlYW4gPSB0cnVlO1xuICBAT3V0cHV0KCkgZGlzbWlzcyA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBnZXQgaWNvbigpOiBzdHJpbmcge1xuICAgIHN3aXRjaCAodGhpcy50eXBlKSB7XG4gICAgICBjYXNlICdwcmltYXJ5JzpcbiAgICAgIGNhc2UgJ3NlY29uZGFyeSc6XG4gICAgICBjYXNlICduZXV0cmFsJzpcbiAgICAgICAgcmV0dXJuICdpbmZvcm1hdGlvbi1jaXJjbGUnO1xuICAgICAgY2FzZSAnZXJyb3InOlxuICAgICAgICByZXR1cm4gJ2V4Y2xhbWF0aW9uLXRyaWFuZ2xlJztcbiAgICAgIGNhc2UgJ3dhcm5pbmcnOlxuICAgICAgICByZXR1cm4gJ2V4Y2xhbWF0aW9uLWNpcmNsZSc7XG4gICAgICBjYXNlICdzdWNjZXNzJzpcbiAgICAgICAgcmV0dXJuICdjaGVjay1jaXJjbGUnO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuICcnO1xuICAgIH1cbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImZsZXggZmxleC1yb3cgaXRlbXMtY2VudGVyIGdhcC0xIHJvdW5kZWQtbGcgZm9udC1wcmltYXJ5XCJcbiAgW2NsYXNzLnctZml0XT1cIiFmdWxsU2l6ZVwiXG4gIFtjbGFzcy53LWZ1bGxdPVwiZnVsbFNpemVcIlxuICByb2xlPVwiYWxlcnRcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgJ3RleHQteHMnOiBzaXplID09PSAneHMnIHx8IHNpemUgPT09ICdzbScsXG4gICAgJ3RleHQtc20nOiBzaXplID09PSAnYmFzZScsXG4gICAgJ3RleHQtYmFzZSc6IHNpemUgPT09ICdsZycgfHwgc2l6ZSA9PT0gJ3hsJyxcbiAgICAndGV4dC1wcmltYXJ5IGRhcms6dGV4dC1vbi1wcmltYXJ5LWRhcmsnOiB0eXBlID09PSAncHJpbWFyeScgJiYgdmFyaWFudCAhPT0gJ3NvbGlkJyxcbiAgICAndGV4dC1uZXV0cmFsIGRhcms6dGV4dC1vbi1uZXV0cmFsLWRhcmsnOiB0eXBlID09PSAnbmV1dHJhbCcgJiYgdmFyaWFudCAhPT0gJ3NvbGlkJyxcbiAgICAndGV4dC13YXJuaW5nIGRhcms6dGV4dC13YXJuaW5nLXZhcmlhbnQtZGFyayc6IHR5cGUgPT09ICd3YXJuaW5nJyAmJiB2YXJpYW50ICE9PSAnc29saWQnLFxuICAgICd0ZXh0LWVycm9yIGRhcms6dGV4dC1lcnJvci12YXJpYW50LWRhcmsnOiB0eXBlID09PSAnZXJyb3InICYmIHZhcmlhbnQgIT09ICdzb2xpZCcsXG4gICAgJ3RleHQtc3VjY2VzcyBkYXJrOnRleHRzLXN1Y2Nlc3MtdmFyaWFudC1kYXJrJzogdHlwZSA9PT0gJ3N1Y2Nlc3MnICYmIHZhcmlhbnQgIT09ICdzb2xpZCcsXG5cbiAgICAnYmctcHJpbWFyeSBkYXJrOmJnLXByaW1hcnktZGFyayB0ZXh0LW9uLXByaW1hcnkgZGFyazp0ZXh0LW9uLXByaW1hcnktZGFyayc6XG4gICAgICB0eXBlID09PSAncHJpbWFyeScgJiYgdmFyaWFudCA9PT0gJ3NvbGlkJyxcbiAgICAnYmctbmV1dHJhbCBkYXJrOmJnLW5ldXRyYWwtZGFyayB0ZXh0LW9uLW5ldXRyYWwgZGFyazp0ZXh0LW9uLW5ldXRyYWwtZGFyayc6XG4gICAgICB0eXBlID09PSAnbmV1dHJhbCcgJiYgdmFyaWFudCA9PT0gJ3NvbGlkJyxcbiAgICAnYmctd2FybmluZyBkYXJrOmJnLXdhcm5pbmctZGFyayB0ZXh0LW9uLXdhcm5pbmcgZGFyazp0ZXh0LW9uLXdhcm5pbmctZGFyayc6XG4gICAgICB0eXBlID09PSAnd2FybmluZycgJiYgdmFyaWFudCA9PT0gJ3NvbGlkJyxcbiAgICAnYmctZXJyb3IgZGFyazpiZy1lcnJvci1kYXJrIHRleHQtb24tZXJyb3IgZGFyazp0ZXh0LW9uLWVycm9yLWRhcmsnOiB0eXBlID09PSAnZXJyb3InICYmIHZhcmlhbnQgPT09ICdzb2xpZCcsXG4gICAgJ2JnLXN1Y2Nlc3MgZGFyazpiZy1zdWNjZXNzLWRhcmsgdGV4dC1vbi1zdWNjZXNzIGRhcms6dGV4dC1vbi1zdWNjZXNzLWRhcmsnOlxuICAgICAgdHlwZSA9PT0gJ3N1Y2Nlc3MnICYmIHZhcmlhbnQgPT09ICdzb2xpZCcsXG5cbiAgICBib3JkZXI6IHZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAnYm9yZGVyLXByaW1hcnkgZGFyazpib3JkZXItcHJpbWFyeS1kYXJrJzogdHlwZSA9PT0gJ3ByaW1hcnknICYmIHZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAnYm9yZGVyLXdhcm5pbmcgZGFyazpib3JkZXItd2FybmluZy1kYXJrJzogdHlwZSA9PT0gJ3dhcm5pbmcnICYmIHZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAnYm9yZGVyLWVycm9yIGRhcms6Ym9yZGVyLWVycm9yLWRhcmsnOiB0eXBlID09PSAnZXJyb3InICYmIHZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAnYm9yZGVyLXN1Y2Nlc3MgZGFyazpib3JkZXItc3VjY2Vzcy1kYXJrJzogdHlwZSA9PT0gJ3N1Y2Nlc3MnICYmIHZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAncHgtNCBweS0yJzogdmFyaWFudCAhPT0gJ2JsYW5rJ1xuICB9XCI+XG4gIEBpZiAod2l0aEljb24pIHtcbiAgICA8Y3QtaWNvbiBbaWNvbl09XCJ0aGlzLmljb25cIiBbc2l6ZV09XCJzaXplXCIgLz5cbiAgfVxuICA8c3BhbiBjbGFzcz1cImdyb3cgZm9udC1zZW1pYm9sZFwiPnt7IHRleHQgfX08L3NwYW4+XG4gIEBpZiAoZGlzbWlzc2FibGUpIHtcbiAgICA8Y3QtYnV0dG9uXG4gICAgICBpY29uPVwieC1tYXJrXCJcbiAgICAgIHNpemU9XCJzbVwiXG4gICAgICBbdmFyaWFudF09XCJ0aGlzLnZhcmlhbnQgPT09ICdzb2xpZCcgPyAnc29saWQnIDogJ2JsYW5rJ1wiXG4gICAgICBbdHlwZV09XCJ0eXBlXCJcbiAgICAgIChjbGljayk9XCJkaXNtaXNzLmVtaXQoKVwiIC8+XG4gIH1cbjwvZGl2PlxuIl19