@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
192 lines (188 loc) • 10.6 kB
JavaScript
import * as i0 from '@angular/core';
import { input, computed, Component } from '@angular/core';
import { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/**
* CSS class generator for the avatar inner container.
*
* Generates Tailwind CSS classes based on variant, shape, and size following DaisyUI patterns.
*/
const avatarInnerComponent = cva(['relative'], {
variants: {
variant: {
primary: ['bg-linear-135 from-primary to-primary-gradient', 'text-primary-gradient-content'],
secondary: ['bg-linear-135 from-secondary to-secondary-gradient', 'text-secondary-gradient-content'],
tertiary: ['bg-linear-135 from-secondary to-secondary-gradient', 'text-secondary-gradient-content'],
accent: ['bg-linear-135 from-accent to-accent-gradient', 'text-accent-gradient-content'],
},
shape: {
square: ['rounded'],
rounded: ['rounded-full'],
},
size: {
xs: ['w-6', 'text-xs'],
sm: ['w-8', 'text-sm'],
md: ['w-12', 'text-2xl'],
lg: ['w-16', 'text-3xl'],
xl: ['w-24', 'text-5xl'],
'2xl': ['w-32', 'text-7xl'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
shape: 'square',
size: 'sm',
},
});
/**
* A customizable avatar component following DaisyUI v5 patterns.
*
* @remarks
* This component uses Angular's signal-based inputs for reactive state management.
* It follows DaisyUI's avatar component structure and supports relative text sizing using em units.
*
* @example
* ```html
* <st-avatar
* [variant]="'neutral'"
* [shape]="'rounded'"
* [size]="'md'"
* [user]="userObject"
* [ring]="true"
* [presence]="'online'"
* [image]="userImageUrl"
* [showNameAndRole]="true">
* </st-avatar>
* ```
*/
class AvatarComponent {
/**
* Specifies the visual variant of the avatar.
*
* @default neutral
*/
variant = input('primary');
/**
* Specifies the shape of the avatar (e.g., square or rounded).
*
* @default square
*/
shape = input();
/**
* Specifies the size of the avatar.
*
* @default sm
*/
size = input();
/**
* Enables or disables a ring effect on the avatar based on the current variant.
*
* @default true
*/
ring = input(true);
/**
* Specifies the presence indicator state.
*
* @default undefined
*/
presence = input();
/**
* The user data used to display avatar initials when no image is provided.
*
* @remarks This property is required.
*/
user = input.required();
/**
* URL of the user's avatar image.
*
* @default undefined
*/
image = input();
/**
* Flag indicating whether the user's name and role should be displayed.
*
* @default false
*/
showNameAndRole = input(false);
/**
* Computed property that returns the initials derived from the user's name.
*
* @returns {string} The concatenated initials in uppercase.
*/
initials = computed(() => {
const initial1 = this.user().firstInitial.trim().toUpperCase()[0];
const rawInitial2 = this.user().lastInitial?.trim().toUpperCase();
const initial2 = rawInitial2 ? rawInitial2[0] : '';
return `${initial1}${initial2}`;
});
/**
* Computes the CSS classes for the avatar container following DaisyUI patterns.
*
* @returns {string} Combined classes including presence indicators.
*/
containerClass = computed(() => {
const presence = this.presence();
return cn('avatar', {
'avatar-online': presence === 'online',
'avatar-offline': presence === 'offline',
'avatar-placeholder': !this.image(),
});
});
/**
* Computes the CSS classes for the avatar inner element.
*
* @returns {string} Combined Tailwind CSS classes.
*/
componentClass = computed(() => {
return cn(avatarInnerComponent({
variant: this.variant(),
shape: this.shape(),
size: this.size(),
}), {
'ring-4 ring-primary/35': this.variant() === 'primary' && this.ring() === true,
'ring-4 ring-secondary/35': this.variant() === 'secondary' && this.ring() === true,
'ring-4 ring-tertiary/35': this.variant() === 'tertiary' && this.ring() === true,
'ring-4 ring-accent/35': this.variant() === 'accent' && this.ring() === true,
});
});
/**
* Computes the CSS classes for the text size of the user's name.
*
* @returns {string} Tailwind CSS classes for text sizing.
*/
nameTextSizeClass = computed(() => {
return cn('text-start leading-snug', {
'text-xs': this.size() === 'xs',
'text-sm': this.size() === 'sm',
'text-xl': this.size() === 'md',
'text-3xl': this.size() === 'lg',
'text-6xl': this.size() === 'xl' || this.size() === '2xl',
});
});
/**
* Computes the CSS classes for the text size of the user's role.
*
* @returns {string} Tailwind CSS classes for text sizing.
*/
roleTextSizeClass = computed(() => {
return cn('text-start leading-tight', {
'text-xxs': this.size() === 'xs' || this.size() === 'sm',
'text-sm': this.size() === 'md',
'text-xl': this.size() === 'lg',
'text-3xl': this.size() === 'xl' || this.size() === '2xl',
});
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: AvatarComponent, isStandalone: true, selector: "st-avatar", 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 }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, presence: { classPropertyName: "presence", publicName: "presence", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, showNameAndRole: { classPropertyName: "showNameAndRole", publicName: "showNameAndRole", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Avatar component following DaisyUI v5 patterns -->\n<div class=\"inline-flex items-center justify-start gap-3 align-top\">\n\t@let imageVar = image();\n\t@let containerClassVar = containerClass();\n\t@let componentClassVar = componentClass();\n\t@let initialsVar = initials();\n\t@if (imageVar) {\n\t\t<div [class]=\"containerClassVar\">\n\t\t\t<div [class]=\"componentClassVar\">\n\t\t\t\t<img [src]=\"imageVar\" [alt]=\"user().displayName + ' avatar'\" class=\"h-full w-full object-cover\" />\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<div [class]=\"containerClassVar\">\n\t\t\t<div [class]=\"componentClassVar\">\n\t\t\t\t<div class=\"flex h-full w-full items-center justify-center bg-inherit text-inherit\">\n\t\t\t\t\t<span typography [tyVariant]=\"'inherit'\" tyColor=\"inherit\" [tyFontWeight]=\"'normal'\">{{ initialsVar }}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t}\n\t@let showNameAndRolVar = showNameAndRole();\n\t@let userVar = user();\n\t@let nameTextClass = nameTextSizeClass();\n\t@let rolTextClass = roleTextSizeClass();\n\t@if (showNameAndRolVar) {\n\t\t<div class=\"flex flex-col\">\n\t\t\t<div [class]=\"nameTextClass\">\n\t\t\t\t<span typography [tyVariant]=\"'inherit'\" [tyFontWeight]=\"'medium'\">{{ userVar.displayName }}</span>\n\t\t\t</div>\n\t\t\t<div [class]=\"rolTextClass\">\n\t\t\t\t<span typography [tyVariant]=\"'inherit'\">{{ userVar.role }}</span>\n\t\t\t</div>\n\t\t</div>\n\t}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'st-avatar', imports: [TypographyDirective], template: "<!-- Avatar component following DaisyUI v5 patterns -->\n<div class=\"inline-flex items-center justify-start gap-3 align-top\">\n\t@let imageVar = image();\n\t@let containerClassVar = containerClass();\n\t@let componentClassVar = componentClass();\n\t@let initialsVar = initials();\n\t@if (imageVar) {\n\t\t<div [class]=\"containerClassVar\">\n\t\t\t<div [class]=\"componentClassVar\">\n\t\t\t\t<img [src]=\"imageVar\" [alt]=\"user().displayName + ' avatar'\" class=\"h-full w-full object-cover\" />\n\t\t\t</div>\n\t\t</div>\n\t} @else {\n\t\t<div [class]=\"containerClassVar\">\n\t\t\t<div [class]=\"componentClassVar\">\n\t\t\t\t<div class=\"flex h-full w-full items-center justify-center bg-inherit text-inherit\">\n\t\t\t\t\t<span typography [tyVariant]=\"'inherit'\" tyColor=\"inherit\" [tyFontWeight]=\"'normal'\">{{ initialsVar }}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t}\n\t@let showNameAndRolVar = showNameAndRole();\n\t@let userVar = user();\n\t@let nameTextClass = nameTextSizeClass();\n\t@let rolTextClass = roleTextSizeClass();\n\t@if (showNameAndRolVar) {\n\t\t<div class=\"flex flex-col\">\n\t\t\t<div [class]=\"nameTextClass\">\n\t\t\t\t<span typography [tyVariant]=\"'inherit'\" [tyFontWeight]=\"'medium'\">{{ userVar.displayName }}</span>\n\t\t\t</div>\n\t\t\t<div [class]=\"rolTextClass\">\n\t\t\t\t<span typography [tyVariant]=\"'inherit'\">{{ userVar.role }}</span>\n\t\t\t</div>\n\t\t</div>\n\t}\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AvatarComponent, avatarInnerComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-avatar.mjs.map