@italia/avatar 0.1.0-alpha.2 → 1.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/custom-elements.json +28 -28
- package/dist/src/it-avatar.d.ts +2 -0
- package/dist/src/it-avatar.d.ts.map +1 -1
- package/dist/src/it-avatar.js +67 -12
- package/dist/src/it-avatar.js.map +1 -1
- package/package.json +8 -6
package/README.md
CHANGED
package/custom-elements.json
CHANGED
|
@@ -416,12 +416,12 @@
|
|
|
416
416
|
},
|
|
417
417
|
{
|
|
418
418
|
"kind": "javascript-module",
|
|
419
|
-
"path": "stories/avatar.stories.ts",
|
|
419
|
+
"path": "stories/it-avatar.stories.ts",
|
|
420
420
|
"declarations": [
|
|
421
421
|
{
|
|
422
422
|
"kind": "variable",
|
|
423
423
|
"name": "meta",
|
|
424
|
-
"default": "{ title: 'Componenti/Avatar', component: 'it-avatar', tags: ['
|
|
424
|
+
"default": "{ title: 'Componenti/Avatar', component: 'it-avatar', tags: ['a11y-ok', 'web-component'], args: { size: 'md', src: 'https://randomuser.me/api/portraits/men/43.jpg', alt: 'Mario Rossi', text: 'Mario Rossi', icon: '', href: '', avatarTitle: '', }, argTypes: { type: { control: 'select', description: \"Tipo di contenuto dell'avatar. Se vuoto, viene determinato automaticamente: src → image, icon → icon, altrimenti text.\", options: AVATAR_TYPES, type: 'string', }, size: { control: 'select', description: \"Dimensione dell'avatar.\", options: AVATAR_SIZES, table: { defaultValue: { summary: 'md' } }, type: 'string', }, variant: { control: 'select', description: \"Colore di sfondo dell'avatar per avatar con testo.\", options: AVATAR_COLORS, type: 'string', }, presence: { control: 'select', description: \"Indicatore di presenza dell'utente.\", options: AVATAR_PRESENCE, type: 'string', }, status: { control: 'select', description: \"Indicatore di stato dell'account utente.\", options: AVATAR_STATUS, type: 'string', }, src: { control: 'text', description: \"URL dell'immagine per avatar di tipo immagine.\", type: 'string', }, alt: { control: 'text', description: \"Testo alternativo per l'immagine dell'avatar.\", type: 'string', }, text: { control: 'text', description: \"Testo per generare le iniziali dell'avatar.\", type: 'string', }, icon: { control: 'text', description: \"Nome dell'icona per avatar di tipo icona.\", type: 'string', }, href: { control: 'text', description: \"URL del link se l'avatar deve essere cliccabile.\", type: 'string', }, avatarTitle: { control: 'text', description: 'Titolo per accessibilità e tooltip.', type: 'string', }, }, parameters: { docs: { description: { component: ` <Description>Rappresentazione grafica di un utente.</Description> L'elemento avatar è la rappresentazione grafica di un utente e può includere un'immagine, un testo, un'icona o essere utilizzato come link. Sono disponibili sei dimensioni: \\`xs\\`, \\`sm\\`, \\`md\\` (default), \\`lg\\`, \\`xl\\`, \\`xxl\\`. Per ottenere un elemento grafico non interattivo, non utilizzare l'attributo \\`href\\`. Ogni avatar può essere associato ad un'azione, utilizzando per esso l'attributo \\`href\\`. Per indicazioni su \"Come e Quando usarlo\" si fa riferimento alla [guida del design-system](https://designers.italia.it/design-system/componenti/avatar/). `, }, }, }, } satisfies Meta<AvatarProps>"
|
|
425
425
|
},
|
|
426
426
|
{
|
|
427
427
|
"kind": "variable",
|
|
@@ -453,7 +453,7 @@
|
|
|
453
453
|
"type": {
|
|
454
454
|
"text": "Story"
|
|
455
455
|
},
|
|
456
|
-
"default": "{ name: 'Avatar con testo', args: { type: 'text', }, argTypes: { type: { table: { disable: true } }, src: { table: { disable: true } }, alt: { table: { disable: true } }, icon: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` La versione con testo contiene le iniziali dell'utente (una sola nel caso delle dimensioni xs ed sm). Oltre ai colori di default è possibile utilizzare uno sfondo a scelta fra: - **Primario**: aggiungendo l'attributo \\`variant=\"primary\"\\` - **Secondario**: aggiungendo l'attributo \\`variant=\"secondary\"\\` In questi casi il testo sarà di colore bianco. Un avatar con testo conterrà uno \\`<span>\\` per soli screen reader con il nome dell'utente indicato per esteso: \\`<span class=\"visually-hidden\">Nome Utente</span>\\`. `, }, }, }, render: () => html` <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap mb-3 gap-4\"> ${renderComponent({ type: 'text', text: 'Mario Rossi', size: 'xs', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', size: 'sm', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', size: 'md', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', size: 'lg', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', size: 'xl', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', size: 'xxl', })} </div> <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap mb-3 gap-4\"> ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', size: 'xs', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', size: 'sm', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', size: 'md', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', size: 'lg', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', size: 'xl', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', size: 'xxl', })} </div> <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap gap-4\"> ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'secondary', size: 'xs', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'secondary', size: 'sm', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'secondary', size: 'md', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'secondary', size: 'lg', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'secondary', size: 'xl', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'secondary', size: 'xxl', })} </div> `, }"
|
|
456
|
+
"default": "{ name: 'Avatar con testo', args: { type: 'text', }, argTypes: { type: { table: { disable: true } }, src: { table: { disable: true } }, alt: { table: { disable: true } }, icon: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` La versione con testo contiene le iniziali dell'utente (una sola nel caso delle dimensioni xs ed sm). Oltre ai colori di default è possibile utilizzare uno sfondo a scelta fra: - **Primario**: aggiungendo l'attributo \\`variant=\"primary\"\\` - **Secondario**: aggiungendo l'attributo \\`variant=\"secondary\"\\` In questi casi il testo sarà di colore bianco. Un avatar con testo conterrà uno \\`<span>\\` per soli screen reader con il nome dell'utente indicato per esteso: \\`<span class=\"visually-hidden\">Nome Utente</span>\\`. `, }, }, }, render: () => html` <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap mb-3 gap-4\"> ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', size: 'xs', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', size: 'sm', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', size: 'md', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', size: 'lg', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', size: 'xl', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', size: 'xxl', })} </div> <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap mb-3 gap-4\"> ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'primary', size: 'xs', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'primary', size: 'sm', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'primary', size: 'md', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'primary', size: 'lg', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'primary', size: 'xl', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'primary', size: 'xxl', })} </div> <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap gap-4\"> ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'secondary', size: 'xs', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'secondary', size: 'sm', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'secondary', size: 'md', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'secondary', size: 'lg', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'secondary', size: 'xl', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', avatarTitle: 'Mario Rossi', variant: 'secondary', size: 'xxl', })} </div> `, }"
|
|
457
457
|
},
|
|
458
458
|
{
|
|
459
459
|
"kind": "variable",
|
|
@@ -461,7 +461,7 @@
|
|
|
461
461
|
"type": {
|
|
462
462
|
"text": "Story"
|
|
463
463
|
},
|
|
464
|
-
"default": "{ name: 'Avatar con icona', args: { type: 'icon', }, argTypes: { type: { table: { disable: true } }, src: { table: { disable: true } }, alt: { table: { disable: true } }, text: { table: { disable: true } }, variant: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` Per utilizzare un'icona all'interno di un avatar è sufficiente includere il nome dell'icona prescelta dalla [libreria icone](https://designers.italia.it/design-system/fondamenti/iconografia/) e indicarne il colore con una delle classi disponibili. Per gli avatar con icona inserire un testo alternativo: \\`<span class=\"visually-hidden\">Testo icona</span>\\` `, }, }, }, render: () => html` <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap gap-4\"> ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: '
|
|
464
|
+
"default": "{ name: 'Avatar con icona', args: { type: 'icon', }, argTypes: { type: { table: { disable: true } }, src: { table: { disable: true } }, alt: { table: { disable: true } }, text: { table: { disable: true } }, variant: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` Per utilizzare un'icona all'interno di un avatar è sufficiente includere il nome dell'icona prescelta dalla [libreria icone](https://designers.italia.it/design-system/fondamenti/iconografia/) e indicarne il colore con una delle classi disponibili. Per gli avatar con icona inserire un testo alternativo: \\`<span class=\"visually-hidden\">Testo icona</span>\\` `, }, }, }, render: () => html` <div class=\"d-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap gap-4\"> ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: 'Utente', size: 'xs', })} ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: 'Utente', size: 'sm', })} ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: 'Utente', size: 'md', })} ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: 'Utente', size: 'lg', })} ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: 'Utente', size: 'xl', })} ${renderComponent({ type: 'icon', icon: 'it-user', avatarTitle: 'Utente', size: 'xxl', })} </div> `, }"
|
|
465
465
|
},
|
|
466
466
|
{
|
|
467
467
|
"kind": "variable",
|
|
@@ -469,7 +469,7 @@
|
|
|
469
469
|
"type": {
|
|
470
470
|
"text": "Story"
|
|
471
471
|
},
|
|
472
|
-
"default": "{ argTypes: { href: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` Per associare un avatar ad un'azione o un link, utilizzare l'attributo \\`href\\` con relativo link o chiamata JavaScript. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Tooltip non ancora implementato</span></div> <p>La funzionalità tooltip per gli avatar con link è attualmente in fase di sviluppo
|
|
472
|
+
"default": "{ argTypes: { href: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` Per associare un avatar ad un'azione o un link, utilizzare l'attributo \\`href\\` con relativo link o chiamata JavaScript. <div class=\"callout callout-warning\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Tooltip non ancora implementato</span></div> <p>La funzionalità tooltip per gli avatar con link è attualmente in fase di sviluppo.</p></div></div> `, }, }, }, render: () => html` <div> <div class=\"d-flex align-items-center gap-3 flex-wrap\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/women/41.jpg', alt: 'Anna Barbieri', href: '#', avatarTitle: 'Anna Barbieri', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', href: '#', avatarTitle: 'Mario Rossi', })} ${renderComponent({ type: 'text', text: 'Mario Rossi', variant: 'primary', href: '#', avatarTitle: 'Mario Rossi', })} ${renderComponent({ type: 'icon', icon: 'it-user', href: '#', avatarTitle: 'Utente', })} </div> </div> `, }"
|
|
473
473
|
},
|
|
474
474
|
{
|
|
475
475
|
"kind": "variable",
|
|
@@ -477,7 +477,7 @@
|
|
|
477
477
|
"type": {
|
|
478
478
|
"text": "Story"
|
|
479
479
|
},
|
|
480
|
-
"default": "{ name: 'Comportamento - Presenza utente', argTypes: { presence: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` L'avatar supporta indicatori di presenza dell'utente attraverso l'attributo \\`presence\\`: - **Lo stato attivo** si ottiene aggiungendo l'attributo \\`presence=\"active\"\\` - **Lo stato non disponibile** si ottiene aggiungendo l'attributo \\`presence=\"busy\"\\` - **Lo stato invisibile** si ottiene aggiungendo l'attributo \\`presence=\"hidden\"\\` #### Personalizzazione con Slot L'esempio \"Presenza personalizzata con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p>Ricordarsi sempre di includere testo per screen reader con \\`<span class=\"visually-hidden\">\\` in caso di uso di personalizzazione.</p></div></div> È possibile personalizzare completamente l'indicatore di presenza usando il **\\`slot=\"presence\"\\`**: \\`\\`\\`html <it-avatar text=\"Nome Utente\" presence=\"active\"> <span slot=\"presence\" class=\"custom-presence-indicator\"> <it-icon name=\"it-check\"></it-icon> <span class=\"visually-hidden\">Utente online</span> </span> </it-avatar> \\`\\`\\` \\`\\`\\`css .custom-presence-indicator { position: absolute; bottom: 0; right: 0; /* altri stili personalizzati */ } \\`\\`\\` Le traduzioni dei nomi degli stati sono gestite automaticamente tramite il [sistema @italia/i18n](/docs/componenti-i18n--documentazione). `, }, }, }, render: () => html` <div style=\"display: flex; flex-direction: column; gap: 2rem;\"> <!-- Esempi standard --> <div> <h4>Presenza standard</h4> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/43.jpg', alt: 'Mario Rossi', presence: 'active', size: 'lg', })} <div class=\"mt-2\"><small>Attivo</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/women/41.jpg', alt: 'Luisa Neri', presence: 'busy', size: 'lg', })} <div class=\"mt-2\"><small>Non disponibile</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/33.jpg', alt: 'Gioacchino Romani', presence: 'hidden', size: 'lg', })} <div class=\"mt-2\"><small>Invisibile</small></div> </div> </div> </div> <!-- Esempi con slot personalizzati --> <div> <h4>Presenza personalizzata con slot</h4> <p> L'esempio \"Presenza personalizzata con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. </p> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> <it-avatar type=\"text\" text=\"Marco Bianchi\" variant=\"primary\" presence=\"active\" size=\"lg\"> <span slot=\"presence\" class=\"custom-presence custom-presence-success\"> <it-icon name=\"it-check\" size=\"xs\" color=\"
|
|
480
|
+
"default": "{ name: 'Comportamento - Presenza utente', argTypes: { presence: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` L'avatar supporta indicatori di presenza dell'utente attraverso l'attributo \\`presence\\`: - **Lo stato attivo** si ottiene aggiungendo l'attributo \\`presence=\"active\"\\` - **Lo stato non disponibile** si ottiene aggiungendo l'attributo \\`presence=\"busy\"\\` - **Lo stato invisibile** si ottiene aggiungendo l'attributo \\`presence=\"hidden\"\\` #### Personalizzazione con Slot L'esempio \"Presenza personalizzata con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p>Ricordarsi sempre di includere testo per screen reader con \\`<span class=\"visually-hidden\">\\` in caso di uso di personalizzazione.</p></div></div> È possibile personalizzare completamente l'indicatore di presenza usando il **\\`slot=\"presence\"\\`**: \\`\\`\\`html <it-avatar text=\"Nome Utente\" presence=\"active\"> <span slot=\"presence\" class=\"custom-presence-indicator\"> <it-icon name=\"it-check\"></it-icon> <span class=\"visually-hidden\">Utente online</span> </span> </it-avatar> \\`\\`\\` \\`\\`\\`css .custom-presence-indicator { position: absolute; bottom: 0; right: 0; /* altri stili personalizzati */ } \\`\\`\\` Le traduzioni dei nomi degli stati sono gestite automaticamente tramite il [sistema @italia/i18n](/docs/componenti-i18n--documentazione). `, }, }, }, render: () => html` <div style=\"display: flex; flex-direction: column; gap: 2rem;\"> <!-- Esempi standard --> <div> <h4>Presenza standard</h4> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/43.jpg', alt: 'Mario Rossi', presence: 'active', size: 'lg', })} <div class=\"mt-2\"><small>Attivo</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/women/41.jpg', alt: 'Luisa Neri', presence: 'busy', size: 'lg', })} <div class=\"mt-2\"><small>Non disponibile</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/33.jpg', alt: 'Gioacchino Romani', presence: 'hidden', size: 'lg', })} <div class=\"mt-2\"><small>Invisibile</small></div> </div> </div> </div> <!-- Esempi con slot personalizzati --> <div> <h4>Presenza personalizzata con slot</h4> <p> L'esempio \"Presenza personalizzata con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. </p> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> <it-avatar type=\"text\" text=\"Marco Bianchi\" avatarTitle=\"Marco Bianchi\" variant=\"primary\" presence=\"active\" size=\"lg\" > <span slot=\"presence\" class=\"custom-presence custom-presence-success\"> <it-icon name=\"it-check\" size=\"xs\" color=\"inverse\"></it-icon> <span class=\"visually-hidden\">Utente online e disponibile</span> </span> </it-avatar> <div class=\"mt-2\"><small>Con icona check</small></div> </div> <div class=\"text-center\"> <it-avatar type=\"text\" text=\"Sara Verdi\" avatarTitle=\"Sara Verdi\" variant=\"secondary\" presence=\"busy\" size=\"lg\" > <span slot=\"presence\" class=\"custom-presence custom-presence-danger\"> ! <span class=\"visually-hidden\">Utente occupato, non disturbare</span> </span> </it-avatar> <div class=\"mt-2\"><small>Con testo custom</small></div> </div> </div> </div> </div> <style> /* Esempi di classi CSS per personalizzare gli slot presence */ .custom-presence { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; z-index: 10; } .custom-presence-success { background: #28a745; } .custom-presence-danger { background: #dc3545; font-size: 10px; font-weight: bold; color: white; } </style> `, }"
|
|
481
481
|
},
|
|
482
482
|
{
|
|
483
483
|
"kind": "variable",
|
|
@@ -485,7 +485,7 @@
|
|
|
485
485
|
"type": {
|
|
486
486
|
"text": "Story"
|
|
487
487
|
},
|
|
488
|
-
"default": "{ name: 'Comportamento - Status utente', argTypes: { status: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` L'avatar supporta indicatori di stato dell'account attraverso l'attributo \\`status\\`: - **Lo stato approvato** si ottiene aggiungendo l'attributo \\`status=\"approved\"\\` - **Lo stato respinto** si ottiene aggiungendo l'attributo \\`status=\"declined\"\\` - **Lo stato notifica** si ottiene aggiungendo l'attributo \\`status=\"notify\"\\` #### Personalizzazione con Slot L'esempio \"Status personalizzato con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p>Ricordarsi sempre di includere testo per screen reader con \\`<span class=\"visually-hidden\">\\` in caso di uso di personalizzazione.</p></div></div> È possibile personalizzare completamente l'indicatore di stato usando il **\\`slot=\"status\"\\`**: \\`\\`\\`html <it-avatar text=\"Nome Utente\" status=\"approved\"> <span slot=\"status\" class=\"custom-status-indicator\"> <it-icon name=\"it-check-circle\"></it-icon> <span class=\"visually-hidden\">Account verificato</span> </span> </it-avatar> \\`\\`\\` \\`\\`\\`css .custom-status-indicator { position: absolute; top: -5px; right: -5px; /* altri stili personalizzati */ } \\`\\`\\` Le traduzioni sono gestite automaticamente tramite il [sistema @italia/i18n](/docs/componenti-i18n--documentazione). `, }, }, }, render: () => html` <div style=\"display: flex; flex-direction: column; gap: 2rem;\"> <!-- Esempi standard --> <div> <h4>Status standard</h4> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/43.jpg', alt: 'Mario Rossi', status: 'approved', size: 'lg', })} <div class=\"mt-2\"><small>Approvato</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/women/41.jpg', alt: 'Luisa Neri', status: 'declined', size: 'lg', })} <div class=\"mt-2\"><small>Respinto</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/33.jpg', alt: 'Gioacchino Romani', status: 'notify', size: 'lg', })} <div class=\"mt-2\"><small>Notifica</small></div> </div> </div> </div> <!-- Esempi con slot personalizzati --> <div> <h4>Status personalizzato con slot</h4> <p> L'esempio \"Status personalizzato con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. </p> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> <it-avatar type=\"text\" text=\"Luigi Neri\" variant=\"primary\" status=\"approved\" size=\"lg\"> <span slot=\"status\" class=\"custom-status custom-status-success\"> <it-icon name=\"it-check-circle\" size=\"xs\" color=\"
|
|
488
|
+
"default": "{ name: 'Comportamento - Status utente', argTypes: { status: { table: { disable: true } }, }, parameters: { docs: { description: { story: ` L'avatar supporta indicatori di stato dell'account attraverso l'attributo \\`status\\`: - **Lo stato approvato** si ottiene aggiungendo l'attributo \\`status=\"approved\"\\` - **Lo stato respinto** si ottiene aggiungendo l'attributo \\`status=\"declined\"\\` - **Lo stato notifica** si ottiene aggiungendo l'attributo \\`status=\"notify\"\\` #### Personalizzazione con Slot L'esempio \"Status personalizzato con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p>Ricordarsi sempre di includere testo per screen reader con \\`<span class=\"visually-hidden\">\\` in caso di uso di personalizzazione.</p></div></div> È possibile personalizzare completamente l'indicatore di stato usando il **\\`slot=\"status\"\\`**: \\`\\`\\`html <it-avatar text=\"Nome Utente\" status=\"approved\"> <span slot=\"status\" class=\"custom-status-indicator\"> <it-icon name=\"it-check-circle\"></it-icon> <span class=\"visually-hidden\">Account verificato</span> </span> </it-avatar> \\`\\`\\` \\`\\`\\`css .custom-status-indicator { position: absolute; top: -5px; right: -5px; /* altri stili personalizzati */ } \\`\\`\\` Le traduzioni sono gestite automaticamente tramite il [sistema @italia/i18n](/docs/componenti-i18n--documentazione). `, }, }, }, render: () => html` <div style=\"display: flex; flex-direction: column; gap: 2rem;\"> <!-- Esempi standard --> <div> <h4>Status standard</h4> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/43.jpg', alt: 'Mario Rossi', status: 'approved', size: 'lg', })} <div class=\"mt-2\"><small>Approvato</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/women/41.jpg', alt: 'Luisa Neri', status: 'declined', size: 'lg', })} <div class=\"mt-2\"><small>Respinto</small></div> </div> <div class=\"text-center\"> ${renderComponent({ type: 'image', src: 'https://randomuser.me/api/portraits/men/33.jpg', alt: 'Gioacchino Romani', status: 'notify', size: 'lg', })} <div class=\"mt-2\"><small>Notifica</small></div> </div> </div> </div> <!-- Esempi con slot personalizzati --> <div> <h4>Status personalizzato con slot</h4> <p> L'esempio \"Status personalizzato con slot\" mostra come lo stesso componente possa essere adattato a stili o contenuti differenti tramite gli slot, per illustrare la flessibilità dell'approccio. </p> <div class=\"d-flex align-items-center gap-4 flex-wrap\"> <div class=\"text-center\"> <it-avatar type=\"text\" text=\"Luigi Neri\" avatarTitle=\"Luigi Neri\" variant=\"primary\" status=\"approved\" size=\"lg\" > <span slot=\"status\" class=\"custom-status custom-status-success\"> <it-icon name=\"it-check-circle\" size=\"xs\" color=\"inverse\"></it-icon> <span class=\"visually-hidden\">Account verificato e approvato</span> </span> </it-avatar> <div class=\"mt-2\"><small>Verificato</small></div> </div> <div class=\"text-center\"> <it-avatar type=\"text\" text=\"Carla Blu\" avatarTitle=\"Carla Blu\" variant=\"secondary\" status=\"declined\" size=\"lg\" > <span slot=\"status\" class=\"custom-status custom-status-danger\"> <it-icon name=\"it-close\" size=\"xs\" color=\"inverse\"></it-icon> <span class=\"visually-hidden\">Account sospeso o respinto</span> </span> </it-avatar> <div class=\"mt-2\"><small>Sospeso</small></div> </div> </div> </div> </div> <style> /* Esempi di classi CSS per personalizzare gli slot status */ .custom-status { display: flex; align-items: center; justify-content: center; position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; border: 2px solid white; border-radius: 50%; z-index: 10; } .custom-status-success { background: #28a745; } .custom-status-danger { background: #dc3545; } </style> `, }"
|
|
489
489
|
},
|
|
490
490
|
{
|
|
491
491
|
"kind": "variable",
|
|
@@ -493,7 +493,7 @@
|
|
|
493
493
|
"type": {
|
|
494
494
|
"text": "Story"
|
|
495
495
|
},
|
|
496
|
-
"default": "{ name: 'Gruppi di avatar - Liste verticali', parameters: { docs: { description: { story: ` Utilizzando una lista di link con l’aggiunta della classe .avatar-group si ottiene una lista verticale con avatar affiancati da link e testi. È possibile utilizzare avatar di dimensione \\`sm\\` o \\`md\\` all'interno della lista. `, }, }, }, render: () => html` <div style=\"display: flex; gap: 3rem; flex-wrap: wrap;\"> <div style=\"flex: 1; min-width: 300px;\"> <h4>Lista Verticale - Dimensione SM</h4> <div class=\"link-list-wrapper\"> <ul class=\"link-list avatar-group\"> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ size: 'sm', src: 'https://randomuser.me/api/portraits/men/43.jpg' })} <span>Mario Rossi</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ size: 'sm', src: 'https://randomuser.me/api/portraits/women/44.jpg' })} <span>Anna Verdi</span> </a> </li> <li> <
|
|
496
|
+
"default": "{ name: 'Gruppi di avatar - Liste verticali', parameters: { docs: { description: { story: ` Utilizzando una lista di link con l’aggiunta della classe .avatar-group si ottiene una lista verticale con avatar affiancati da link e testi. È possibile utilizzare avatar di dimensione \\`sm\\` o \\`md\\` all'interno della lista. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p>Se un elemento della lista non è un link, ricordati di assegnare \\`aria-hidden=\"true\"\\` allo span contenuto nel tag \\`<div class=\"list-item\"></div>\\`, come negli esempi seguenti. Questo garantisce che gli screen reader non ripetano inutilmente informazioni ridondanti.</p></div></div> `, }, }, }, render: () => html` <div style=\"display: flex; gap: 3rem; flex-wrap: wrap;\"> <div style=\"flex: 1; min-width: 300px;\"> <h4>Lista Verticale - Dimensione SM</h4> <div class=\"link-list-wrapper\"> <ul class=\"link-list avatar-group\"> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ size: 'sm', src: 'https://randomuser.me/api/portraits/men/43.jpg' })} <span>Mario Rossi</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ size: 'sm', src: 'https://randomuser.me/api/portraits/women/44.jpg' })} <span>Anna Verdi</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ size: 'sm', text: 'Sara Ghione', variant: 'primary', type: 'text' })} <span>Sara Ghione</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ size: 'sm', icon: 'it-user', type: 'icon' })} <span>Antonio Esposito</span> </a> </li> </ul> </div> </div> <div style=\"flex: 1; min-width: 300px;\"> <h4>Lista Verticale - Dimensione MD</h4> <div class=\"link-list-wrapper\"> <ul class=\"link-list avatar-group\"> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ src: 'https://randomuser.me/api/portraits/men/32.jpg' })} <span>Luca Bianchi</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ src: 'https://randomuser.me/api/portraits/women/28.jpg' })} <span>Elena Rossi</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ text: 'Marco Neri', variant: 'secondary', type: 'text' })} <span>Marco Neri</span> </a> </li> <li> <a class=\"list-item\" href=\"#\"> ${renderComponent({ icon: 'it-user', type: 'icon' })} <span>Cerca utenti</span> </a> </li> </ul> </div> </div> </div> `, }"
|
|
497
497
|
},
|
|
498
498
|
{
|
|
499
499
|
"kind": "variable",
|
|
@@ -501,7 +501,7 @@
|
|
|
501
501
|
"type": {
|
|
502
502
|
"text": "Story"
|
|
503
503
|
},
|
|
504
|
-
"default": "{ name: 'Gruppi di avatar - Avatar Sovrapposti', parameters: { docs: { description: { story: ` Racchiudendo una serie di avatar in una lista di tipo <ul> con classe .avatar-group-stacked questi verranno visualizzati come una lista orizzontale in cui i singoli elementi sono parzialmente sovrapposti. In questo tipo di gruppo è possibile inserire dei Dropdown per racchiudere ulteriori elementi avatar. È possibile utilizzare avatar di dimensione \\`sm\\` o \\`md\\` all'interno della lista. Per mostrare ulteriori avatar in un menu a discesa, utilizzare \\`it-avatar\\` con \\`type=\"dropdown\"\\`. L'avatar dropdown eredita automaticamente la dimensione dal gruppo e può contenere una lista di avatar con nomi nel menu. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità del dropdown</span></div> <p
|
|
504
|
+
"default": "{ name: 'Gruppi di avatar - Avatar Sovrapposti', parameters: { docs: { description: { story: ` Racchiudendo una serie di avatar in una lista di tipo <ul> con classe .avatar-group-stacked questi verranno visualizzati come una lista orizzontale in cui i singoli elementi sono parzialmente sovrapposti. In questo tipo di gruppo è possibile inserire dei Dropdown per racchiudere ulteriori elementi avatar. È possibile utilizzare avatar di dimensione \\`sm\\` o \\`md\\` all'interno della lista. Per mostrare ulteriori avatar in un menu a discesa, utilizzare \\`it-avatar\\` con \\`type=\"dropdown\"\\`. L'avatar dropdown eredita automaticamente la dimensione dal gruppo e può contenere una lista di avatar con nomi nel menu. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità del dropdown</span></div> <p>Devi utilizzare l'attributo \\`it-aria-label\\` sul componente \\`it-dropdown\\` per fornire una descrizione completa agli screen reader. L'aria-label deve contenere sia il testo visibile che la sua spiegazione, ad esempio: \\`it-aria-label=\"Visualizza altri 4 utenti\"\\`. In questo modo uno screen reader leggerà l'intera descrizione fornendo il contesto completo all'utente.</p></div></div> `, }, }, }, render: () => html` <div style=\"display: flex; flex-direction: column; gap: 3rem; height: 300px;\"> <div> <ul class=\"avatar-group-stacked\"> <li> <it-avatar src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Giorgia Vicari\" href=\"#\"></it-avatar> </li> <li> <it-avatar src=\"https://randomuser.me/api/portraits/men/43.jpg\" alt=\"Francesco Donati\" href=\"#\"></it-avatar> </li> <li> ${renderComponent({ type: 'text', text: 'Giulia Neri', variant: 'primary', href: '#', avatarTitle: 'Giulia Neri', slot: 'trigger', })} </li> <li><it-avatar text=\"Sandro Penna\" variant=\"secondary\" href=\"#\"></it-avatar></li> <li> <it-avatar type=\"dropdown\"> <it-dropdown label=\"4+\" slot=\"avatar-dropdown-content\" it-aria-label=\"Visualizza altri 4 utenti\" variant=\"secondary\" > <it-dropdown-item href=\"#\"> <it-avatar src=\"https://randomuser.me/api/portraits/men/22.jpg\"></it-avatar> <span>Roberto Milano</span> </it-dropdown-item> <it-dropdown-item href=\"#\"> <it-avatar text=\"Giuseppe Verde\" variant=\"primary\"></it-avatar> <span>Giuseppe Verde</span> </it-dropdown-item> <it-dropdown-item href=\"#\"> <it-avatar text=\"Laura Blu\" variant=\"secondary\"></it-avatar> <span>Laura Blu</span> </it-dropdown-item> <it-dropdown-item href=\"#\"> <it-avatar icon=\"it-user\" avatar-title=\"Altri utenti\"></it-avatar> <span>Altri utenti...</span> </it-dropdown-item> </it-dropdown> </it-avatar> </li> </ul> </div> <p style=\"margin-top: 0.75rem; font-size: 16px; variant: #666;\"> Clicca su \"+4\" per visualizzare gli utenti rimanenti </p> </div> `, }"
|
|
505
505
|
},
|
|
506
506
|
{
|
|
507
507
|
"kind": "variable",
|
|
@@ -509,7 +509,7 @@
|
|
|
509
509
|
"type": {
|
|
510
510
|
"text": "Story"
|
|
511
511
|
},
|
|
512
|
-
"default": "{ name: 'Gruppi di avatar - Avatar Sovrapposti Piccoli', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 3rem;\"> <div> <ul class=\"avatar-group-stacked\"> <li> <it-avatar src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"
|
|
512
|
+
"default": "{ name: 'Gruppi di avatar - Avatar Sovrapposti Piccoli', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 3rem;\"> <div> <ul class=\"avatar-group-stacked\"> <li> <it-avatar src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Giorgia Vicari\" size=\"sm\" ></it-avatar> </li> <li> <it-avatar src=\"https://randomuser.me/api/portraits/men/43.jpg\" alt=\"Francesco Donati\" size=\"sm\" ></it-avatar> </li> <li><it-avatar text=\"Tommaso Sordi\" avatar-title=\"Tommaso Sordi\" variant=\"primary\" size=\"sm\"></it-avatar></li> <li><it-avatar text=\"Barbara Tosi\" avatar-title=\"Barbara Tosi\" size=\"sm\"></it-avatar></li> <li> <it-avatar text=\"Barbara Tosti\" avatar-title=\"Barbara Tosti\" variant=\"secondary\" size=\"sm\"></it-avatar> </li> </ul> </div> </div> `, }"
|
|
513
513
|
},
|
|
514
514
|
{
|
|
515
515
|
"kind": "variable",
|
|
@@ -517,7 +517,7 @@
|
|
|
517
517
|
"type": {
|
|
518
518
|
"text": "Story"
|
|
519
519
|
},
|
|
520
|
-
"default": "{ name: 'Gruppi di avatar - Avatar Sovrapposti Medi', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 3rem;\"> <div> <div> <ul class=\"avatar-group-stacked\"> <li> <it-avatar src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"
|
|
520
|
+
"default": "{ name: 'Gruppi di avatar - Avatar Sovrapposti Medi', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 3rem;\"> <div> <div> <ul class=\"avatar-group-stacked\"> <li> <it-avatar src=\"https://randomuser.me/api/portraits/women/44.jpg\" alt=\"Giorgia Vicari\" href=\"#\" ></it-avatar> </li> <li> <it-avatar src=\"https://randomuser.me/api/portraits/men/43.jpg\" alt=\"Francesco Donati\" href=\"#\" ></it-avatar> </li> <li> ${renderComponent({ type: 'text', text: 'Giulia Neri', variant: 'primary', href: '#', avatarTitle: 'Giulia Neri', slot: 'trigger', })} </li> <li><it-avatar text=\"Sandro Penna\" variant=\"secondary\" avatar-title=\"Sandro Penna\"\"></it-avatar></li> <li><it-avatar text=\"Sandro Pertini\" avatar-title=\"Sandro Pertini\" ></it-avatar></li> </ul> </div> </div> </div> `, }"
|
|
521
521
|
},
|
|
522
522
|
{
|
|
523
523
|
"kind": "variable",
|
|
@@ -525,7 +525,7 @@
|
|
|
525
525
|
"type": {
|
|
526
526
|
"text": "Story"
|
|
527
527
|
},
|
|
528
|
-
"default": "{ name: 'Avatar con testo aggiuntivo', parameters: { docs: { description: { story: ` Per ottenere una versione del componente con nome esteso ed eventuale testo accessorio, utilizza lo slot \\`extra-text\\`. Per il nome è possibile utilizzare i tag \\`<h3>\\` o \\`<h4>\\` tramite lo slot. Il testo esteso può essere contenuto in un \\`<p>\\` o in un tag \\`<time>\\` nel caso di date/orari. `, }, }, }, render: () => html` <div class=\"d-flex gap-4\"> <it-avatar type=\"image\" src=\"https://randomuser.me/api/portraits/men/43.jpg\" size=\"xl\"
|
|
528
|
+
"default": "{ name: 'Avatar con testo aggiuntivo', parameters: { docs: { description: { story: ` Per ottenere una versione del componente con nome esteso ed eventuale testo accessorio, utilizza lo slot \\`extra-text\\`. Per il nome è possibile utilizzare i tag \\`<h3>\\` o \\`<h4>\\` tramite lo slot. Il testo esteso può essere contenuto in un \\`<p>\\` o in un tag \\`<time>\\` nel caso di date/orari. `, }, }, }, render: () => html` <div class=\"d-flex gap-4\"> <it-avatar type=\"image\" src=\"https://randomuser.me/api/portraits/men/43.jpg\" size=\"xl\"> <div slot=\"extra-text\"> <h4>Mario Rossi</h4> <time>15 SET 2025</time> </div> </it-avatar> <it-avatar type=\"image\" src=\"https://randomuser.me/api/portraits/women/44.jpg\" size=\"xl\"> <div slot=\"extra-text\"> <h4>Giulia Neri</h4> <p>LOREM IPSUM DOLOR</p> </div> </it-avatar> <it-avatar type=\"text\" variant=\"primary\" size=\"xl\" text=\"Michele Dotti\"> <div slot=\"extra-text\"> <h4>Michele Dotti</h4> <time>12 MAG 2025</time> </div> </it-avatar> </div> `, }"
|
|
529
529
|
},
|
|
530
530
|
{
|
|
531
531
|
"kind": "variable",
|
|
@@ -533,7 +533,7 @@
|
|
|
533
533
|
"type": {
|
|
534
534
|
"text": "Story"
|
|
535
535
|
},
|
|
536
|
-
"default": "{ name: 'Gruppi di avatar - Liste verticali con testo aggiuntivo', parameters: { docs: { description: { story: ` È possibile combinare le liste verticali con avatar che includono testo aggiuntivo tramite lo slot \\`extra-text\\`. Questo è particolarmente utile per creare liste di utenti con informazioni aggiuntive come ruoli, date o descrizioni. `, }, }, }, render: () => html` <div style=\"max-width: 400px;\"> <h4>Lista Team con Ruoli</h4> <div class=\"link-list-wrapper\"> <ul class=\"link-list avatar-group\"> <li> <div class=\"list-item\"> <it-avatar src=\"https://randomuser.me/api/portraits/men/43.jpg\"
|
|
536
|
+
"default": "{ name: 'Gruppi di avatar - Liste verticali con testo aggiuntivo', parameters: { docs: { description: { story: ` È possibile combinare le liste verticali con avatar che includono testo aggiuntivo tramite lo slot \\`extra-text\\`. Questo è particolarmente utile per creare liste di utenti con informazioni aggiuntive come ruoli, date o descrizioni. `, }, }, }, render: () => html` <div style=\"max-width: 400px;\"> <h4>Lista Team con Ruoli</h4> <div class=\"link-list-wrapper\"> <ul class=\"link-list avatar-group\"> <li> <div class=\"list-item\"> <it-avatar src=\"https://randomuser.me/api/portraits/men/43.jpg\"> <div slot=\"extra-text\"> <h4>Mario Rossi</h4> <p>TEAM LEADER</p> </div> </it-avatar> </div> </li> <li> <div class=\"list-item\"> <it-avatar src=\"https://randomuser.me/api/portraits/women/44.jpg\"> <div slot=\"extra-text\"> <h4>Giulia Neri</h4> <p>FRONTEND DEVELOPER</p> </div> </it-avatar> </div> </li> <li> <div class=\"list-item\"> <it-avatar text=\"Andrea Bianchi\" variant=\"primary\"> <div slot=\"extra-text\"> <h4>Andrea Bianchi</h4> <p>BACKEND DEVELOPER</p> </div> </it-avatar> </div> </li> <li> <div class=\"list-item\"> <it-avatar text=\"Sara Verde\" variant=\"secondary\"> <div slot=\"extra-text\"> <h4>Sara Verde</h4> <time>ULTIMO ACCESSO: 12 SET 2025</time> </div> </it-avatar> </div> </li> </ul> </div> </div> `, }"
|
|
537
537
|
}
|
|
538
538
|
],
|
|
539
539
|
"exports": [
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
"name": "default",
|
|
543
543
|
"declaration": {
|
|
544
544
|
"name": "meta",
|
|
545
|
-
"module": "stories/avatar.stories.ts"
|
|
545
|
+
"module": "stories/it-avatar.stories.ts"
|
|
546
546
|
}
|
|
547
547
|
},
|
|
548
548
|
{
|
|
@@ -550,7 +550,7 @@
|
|
|
550
550
|
"name": "EsempioInterattivo",
|
|
551
551
|
"declaration": {
|
|
552
552
|
"name": "EsempioInterattivo",
|
|
553
|
-
"module": "stories/avatar.stories.ts"
|
|
553
|
+
"module": "stories/it-avatar.stories.ts"
|
|
554
554
|
}
|
|
555
555
|
},
|
|
556
556
|
{
|
|
@@ -558,7 +558,7 @@
|
|
|
558
558
|
"name": "PersonalizzazioneDegliStili",
|
|
559
559
|
"declaration": {
|
|
560
560
|
"name": "PersonalizzazioneDegliStili",
|
|
561
|
-
"module": "stories/avatar.stories.ts"
|
|
561
|
+
"module": "stories/it-avatar.stories.ts"
|
|
562
562
|
}
|
|
563
563
|
},
|
|
564
564
|
{
|
|
@@ -566,7 +566,7 @@
|
|
|
566
566
|
"name": "AvatarConImmagine",
|
|
567
567
|
"declaration": {
|
|
568
568
|
"name": "AvatarConImmagine",
|
|
569
|
-
"module": "stories/avatar.stories.ts"
|
|
569
|
+
"module": "stories/it-avatar.stories.ts"
|
|
570
570
|
}
|
|
571
571
|
},
|
|
572
572
|
{
|
|
@@ -574,7 +574,7 @@
|
|
|
574
574
|
"name": "AvatarConTesto",
|
|
575
575
|
"declaration": {
|
|
576
576
|
"name": "AvatarConTesto",
|
|
577
|
-
"module": "stories/avatar.stories.ts"
|
|
577
|
+
"module": "stories/it-avatar.stories.ts"
|
|
578
578
|
}
|
|
579
579
|
},
|
|
580
580
|
{
|
|
@@ -582,7 +582,7 @@
|
|
|
582
582
|
"name": "AvatarConIcona",
|
|
583
583
|
"declaration": {
|
|
584
584
|
"name": "AvatarConIcona",
|
|
585
|
-
"module": "stories/avatar.stories.ts"
|
|
585
|
+
"module": "stories/it-avatar.stories.ts"
|
|
586
586
|
}
|
|
587
587
|
},
|
|
588
588
|
{
|
|
@@ -590,7 +590,7 @@
|
|
|
590
590
|
"name": "AvatarLink",
|
|
591
591
|
"declaration": {
|
|
592
592
|
"name": "AvatarLink",
|
|
593
|
-
"module": "stories/avatar.stories.ts"
|
|
593
|
+
"module": "stories/it-avatar.stories.ts"
|
|
594
594
|
}
|
|
595
595
|
},
|
|
596
596
|
{
|
|
@@ -598,7 +598,7 @@
|
|
|
598
598
|
"name": "ComportamentoPresenzaUtente",
|
|
599
599
|
"declaration": {
|
|
600
600
|
"name": "ComportamentoPresenzaUtente",
|
|
601
|
-
"module": "stories/avatar.stories.ts"
|
|
601
|
+
"module": "stories/it-avatar.stories.ts"
|
|
602
602
|
}
|
|
603
603
|
},
|
|
604
604
|
{
|
|
@@ -606,7 +606,7 @@
|
|
|
606
606
|
"name": "ComportamentoStatusUtente",
|
|
607
607
|
"declaration": {
|
|
608
608
|
"name": "ComportamentoStatusUtente",
|
|
609
|
-
"module": "stories/avatar.stories.ts"
|
|
609
|
+
"module": "stories/it-avatar.stories.ts"
|
|
610
610
|
}
|
|
611
611
|
},
|
|
612
612
|
{
|
|
@@ -614,7 +614,7 @@
|
|
|
614
614
|
"name": "GruppiAvatarListe",
|
|
615
615
|
"declaration": {
|
|
616
616
|
"name": "GruppiAvatarListe",
|
|
617
|
-
"module": "stories/avatar.stories.ts"
|
|
617
|
+
"module": "stories/it-avatar.stories.ts"
|
|
618
618
|
}
|
|
619
619
|
},
|
|
620
620
|
{
|
|
@@ -622,7 +622,7 @@
|
|
|
622
622
|
"name": "AvatarSovrapposti",
|
|
623
623
|
"declaration": {
|
|
624
624
|
"name": "AvatarSovrapposti",
|
|
625
|
-
"module": "stories/avatar.stories.ts"
|
|
625
|
+
"module": "stories/it-avatar.stories.ts"
|
|
626
626
|
}
|
|
627
627
|
},
|
|
628
628
|
{
|
|
@@ -630,7 +630,7 @@
|
|
|
630
630
|
"name": "AvatarSovrappostiSM",
|
|
631
631
|
"declaration": {
|
|
632
632
|
"name": "AvatarSovrappostiSM",
|
|
633
|
-
"module": "stories/avatar.stories.ts"
|
|
633
|
+
"module": "stories/it-avatar.stories.ts"
|
|
634
634
|
}
|
|
635
635
|
},
|
|
636
636
|
{
|
|
@@ -638,7 +638,7 @@
|
|
|
638
638
|
"name": "AvatarSovrappostiMD",
|
|
639
639
|
"declaration": {
|
|
640
640
|
"name": "AvatarSovrappostiMD",
|
|
641
|
-
"module": "stories/avatar.stories.ts"
|
|
641
|
+
"module": "stories/it-avatar.stories.ts"
|
|
642
642
|
}
|
|
643
643
|
},
|
|
644
644
|
{
|
|
@@ -646,7 +646,7 @@
|
|
|
646
646
|
"name": "AvatarConTestoAggiuntivo",
|
|
647
647
|
"declaration": {
|
|
648
648
|
"name": "AvatarConTestoAggiuntivo",
|
|
649
|
-
"module": "stories/avatar.stories.ts"
|
|
649
|
+
"module": "stories/it-avatar.stories.ts"
|
|
650
650
|
}
|
|
651
651
|
},
|
|
652
652
|
{
|
|
@@ -654,7 +654,7 @@
|
|
|
654
654
|
"name": "GruppiAvatarConTesto",
|
|
655
655
|
"declaration": {
|
|
656
656
|
"name": "GruppiAvatarConTesto",
|
|
657
|
-
"module": "stories/avatar.stories.ts"
|
|
657
|
+
"module": "stories/it-avatar.stories.ts"
|
|
658
658
|
}
|
|
659
659
|
}
|
|
660
660
|
]
|
package/dist/src/it-avatar.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ export declare class ItAvatar extends BaseLocalizedComponent {
|
|
|
4
4
|
static styles: import("lit").CSSResultGroup;
|
|
5
5
|
static shadowRootOptions: {
|
|
6
6
|
delegatesFocus: boolean;
|
|
7
|
+
clonable?: boolean;
|
|
8
|
+
customElementRegistry?: CustomElementRegistry;
|
|
7
9
|
mode: ShadowRootMode;
|
|
8
10
|
serializable?: boolean;
|
|
9
11
|
slotAssignment?: SlotAssignmentMode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-avatar.d.ts","sourceRoot":"","sources":["../../src/it-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAMzD,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AASxH,qBACa,QAAS,SAAQ,sBAAsB;IAClD,MAAM,CAAC,MAAM,+BAAU;IAEvB,OAAgB,iBAAiB
|
|
1
|
+
{"version":3,"file":"it-avatar.d.ts","sourceRoot":"","sources":["../../src/it-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAMzD,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AASxH,qBACa,QAAS,SAAQ,sBAAsB;IAClD,MAAM,CAAC,MAAM,+BAAU;IAEvB,OAAgB,iBAAiB;;;;;;;MAG/B;IAEyC,IAAI,EAAE,UAAU,CAAQ;IAExB,OAAO,EAAE,WAAW,CAAM;IAE1B,QAAQ,EAAE,cAAc,CAAM;IAE9B,MAAM,EAAE,YAAY,CAAM;IAE1B,IAAI,EAAE,UAAU,CAAM;IAEtB,GAAG,SAAM;IAET,GAAG,SAAM;IAET,IAAI,SAAM;IAEV,IAAI,SAAM;IAErD,OAAO,CAAC,eAAe,CAAS;IAEW,IAAI,SAAM;IAEiB,WAAW,SAAM;IAEvF,IAAI,iBAAiB,IAAI,OAAO,CAE/B;IAED,IAAa,YAAY,IAAI,WAAW,GAAG,IAAI,CAK9C;IAED,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,aAAa,CAGnB;IAEF,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IASpE,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,mBAAmB;IAY3B,OAAO;IAoCP,OAAO,KAAK,mBAAmB,GAG9B;IAED,OAAO,CAAC,qBAAqB,CAO3B;IAEF,OAAO,CAAC,iBAAiB;IAOzB,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/src/it-avatar.js
CHANGED
|
@@ -438,6 +438,7 @@ const interactions = new WeakMap();
|
|
|
438
438
|
/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
|
|
439
439
|
class FormControlController {
|
|
440
440
|
constructor(host, options) {
|
|
441
|
+
this.submittedOnce = false;
|
|
441
442
|
this.handleFormData = (event) => {
|
|
442
443
|
// console.log('handleFormData');
|
|
443
444
|
const disabled = this.options.disabled(this.host);
|
|
@@ -459,6 +460,17 @@ class FormControlController {
|
|
|
459
460
|
event.formData.append(name, value);
|
|
460
461
|
}
|
|
461
462
|
break;
|
|
463
|
+
case 'it-checkbox':
|
|
464
|
+
if (this.host.checked) {
|
|
465
|
+
if (event.formData.getAll(name).indexOf(value) < 0) {
|
|
466
|
+
// handle group checkbox
|
|
467
|
+
event.formData.append(name, value);
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
break;
|
|
471
|
+
case 'it-checkbox-group':
|
|
472
|
+
// non settare valori in formData, perchè ogni singola checkbox setta il suo valore
|
|
473
|
+
break;
|
|
462
474
|
default:
|
|
463
475
|
if (Array.isArray(value)) {
|
|
464
476
|
value.forEach((val) => {
|
|
@@ -480,13 +492,30 @@ class FormControlController {
|
|
|
480
492
|
this.setUserInteracted(control, true);
|
|
481
493
|
});
|
|
482
494
|
}
|
|
483
|
-
|
|
495
|
+
const resReportValidity = reportValidity(this.host);
|
|
496
|
+
if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
|
|
484
497
|
event.preventDefault();
|
|
485
498
|
// event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
|
|
499
|
+
// Scroll al primo controllo non valido
|
|
500
|
+
const formControls = formCollections.get(this.form);
|
|
501
|
+
if (formControls) {
|
|
502
|
+
for (const control of formControls) {
|
|
503
|
+
if (!control.validity?.valid) {
|
|
504
|
+
// Scroll smooth verso il controllo non valido
|
|
505
|
+
control.scrollIntoView({
|
|
506
|
+
behavior: 'smooth',
|
|
507
|
+
block: 'center',
|
|
508
|
+
});
|
|
509
|
+
break;
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
}
|
|
486
513
|
}
|
|
514
|
+
this.submittedOnce = true;
|
|
487
515
|
};
|
|
488
516
|
this.handleFormReset = () => {
|
|
489
517
|
this.options.setValue(this.host, '');
|
|
518
|
+
this.submittedOnce = false;
|
|
490
519
|
this.setUserInteracted(this.host, false);
|
|
491
520
|
interactions.set(this.host, []);
|
|
492
521
|
};
|
|
@@ -651,6 +680,7 @@ class FormControlController {
|
|
|
651
680
|
if (!formCollection) {
|
|
652
681
|
return;
|
|
653
682
|
}
|
|
683
|
+
this.submittedOnce = false;
|
|
654
684
|
// Remove this host from the form's collection
|
|
655
685
|
formCollection.delete(this.host);
|
|
656
686
|
// Check to make sure there's no other form controls in the collection. If we do this
|
|
@@ -747,6 +777,10 @@ class FormControlController {
|
|
|
747
777
|
host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
|
|
748
778
|
host.toggleAttribute('data-user-valid', isValid && hasInteracted);
|
|
749
779
|
}
|
|
780
|
+
userInteracted() {
|
|
781
|
+
const hasInteracted = Boolean(userInteractedControls.has(this.host));
|
|
782
|
+
return hasInteracted;
|
|
783
|
+
}
|
|
750
784
|
/**
|
|
751
785
|
* Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
|
|
752
786
|
* that affects constraint validation changes so the component receives the correct validity states.
|
|
@@ -783,6 +817,7 @@ const translation$2 = {
|
|
|
783
817
|
$name: 'Italiano',
|
|
784
818
|
$dir: 'ltr',
|
|
785
819
|
validityRequired: 'Questo campo è obbligatorio.',
|
|
820
|
+
validityGroupRequired: "Scegli almeno un'opzione",
|
|
786
821
|
validityPattern: 'Il valore non corrisponde al formato richiesto.',
|
|
787
822
|
validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
|
|
788
823
|
validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
|
|
@@ -827,24 +862,27 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
827
862
|
this.maxlength = -1;
|
|
828
863
|
/** If the input is required. */
|
|
829
864
|
this.required = false;
|
|
865
|
+
/* For grouped input, like checkbox-group */
|
|
866
|
+
this.isInGroup = false;
|
|
830
867
|
this.validationMessage = '';
|
|
831
868
|
}
|
|
832
869
|
/** Gets the validity state object */
|
|
833
870
|
get validity() {
|
|
834
871
|
return this.inputElement?.validity;
|
|
835
872
|
}
|
|
873
|
+
/** Gets the associated form, if one exists. */
|
|
874
|
+
getForm() {
|
|
875
|
+
return this.formControlController.getForm();
|
|
876
|
+
}
|
|
836
877
|
// Form validation methods
|
|
837
878
|
checkValidity() {
|
|
838
879
|
const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
|
|
839
880
|
return inputValid;
|
|
840
881
|
}
|
|
841
|
-
/** Gets the associated form, if one exists. */
|
|
842
|
-
getForm() {
|
|
843
|
-
return this.formControlController.getForm();
|
|
844
|
-
}
|
|
845
882
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
846
883
|
reportValidity() {
|
|
847
|
-
const ret = this.inputElement.checkValidity();
|
|
884
|
+
// const ret = this.inputElement.checkValidity();
|
|
885
|
+
const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
|
|
848
886
|
this.handleValidationMessages();
|
|
849
887
|
return ret; // this.inputElement.reportValidity();
|
|
850
888
|
}
|
|
@@ -889,7 +927,8 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
889
927
|
handleValidationMessages() {
|
|
890
928
|
if (!this.customValidation) {
|
|
891
929
|
const _v = this.inputElement.validity;
|
|
892
|
-
|
|
930
|
+
const isRequiredHandledByGroup = this.isInGroup === true;
|
|
931
|
+
if (_v.valueMissing && !isRequiredHandledByGroup) {
|
|
893
932
|
this.setCustomValidity(this.$t('validityRequired'));
|
|
894
933
|
}
|
|
895
934
|
else if (_v.patternMismatch) {
|
|
@@ -960,7 +999,7 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
960
999
|
if (this.customValidation) {
|
|
961
1000
|
this.setCustomValidity(this.validationText ?? '');
|
|
962
1001
|
}
|
|
963
|
-
else {
|
|
1002
|
+
else if (this.formControlController.userInteracted()) {
|
|
964
1003
|
this.formControlController.updateValidity();
|
|
965
1004
|
}
|
|
966
1005
|
}
|
|
@@ -1028,11 +1067,23 @@ __decorate([
|
|
|
1028
1067
|
,
|
|
1029
1068
|
__metadata("design:type", Object)
|
|
1030
1069
|
], FormControl.prototype, "required", void 0);
|
|
1070
|
+
__decorate([
|
|
1071
|
+
property({ type: Boolean }),
|
|
1072
|
+
__metadata("design:type", Object)
|
|
1073
|
+
], FormControl.prototype, "isInGroup", void 0);
|
|
1031
1074
|
__decorate([
|
|
1032
1075
|
state(),
|
|
1033
1076
|
__metadata("design:type", Object)
|
|
1034
1077
|
], FormControl.prototype, "validationMessage", void 0);
|
|
1035
1078
|
|
|
1079
|
+
if (typeof window !== 'undefined') {
|
|
1080
|
+
window._itAnalytics = window._itAnalytics || {};
|
|
1081
|
+
window._itAnalytics = {
|
|
1082
|
+
...window._itAnalytics,
|
|
1083
|
+
version: '1.0.0-alpha.4',
|
|
1084
|
+
};
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1036
1087
|
var styles = css`/***************************** 1 ****************************************/
|
|
1037
1088
|
/***************************** 2 ****************************************/
|
|
1038
1089
|
/***************************** 1 ****************************************/
|
|
@@ -1355,6 +1406,11 @@ a .avatar:hover p {
|
|
|
1355
1406
|
text-decoration: none;
|
|
1356
1407
|
}
|
|
1357
1408
|
|
|
1409
|
+
:host([type=text]) {
|
|
1410
|
+
cursor: default;
|
|
1411
|
+
pointer-events: none;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1358
1414
|
it-icon::part(icon) {
|
|
1359
1415
|
width: var(--bs-avatar-icon-size);
|
|
1360
1416
|
height: var(--bs-avatar-icon-size);
|
|
@@ -1634,16 +1690,15 @@ let ItAvatar = class ItAvatar extends BaseLocalizedComponent {
|
|
|
1634
1690
|
return nothing;
|
|
1635
1691
|
return html `
|
|
1636
1692
|
<p aria-hidden="true">${initials}</p>
|
|
1637
|
-
${this.
|
|
1693
|
+
${this.avatarTitle ? html `<span class="visually-hidden">${this.avatarTitle}</span>` : nothing}
|
|
1638
1694
|
`;
|
|
1639
1695
|
}
|
|
1640
1696
|
renderIcon() {
|
|
1641
1697
|
if (!this.icon)
|
|
1642
1698
|
return nothing;
|
|
1643
|
-
const accessibleText = this.avatarTitle || this.text || this.alt || 'Icona';
|
|
1644
1699
|
return html `
|
|
1645
|
-
<it-icon name="${this.icon}"
|
|
1646
|
-
|
|
1700
|
+
<it-icon name="${this.icon}"></it-icon>
|
|
1701
|
+
${this.avatarTitle ? html `<span class="visually-hidden">${this.avatarTitle}</span>` : nothing}
|
|
1647
1702
|
`;
|
|
1648
1703
|
}
|
|
1649
1704
|
renderAvatarContent() {
|