npm - @zanichelli/zanichelli-it-frontend-kit - Versions diffs - 0.1.6 → 1.0.2 - Mend

@zanichelli/zanichelli-it-frontend-kit 0.1.6 → 1.0.2

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.

Files changed (26) hide show

package/www/index.html CHANGED Viewed

@@ -1,257 +1,301 @@
-<!doctype html><html dir="ltr" lang="it"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Zanichelli.it frontend kit</title> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css"> <link rel="stylesheet" type="text/css" href="/build/p-984b8fa6.css"> <link rel="modulepreload" href="/build/p-fedb810b.js"><link rel="modulepreload" href="/build/p-BWVQ0LD4.js"><script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> <script type="module" src="/build/p-fedb810b.js" data-stencil data-resources-url="/build/" data-stencil-namespace="zanichelli-it-frontend-kit"></script> <script nomodule="" src="/build/zanichelli-it-frontend-kit.js" data-stencil></script> </head> <body> <header> <zanit-menubar current="scuola/per-chi-studia-4457ef/ciao-manuel"></zanit-menubar> <script>
+<!doctype html><html dir="ltr" lang="it"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Zanichelli.it frontend kit</title> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css"> <link rel="stylesheet" type="text/css" href="/build/p-984b8fa6.css"> <link rel="modulepreload" href="/build/p-d36eb550.js"><link rel="modulepreload" href="/build/p-BWVQ0LD4.js"><script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script> <script type="module" src="/build/p-d36eb550.js" data-stencil data-resources-url="/build/" data-stencil-namespace="zanichelli-it-frontend-kit"></script> <script nomodule="" src="/build/zanichelli-it-frontend-kit.js" data-stencil></script> </head> <body> <header> <zanit-menubar current="scuola/per-chi-studia-4457ef/ciao-manuel"></zanit-menubar> <script>
         document.addEventListener('DOMContentLoaded', function () {
-          document.querySelector('zanit-menubar')?.setAttribute(
-            'data',
-            JSON.stringify([
-              {
-                label: 'Scuola',
-                href: 'https://test-www.aglebert.zanichelli.it/scuola',
-                id: 'scuola',
-                highlight: false,
-                navbarItems: [
-                  {
-                    label: 'Per chi insegna',
-                    href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna',
-                    id: 'per-chi-insegna-fb74aa',
-                    highlight: false,
-                    menuItems: [
-                      {
-                        label: 'laZ',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/laz',
-                        id: 'laz',
-                        group: {
-                          label: 'In evidenza',
-                          id: 'in-evidenza',
+          const menubar = document.querySelector('zanit-menubar');
+          if (!menubar) {
+            return;
+          }
+          menubar.data = new Promise((resolve) => {
+            setTimeout(() => {
+              resolve([
+                {
+                  label: 'Scuola',
+                  href: 'https://test-www.aglebert.zanichelli.it/scuola',
+                  target: '_self',
+                  id: 'scuola',
+                  highlight: false,
+                  navbarItems: [
+                    {
+                      label: 'Per chi insegna',
+                      href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna',
+                      target: '_self',
+                      id: 'per-chi-insegna-fb74aa',
+                      highlight: false,
+                      menuItems: [
+                        {
+                          label: 'laZ',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/laz',
+                          target: '_self',
+                          id: 'laz',
+                          group: {
+                            label: 'In evidenza',
+                            id: 'in-evidenza',
+                          },
+                          highlight: true,
                         },
-                        highlight: true,
-                      },
-                      {
-                        label: 'Obiettivi formativi',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/obiettivi-formativi',
-                        id: 'obiettivi-formativi',
-                        highlight: false,
-                      },
-                      {
-                        label: 'cacciatori',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/cacciatori-di-bufale-si-diventa',
-                        id: 'cacciatori-di-bufale-si-diventa',
-                        group: {
-                          label: '6 Acqua pulita e servizi igienico-sanitari',
-                          id: 'agenda2030-acqua-pulita-servizi-igienico-sanitari',
+                        {
+                          label: 'Obiettivi formativi',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/obiettivi-formativi',
+                          target: '_self',
+                          id: 'obiettivi-formativi',
+                          highlight: false,
                         },
-                        highlight: false,
-                      },
-                      {
-                        label: 'Perché è difficile riconoscere le fake news in Rete?',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/perche-e-difficile-riconoscere-le-fake-news-in-rete',
-                        id: 'perche-e-difficile-riconoscere-le-fake-news-in-rete',
-                        group: {
-                          label: '4 Istruzione di qualità',
-                          id: 'agenda2030-istruzione-di-qualita',
+                        {
+                          label: 'cacciatori',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/cacciatori-di-bufale-si-diventa',
+                          target: '_self',
+                          id: 'cacciatori-di-bufale-si-diventa',
+                          group: {
+                            label: '6 Acqua pulita e servizi igienico-sanitari',
+                            id: 'agenda2030-acqua-pulita-servizi-igienico-sanitari',
+                          },
+                          highlight: false,
                         },
-                        highlight: false,
-                      },
-                      {
-                        label: 'Dalla correlazione alla causalita applicazione al caso del global warming',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/dalla-correlazione-alla-causalita-applicazione-al-caso-del-global-warming',
-                        id: 'dalla-correlazione-alla-causalita-applicazione-al-caso-del-global-warming',
-                        group: {
-                          label: '4 Istruzione di qualità',
-                          id: 'agenda2030-istruzione-di-qualita',
+                        {
+                          label: 'Perché è difficile riconoscere le fake news in Rete?',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/perche-e-difficile-riconoscere-le-fake-news-in-rete',
+                          target: '_self',
+                          id: 'perche-e-difficile-riconoscere-le-fake-news-in-rete',
+                          group: {
+                            label: '4 Istruzione di qualità',
+                            id: 'agenda2030-istruzione-di-qualita',
+                          },
+                          highlight: false,
                         },
-                        highlight: false,
-                      },
-                      {
-                        label: 'Documento con copertina',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/documento-con-copertina',
-                        id: 'documento-con-copertina',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Offerta per Bisogni Educativi Speciali',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/offerta-per-bisogni-educativi-speciali',
-                        id: 'offerta-per-bisogni-educativi-speciali',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Filiali & Filiali',
-                        href: 'https://test-www.aglebert.zanichelli.it/contatti/filiali-e-agenzie/',
-                        id: 'filiali-e-filiali',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Servizi',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/servizi',
-                        id: 'servizi',
-                        highlight: false,
-                      },
-                      {
-                        label: 'prova manuel',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/prova-manuel',
-                        id: 'prova-manuel',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Collezioni',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/collezioni-64748c',
-                        id: 'collezioni-64748c',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Ciao manuel',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/ciao-manuel',
-                        id: 'ciao-manuel',
-                        group: {
-                          label: 'Proposta editorale',
-                          id: 'proposta-editoriale',
+                        {
+                          label: 'Dalla correlazione alla causalita applicazione al caso del global warming',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/dalla-correlazione-alla-causalita-applicazione-al-caso-del-global-warming',
+                          target: '_self',
+                          id: 'dalla-correlazione-alla-causalita-applicazione-al-caso-del-global-warming',
+                          group: {
+                            label: '4 Istruzione di qualità',
+                            id: 'agenda2030-istruzione-di-qualita',
+                          },
+                          highlight: false,
                         },
-                        highlight: false,
-                      },
-                      {
-                        label: 'Prova di Paolo di Prova',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/pdpdp',
-                        id: 'pdpdp',
-                        highlight: false,
-                      },
-                    ],
-                  },
-                  {
-                    label: 'Per chi studia',
-                    href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia',
-                    id: 'per-chi-studia-4457ef',
-                    highlight: false,
-                    menuItems: [
-                      {
-                        label: 'PNRR 2023-2024',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia/pnrr-2023-2024',
-                        id: 'pnrr-2023-2024',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Siti LaZ',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia/laz',
-                        id: 'siti-laz',
-                        highlight: false,
-                      },
-                      {
-                        label: 'Ciao manuel',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia/ciao-manuel',
-                        id: 'ciao-manuel',
-                        group: {
-                          label: 'Proposta editorale',
-                          id: 'proposta-editoriale',
+                        {
+                          label: 'Documento con copertina',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/documento-con-copertina',
+                          target: '_self',
+                          id: 'documento-con-copertina',
+                          highlight: false,
                         },
-                        highlight: false,
-                      },
-                    ],
-                  },
-                  {
-                    label: 'Per le scuole',
-                    href: 'https://test-www.aglebert.zanichelli.it/scuola/per-le-scuole',
-                    id: 'per-le-scuole',
-                    highlight: false,
-                    menuItems: [
-                      {
-                        label: 'La nostra proposta per i Bisogni Educativi Speciali',
-                        href: 'https://test-www.aglebert.zanichelli.it/scuola/per-le-scuole/longformtestfrappa',
-                        id: 'longformtestfrappa',
-                        highlight: false,
-                      },
-                    ],
-                  },
-                  {
-                    label: 'Per le librerie',
-                    href: 'https://test-www.aglebert.zanichelli.it/scuola/per-le-librerie',
-                    id: 'per-le-librerie',
-                    highlight: false,
-                    menuItems: [],
-                  },
-                ],
-              },
-              {
-                label: 'Università',
-                href: 'https://test-www.aglebert.zanichelli.it/universita',
-                id: 'universita',
-                highlight: false,
-                navbarItems: [
-                  {
-                    label: 'Per chi insegna',
-                    href: 'https://test-www.aglebert.zanichelli.it/universita/per-chi-insegna',
-                    id: 'per-chi-insegna-5b3787',
-                    highlight: false,
-                    menuItems: [],
-                  },
-                  {
-                    label: 'Per chi studia',
-                    href: 'https://test-www.aglebert.zanichelli.it/universita/per-chi-studia',
-                    id: 'per-chi-studia-86b006',
-                    highlight: false,
-                    menuItems: [
-                      {
-                        label: 'Ciao manuel',
-                        href: 'https://test-www.aglebert.zanichelli.it/universita/per-chi-studia/ciao-manuel',
-                        id: 'ciao-manuel',
-                        group: {
-                          label: 'Proposta editorale',
-                          id: 'proposta-editoriale',
+                        {
+                          label: 'Offerta per Bisogni Educativi Speciali',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/offerta-per-bisogni-educativi-speciali',
+                          target: '_self',
+                          id: 'offerta-per-bisogni-educativi-speciali',
+                          highlight: false,
+                        },
+                        {
+                          label: 'Filiali & Filiali',
+                          href: 'https://test-www.aglebert.zanichelli.it/contatti/filiali-e-agenzie/',
+                          target: '_self',
+                          id: 'filiali-e-filiali',
+                          highlight: false,
+                        },
+                        {
+                          label: 'Servizi',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/servizi',
+                          target: '_self',
+                          id: 'servizi',
+                          highlight: false,
                         },
-                        highlight: false,
+                        {
+                          label: 'prova manuel',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/prova-manuel',
+                          target: '_self',
+                          id: 'prova-manuel',
+                          highlight: false,
+                        },
+                        {
+                          label: 'Collezioni',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/collezioni-64748c',
+                          target: '_self',
+                          id: 'collezioni-64748c',
+                          highlight: false,
+                        },
+                        {
+                          label: 'Test Manuel: Per chi insegna La sezione Insegnare con l’IA propone oltre 80 attività',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/ciao-manuel',
+                          target: '_self',
+                          id: 'ciao-manuel',
+                          group: {
+                            label: 'Proposta editorale',
+                            id: 'proposta-editoriale',
+                          },
+                          highlight: false,
+                        },
+                        {
+                          label: 'Prova di Paolo di Prova',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/pdpdp',
+                          target: '_self',
+                          id: 'pdpdp',
+                          highlight: false,
+                        },
+                        {
+                          label: 'laZ Biblioteca',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-insegna/laz-biblioteca',
+                          target: '_self',
+                          id: 'laz-biblioteca',
+                          highlight: false,
+                        },
+                      ],
+                    },
+                    {
+                      label: 'Per chi studia',
+                      href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia',
+                      target: '_self',
+                      id: 'per-chi-studia-4457ef',
+                      highlight: false,
+                      menuItems: [
+                        {
+                          label: 'PNRR 2023-2024',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia/pnrr-2023-2024',
+                          target: '_self',
+                          id: 'pnrr-2023-2024',
+                          highlight: false,
+                        },
+                        {
+                          label: 'Siti LaZ',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia/laz',
+                          target: '_self',
+                          id: 'siti-laz',
+                          highlight: false,
+                        },
+                        {
+                          label: 'Test Manuel: Per chi insegna La sezione Insegnare con l’IA propone oltre 80 attività',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-chi-studia/ciao-manuel',
+                          target: '_self',
+                          id: 'ciao-manuel',
+                          group: {
+                            label: 'Proposta editorale',
+                            id: 'proposta-editoriale',
+                          },
+                          highlight: false,
+                        },
+                      ],
+                    },
+                    {
+                      label: 'Per le scuole',
+                      href: 'https://test-www.aglebert.zanichelli.it/scuola/per-le-scuole',
+                      target: '_self',
+                      id: 'per-le-scuole',
+                      highlight: false,
+                      menuItems: [
+                        {
+                          label: 'La nostra proposta per i Bisogni Educativi Speciali',
+                          href: 'https://test-www.aglebert.zanichelli.it/scuola/per-le-scuole/longformtestfrappa',
+                          target: '_self',
+                          id: 'longformtestfrappa',
+                          highlight: false,
+                        },
+                      ],
+                    },
+                    {
+                      label: 'Per le librerie',
+                      href: 'https://test-www.aglebert.zanichelli.it/scuola/per-le-librerie',
+                      target: '_self',
+                      id: 'per-le-librerie',
+                      highlight: false,
+                      menuItems: [],
+                    },
+                  ],
+                },
+                {
+                  label: 'Università',
+                  href: 'https://test-www.aglebert.zanichelli.it/universita',
+                  target: '_self',
+                  id: 'universita',
+                  highlight: false,
+                  navbarItems: [
+                    {
+                      label: 'Per chi insegna',
+                      href: 'https://test-www.aglebert.zanichelli.it/universita/per-chi-insegna',
+                      target: '_self',
+                      id: 'per-chi-insegna-5b3787',
+                      highlight: false,
+                      menuItems: [],
+                    },
+                    {
+                      label: 'Per chi studia',
+                      href: 'https://test-www.aglebert.zanichelli.it/universita/per-chi-studia',
+                      target: '_self',
+                      id: 'per-chi-studia-86b006',
+                      highlight: false,
+                      menuItems: [
+                        {
+                          label: 'Test Manuel: Per chi insegna La sezione Insegnare con l’IA propone oltre 80 attività',
+                          href: 'https://test-www.aglebert.zanichelli.it/universita/per-chi-studia/ciao-manuel',
+                          target: '_self',
+                          id: 'ciao-manuel',
+                          group: {
+                            label: 'Proposta editorale',
+                            id: 'proposta-editoriale',
+                          },
+                          highlight: false,
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  label: 'Giuridico',
+                  href: 'https://test-www.aglebert.zanichelli.it/giuridico',
+                  target: '_self',
+                  id: 'giuridico',
+                  highlight: false,
+                  menuItems: [
+                    {
+                      label: 'Contatti',
+                      href: 'https://test-www.aglebert.zanichelli.it/giuridico/contatti-c0b9ed',
+                      target: '_self',
+                      id: 'contatti-c0b9ed',
+                      group: {
+                        label: 'In evidenza',
+                        id: 'in-evidenza',
+                      },
+                      highlight: true,
+                    },
+                    {
+                      label: 'Manuali universitari',
+                      href: 'https://test-www.aglebert.zanichelli.it/giuridico/manuali-universitari',
+                      target: '_self',
+                      id: 'manuali-universitari',
+                      group: {
+                        label: 'Primo biennio',
+                        id: 'secondaria-2-grado-biennio',
                       },
-                    ],
-                  },
-                ],
-              },
-              {
-                label: 'Giuridico',
-                href: 'https://test-www.aglebert.zanichelli.it/giuridico',
-                id: 'giuridico',
-                highlight: false,
-                menuItems: [
-                  {
-                    label: 'Contatti',
-                    href: 'https://test-www.aglebert.zanichelli.it/giuridico/contatti-c0b9ed',
-                    id: 'contatti-c0b9ed',
-                    group: {
-                      label: 'In evidenza',
-                      id: 'in-evidenza',
+                      highlight: false,
+                      navbarItems: [],
+                    },
+                    {
+                      label: 'Notiziario zanichelli',
+                      href: 'https://test-www.aglebert.zanichelli.it/giuridico/notiziario-zanichelli-ea8873',
+                      target: '_self',
+                      id: 'notiziario-zanichelli-ea8873',
+                      highlight: false,
+                      navbarItems: [],
                     },
-                    highlight: true,
-                  },
-                  {
-                    label: 'Manuali universitari',
-                    href: 'https://test-www.aglebert.zanichelli.it/giuridico/manuali-universitari',
-                    id: 'manuali-universitari',
-                    group: {
-                      label: 'Primo biennio',
-                      id: 'secondaria-2-grado-biennio',
+                    {
+                      label: 'Sostenibilità ambientale - 7',
+                      href: 'https://test-www.aglebert.zanichelli.it/giuridico/sostenibilita-ambientale-7-9881c1',
+                      target: '_self',
+                      id: 'sostenibilita-ambientale-7-9881c1',
+                      highlight: false,
                     },
-                    highlight: false,
-                    navbarItems: [],
-                  },
-                  {
-                    label: 'Notiziario zanichelli',
-                    href: 'https://test-www.aglebert.zanichelli.it/giuridico/notiziario-zanichelli-ea8873',
-                    id: 'notiziario-zanichelli-ea8873',
-                    highlight: false,
-                    navbarItems: [],
-                  },
-                  {
-                    label: 'Sostenibilità ambientale - 7',
-                    href: 'https://test-www.aglebert.zanichelli.it/giuridico/sostenibilita-ambientale-7-9881c1',
-                    id: 'sostenibilita-ambientale-7-9881c1',
-                    highlight: false,
-                  },
-                ],
-              },
-              {
-                label: 'Saggistica',
-                href: 'https://test-www.aglebert.zanichelli.it/saggistica',
-                id: 'saggistica',
-                highlight: false,
-                menuItems: [],
-              },
-            ])
-          );
+                  ],
+                },
+                {
+                  label: 'Saggistica',
+                  href: 'https://test-www.aglebert.zanichelli.it/saggistica',
+                  target: '_self',
+                  id: 'saggistica',
+                  highlight: false,
+                  menuItems: [],
+                },
+              ]);
+            }, 2000);
+          });
         });
       </script> </header> <main> <section class="buttons font-serif"> <div class="heading-1-bd">Buttons <span class="body-3">(z-button.zanit-button)</span></div> <section> <div class="heading-3-sb">Default color</div> <div class="buttons-container"> <z-button class="zanit-button" icon="plus">button</z-button> <z-button class="zanit-button" variant="secondary" icon="plus">button</z-button> <z-button class="zanit-button" variant="tertiary" icon="plus">button</z-button> </div> </section> <section> <div class="heading-4-sb">Disabled</div> <div class="buttons-container"> <z-button class="zanit-button" icon="plus" disabled="">button</z-button> <z-button class="zanit-button" variant="secondary" icon="plus" disabled="">button</z-button> <z-button class="zanit-button" variant="tertiary" icon="plus" disabled="">button</z-button> </div> </section> <section> <div class="heading-3-sb">Dark <span class="body-3">(z-button.zanit-button-dark)</span></div> <div class="buttons-container"> <z-button class="zanit-button-dark" icon="plus">button</z-button> <z-button class="zanit-button-dark" variant="secondary" icon="plus">button</z-button> <z-button class="zanit-button-dark" variant="tertiary" icon="plus">button</z-button> </div> </section> <section> <div class="heading-4-sb">Disabled</div> <div class="buttons-container"> <z-button class="zanit-button-dark" icon="plus" disabled="">button</z-button> <z-button class="zanit-button-dark" variant="secondary" icon="plus" disabled="">button</z-button> <z-button class="zanit-button-dark" variant="tertiary" icon="plus" disabled="">button</z-button> </div> </section> </section> <section class="links font-serif"> <div class="heading-1-bd">Links</div> <section> <div class="heading-3-sb">Link default <span class="body-3">(.zanit-link)</span></div> <a class="zanit-link body-2 font-sans" href="#">Questo è un link</a> </section> <section> <div class="heading-3-sb">Link inverse <span class="body-3">(.zanit-link-inverse)</span></div> <div class="inverse-link-container"> <a class="zanit-link-inverse body-2 font-sans" href="#">Questo è un link</a> </div> </section> </section> </main> <style>* {
       box-sizing: border-box;

package/dist/components/p-DGmSfTXD.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"p-DGmSfTXD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menubar/menu/menu.tsx","src/components/menubar/mobile-menubar/mobile-menubar.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/mobile-menubar/mobile-menubar.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { MenuItem } from '../../../utils/types';\n\n/**\n * Menu of items that can be grouped.\n * @member {string} controlledBy - The HTML id of the element that controls the menu.\n * @member {MenuItem[]} items - The items to show in the menu.\n * @member {string[]} currentPath - Path of current item.\n * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.\n */\nexport interface MenuProps {\n controlledBy?: string;\n items?: MenuItem[];\n currentPath?: string[];\n onItemKeyDown?: (event: KeyboardEvent) => void;\n}\n\nconst DEFAULT_GROUP_KEY = 'default';\nconst DEFAULT_GROUP = {\n id: DEFAULT_GROUP_KEY,\n label: DEFAULT_GROUP_KEY,\n};\n\n/** Get the items grouped by their group. */\nconst getGroupedItems = (items: MenuItem[]) => {\n const groups = items.reduce<{ group: MenuProps['items'][number]['group']; items: MenuItem[] }[]>((grouped, item) => {\n const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));\n if (!itemGroup) {\n grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });\n } else {\n itemGroup.items.push(item);\n }\n\n return grouped;\n }, []);\n\n // Sort to keep default group at the end\n return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));\n};\n\n/**\n * Floating menu component. It shows a list of items that can be grouped.\n */\nexport const Menu: FunctionalComponent<MenuProps> = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {\n if (!items?.length) {\n return null;\n }\n\n const groups = getGroupedItems(items);\n\n const isActive = (item: MenuItem) => currentPath.includes(controlledBy) && currentPath.includes(item.id);\n\n return (\n <div\n class=\"menu-wrapper\"\n role=\"none\"\n >\n <div\n class=\"menu\"\n aria-labelledby={controlledBy ?? undefined}\n role=\"menu\"\n >\n {groups.map(({ group, items }) => (\n <div class={{ group: true, highlight: items.some((item) => item.highlight) }}>\n {group.id !== DEFAULT_GROUP_KEY ? (\n <div\n class=\"group-name\"\n id={group.id}\n >\n {group.label}\n </div>\n ) : groups.length > 1 ? (\n // empty div to keep the same height as the other groups\n <div class=\"group-name\" />\n ) : null}\n <ul\n class=\"menu-list\"\n role=\"group\"\n aria-labelledby={group.id !== DEFAULT_GROUP_KEY ? group.id : undefined}\n >\n {items.map((item) => (\n <li role=\"none\">\n {item.href && (\n <a\n class={{\n 'menu-item': true,\n 'active': isActive(item),\n }}\n href={item.href}\n role=\"menuitem\"\n tabIndex={-1}\n aria-current={isActive(item) ? 'page' : 'false'}\n onKeyDown={(event) => onItemKeyDown(event)}\n target={item.target}\n >\n {item.label}\n </a>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n );\n};\n",":host {\n position: relative;\n z-index: 2;\n display: block;\n width: 100%;\n max-width: 100%;\n background-color: #fff;\n color: var(--gray900);\n fill: var(--gray900);\n font-family: var(--font-family-sans);\n}\n\n:host,\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\na {\n color: var(--gray900);\n cursor: pointer;\n text-decoration: none;\n}\n\nbutton {\n all: unset;\n cursor: pointer;\n}\n\nnav {\n display: flex;\n width: 100%;\n align-items: center;\n padding: 8px var(--grid-margin);\n}\n\nnav::after {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n box-shadow: var(--shadow-1);\n content: '';\n pointer-events: none;\n}\n\n.burger-button {\n margin-left: auto;\n}\n\n.mobile-menu {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 16px var(--grid-margin) 32px;\n background-color: #fff;\n box-shadow: var(--shadow-2);\n gap: 8px;\n}\n\n.mobile-menu li {\n width: 100%;\n}\n\n.mobile-menu .items-container {\n display: flex;\n min-height: 256px;\n flex-direction: column;\n gap: 8px;\n}\n\n.mobile-menu .items-container z-ghost-loading {\n width: 40%;\n height: 1.2rem;\n}\n\n.mobile-menu .items-container .menubar-item {\n display: block;\n width: 100%;\n padding: 8px 0;\n font-size: 1rem;\n text-align: left;\n}\n\n.mobile-menu .items-container li:not(:last-child) .menubar-item {\n border-bottom: 1px solid #000;\n}\n\n[role='menuitem'].parent {\n display: flex;\n width: fit-content;\n align-items: center;\n padding: 0;\n border: none;\n font-size: 0.875rem;\n gap: 8px;\n}\n",".menu-wrapper {\n width: 100%;\n background-color: #fff;\n}\n\n.menu {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 32px 0;\n}\n\n.menu .group {\n display: flex;\n flex-direction: column;\n}\n\n.menu .group .group-name {\n border-bottom: 1px solid currentcolor;\n margin-bottom: 4px;\n color: var(--red500);\n font-size: 0.875rem;\n font-weight: var(--font-rg);\n}\n\n.menu .group .menu-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.menu .group .menu-list .menu-item {\n border-bottom: 2px solid transparent;\n font-size: 0.875rem;\n font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n font-size: 1rem;\n}\n\n@media (width >= 768px) {\n .menu-wrapper {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n justify-content: center;\n box-shadow: var(--shadow-1);\n }\n\n .menu {\n display: grid;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n padding: 16px var(--grid-margin);\n gap: 0 24px;\n grid-auto-columns: minmax(0, max-content);\n grid-auto-flow: column;\n grid-template-rows: minmax(0, max-content) max-content;\n }\n\n .menu .group {\n display: grid;\n grid-row: 1 / -1;\n grid-template-columns: 1fr;\n grid-template-rows: subgrid;\n }\n\n @supports not (grid-template-rows: subgrid) {\n .menu .group {\n grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n }\n }\n\n .menu .group .group-name {\n border: none;\n margin-bottom: 16px;\n }\n\n .menu .group .menu-list .menu-item {\n font-size: 1rem;\n }\n\n .menu .group.highlight .menu-list .menu-item {\n font-size: 1.5rem;\n }\n\n .menu .group.highlight .menu-list {\n gap: 24px;\n }\n}\n","import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils/types';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n tag: 'zanit-mobile-menubar',\n styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n shadow: true,\n})\nexport class ZanitMobileMenubar {\n @Element() host: HTMLZanitMobileMenubarElement;\n\n /** IDs path of the current item. */\n @Prop() currentPath: string[] = [];\n\n /** Menubar items. */\n @Prop() items: MenubarItem[] = [];\n\n /** Initial search query. */\n @Prop({ mutable: true }) searchQuery: string | undefined = undefined;\n\n /** Whether the menubar is loading the data. */\n @Prop() loading: boolean = false;\n\n /** Last active item ID. */\n @State() lastCurrent: string | undefined = undefined;\n @State() parentItem: MenubarItem | undefined = undefined;\n @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n /** Whether the items to render come from a menubar or a menu. */\n @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n @State() open: boolean;\n\n @Watch('items')\n @Watch('currentPath')\n onItemsChange() {\n this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n this.setupData(this.items);\n }\n\n /**\n * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n */\n private setupData(items: MenubarItem[], parent?: MenubarItem) {\n // If no current item is defined, we show all items\n if (this.lastCurrent === undefined) {\n this.parentItem = undefined;\n this.menuType = 'menubar';\n this.menuItems = items;\n return;\n }\n\n for (const item of items) {\n if (item.id === this.lastCurrent) {\n this.parentItem = parent;\n this.menuType = item.menuItems?.length ? 'menu' : 'menubar';\n this.menuItems = item.menuItems || item.navbarItems;\n return;\n }\n\n if (\n this.currentPath.length > 1 &&\n item.id === this.currentPath[this.currentPath.length - 2] &&\n item.menuItems?.some(({ id }) => id === this.lastCurrent)\n ) {\n this.parentItem = item;\n this.menuType = item.menuItems?.length ? 'menu' : 'menubar';\n this.menuItems = item.menuItems || item.navbarItems;\n return;\n }\n\n if (item.navbarItems?.length) {\n this.setupData(item.navbarItems, item);\n }\n }\n }\n\n private get menuItemsElement() {\n return Array.from(this.host.shadowRoot.querySelectorAll('[role=\"menuitem\"]')) as HTMLElement[];\n }\n\n /** Initialize tabindex on menuitems, setting -1 to all but the first one. */\n private initTabindex() {\n this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n }\n\n private toggleMenu() {\n if (this.open) {\n this.open = false;\n } else {\n this.open = true;\n setTimeout(() => {\n this.initTabindex();\n this.menuItemsElement[0]?.focus();\n }, 200);\n }\n }\n\n /** Handles keyboard navigation on mobile menu. */\n private handleItemKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.menuItemsElement;\n const currentIndex = items.indexOf(event.target as HTMLElement);\n const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n moveFocus(items[currentIndex], prevItem);\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.menuItemsElement;\n const currentIndex = items.indexOf(event.target as HTMLElement);\n const nextItem = items[(currentIndex + 1) % items.length];\n moveFocus(items[currentIndex], nextItem);\n break;\n }\n case 'Home': {\n event.preventDefault();\n event.stopPropagation();\n moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n break;\n }\n case 'End': {\n event.preventDefault();\n event.stopPropagation();\n moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n break;\n }\n }\n }\n\n connectedCallback() {\n this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n this.setupData(this.items);\n }\n\n /** Close the menu when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (containsTarget(this.host, event)) {\n return;\n }\n\n this.open = false;\n }\n\n /** Close the menu when pressing Escape or Tab. */\n @Listen('keydown', { passive: true })\n handleKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n this.open = false;\n break;\n case 'Tab':\n if (containsTarget(this.host, event)) {\n break;\n }\n\n this.open = false;\n break;\n }\n }\n\n /** Close the menu when the focus goes out. */\n @Listen('focusin', { target: 'document', passive: true })\n handleFocusout(event: FocusEvent) {\n if (containsTarget(this.host, event)) {\n return;\n }\n\n this.open = false;\n }\n\n render() {\n return (\n <nav aria-label=\"Zanichelli.it\">\n <z-logo\n imageAlt=\"Logo Zanichelli\"\n link=\"/\"\n height={32}\n width={126}\n ></z-logo>\n <button\n class=\"burger-button\"\n type=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"mobile-menu\"\n aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n onClick={() => this.toggleMenu()}\n >\n <z-icon\n name={this.open ? 'multiply' : 'burger-menu'}\n width=\"1.5rem\"\n height=\"1.5rem\"\n ></z-icon>\n </button>\n {this.open && (\n <ul\n class=\"mobile-menu\"\n role=\"menubar\"\n >\n <li role=\"none\">\n <zanit-search-form\n searchQuery={this.searchQuery}\n onResetSearch={() => (this.searchQuery = undefined)}\n />\n </li>\n\n {!this.loading && this.currentPath && this.currentPath.length > 0 && (\n <li role=\"none\">\n <a\n class=\"parent\"\n href={this.parentItem?.href ?? '/'}\n id={this.parentItem?.id ?? undefined}\n role=\"menuitem\"\n tabIndex={-1}\n onKeyDown={(event) => this.handleItemKeydown(event)}\n target={this.parentItem?.target}\n >\n <z-icon\n name=\"arrow-left\"\n width=\"0.5rem\"\n height=\"0.5rem\"\n ></z-icon>\n <span>\n {/* Show the 'Home' label if the current item is a root child. */}\n {this.parentItem?.label || 'Home'}\n </span>\n </a>\n </li>\n )}\n\n {this.loading && (\n <div\n class=\"items-container\"\n role=\"none\"\n >\n {[...new Array(4)].map(() => (\n <li role=\"none\">\n <div\n class=\"menubar-item\"\n role=\"none\"\n >\n <z-ghost-loading></z-ghost-loading>\n </div>\n </li>\n ))}\n </div>\n )}\n\n {this.menuType === 'menu' ? (\n <Menu\n items={this.menuItems}\n controlledBy={this.parentItem?.id}\n currentPath={this.currentPath}\n onItemKeyDown={(event) => this.handleItemKeydown(event)}\n />\n ) : (\n this.menuItems?.length && (\n <div\n class=\"items-container\"\n role=\"none\"\n >\n {this.menuItems.map((item) => (\n <li role=\"none\">\n <a\n class={{\n 'menu-item': this.menuType === 'menu',\n 'menubar-item': this.menuType === 'menubar',\n }}\n href={item.href}\n id={item.id}\n role=\"menuitem\"\n aria-current={this.lastCurrent === item.id ? 'page' : 'false'}\n tabIndex={-1}\n onKeyDown={(event) => this.handleItemKeydown(event)}\n target={item.target}\n >\n <span data-text={item.label}>{item.label}</span>\n </a>\n </li>\n ))}\n </div>\n )\n )}\n </ul>\n )}\n </nav>\n );\n }\n}\n"],"version":3}