https://zardui.com/chunk-3G2VG2TD.js

1import{a as g,b as o,c as F}from"./chunk-4Q2XMOGH.js";import{a as y}from"./chunk-J7WHTNYZ.js";import{b as h}from"./chunk-KTM5XBX2.js";import{Nb as d,a as E}from"./chunk-WAEISIZW.js";import"./chunk-AU53IGB6.js";import"./chunk-ETS6BJW7.js";import{$a as k,Ic as r,Ub as e,Vb as a,Wb as n,Xb as t,rb as l}from"./chunk-H4GOOYKI.js";import"./chunk-GAL4ENT6.js";var c={html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ChangeDetectionStrategy, Component } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@angular/core'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
2<span class="line"></span>
3<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { provideIcons } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@ng-icons/core'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
4<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { lucidePlus } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@ng-icons/lucide'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
5<span class="line"></span>
6<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ZardAvatarComponent } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/components/avatar/avatar.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
7<span class="line"></span>
8<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">@</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">Component</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({</span></span>
9<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  selector: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'z-demo-avatar-badge'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
10<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  imports: [ZardAvatarComponent],</span></span>
11<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  template: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">\`</span></span>
12<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">div</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"flex gap-3"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
13<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span></span>
14<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [zShowBadge]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"true"</span></span>
15<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"/images/avatar/imgs/avatar_image.jpg"</span></span>
16<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        zAlt</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"Image"</span></span>
17<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        zBadgeClass</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"bg-green-600 dark:bg-green-800"</span></span>
18<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      /></span></span>
19<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span></span>
20<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"grayscale"</span></span>
21<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [zShowBadge]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"true"</span></span>
22<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"/images/avatar/imgs/avatar_image.jpg"</span></span>
23<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        zAlt</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"Image"</span></span>
24<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        zBadgeIcon</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"lucidePlus"</span></span>
25<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      /></span></span>
26<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    &#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">div</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
27<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  \`</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
28<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  changeDetection: ChangeDetectionStrategy.OnPush,</span></span>
29<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  viewProviders: [</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">provideIcons</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({ lucidePlus })],</span></span>
30<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">})</span></span>
31<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> class</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> ZardDemoAvatarBadgeComponent</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {}</span></span>
32<span class="line"></span></code></pre>`,code:`import { ChangeDetectionStrategy, Component } from '@angular/core';
33
34import { provideIcons } from '@ng-icons/core';
35import { lucidePlus } from '@ng-icons/lucide';
36
37import { ZardAvatarComponent }

37 from '@/shared/components/avatar/avatar.component';
38
39@Component({
40  selector: 'z-demo-avatar-badge',
41  imports: [ZardAvatarComponent],
42  template: \`
43    <div class="flex gap-3">
44      <z-avatar
45        [zShowBadge]="true"
46        zSrc="/images/avatar/imgs/avatar_image.jpg"
47        zAlt="Image"
48        zBadgeClass="bg-green-600 dark:bg-green-800"
49      />
50      <z-avatar
51        class="grayscale"
52        [zShowBadge]="true"
53        zSrc="/images/avatar/imgs/avatar_image.jpg"
54        zAlt="Image"
55        zBadgeIcon="lucidePlus"
56      />
57    </div>
58  \`,
59  changeDetection: ChangeDetectionStrategy.OnPush,
60  viewProviders: [provideIcons({ lucidePlus })],
61})
62export class ZardDemoAvatarBadgeComponent {}
63`,language:"angular-ts",showLineNumbers:!0,copyButton:!0,expandable:!1};var m={html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ChangeDetectionStrategy, Component } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@angular/core'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
64<span class="line"></span>
65<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ZardAvatarGroupComponent } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/components/avatar/avatar-group.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
66<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ZardAvatarComponent } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/components/avatar/avatar.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
67<span class="line"></span>
68<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">@</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">Component</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({</span></span>
69<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  selector: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'z-demo-avatar-group'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
70<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  imports: [ZardAvatarComponent, ZardAvatarGroupComponent],</span></span>
71<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  template: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">\`</span></span>
72<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">div</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"flex flex-col gap-4"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
73<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar-group</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"grayscale"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
74<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"/images/avatar/imgs/avatar_image.jpg"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"JD"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
75<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"https://github.com/srizzon.png"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"SA"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
76<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"https://github.com/Luizgomess.png"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"LU"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
77<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar-group</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
78<span class="line"></span>
79<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar-group</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zOrientation</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"vertical"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"grayscale"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
80<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"/images/avatar/imgs/avatar_image.jpg"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"JD"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
81<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"https://github.com/srizzon.png"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"SA"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
82<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"https://github.com/Luizgomess.png"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"LU"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
83<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar-group</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
84<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    &#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">div</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
85<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  \`</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
86<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  changeDetection: ChangeDetectionStrategy.OnPush,</span></span>
87<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">})</span></span>
88<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> class</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> ZardDemoAvatarGroupComponent</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {}</span></span>
89<span class="line"></span></code></pre>`,code:`import { ChangeDetectionStrategy, Component } from '@angular/core';
90
91import { ZardAvatarGroupComponent }

91 from '@/shared/components/avatar/avatar-group.component';
92import { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';
93
94@Component({
95  selector: 'z-demo-avatar-group',
96  imports: [ZardAvatarComponent, ZardAvatarGroupComponent],
97  template: \`
98    <div class="flex flex-col gap-4">
99      <z-avatar-group class="grayscale">
100        <z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zFallback="JD" />
101        <z-avatar zSrc="https://github.com/srizzon.png" zFallback="SA" />
102        <z-avatar zSrc="https://github.com/Luizgomess.png" zFallback="LU" />
103      </z-avatar-group>
104
105      <z-avatar-group zOrientation="vertical" class="grayscale">
106        <z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zFallback="JD" />
107        <z-avatar zSrc="https://github.com/srizzon.png" zFallback="SA" />
108        <z-avatar zSrc="https://github.com/Luizgomess.png" zFallback="LU" />
109      </z-avatar-group>
110    </div>
111  \`,
112  changeDetection: ChangeDetectionStrategy.OnPush,
113})
114export class ZardDemoAvatarGroupComponent {}
115`,language:"angular-ts",showLineNumbers:!0,copyButton:!0,expandable:!1};var C=[{html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { NgOptimizedImage } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@angular/common'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
116<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
117<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  booleanAttribute,</span></span>
118<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  ChangeDetectionStrategy,</span></span>
119<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  Component,</span></span>
120<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  computed,</span></span>
121<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  effect,</span></span>
122<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  input,</span></span>
123<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  signal,</span></span>
124<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  ViewEncapsulation,</span></span>
125<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">} </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@angular/core'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
126<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> type</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { SafeUrl } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@angular/platform-browser'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
127<span class="line"></span>
128<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { NgIcon } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@ng-icons/core'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
129<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> type</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ClassValue } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> 'clsx'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
130<span class="line"></span>
131<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">

131import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { mergeClasses } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/utils/merge-classes'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
132<span class="line"></span>
133<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
134<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  avatarVariants,</span></span>
135<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  avatarBadgeVariants,</span></span>
136<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  fallbackVariants,</span></span>
137<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  imageVariants,</span></span>
138<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  type</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> ZardAvatarSizeVariants,</span></span>
139<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">} </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> './avatar.variants'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
140<span class="line"></span>
141<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">@</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">Component</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({</span></span>
142<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  selector: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'z-avatar, [z-avatar]'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
143<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  imports: [NgOptimizedImage, NgIcon],</span></span>
144<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  template: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">\`</span></span>
145<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">    @if</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> (</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">&#x26;&#x26;</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> (</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">!</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">||</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> !</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">imageLoaded</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">())) {</span></span>
146<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">span</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> [class]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"fallbackClasses()"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
147<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        {{ </span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zFallback</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() }}</span></span>
148<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">span</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
149<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    }</span></span>
150<span class="line"></span>
151<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">    @if</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> (</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">&#x26;&#x26;</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> !</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">imageError</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()) {</span></span>
152<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">img</span></span>
153<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [width]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"32"</span></span>
154<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [height]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"32"</span></span>
155<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [alt]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"zAlt()"</span></span>
156<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [class]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"imgClasses()"</span></span>
157<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [ngSrc]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"zSrc()"</span></span>
158<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        [priority]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"zPriority()"</span></span>
159<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        (error)</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"onImageError()"</span></span>
160<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">        (load)</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"onImageLoad()"</span></span>
161<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      /></span></span>
162<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    }</span></span>
163<span class="line"></span>
164<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">    @if</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> (</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zShowBadge</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()) {</span></span>
165<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">div</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> [class]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"badgeClasses()"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
166<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">        @if</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> (</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zBadgeIcon</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()) {</span></span>
167<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">          &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">ng-icon</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> [name]</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"zBadgeIcon()"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> size</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"8"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
168<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        }</span></span>
169<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      &#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">div</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span>
170<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    }</span></span>
171<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  \`</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
172<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  changeDetection: ChangeDetectionStrategy.OnPush,</span></span>
173<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">

173  encapsulation: ViewEncapsulation.None,</span></span>
174<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  host: {</span></span>
175<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">    '[class]'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'avatarClasses()'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
176<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">    '[attr.data-slot]'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'"avatar"'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
177<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">    '[attr.data-size]'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'zSize()'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
178<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  },</span></span>
179<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  exportAs: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'zAvatar'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
180<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">})</span></span>
181<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> class</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> ZardAvatarComponent</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
182<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> class</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">ClassValue</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
183<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zAlt</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">string</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
184<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zBadgeClass</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">ClassValue</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
185<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zBadgeIcon</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">string</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
186<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zFallback</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">string</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
187<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zPriority</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">

187false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">, { transform: booleanAttribute });</span></span>
188<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zSize</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">ZardAvatarSizeVariants</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'default'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
189<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zSrc</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">string</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> |</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> SafeUrl</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
190<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zShowBadge</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">, { transform: booleanAttribute });</span></span>
191<span class="line"></span>
192<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> imageError</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> signal</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
193<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> imageLoaded</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> signal</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
194<span class="line"></span>
195<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  constructor</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() {</span></span>
196<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">    effect</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">=></span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
197<span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D">      // Reset image state when zSrc changes</span></span>
198<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">      this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">();</span></span>
199<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">      this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.imageError.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">set</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">

199false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
200<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">      this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.imageLoaded.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">set</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
201<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    });</span></span>
202<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  }</span></span>
203<span class="line"></span>
204<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> avatarClasses</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> computed</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">=></span></span>
205<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">    mergeClasses</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">avatarVariants</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({ zSize: </span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zSize</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() }), </span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()),</span></span>
206<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  );</span></span>
207<span class="line"></span>
208<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> fallbackClasses</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> computed</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">=></span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> fallbackVariants</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">());</span></span>
209<span class="line"></span>
210<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> badgeClasses</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> computed</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">=></span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> mergeClasses</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(avatarBadgeVariants, </span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zBadgeClass</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()));</span></span>
211<span class="line"></span>
212<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> imgClasses</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> computed</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">=></span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> imageVariants</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({ zSize: </span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zSize</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() }));</span></span>
213<span class="line"></span>
214<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> onImageLoad</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">:</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> void</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
215<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">    this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">

215.imageLoaded.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">set</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">true</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
216<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">    this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.imageError.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">set</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
217<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  }</span></span>
218<span class="line"></span>
219<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> onImageError</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">:</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> void</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
220<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">    this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.imageError.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">set</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">true</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
221<span class="line"><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">    this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.imageLoaded.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">set</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">false</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
222<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  }</span></span>
223<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">}</span></span>
224<span class="line"></span></code></pre>`,code:`import { NgOptimizedImage } from '@angular/common';
225import {
226  booleanAttribute,
227  ChangeDetectionStrategy,
228  Component,
229  computed,
230  effect,
231  input,
232  signal,
233  ViewEncapsulation,
234} from '@angular/core';
235import type { SafeUrl } from '@angular/platform-browser';
236
237import { NgIcon } from '@ng-icons/core';
238import type { ClassValue } from 'clsx';
239
240import { mergeClasses }

240 from '@/shared/utils/merge-classes';
241
242import {
243  avatarVariants,
244  avatarBadgeVariants,
245  fallbackVariants,
246  imageVariants,
247  type ZardAvatarSizeVariants,
248} from './avatar.variants';
249
250@Component({
251  selector: 'z-avatar, [z-avatar]',
252  imports: [NgOptimizedImage, NgIcon],
253  template: \`
254    @if (zFallback() && (!zSrc() || !imageLoaded())) {
255      <span [class]="fallbackClasses()">
256        {{ zFallback() }}
257      </span>
258    }
259
260    @if (zSrc() && !imageError()) {
261      <img
262        [width]="32"
263        [height]="32"
264        [alt]="zAlt()"
265        [class]="imgClasses()"
266        [ngSrc]="zSrc()"
267        [priority]="zPriority()"
268        (error)="onImageError()"
269        (load)="onImageLoad()"
270      />
271    }
272
273    @if (zShowBadge()) {
274      <div [class]="badgeClasses()">
275        @if (zBadgeIcon()) {
276          <ng-icon [name]="zBadgeIcon()" size="8" />
277        }
278      </div>
279    }
280  \`,
281  changeDetection: ChangeDetectionStrategy.OnPush,
282  encapsulation: ViewEncapsulation.None,
283  host: {
284    '[class]': 'avatarClasses()',
285    '[attr.data-slot]': '"avatar"',
286    '[attr.data-size]': 'zSize()',
287  },
288  exportAs: 'zAvatar',
289})
290export class ZardAvatarComponent {
291  readonly class = input<ClassValue>('');
292  readonly zAlt = input<string>('');
293  readonly zBadgeClass = input<ClassValue>('');
294  readonly zBadgeIcon = input<string>('');
295  readonly zFallback = input<string>('');
296  readonly zPriority = input(false, { transform: booleanAttribute });
297  readonly zSize = input<ZardAvatarSizeVariants>('default');
298  readonly zSrc = input<string | SafeUrl>('');
299  readonly zShowBadge = input(false, { transform: booleanAttribute });
300
301  protected readonly imageError = signal(false);
302  protected readonly imageLoaded = signal(false);
303
304  constructor() {
305    effect(() => {
306      // Reset image state when zSrc changes
307      this.zSrc();
308      this.imageError.set(false);
309      this.imageLoaded.set(false);
310    });
311  }
312
313  protected readonly avatarClasses = computed(() =>
314    mergeClasses(avatarVariants({ zSize: this.zSize() }), this.class()),
315  );
316
317  protected readonly fallbackClasses = computed(() => fallbackVariants());
318
319  protected readonly badgeClasses = computed(() => mergeClasses(avatarBadgeVariants, this.zBadgeClass()));
320
321  protected readonly imgClasses = computed(() => imageVariants({ zSize: this.zSize() }));
322
323  protected onImageLoad(): void {
324    this.imageLoaded.set(true);
325    this.imageError.set(false);
326  }
327
328  protected onImageError(): void {
329    this.imageError.set(true);
330    this.imageLoaded.set(false);
331  }
332}
333`,language:"angular-ts",title:"avatar.component.ts",showLineNumbers:!0,copyButton:!0,expandable:!0,expandableTitle:"Expand"},{html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { cva, </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">type</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> VariantProps } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> 'class-variance-authority'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
334<span class="line"></span>
335<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { mergeClasses } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/utils'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
336<span class="line"></span>
337<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> avatarVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> cva</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span></span>
338<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">  mergeClasses</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span></span>
339<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">    'group/avatar relative flex shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
340<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">    'after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
341<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  ),</span></span>
342<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  {</span></span>
343<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    variants: {</span></span>
344<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      zSize: {</span></span>
345<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        sm: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'size-6'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
346<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        default: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'size-8'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
347<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        lg: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'size-10'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
348<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      },</span></span>
349<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    },</span></span>
350<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    defaultVariants: {</span></span>
351<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      zSize: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'default'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
352<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    },</span></span>
353<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  },</span></span>
354<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
355<span class="line"></span>
356<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> fallbackVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> cva</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span></span>
357<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
358<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
359<span class="line"></span>
360<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> imageVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> cva</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'aspect-square size-full rounded-full object-cover'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">, {</span></span>
361<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  variants: {</span></span>
362<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    zSize: {</span></span>
363<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      sm: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
364<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      default: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
365<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      lg: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
366<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    },</span></span>
367<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  },</span></span>
368<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  defaultVariants: {</span></span>
369<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    zSize: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'default'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
370<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  },</span></span>
371<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">});

371</span></span>
372<span class="line"></span>
373<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> avatarBadgeVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> mergeClasses</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span></span>
374<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
375<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&#x26;>svg]:hidden'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
376<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&#x26;>svg]:size-2'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
377<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&#x26;>svg]:size-2'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
378<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
379<span class="line"></span>
380<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> avatarGroupVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> cva</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span></span>
381<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  'group/avatar-group flex *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
382<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  {</span></span>
383<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    variants: {</span></span>
384<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      zOrientation: {</span></span>
385<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        horizontal: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'flex-row -space-x-2'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
386<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">        vertical: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'flex-col -space-y-2'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
387<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      },</span></span>
388<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    },</span></span>
389<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    defaultVariants: {</span></span>
390<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">      zOrientation: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'horizontal'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
391<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    },</span></span>
392<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  },</span></span>
393<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
394<span class="line"></span>
395<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> type</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> ZardAvatarSizeVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> NonNullable</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">VariantProps</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">typeof</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> avatarVariants>[</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'zSize'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">]>;</span></span>
396<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> type</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> ZardAvatarGroupOrientationVariants</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> NonNullable</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">VariantProps</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">typeof</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> avatarGroupVariants>[</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'zOrientation'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">]>;</span></span>
397<span class="line"></span></code></pre>`,code:`import { cva, type VariantProps }

397 from 'class-variance-authority';
398
399import { mergeClasses } from '@/shared/utils';
400
401export const avatarVariants = cva(
402  mergeClasses(
403    'group/avatar relative flex shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border',
404    'after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
405  ),
406  {
407    variants: {
408      zSize: {
409        sm: 'size-6',
410        default: 'size-8',
411        lg: 'size-10',
412      },
413    },
414    defaultVariants: {
415      zSize: 'default',
416    },
417  },
418);
419
420export const fallbackVariants = cva(
421  'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
422);
423
424export const imageVariants = cva('aspect-square size-full rounded-full object-cover', {
425  variants: {
426    zSize: {
427      sm: '',
428      default: '',
429      lg: '',
430    },
431  },
432  defaultVariants: {
433    zSize: 'default',
434  },
435});
436
437export const avatarBadgeVariants = mergeClasses(
438  'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
439  'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
440  'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
441  'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
442);
443
444export const avatarGroupVariants = cva(
445  'group/avatar-group flex *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
446  {
447    variants: {
448      zOrientation: {
449        horizontal: 'flex-row -space-x-2',
450        vertical: 'flex-col -space-y-2',
451      },
452    },
453    defaultVariants: {
454      zOrientation: 'horizontal',
455    },
456  },
457);
458
459export type ZardAvatarSizeVariants = NonNullable<VariantProps<typeof avatarVariants>['zSize']>;
460export type ZardAvatarGroupOrientationVariants = NonNullable<VariantProps<typeof avatarGroupVariants>['zOrientation']>;
461`,language:"angular-ts",title:"avatar.variants.ts",showLineNumbers:!0,copyButton:!0,expandable:!0,expandableTitle:"Expand"},{html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@angular/core'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
462<span class="line"></span>
463<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> type</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ClassValue } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> 'clsx'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
464<span class="line"></span>
465<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { mergeClasses } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/utils/merge-classes'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
466<span class="line"></span>
467<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { avatarGroupVariants, </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">type</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> ZardAvatarGroupOrientationVariants } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> './avatar.variants'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
468<span class="line"></span>
469<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">@</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">Component</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({</span></span>
470<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  selector: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'z-avatar-group'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
471<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  template: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">\`</span></span>
472<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">    &#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">ng-content</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> /></span></span>
473<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">  \`</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
474<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  changeDetection: ChangeDetectionStrategy.OnPush,</span></span>
475<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">

475  encapsulation: ViewEncapsulation.None,</span></span>
476<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  host: {</span></span>
477<span class="line"><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">    '[class]'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'classes()'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
478<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  },</span></span>
479<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  exportAs: </span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'zAvatarGroup'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">,</span></span>
480<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">})</span></span>
481<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> class</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> ZardAvatarGroupComponent</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> {</span></span>
482<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> zOrientation</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">ZardAvatarGroupOrientationVariants</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">'horizontal'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
483<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> class</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> input</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">ClassValue</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>(</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">''</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">);</span></span>
484<span class="line"></span>
485<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">  protected</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> readonly</span><span style="--shiki-dark:#FFAB70;--shiki-light:#E36209"> classes</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> computed</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(() </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">=></span></span>
486<span class="line"><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">    mergeClasses</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">(</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">avatarGroupVariants</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">({ zOrientation: </span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">zOrientation</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">() }), </span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5">this</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">.</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1">class</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">()),</span></span>
487<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">  );</span></span>
488<span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">}</span></span>
489<span class="line"></span></code></pre>`,code:`import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
490
491import type { ClassValue } from 'clsx';
492
493import { mergeClasses }

493 from '@/shared/utils/merge-classes';
494
495import { avatarGroupVariants, type ZardAvatarGroupOrientationVariants } from './avatar.variants';
496
497@Component({
498  selector: 'z-avatar-group',
499  template: \`
500    <ng-content />
501  \`,
502  changeDetection: ChangeDetectionStrategy.OnPush,
503  encapsulation: ViewEncapsulation.None,
504  host: {
505    '[class]': 'classes()',
506  },
507  exportAs: 'zAvatarGroup',
508})
509export class ZardAvatarGroupComponent {
510  readonly zOrientation = input<ZardAvatarGroupOrientationVariants>('horizontal');
511  readonly class = input<ClassValue>('');
512
513  protected readonly classes = computed(() =>
514    mergeClasses(avatarGroupVariants({ zOrientation: this.zOrientation() }), this.class()),
515  );
516}
517`,language:"angular-ts",title:"avatar-group.component.ts",showLineNumbers:!0,copyButton:!0,expandable:!0,expandableTitle:"Expand"},{html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D">/*</span></span>
518<span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D"> * The alias, not a relative path: the Angular compiler re-emits these imports from</span></span>
519<span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D"> * whichever module spreads the array, and it can only do that for a specifier the</span></span>
520<span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D"> * consumer can resolve too. A relative path here fails with NG3004.</span></span>
521<span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D"> */</span></span>
522<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ZardAvatarGroupComponent } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/components/avatar/avatar-group.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
523<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ZardAvatarComponent } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/components/avatar/avatar.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
524<span class="line"></span>
525<span class="line"><span style="--shiki-dark:#6A737D;--shiki-light:#6A737D">/** Every part of the avatar component, for a template that uses more than one. */</span></span>
526<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> ZardAvatarImports</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> =</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> [ZardAvatarComponent, ZardAvatarGroupComponent] </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">as</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> const</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
527<span class="line"></span></code></pre>`,code:`/*
528 * The alias, not a relative path: the Angular compiler re-emits these imports from
529 * whichever module spreads the array, and it can only do that for a specifier the
530 * consumer can resolve too. A relative path here fails with NG3004.
531 */
532import { ZardAvatarGroupComponent } from '@/shared/components/avatar/avatar-group.component';
533import { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';
534
535/** Every part of the avatar component, for a template that uses more than one. */
536export const ZardAvatarImports = [ZardAvatarComponent, ZardAvatarGroupComponent] as const;
537`,language:"angular-ts",title:"avatar.imports.ts",showLineNumbers:!0,copyButton:!0,expandable:!0,expandableTitle:"Expand"}

537,{html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> *</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> './avatar-group.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
538<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> *</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> './avatar.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
539<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> *</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> './avatar.imports'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
540<span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">export</span><span style="--shiki-dark:#79B8FF;--shiki-light:#005CC5"> *</span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49"> from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> './avatar.variants'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span>
541<span class="line"></span></code></pre>`,code:`export * from './avatar-group.component';
542export * from './avatar.component';
543export * from './avatar.imports';
544export * from './avatar.variants';
545`,language:"angular-ts",title:"index.ts",showLineNumbers:!0,copyButton:!0,expandable:!0,expandableTitle:"Expand"}];var u={html:`<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">import</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E"> { ZardAvatarComponent } </span><span style="--shiki-dark:#F97583;--shiki-light:#D73A49">from</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62"> '@/shared/components/avatar/avatar.component'</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">;</span></span></code></pre>`,code:"import { ZardAvatarComponent } from '@/shared/components/avatar/avatar.component';",language:"angular-ts",showLineNumbers:!0,copyButton:!0,expandable:!1},A={html:'<pre class="shiki shiki-themes github-dark github-light" style="--shiki-dark:#e1e4e8;--shiki-light:#24292e;--shiki-dark-bg:#24292e;--shiki-light-bg:#fff" tabindex="0"><code><span class="line"><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">&#x3C;</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zSrc</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"https://github.com/shadcn.png"</span><span style="--shiki-dark:#B392F0;--shiki-light:#6F42C1"> zAlt</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#032F62">"@shadcn"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">>&#x3C;/</span><span style="--shiki-dark:#85E89D;--shiki-light:#22863A">z-avatar</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#24292E">></span></span></code></pre>',code:'<z-avatar zSrc="https://github.com/shadcn.png" zAlt="@shadcn"></z-avatar>',language:"angular-html",showLineNumbers:!0,copyButton:!0,expandable:!1};var B=(()=>{class s{static \u0275fac=function(i){return new(i||s)};static \u0275cmp=l({type:s,selectors:[["z-demo-avatar-group"]],decls:9,vars:0,consts:[[1,"flex","flex-col","gap-4"],[1,"grayscale"],["zSrc","/images/avatar/imgs/avatar_image.jpg","zFallback","JD"],["zSrc","https://github.com/srizzon.png","zFallback","SA"],["zSrc","https://github.com/Luizgomess.png","zFallback","LU"],["zOrientation","vertical",1,"grayscale"]],template:function(i,f){i&1&&(a(0,"div",0)(1,"z-avatar-group",1),t(2,"z-avatar",2)(3,"z-avatar",3)(4,"z-avatar",4),n(),a(5,"z-avatar-group",5),t(6,"z-avatar",2)(7,"z-avatar",3)(8,"z-avatar",4),n()())},dependencies:[h,y],encapsulation:2,changeDetection:0})}return s})();var v=(()=>{class s{static \u0275fac=function(i){return new(i||s)};static \u0275cmp=l({type:s,selectors:[["z-demo-avatar-badge"]],features:[r([],[E({lucidePlus:d})])],decls:3,vars:2,consts:[[1,"flex","gap-3"],["zSrc","/images/avatar/imgs/avatar_image.jpg","zAlt","Image","zBadgeClass","bg-green-600 dark:bg-green-800",3,"zShowBadge"],["zSrc","/images/avatar/imgs/avatar_image.jpg","zAlt","Image","zBadgeIcon","lucidePlus",1,"grayscale",3,"zShowBadge"]],template:function(i,f){i&1&&(a(0,"div",0),t(1,"z-avatar",1)(2,"z-avatar",2),n()),i&2&&(k(),e("zShowBadge",!0),k(),e("zShowBadge",!0))},dependencies:[h],encapsulation:2,changeDetection:0})}return s})();var z=[{selector:"z-avatar",description:"An image element with a fallback for representing the user.",props:[{name:"[class]",description:"Additional CSS classes",type:"string",default:"''"},{name:"[zAlt]",description:"Image alt text for accessibility",type:"string",default:"''"},{name:"[zFallback]",description:"Fallback text displayed while loading or on error",type:"string",default:"''"},{name:"[zPriority]",description:"Should image load with high priority",type:"boolean",default:"false"},{name:"[zSize]",description:"Avatar size variant",type:"'sm' | 'default' | 'lg'",default:"'default'"},{name:"[zSrc]",description:"Image source URL",type:"string | SafeUrl",default:"''"},{name:"[zShowBadge]",description:"Show avatar badge",type:"boolean",default:"false"},{name:"[zBadgeClass]",description:"Additional avatar badge classes",type:"ClassValue",default:"''"},{name:"[zBadgeIcon]",description:"Avatar badge icon",type:"string",default:"''"}]},{selector:"z-avatar-group",description:"A group container for displaying multiple avatars.",props:[{name:"[zOrientation]",description:"Layout direction of avatars",type:"'horizontal' | 'vertical'",default:"'horizontal'"},{name:"[class]",description:"Additional CSS classes",type:"string",default:"''"}]}];var Q={api:z,componentName:"avatar",componentType:"avatar",description:"An image element with a fallback for representing the user.",installData:{cliAdd:o,manualCode:C},usage:{importBlock:u,codeBlock:A},examples:[{name:"basic",component:F,codeData:g},{name:"badge",component:v,codeData:c},{name:"group",component:B,codeData:m}]};export{Q as AVATAR};