@italia/megamenu 1.0.0-alpha.7

package/AUTHORS

@@ -0,0 +1,3 @@
+# Autori
+
+Vedi file AUTHORS nella root del repository principale.

package/LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# Megamenu Web Component
+
+Questo package contiene il web component `<it-megamenu>`, conforme agli standard del progetto e con stili Bootstrap Italia.
+
+## Installation
+
+```bash
+npm i @italia/megamenu
+```
+
+## Usage
+
+```
+<it-megamenu label="Apri il menu">
+  <it-dropdown-item href="#">Azione 1</it-dropdown-item>
+  <it-dropdown-item href="#">Azione 2</it-dropdown-item>
+  <it-dropdown-item href="#">Azione 3</it-dropdown-item>
+</it-dropdown>
+```
+
+## Sviluppo
+
+- Stili: solo SCSS, no CSS inline
+- Test: web-test-runner
+- Storie: Storybook
+
+## License
+
+Vedi LICENSE.

package/custom-elements.json

@@ -0,0 +1,440 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItMegamenu",
+          "declaration": {
+            "name": "ItMegamenu",
+            "module": "./it-megamenu.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-megamenu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItMegamenu",
+          "members": [
+            {
+              "kind": "field",
+              "name": "FOCUSABLE_SELECTORS",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "'a, button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'"
+            },
+            {
+              "kind": "field",
+              "name": "_hasDescription",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasFooter",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "attribute": "full-width",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itRole",
+              "type": {
+                "text": "string"
+              },
+              "default": "'menu'",
+              "attribute": "itRole"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "number"
+              },
+              "default": "2",
+              "attribute": "columns",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "footerAlign",
+              "type": {
+                "text": "FooterAlign"
+              },
+              "default": "'left'",
+              "attribute": "footer-align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "footerPosition",
+              "type": {
+                "text": "FooterPosition"
+              },
+              "default": "'bottom'",
+              "attribute": "footer-position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_descriptionItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_headerItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_footerItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotDescriptionChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_setChildrenProperties"
+            },
+            {
+              "kind": "method",
+              "name": "_onSlotHeaderChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_onSlotFooterChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getMegamenuFocusableItems",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_onTabKeyDown"
+            },
+            {
+              "kind": "field",
+              "name": "_onClickItems",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "fullWidth"
+            },
+            {
+              "name": "itRole",
+              "type": {
+                "text": "string"
+              },
+              "default": "'menu'",
+              "fieldName": "itRole"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "active"
+            },
+            {
+              "name": "columns",
+              "type": {
+                "text": "number"
+              },
+              "default": "2",
+              "fieldName": "columns"
+            },
+            {
+              "name": "footer-align",
+              "type": {
+                "text": "FooterAlign"
+              },
+              "default": "'left'",
+              "fieldName": "footerAlign"
+            },
+            {
+              "name": "footer-position",
+              "type": {
+                "text": "FooterPosition"
+              },
+              "default": "'bottom'",
+              "fieldName": "footerPosition"
+            }
+          ],
+          "superclass": {
+            "name": "ItDropdownBase",
+            "package": "@italia/dropdown/it-dropdown-base.js"
+          },
+          "tagName": "it-megamenu",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItMegamenu",
+          "declaration": {
+            "name": "ItMegamenu",
+            "module": "src/it-megamenu.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-megamenu",
+          "declaration": {
+            "name": "ItMegamenu",
+            "module": "src/it-megamenu.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FOOTER_ALIGN",
+          "type": {
+            "text": "array"
+          },
+          "default": "['left', 'right']"
+        },
+        {
+          "kind": "variable",
+          "name": "FOOTER_POSITION",
+          "type": {
+            "text": "array"
+          },
+          "default": "['bottom', 'right']"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FOOTER_ALIGN",
+          "declaration": {
+            "name": "FOOTER_ALIGN",
+            "module": "src/types.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FOOTER_POSITION",
+          "declaration": {
+            "name": "FOOTER_POSITION",
+            "module": "src/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-megamenu.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Megamenu', component: 'it-megamenu', parameters: { wrapperClasses: 'w100-layout megamenu-story-layout' }, tags: ['a11y-ok', 'web-component', 'alpha'], args: { label: 'Megamenu', disabled: false, active: false, columns: 2, 'it-aria-label': undefined, 'footer-align': 'right', 'footer-position': undefined, }, argTypes: { label: { control: 'text', description: 'Testo del pulsante che apre il dropdown del megamenu', }, disabled: { control: 'boolean', description: 'Disabilita il dropdown', table: { defaultValue: { summary: 'false' } }, }, active: { control: 'boolean', description: 'Imposta lo stato attivo del pulsante', table: { defaultValue: { summary: 'false' } }, }, columns: { control: 'number', description: 'Numero di colonne su cui verranno suddivisi i link del menu', table: { defaultValue: { summary: 2 } }, }, 'it-aria-label': { control: 'text', description: \"Valore per l'attributo `aria-label` del pulsante (obbligatorio per accessibilità se `label` è vuoto)\", type: 'string', }, 'footer-align': { control: 'select', description: 'Allineamento del contenuto del footer', options: FOOTER_ALIGN, type: 'string', table: { defaultValue: { summary: 'left' } }, }, 'footer-position': { control: 'select', description: 'Posizione del footer all’interno del megamenu', options: FOOTER_POSITION, type: 'string', table: { defaultValue: { summary: 'bottom' } }, }, }, } satisfies Meta<MegamenuProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "Base",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: (args) => renderNav( args, html` <!-- megamenu 1 --> <li class=\"nav-item\">${renderMegamenuCompleto(args)}</li> <!-- megamenu 2 --> <li class=\"nav-item\"> ${renderMegamenu( { ...args, active: false, label: 'Megamenu 2', columns: 3 }, html`<!-- DROPDOWN LINKS ITEMS --> ${renderLinks(6, 7)} <!-- SLOT FOOTER --> <div slot=\"footer\"> <a class=\"it-footer-link\" href=\"#\"> <span>Esplora tutti i contenuti del megamenu</span> <it-icon name=\"it-arrow-right\" size=\"sm\" color=\"primary\" class=\"ms-2\"></it-icon> </a> </div>`, )} </li>`, ), tags: ['!autodocs', '!dev'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "MegamenuCompleto",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Megamenu completo', render: (args) => renderNav(args, html`<li class=\"nav-item\">${renderMegamenuCompleto(args)}</li> `), }"
+        },
+        {
+          "kind": "variable",
+          "name": "MegamenuBase",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Megamenu base', args: { columns: 3 }, render: (args) => renderNav( args, html` <li class=\"nav-item\"> ${renderMegamenu( args, html` <!-- DROPDOWN LINKS ITEMS --> ${renderLinks(9)}`, )} </li> `, ), }"
+        },
+        {
+          "kind": "variable",
+          "name": "MegamenuEsploraSezione",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Con link “Esplora la sezione”', args: { columns: 3 }, render: (args) => renderNav( args, html` <li class=\"nav-item\"> ${renderMegamenu( args, html` <!-- DROPDOWN LINKS ITEMS --> <!-- SLOT HEADER --> <div slot=\"header\"> <a class=\"it-heading-link\" href=\"#\"> <it-icon name=\"it-arrow-right-triangle\" size=\"sm\" color=\"primary\" class=\"me-2 mb-1\"></it-icon> <span>Esplora la sezione ${args.label}</span> </a> </div> ${renderLinks(9)}`, )} </li> `, ), }"
+        },
+        {
+          "kind": "variable",
+          "name": "MegamenuEsploraTutti",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Con link “Esplora tutti”', args: { columns: 3, 'footer-align': 'right' }, render: (args) => renderNav( args, html` <li class=\"nav-item\"> ${renderMegamenu( args, html` <!-- DROPDOWN LINKS ITEMS --> ${renderLinks(9)} <!-- SLOT FOOTER --> <div slot=\"footer\"> <a class=\"it-footer-link\" href=\"#\"> <span>Esplora tutti i contenuti del megamenu</span> <it-icon name=\"it-arrow-right\" size=\"sm\" color=\"primary\" class=\"ms-2\"></it-icon> </a> </div> `, )} </li> `, ), }"
+        },
+        {
+          "kind": "variable",
+          "name": "MegamenuCTABottom",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Con call to action in basso', args: { columns: 3, 'footer-position': 'bottom', 'footer-align': '' }, render: (args) => renderNav( args, html` <li class=\"nav-item\"> ${renderMegamenu( args, html` <!-- DROPDOWN LINKS ITEMS --> ${renderLinks(9)} <!-- SLOT FOOTER --> <div slot=\"footer\"> <div class=\"d-flex flex-column flex-lg-row\"> <a class=\"it-footer-link flex-grow-1\" href=\"#\"> <it-icon name=\"it-bookmark\" size=\"sm\" color=\"primary\" class=\"me-2\"></it-icon> <span>Call to action 1</span> </a> <a class=\"it-footer-link flex-grow-1\" href=\"#\"> <it-icon name=\"it-bookmark\" size=\"sm\" color=\"primary\" class=\"me-2\"></it-icon> <span>Call to action 2</span> </a> </div> </div> `, )} </li> `, ), }"
+        },
+        {
+          "kind": "variable",
+          "name": "MegamenuCTARight",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...meta, name: 'Con call to action a destra', args: { columns: 3, 'footer-position': 'right', 'footer-align': '' }, render: (args) => renderNav( args, html` <li class=\"nav-item\"> ${renderMegamenu( args, html` <!-- DROPDOWN LINKS ITEMS --> ${renderLinks(9)} <!-- SLOT FOOTER --> <div slot=\"footer\"> <div class=\"d-flex flex-column justify-content-around\"> <a class=\"it-footer-link\" href=\"#\"> <it-icon name=\"it-bookmark\" size=\"sm\" color=\"primary\" class=\"me-2\"></it-icon> <span>Call to action 1</span> </a> <a class=\"it-footer-link\" href=\"#\"> <it-icon name=\"it-bookmark\" size=\"sm\" color=\"primary\" class=\"me-2\"></it-icon> <span>Call to action 2</span> </a> </div> </div> `, )} </li> `, ), }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Base",
+          "declaration": {
+            "name": "Base",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MegamenuCompleto",
+          "declaration": {
+            "name": "MegamenuCompleto",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MegamenuBase",
+          "declaration": {
+            "name": "MegamenuBase",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MegamenuEsploraSezione",
+          "declaration": {
+            "name": "MegamenuEsploraSezione",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MegamenuEsploraTutti",
+          "declaration": {
+            "name": "MegamenuEsploraTutti",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MegamenuCTABottom",
+          "declaration": {
+            "name": "MegamenuCTABottom",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MegamenuCTARight",
+          "declaration": {
+            "name": "MegamenuCTARight",
+            "module": "stories/it-megamenu.stories.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { ItMegamenu } from './it-megamenu.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,6 @@
+export { ItMegamenu } from './it-megamenu.js';
+import 'lit/directive.js';
+import 'lit';
+import 'lit/decorators.js';
+import 'lit/directives/if-defined.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/src/it-megamenu.d.ts

@@ -0,0 +1,32 @@
+import { ItDropdownBase } from '@italia/dropdown/it-dropdown-base.js';
+import { FooterAlign, FooterPosition } from './types.js';
+export declare class ItMegamenu extends ItDropdownBase {
+    static styles: import("lit").CSSResultGroup[];
+    private static readonly FOCUSABLE_SELECTORS;
+    private _hasDescription;
+    private _hasHeader;
+    private _hasFooter;
+    fullWidth: boolean;
+    itRole: string;
+    active: boolean;
+    columns: number;
+    footerAlign: FooterAlign;
+    footerPosition: FooterPosition;
+    private _descriptionItems;
+    private _headerItems;
+    private _footerItems;
+    private _handleSlotDescriptionChange;
+    _setChildrenProperties(): void;
+    private _onSlotHeaderChange;
+    private _onSlotFooterChange;
+    private _getMegamenuFocusableItems;
+    _onTabKeyDown: (event: KeyboardEvent, items: Element[], active: HTMLElement) => void;
+    private _onClickItems;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'it-megamenu': ItMegamenu;
+    }
+}
+//# sourceMappingURL=it-megamenu.d.ts.map

package/dist/src/it-megamenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"it-megamenu.d.ts","sourceRoot":"","sources":["../../src/it-megamenu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAItE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIzD,qBACa,UAAW,SAAQ,cAAc;IAC5C,OAAgB,MAAM,iCAAmC;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAyE;IAE3G,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,UAAU,CAAS;IAIiC,SAAS,UAAQ;IAE1D,MAAM,EAAE,MAAM,CAAU;IAER,MAAM,UAAS;IAEM,OAAO,EAAE,MAAM,CAAK;IAEf,WAAW,EAAE,WAAW,CAAU;IAE/B,cAAc,EAAE,cAAc,CAAY;IAEpD,OAAO,CAAC,iBAAiB,CAAsB;IAEpD,OAAO,CAAC,YAAY,CAAsB;IAE1C,OAAO,CAAC,YAAY,CAAsB;IAEpG,OAAO,CAAC,4BAA4B;IAK3B,sBAAsB;IAU/B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,0BAA0B;IA2BzB,aAAa,GAAI,OAAO,aAAa,EAAE,OAAO,OAAO,EAAE,EAAE,QAAQ,WAAW,UAyBnF;IAEF,OAAO,CAAC,aAAa,CAYnB;IAEO,MAAM;CA8HhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}