@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-notification.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import * as i0 from '@angular/core';
import { input, computed, Component } from '@angular/core';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { matNotificationsOutline } from '@sixbell-telco/sdk/components/icon/material/outline';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';

const notificationComponent = cva([], {
    variants: {
        variant: {
            primary: [
                'btn',
                'btn-circle',
                'btn-outline',
                '!border-neutral-secondary',
                'hover:bg-neutral-secondary/15',
                'transition-colors',
                'focus-visible:outline',
                'focus-visible:outline-2',
                'focus-visible:outline-offset-2',
                'active:transition-[color, scale, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke]',
                'active:hover:scale-95',
                'active:hover:animate-pop',
                'active:hover:ease-out',
                'active:hover:animate-duration-0',
                'active:hover:animate-fill-mode-backwards',
                'active:focus:scale-95',
                'active:focus:animate-pop',
                'active:focus:ease-out',
                'active:focus:animate-duration-0',
                'active:focus:animate-fill-mode-backwards',
            ],
        },
        shape: {
            rounded: ['rounded-full'],
        },
        size: {
            auto: [],
        },
    },
    compoundVariants: [],
    defaultVariants: {
        variant: 'primary',
        shape: 'rounded',
        size: 'auto',
    },
});
class NotificationComponent {
    variant = input();
    shape = input();
    size = input();
    icon = input(matNotificationsOutline);
    status = input.required();
    disabled = input(false);
    componentClass = computed(() => {
        return cn(notificationComponent({
            variant: this.variant(),
            shape: this.shape(),
            size: this.size(),
        }));
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: NotificationComponent, isStandalone: true, selector: "st-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let iconVar = this.icon();\n@let componentClassVar = this.componentClass();\n\n@if (status() === 'seen') {\n\t<div class=\"indicator\">\n\t\t<span class=\"badge indicator-item badge-success top-2 left-[1.40rem] h-3 w-3 p-0\"></span>\n\t\t<button [class]=\"componentClassVar\" type=\"button\" [disabled]=\"disabled()\">\n\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"md\"></st-icon>\n\t\t</button>\n\t</div>\n}\n\n@if (status() === 'unseen') {\n\t<div class=\"indicator\">\n\t\t<span class=\"badge indicator-item badge-warning top-2 left-[1.40rem] h-3 w-3 p-0\"></span>\n\t\t<button [class]=\"componentClassVar\" type=\"button\" [disabled]=\"disabled()\">\n\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"md\"></st-icon>\n\t\t</button>\n\t</div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NotificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'st-notification', imports: [IconComponent], template: "@let iconVar = this.icon();\n@let componentClassVar = this.componentClass();\n\n@if (status() === 'seen') {\n\t<div class=\"indicator\">\n\t\t<span class=\"badge indicator-item badge-success top-2 left-[1.40rem] h-3 w-3 p-0\"></span>\n\t\t<button [class]=\"componentClassVar\" type=\"button\" [disabled]=\"disabled()\">\n\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"md\"></st-icon>\n\t\t</button>\n\t</div>\n}\n\n@if (status() === 'unseen') {\n\t<div class=\"indicator\">\n\t\t<span class=\"badge indicator-item badge-warning top-2 left-[1.40rem] h-3 w-3 p-0\"></span>\n\t\t<button [class]=\"componentClassVar\" type=\"button\" [disabled]=\"disabled()\">\n\t\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"md\"></st-icon>\n\t\t</button>\n\t</div>\n}\n" }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { NotificationComponent, notificationComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-notification.mjs.map