@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-avatar.mjs.map

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

{"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';\nimport { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\n// import { formatTitleCase } from '@shared/utils/formaters/title-case';\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} part1 - The first part of the user's name (used for initials).\n * @property {string} part2 - The second part of the user's name (used for initials).\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 avatar types.\n */\nexport type AvatarTypes = 'quick' | 'profile';\n\n/**\n * CSS class generator for the avatar component.\n *\n * Generates Tailwind CSS classes based on variant, shape, and size.\n */\nexport const avatarComponent = cva([], {\n\tvariants: {\n\t\tvariant: {\n\t\t\tneutral: ['border-neutral', 'bg-secondary'],\n\t\t\tneutralSecondary: ['border-neutral-secondary', 'bg-secondary'],\n\t\t\tneutralTertiary: ['border-neutral-tertiary', 'bg-secondary'],\n\t\t},\n\t\tshape: {\n\t\t\tsquare: ['rounded-field'],\n\t\t\trounded: ['rounded-full'],\n\t\t},\n\t\tsize: {\n\t\t\txs: ['w-6', 'text-xs', 'border'],\n\t\t\tsm: ['w-8', 'text-sm', 'border'],\n\t\t\tmd: ['w-12', 'text-base', 'border-2'],\n\t\t\tlg: ['w-16', 'text-lg', 'border-2'],\n\t\t\txl: ['w-32', 'text-5xl', 'border-4'],\n\t\t},\n\t},\n\tcompoundVariants: [],\n\tdefaultVariants: {\n\t\tvariant: 'neutralTertiary',\n\t\tshape: 'square',\n\t\tsize: 'sm',\n\t},\n});\n\n/**\n * Possible values for the avatar variant.\n */\nexport type AvatarVariantProps = 'neutral' | 'neutralSecondary' | 'neutralTertiary' | 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' | 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};\n\n/**\n * A customizable avatar component for displaying user images or initials.\n *\n * @remarks\n * This component uses Angular's signal-based inputs for reactive state management.\n * It computes various CSS classes dynamically based on the provided properties.\n *\n * @example\n * ```html\n * <st-avatar\n *   [variant]=\"'neutral'\"\n *   [shape]=\"'rounded-sm'\"\n *   [size]=\"'md'\"\n *   [user]=\"userObject\"\n *   [shadow]=\"true\"\n *   [image]=\"userImageUrl\"\n *   [showNameAndRole]=\"true\">\n * </st-avatar>\n * ```\n */\n@Component({\n\tselector: 'st-avatar',\n\timports: [TypographyDirective],\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 neutralTertiary\n\t */\n\tvariant = input<AvatarVariantProps>();\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 shadow effect on the avatar.\n\t *\n\t * @default false\n\t */\n\tshadow = input<boolean>(false);\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[0].trim().toUpperCase();\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 based on variant, shape, and size.\n\t *\n\t * @returns {string} Combined Tailwind CSS classes.\n\t */\n\tcomponentClass = computed(() => {\n\t\treturn cn(avatarComponent({ variant: this.variant(), shape: this.shape(), size: this.size() }));\n\t});\n\n\t/**\n\t * Computes the CSS classes for the avatar container.\n\t *\n\t * @returns {string} Combined classes that include placeholder and shadow effects.\n\t */\n\tcontainerClass = computed(() => {\n\t\treturn cn('avatar', { 'avatar-placeholder': !this.image(), 'shadow-main': this.shadow() });\n\t});\n\n\t/**\n\t * Computes the CSS classes for the text size of the user's name and role.\n\t *\n\t * @returns {string} Tailwind CSS classes for text sizing.\n\t */\n\tnameAndRoleTextSizeClass = computed(() => {\n\t\treturn cn({\n\t\t\t'text-xs': this.size() === 'xs',\n\t\t\t'text-sm': this.size() === 'sm',\n\t\t\t'text-base': this.size() === 'md',\n\t\t\t'text-lg': this.size() === 'lg',\n\t\t\t'text-5xl': this.size() === 'xl',\n\t\t});\n\t});\n}\n","<!-- 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AA0BA;;;;AAIG;AACU,MAAA,eAAe,GAAG,GAAG,CAAC,EAAE,EAAE;AACtC,IAAA,QAAQ,EAAE;AACT,QAAA,OAAO,EAAE;AACR,YAAA,OAAO,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC;AAC3C,YAAA,gBAAgB,EAAE,CAAC,0BAA0B,EAAE,cAAc,CAAC;AAC9D,YAAA,eAAe,EAAE,CAAC,yBAAyB,EAAE,cAAc,CAAC;AAC5D,SAAA;AACD,QAAA,KAAK,EAAE;YACN,MAAM,EAAE,CAAC,eAAe,CAAC;YACzB,OAAO,EAAE,CAAC,cAAc,CAAC;AACzB,SAAA;AACD,QAAA,IAAI,EAAE;AACL,YAAA,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC;AAChC,YAAA,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC;AAChC,YAAA,EAAE,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,UAAU,CAAC;AACrC,YAAA,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC;AACnC,YAAA,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC;AACpC,SAAA;AACD,KAAA;AACD,IAAA,gBAAgB,EAAE,EAAE;AACpB,IAAA,eAAe,EAAE;AAChB,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,IAAI,EAAE,IAAI;AACV,KAAA;AACD,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;AAmBG;MAOU,eAAe,CAAA;AAC3B;;;;AAIG;IACH,OAAO,GAAG,KAAK,EAAsB;AAErC;;;;AAIG;IACH,KAAK,GAAG,KAAK,EAAoB;AAEjC;;;;AAIG;IACH,IAAI,GAAG,KAAK,EAAmB;AAE/B;;;;AAIG;AACH,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,CAAC;AAE9B;;;;AAIG;AACH,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAc;AAEnC;;;;AAIG;IACH,KAAK,GAAG,KAAK,EAAU;AAEvB;;;;AAIG;AACH,IAAA,eAAe,GAAG,KAAK,CAAU,KAAK,CAAC;AAEvC;;;;AAIG;AACH,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACxB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE;AACjE,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE;AACjE,QAAA,MAAM,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE;AAClD,QAAA,OAAO,CAAG,EAAA,QAAQ,CAAG,EAAA,QAAQ,EAAE;AAChC,KAAC,CAAC;AAEF;;;;AAIG;AACH,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC9B,QAAA,OAAO,EAAE,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAChG,KAAC,CAAC;AAEF;;;;AAIG;AACH,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;QAC9B,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAC3F,KAAC,CAAC;AAEF;;;;AAIG;AACH,IAAA,wBAAwB,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,OAAO,EAAE,CAAC;AACT,YAAA,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAC/B,YAAA,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAC/B,YAAA,WAAW,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AACjC,YAAA,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAC/B,YAAA,UAAU,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI;AAChC,SAAA,CAAC;AACH,KAAC,CAAC;uGA7FU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5G5B,kqCA+BA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDyEW,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,SAAA,EAAA,cAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIjB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;+BACC,WAAW,EAAA,OAAA,EACZ,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,kqCAAA,EAAA;;;AExG/B;;AAEG;;;;"}