@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
156 lines (152 loc) • 8.46 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 component.
*
* Generates Tailwind CSS classes based on variant, shape, and size.
*/
const avatarComponent = cva([], {
variants: {
variant: {
neutral: ['border-neutral', 'bg-secondary'],
neutralSecondary: ['border-neutral-secondary', 'bg-secondary'],
neutralTertiary: ['border-neutral-tertiary', 'bg-secondary'],
},
shape: {
square: ['rounded-field'],
rounded: ['rounded-full'],
},
size: {
xs: ['w-6', 'text-xs', 'border'],
sm: ['w-8', 'text-sm', 'border'],
md: ['w-12', 'text-base', 'border-2'],
lg: ['w-16', 'text-lg', 'border-2'],
xl: ['w-32', 'text-5xl', 'border-4'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'neutralTertiary',
shape: 'square',
size: 'sm',
},
});
/**
* A customizable avatar component for displaying user images or initials.
*
* @remarks
* This component uses Angular's signal-based inputs for reactive state management.
* It computes various CSS classes dynamically based on the provided properties.
*
* @example
* ```html
* <st-avatar
* [variant]="'neutral'"
* [shape]="'rounded-sm'"
* [size]="'md'"
* [user]="userObject"
* [shadow]="true"
* [image]="userImageUrl"
* [showNameAndRole]="true">
* </st-avatar>
* ```
*/
class AvatarComponent {
/**
* Specifies the visual variant of the avatar.
*
* @default neutralTertiary
*/
variant = input();
/**
* 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 shadow effect on the avatar.
*
* @default false
*/
shadow = input(false);
/**
* 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[0].trim().toUpperCase();
const rawInitial2 = this.user().lastInitial?.trim().toUpperCase();
const initial2 = rawInitial2 ? rawInitial2[0] : '';
return `${initial1}${initial2}`;
});
/**
* Computes the CSS classes for the avatar based on variant, shape, and size.
*
* @returns {string} Combined Tailwind CSS classes.
*/
componentClass = computed(() => {
return cn(avatarComponent({ variant: this.variant(), shape: this.shape(), size: this.size() }));
});
/**
* Computes the CSS classes for the avatar container.
*
* @returns {string} Combined classes that include placeholder and shadow effects.
*/
containerClass = computed(() => {
return cn('avatar', { 'avatar-placeholder': !this.image(), 'shadow-main': this.shadow() });
});
/**
* Computes the CSS classes for the text size of the user's name and role.
*
* @returns {string} Tailwind CSS classes for text sizing.
*/
nameAndRoleTextSizeClass = computed(() => {
return cn({
'text-xs': this.size() === 'xs',
'text-sm': this.size() === 'sm',
'text-base': this.size() === 'md',
'text-lg': this.size() === 'lg',
'text-5xl': this.size() === 'xl',
});
});
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 }, shadow: { classPropertyName: "shadow", publicName: "shadow", 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: "<!-- eslint-disable @angular-eslint/template/alt-text -->\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]=\"image()\" />\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<span typography [tyVariant]=\"'inherit'\" [tyColor]=\"'base'\" [tyFontWeight]=\"'normal'\">{{ initialsVar }}</span>\n\t\t\t</div>\n\t\t</div>\n\t}\n\t@let showNameAndRolVar = showNameAndRole();\n\t@let userVar = user();\n\t@let nameAndRoleTextSizeClassVar = nameAndRoleTextSizeClass();\n\t@if (showNameAndRolVar) {\n\t\t<div [class]=\"nameAndRoleTextSizeClassVar\">\n\t\t\t<div>\n\t\t\t\t<span typography [tyVariant]=\"'inherit'\" [tyFontWeight]=\"'semibold'\">{{ userVar.displayName }}</span>\n\t\t\t</div>\n\t\t\t<div class=\"space-x-1\" typography [tyVariant]=\"'inherit'\">{{ userVar.role }}</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: "<!-- eslint-disable @angular-eslint/template/alt-text -->\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]=\"image()\" />\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<span typography [tyVariant]=\"'inherit'\" [tyColor]=\"'base'\" [tyFontWeight]=\"'normal'\">{{ initialsVar }}</span>\n\t\t\t</div>\n\t\t</div>\n\t}\n\t@let showNameAndRolVar = showNameAndRole();\n\t@let userVar = user();\n\t@let nameAndRoleTextSizeClassVar = nameAndRoleTextSizeClass();\n\t@if (showNameAndRolVar) {\n\t\t<div [class]=\"nameAndRoleTextSizeClassVar\">\n\t\t\t<div>\n\t\t\t\t<span typography [tyVariant]=\"'inherit'\" [tyFontWeight]=\"'semibold'\">{{ userVar.displayName }}</span>\n\t\t\t</div>\n\t\t\t<div class=\"space-x-1\" typography [tyVariant]=\"'inherit'\">{{ userVar.role }}</div>\n\t\t</div>\n\t}\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AvatarComponent, avatarComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-avatar.mjs.map