@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
66 lines (62 loc) • 4.74 kB
JavaScript
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',
'text-neutral',
'border-neutral-secondary',
'hover:text-neutral',
'active:hover:text-neutral-content',
'hover:bg-transparent',
],
},
shape: {
'round-sm': ['rounded-btn-sm'],
'round-md': ['rounded-btn-md'],
'round-lg': ['rounded-btn-lg'],
},
size: {
auto: [],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
shape: 'round-lg',
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-6 h-4 w-4 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-6 h-4 w-4 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-6 h-4 w-4 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-6 h-4 w-4 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