{"version":3,"file":"sixbell-telco-sdk-components-avatar.mjs","sources":["../../../projects/sdk/components/avatar/src/avatar.component.ts","../../../projects/sdk/components/avatar/src/avatar.component.html","../../../projects/sdk/components/avatar/sixbell-telco-sdk-components-avatar.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { cva } from 'class-variance-authority';\n\n/**\n * Represents a user object for the avatar component.\n *\n * @property {string} displayName - The full display name of the user.\n * @property {string} firstInitial - The first initial of the user's name.\n * @property {string} lastInitial - The last initial of the user's name (optional).\n * @property {string} role - The role of the user.\n */\nexport type AvatarUser = {\n\tdisplayName: string;\n\tfirstInitial: string;\n\tlastInitial?: string;\n\trole: string;\n};\n\n/**\n * Possible presence indicator states.\n */\nexport type AvatarPresenceProps = 'online' | 'offline' | null | undefined;\n\n/**\n * CSS class generator for the avatar inner container.\n *\n * Generates Tailwind CSS classes based on variant, shape, and size following DaisyUI patterns.\n */\nexport const avatarInnerComponent = cva(['relative'], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: ['from-primary to-primary-gradient bg-linear-135', 'text-primary-gradient-content'],\n\t\t\tsecondary: ['from-secondary to-secondary-gradient bg-linear-135', 'text-secondary-gradient-content'],\n\t\t\ttertiary: ['from-secondary to-secondary-gradient bg-linear-135', 'text-secondary-gradient-content'],\n\t\t\taccent: ['from-accent to-accent-gradient bg-linear-135', 'text-accent-gradient-content'],\n\t\t},\n\t\tshape: {\n\t\t\tsquare: ['rounded'],\n\t\t\trounded: ['rounded-full'],\n\t\t},\n\t\tsize: {\n\t\t\txs: ['w-6', 'text-xs'],\n\t\t\tsm: ['w-8', 'text-sm'],\n\t\t\tmd: ['w-12', 'text-2xl'],\n\t\t\tlg: ['w-16', 'text-3xl'],\n\t\t\txl: ['w-24', 'text-5xl'],\n\t\t\t'2xl': ['w-32', 'text-7xl'],\n\t\t},\n\t},\n\tcompoundVariants: [],\n\tdefaultVariants: {\n\t\tvariant: 'primary',\n\t\tshape: 'square',\n\t\tsize: 'sm',\n\t},\n});\n\n/**\n * Possible values for the avatar variant.\n */\nexport type AvatarVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | null | undefined;\n\n/**\n * Possible values for the avatar shape.\n */\nexport type AvatarShapeProps = 'square' | 'rounded' | null | undefined;\n\n/**\n * Possible values for the avatar size.\n */\nexport type AvatarSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | null | undefined;\n\n/**\n * Configuration properties for the avatar component.\n */\nexport type AvatarProps = {\n\tvariant?: AvatarVariantProps;\n\tshape?: AvatarShapeProps;\n\tsize?: AvatarSizeProps;\n\tpresence?: AvatarPresenceProps;\n};\n\n/**\n * A customizable avatar component following DaisyUI v5 patterns.\n *\n * @remarks\n * This component uses Angular's signal-based inputs for reactive state management.\n * It follows DaisyUI's avatar component structure and supports relative text sizing using em units.\n *\n * @example\n * ```html\n * <st-avatar\n *   [variant]=\"'neutral'\"\n *   [shape]=\"'rounded'\"\n *   [size]=\"'md'\"\n *   [user]=\"userObject\"\n *   [ring]=\"true\"\n *   [presence]=\"'online'\"\n *   [image]=\"userImageUrl\"\n *   [showNameAndRole]=\"true\">\n * </st-avatar>\n * ```\n */\n@Component({\n\tselector: 'st-avatar',\n\timports: [],\n\ttemplateUrl: './avatar.component.html',\n\tstyles: '',\n})\nexport class AvatarComponent {\n\t/**\n\t * Specifies the visual variant of the avatar.\n\t *\n\t * @default neutral\n\t */\n\tvariant = input<AvatarVariantProps>('primary');\n\n\t/**\n\t * Specifies the shape of the avatar (e.g., square or rounded).\n\t *\n\t * @default square\n\t */\n\tshape = input<AvatarShapeProps>();\n\n\t/**\n\t * Specifies the size of the avatar.\n\t *\n\t * @default sm\n\t */\n\tsize = input<AvatarSizeProps>();\n\n\t/**\n\t * Enables or disables a ring effect on the avatar based on the current variant.\n\t *\n\t * @default true\n\t */\n\tring = input<boolean>(true);\n\n\t/**\n\t * Specifies the presence indicator state.\n\t *\n\t * @default undefined\n\t */\n\tpresence = input<AvatarPresenceProps>();\n\n\t/**\n\t * The user data used to display avatar initials when no image is provided.\n\t *\n\t * @remarks This property is required.\n\t */\n\tuser = input.required<AvatarUser>();\n\n\t/**\n\t * URL of the user's avatar image.\n\t *\n\t * @default undefined\n\t */\n\timage = input<string>();\n\n\t/**\n\t * Flag indicating whether the user's name and role should be displayed.\n\t *\n\t * @default false\n\t */\n\tshowNameAndRole = input<boolean>(false);\n\n\t/**\n\t * Computed property that returns the initials derived from the user's name.\n\t *\n\t * @returns {string} The concatenated initials in uppercase.\n\t */\n\tinitials = computed(() => {\n\t\tconst initial1 = this.user().firstInitial.trim().toUpperCase()[0];\n\t\tconst rawInitial2 = this.user().lastInitial?.trim().toUpperCase();\n\t\tconst initial2 = rawInitial2 ? rawInitial2[0] : '';\n\t\treturn `${initial1}${initial2}`;\n\t});\n\n\t/**\n\t * Computes the CSS classes for the avatar container following DaisyUI patterns.\n\t *\n\t * @returns {string} Combined classes including presence indicators.\n\t */\n\tcontainerClass = computed(() => {\n\t\tconst presence = this.presence();\n\t\treturn cn('avatar', {\n\t\t\t'avatar-online': presence === 'online',\n\t\t\t'avatar-offline': presence === 'offline',\n\t\t\t'avatar-placeholder': !this.image(),\n\t\t});\n\t});\n\n\t/**\n\t * Computes the CSS classes for the avatar inner element.\n\t *\n\t * @returns {string} Combined Tailwind CSS classes.\n\t */\n\tcomponentClass = computed(() => {\n\t\treturn cn(\n\t\t\tavatarInnerComponent({\n\t\t\t\tvariant: this.variant(),\n\t\t\t\tshape: this.shape(),\n\t\t\t\tsize: this.size(),\n\t\t\t}),\n\t\t\t{\n\t\t\t\t'ring-primary/35 ring-4': this.variant() === 'primary' && this.ring() === true,\n\t\t\t\t'ring-secondary/35 ring-4': this.variant() === 'secondary' && this.ring() === true,\n\t\t\t\t'ring-tertiary/35 ring-4': this.variant() === 'tertiary' && this.ring() === true,\n\t\t\t\t'ring-accent/35 ring-4': this.variant() === 'accent' && this.ring() === true,\n\t\t\t},\n\t\t);\n\t});\n\n\t/**\n\t * Computes the CSS classes for the text size of the user's name.\n\t *\n\t * @returns {string} Tailwind CSS classes for text sizing.\n\t */\n\tnameTextSizeClass = computed(() => {\n\t\treturn cn('text-start leading-snug', {\n\t\t\t'text-xs': this.size() === 'xs',\n\t\t\t'text-sm': this.size() === 'sm',\n\t\t\t'text-xl': this.size() === 'md',\n\t\t\t'text-3xl': this.size() === 'lg',\n\t\t\t'text-6xl': this.size() === 'xl' || this.size() === '2xl',\n\t\t});\n\t});\n\n\t/**\n\t * Computes the CSS classes for the text size of the user's role.\n\t *\n\t * @returns {string} Tailwind CSS classes for text sizing.\n\t */\n\troleTextSizeClass = computed(() => {\n\t\treturn cn('text-start leading-tight', {\n\t\t\t'text-xxs': this.size() === 'xs' || this.size() === 'sm',\n\t\t\t'text-sm': this.size() === 'md',\n\t\t\t'text-xl': this.size() === 'lg',\n\t\t\t'text-3xl': this.size() === 'xl' || this.size() === '2xl',\n\t\t});\n\t});\n}\n","<!-- 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 class=\"font-body font-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 class=\"font-body font-medium\">{{ userVar.displayName }}</span>\n\t\t\t</div>\n\t\t\t<div [class]=\"rolTextClass\">\n\t\t\t\t<span class=\"font-body\">{{ userVar.role }}</span>\n\t\t\t</div>\n\t\t</div>\n\t}\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}