npm - @zanichelli/albe-web-components - Versions diffs - 16.3.1-rc1 → 16.3.2 - Mend

@zanichelli/albe-web-components 16.3.1-rc1 → 16.3.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 (605) hide show

package/dist/collection/components/table/cells/z-th/styles.css CHANGED Viewed

@@ -1,18 +1,14 @@
 :host {
   position: relative;
   display: flex;
-  max-width: 100%;
+  min-width: 128px;
+  box-sizing: border-box;
   align-items: center;
   padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
   background-color: var(--color-surface01);
   gap: calc(var(--space-unit) * 2) var(--space-unit);
 }
-:host,
-* {
-  box-sizing: border-box;
-}
 :host([sticky]) {
   position: sticky;
   z-index: 1;
@@ -21,23 +17,21 @@
   box-shadow: 8px 0 16px -8px var(--shadow-color-base);
 }
-:host([menu-open]) {
-  z-index: 2;
-}
-.cell--content {
-  display: flex;
-  width: 100%;
+/* Leave the space for the menu button */
+:host([show-menu])::after {
+  display: inline-block;
   height: 100%;
-  align-items: center;
-}
-:host([show-menu]) .cell--content {
-  column-gap: var(--space-unit);
+  margin-right: calc(var(--space-unit) * 4);
+  background: transparent;
+  content: "";
+  user-select: none;
 }
 .cell--menu-container {
-  margin-left: auto;
+  position: absolute;
+  z-index: 1;
+  top: var(--space-unit);
+  right: var(--space-unit);
 }
 :host(:not([show-menu])) .cell--menu-container {
@@ -47,7 +41,6 @@
 :host(:is([show-menu], [menu-open])) .cell--menu-container,
 :host([show-menu]) .cell--menu-container:focus-within {
-  z-index: 1;
   opacity: 1;
   pointer-events: all;
 }
@@ -63,7 +56,6 @@
   }
   :host([show-menu="hover"]:hover) .cell--menu-container {
-    z-index: 1;
     opacity: 1;
     pointer-events: all;
   }
@@ -71,55 +63,30 @@
 :host {
-  z-index: 1;
-  padding: 0;
   background-color: var(--color-surface02);
   font-weight: var(--font-sb);
 }
-.cell--content {
-  padding: calc(var(--space-unit) * 2);
-}
+/* :host([sticky]) {
+  background-color: var(--color-surface02);
+} */
-:host([show-sorting]) .cell--content {
-  column-gap: var(--space-unit);
+:host([sortable]) {
+  cursor: pointer;
 }
 .z-th--sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0;
   border: none;
+  margin-top: auto;
   background-color: transparent;
   cursor: pointer;
-  outline: none;
 }
-@media (min-width: 768px) and (hover: hover) {
-  :host([show-sorting="hover"]) .z-th--sort-button {
-    opacity: 0;
-    pointer-events: none;
-  }
-  :host([show-sorting="hover"]:hover) .z-th--sort-button,
-  :host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,
-  :host([show-sorting="always"]) .z-th--sort-button {
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-:host([show-sorting="hover"]:hover) .z-th--sort-button::after,
-:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,
-:host([show-sorting="always"]) .z-th--sort-button::after {
-  position: absolute;
-  top: 6px;
-  left: 6px;
-  width: calc(100% - 12px);
-  height: calc(100% - 10px);
-  background-color: transparent;
-  content: "";
-}
-.z-th--sort-button:focus:focus-visible::after,
-.z-th--sort-button--active::after {
+.z-th--sort-button:focus {
   box-shadow: var(--shadow-focus-primary);
+  outline: none;
 }

package/dist/collection/components/table/z-table/index.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '6fa1464a9d96267c0a1a45078a7b19e15930b2be', expandable: this.expandable }, h("div", { key: '9436f4627cab2b6c474bbfc803b64514cd152fb3', class: "table", role: "table" }, h("slot", { key: 'b9cf927ccd915cf55f4bb2e5a8943ceff347f9f7' }))));
+        return (h(Host, { key: '2d8e50a74ff7ccf3c6dc4f5324a512177ad52f45', expandable: this.expandable }, h("div", { key: '5e1d9d44dc90ac06683bf5306f7eecadffe807fe', class: "table", role: "table" }, h("slot", { key: '12a615e336a4ad50390a2ab0b12b2d20b3503f06' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-table/index.stories.js CHANGED Viewed

@@ -236,17 +236,6 @@ export const CellsWithContextualMenu = {
  * Clicking the button will fire the `sort` event with the `sortDirection` as detail.
  */
 export const SortAction = {
-    argTypes: {
-        showSorting: {
-            options: Object.values(VisibilityCondition),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        showSorting: VisibilityCondition.HOVER,
-    },
     render: (args) => html `<z-table
       class="z-table-demo"
       .bordered=${args.bordered}
@@ -256,20 +245,15 @@ export const SortAction = {
     >
       <z-thead>
         <z-tr>
+          <z-th>Colonna 1</z-th>
           <z-th
             .sortDirection=${SortDirection.ASC}
             .showMenu=${VisibilityCondition.HOVER}
-            .showSorting=${args.showSorting}
           >
-            Colonna 1 con menu e sorting
+            Colonna 2 con menu e sorting
             <div slot="contextual-menu">Contenuto del popover</div>
           </z-th>
-          <z-th>Colonna 2</z-th>
-          <z-th
-            .sortDirection=${SortDirection.DESC}
-            .showSorting=${args.showSorting}
-            >Colonna 3 con sorting</z-th
-          >
+          <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>
         </z-tr>
       </z-thead>
       <z-tbody>${repeat([...new Array(3)], () => html `<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>

package/dist/collection/components/table/z-table/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/*\n ## Accessibility\n \n The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n /\nconst StoryMeta = {\n title: \"ZTable\",\n component: \"z-table\",\n args: {\n \"bordered\": true,\n \"--z-table--cells-padding\": \"16px\",\n },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n /\nexport const ExpandableRows = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(5)}\n </z-tr>\n <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked without expanding the row')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n ${cellsTemplate(5)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr>${cellsTemplate(8)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu=\"always\">\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(6)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n /\nexport const Sticky = {\n args: {\n stickyHeader: true,\n stickyFooter: true,\n stickFirstColumn: true,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n \"height\": \"400px\",\n })}\n >\n <z-thead .sticky=${args.stickyHeader}>\n <z-tr>\n <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n </z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(4)}\n </z-tr>\n ${repeat(\n [...new Array(5)],\n () =>\n html`<z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n </z-tr>`\n )}\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(6)}\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot .sticky=${args.stickyFooter}>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n /\nexport const CellsWithContextualMenu = {\n argTypes: {\n showMenu: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"hidden\",\n },\n },\n popoverPosition: {\n options: Object.values(PopoverPosition),\n control: {\n type: \"select\",\n },\n },\n options: [null, ...Object.values(VisibilityCondition)],\n },\n },\n args: {\n showMenu: VisibilityCondition.HOVER,\n popoverPosition: PopoverPosition.AUTO,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .showMenu=${args.showMenu}\n .popoverPosition=${args.popoverPosition}\n >\n Heading con menu\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>\n ${repeat(\n [...new Array(3)],\n () =>\n html`<z-tr>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n <z-td>Contenuto cella</z-td>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n </z-tr>`\n )}\n </z-tbody>\n </z-table>`,\n};\n\n/\n Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n argTypes: {\n showSorting: {\n options: Object.values(VisibilityCondition),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n showSorting: VisibilityCondition.HOVER,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th\n .sortDirection=${SortDirection.ASC}\n .showMenu=${VisibilityCondition.HOVER}\n .showSorting=${args.showSorting}\n >\n Colonna 1 con menu e sorting\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n <z-th\n .sortDirection=${SortDirection.DESC}\n .showSorting=${args.showSorting}\n >Colonna 3 con sorting</z-th\n >\n </z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n </z-table>`,\n};\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/table/z-table/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {repeat} from \"lit/directives/repeat.js\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZTable} from \".\";\nimport {PopoverPosition, SortDirection, VisibilityCondition} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZTableStoriesArgs = ZTable & CSSVarsArguments<\"z-table--cells-padding\">;\n\n/*\n ## Accessibility\n \n The `ZTable` and its related components comes with a set of roles and ARIA attributes to help screen readers to understand the table structure and its content.\n * The roles are mainly used to identify the table parts, since they are not the native HTML table elements.\n * The ARIA attributes used are the following:\n * - [`aria-sort`](https://www.w3.org/TR/wai-aria-1.1/#aria-sort) to identify the sorting direction of a column when sorting is enabled\n * - [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) to identify if a row is expanded or not when expandable rows are enabled. The attribute is set on the button that expands the row, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n * - [`aria-controls`](https://www.w3.org/TR/wai-aria-1.1/#aria-controls) is used on the expandable row button to identify the content that is controlled by the button itself, as explained in the [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls). Maybe the `aria-owns` attribute were more appropriate, but it is not supported on MacOS and iOS with VoiceOver, so we used `aria-controls` instead.\n * - [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) is used on the expandable row button to provide a label for the button, since the button doesn't have any text content.\n /\nconst StoryMeta = {\n title: \"ZTable\",\n component: \"z-table\",\n args: {\n \"bordered\": true,\n \"--z-table--cells-padding\": \"16px\",\n },\n} satisfies Meta<ZTableStoriesArgs>;\n\nexport default StoryMeta;\n\nconst cellsTemplate = (count = 1): TemplateResult =>\n html`${repeat([...new Array(count)], () => html`<z-td>Contenuto cella</z-td>`)}`;\n\nexport const Default = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], () => html`<z-th>Titolo colonna</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(5)], () => html`<z-tr>${cellsTemplate(8)}</z-tr>`)}</z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Just set `expandable` prop on the `z-tr` element to make it expandable, then put an additional `z-td` as extended content.\n * If you put a clickable item as a child cell of a z-tr with `expandable` set to `true`, you need to set a \"prevent-expand\" class on that item, in order to prevent unwanted row expansions.\n /\nexport const ExpandableRows = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>${repeat([...new Array(8)], (_, index) => html`<z-th>Colonna ${index + 1}</z-th>`)}</z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(5)}\n </z-tr>\n <z-tr>${repeat([...new Array(8)], () => html`<z-td>Contenuto cella</z-td>`)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked without expanding the row')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n ${cellsTemplate(5)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr>${cellsTemplate(8)}</z-tr>\n <z-tr expandable>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu=\"always\">\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(6)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n To make a column sticky, you need to set the `sticky` prop on the `z-th` and/or `z-td` elements of the same column.\n * For the header or footer, just set the `sticky` prop on the `z-thead` or `z-tfoot` element.\n /\nexport const Sticky = {\n args: {\n stickyHeader: true,\n stickyFooter: true,\n stickFirstColumn: true,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n \"height\": \"400px\",\n })}\n >\n <z-thead .sticky=${args.stickyHeader}>\n <z-tr>\n <z-th .sticky=${args.stickFirstColumn}>Colonna 1</z-th>\n ${repeat([...new Array(7)], (_, index) => html`<z-th>Colonna ${index + 2}</z-th>`)}\n </z-tr>\n </z-thead>\n <z-tbody>\n <z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td>Contenuto cella</z-td>\n <z-td show-menu>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div></z-td\n >\n ${cellsTemplate(4)}\n </z-tr>\n ${repeat(\n [...new Array(5)],\n () =>\n html`<z-tr>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n </z-tr>`\n )}\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(6)}\n <z-td>\n <span>Contenuto cella</span>\n <z-button\n class=\"prevent-expand\"\n onclick=\"alert('button clicked')\"\n icon=\"plus\"\n size=\"x-small\"\n ></z-button\n ></z-td>\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n <z-tr expandable>\n <z-td .sticky=${args.stickFirstColumn}>Contenuto cella 1</z-td>\n ${cellsTemplate(7)}\n <z-td>Contenuto espanso</z-td>\n </z-tr>\n </z-tbody>\n <z-tfoot .sticky=${args.stickyFooter}>\n <z-tr>\n <z-td colspan=\"8\">Table footer</z-td>\n </z-tr>\n </z-tfoot>\n </z-table>`,\n};\n\n/\n Use the `showMenu` prop on `z-td` or `z-th`, setting a value of the enum `VisibilityCondition` (`HOVER` or `ALWAYS`), to show a contextual menu button on the cell. The content of the menu must be placed using the slot `contextual-menu`.\n * Use `popoverPosition` prop on `z-th` to set the position of contextual menu, default is `auto`.\n /\nexport const CellsWithContextualMenu = {\n argTypes: {\n showMenu: {\n control: {\n type: \"inline-radio\",\n labels: {\n null: \"hidden\",\n },\n },\n popoverPosition: {\n options: Object.values(PopoverPosition),\n control: {\n type: \"select\",\n },\n },\n options: [null, ...Object.values(VisibilityCondition)],\n },\n },\n args: {\n showMenu: VisibilityCondition.HOVER,\n popoverPosition: PopoverPosition.AUTO,\n },\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .showMenu=${args.showMenu}\n .popoverPosition=${args.popoverPosition}\n >\n Heading con menu\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th>Colonna 2</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>\n ${repeat(\n [...new Array(3)],\n () =>\n html`<z-tr>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n <z-td>Contenuto cella</z-td>\n <z-td .showMenu=${args.showMenu}>\n <span>Contenuto cella con menu</span>\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-td>\n </z-tr>`\n )}\n </z-tbody>\n </z-table>`,\n};\n\n/\n Set the `sortDirection` prop to `SortDirection.ASC` or `SortDirection.DESC` to enable sorting and show the sort button.\n * Clicking the button will fire the `sort` event with the `sortDirection` as detail.\n */\nexport const SortAction = {\n render: (args) =>\n html`<z-table\n class=\"z-table-demo\"\n .bordered=${args.bordered}\n style=${styleMap({\n \"--z-table--cells-padding\": args[\"--z-table--cells-padding\"],\n })}\n >\n <z-thead>\n <z-tr>\n <z-th>Colonna 1</z-th>\n <z-th\n .sortDirection=${SortDirection.ASC}\n .showMenu=${VisibilityCondition.HOVER}\n >\n Colonna 2 con menu e sorting\n <div slot=\"contextual-menu\">Contenuto del popover</div>\n </z-th>\n <z-th .sortDirection=${SortDirection.DESC}>Colonna 3 con sorting</z-th>\n </z-tr>\n </z-thead>\n <z-tbody>${repeat([...new Array(3)], () => html`<z-tr>${cellsTemplate(3)}</z-tr>`)}</z-tbody>\n </z-table>`,\n};\n"]}

package/dist/collection/components/table/z-table/styles.css CHANGED Viewed

@@ -16,3 +16,7 @@
 :host([bordered]) {
   --z-table--cell-left-border: 1px solid var(--color-surface03);
 }
+.table {
+  min-width: max-content;
+}

package/dist/collection/components/table/z-tbody/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: '8520398deeb7fec7d7aee91d87e39775f93355c6', role: "rowgroup" }, h("slot", { key: 'a73aff9d76af07fa46c373e362ac102349c844ed' })));
+        return (h(Host, { key: 'f3e13d724ae83c0117eafa2bd141a1b9319f0331', role: "rowgroup" }, h("slot", { key: 'f84d2b79230cb6b8305c0b01f4a48f8811634421' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tfoot/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'ad89fa705c3e70275166d5146ab915a286feedfe', role: "rowgroup" }, h("slot", { key: 'cb66c0a5c01972c54100efade79a91241baadc9a' })));
+        return (h(Host, { key: 'b872f68fd9e643528d02adb7bd76f8377a59fcdc', role: "rowgroup" }, h("slot", { key: '6ebdc491ee2459d415a53fb96e5f27405704a99f' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-thead/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class ZThead {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'ba72ed16202c8dbcc0176254347cdbdbc9d11418', role: "rowgroup" }, h("slot", { key: '4c2f8a0ee4fbd2718796cc254dd3d689403782cf' })));
+        return (h(Host, { key: '44bbf57a110328328c65171e6463a5128d0be2e7', role: "rowgroup" }, h("slot", { key: '1953f6a0c9d96f3cbf66ed0e856391d19e985e20' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/index.js CHANGED Viewed

@@ -43,7 +43,7 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: 'f4ec553131b472795ba58de3d2dfecd217774879', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: '746b4cef2f63c5b0c0c38a2b83606d81c0dd17cf', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '96c12982390416514e22a25ebb8f889ee4795bea', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'c0570b8d6d1fd6e7759a6f9d170dc3c5f932dc88', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'aa2d374dbd6a2dda118df9884c0a03c3234a2d01', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '1048c6109f085ef7d6a2c80ee1f821378f1419eb', role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { key: 'b4333edd3915db24134ec862e61e42af75544544', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'f5d0233257d0ffd2d1221b850f9d33565b882bfe', "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '0c0e51bac7a95bab954450447b2bce3dfa0079b6', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'f7af8227af6ec842ead9b12ad13a6d1df448c9a6', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/z-tr/styles.css CHANGED Viewed

@@ -3,6 +3,7 @@
   --columns: 1;
   display: grid;
+  min-width: max-content;
   box-sizing: border-box;
   grid-auto-flow: column;
   grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));

package/dist/collection/components/z-accordion/index.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class ZAccordion {
         this.toggled.emit(this.open);
     }
     render() {
-        return (h("details", { key: '6cbbf8aca4848416bbc95fb8114fe2ebeb857a35', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '983d8f605375d5ddce8a4a51b5b63fa8e405a483', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '595a91626c910b3dd13360bb5ad9fb09a147facc', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '30f72bedfb26e6150853c06e0e7a3e9a21afcd11', class: "z-accordion-label" }, this.label), h("span", { key: 'bfbf51e33e0114ada33cad9ea49f878cb5f39d41', class: "z-accordion-tags" }, h("slot", { key: '027530202366a508b0b434b7cf02b7e4fe6763dd', name: "tag" })), h("z-icon", { key: '8f02c3ea045b217b0b3edc08eb0c768bf98db040', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '1b03e279c9a10fcbfd753c6d364e21e78b663fdd', class: "z-accordion-content", part: "content" }, h("slot", { key: '278b1775544aad10d9a8eb4df69b370b6542291f' })))));
+        return (h("details", { key: '56a50ae163d1cb527d90732d637d0a657641cff7', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '22095c950d00c43d6ddfc3eaea13c804e24fbb37', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '40f7b6d5dec14284aba76ca8884740b81f4d43a0', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '781a5720488ab4972e685d3ac4efafaf25cb1a20', class: "z-accordion-label" }, this.label), h("span", { key: '83fbad7e915391654344591231db512b13ccd1bb', class: "z-accordion-tags" }, h("slot", { key: 'd02d6e89bf46e606fdf229906036fbf3ebdbff05', name: "tag" })), h("z-icon", { key: 'd239c54b1187939517baf24809cab9c5168afa2a', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '750de9f238fad34d4d380f585cc948067f229f8a', class: "z-accordion-content", part: "content" }, h("slot", { key: '41568aa9d4e561b1f7f43fbf2bf9cb7ab0c1a713' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-anchor-navigation/index.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '7f0773194039735c315a25768b3a6c635a9fdb5b', collapsed: this.collapsed }, h("z-button", { key: '46b631d8377d3b5c6987ee63c45ddaec9d23871b', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '7c71bac57142ad2591e42da19fee7ce72fada9be', ref: (el) => (this.nav = el) }, h("slot", { key: 'ce6251454b66d006a2c1fd4baf5c21fa3cffdb19' }))));
+        return (h(Host, { key: 'b4e85ef373611b9543bab61b0045437916d9cd09', collapsed: this.collapsed }, h("z-button", { key: '97dfa2f7f35db72615f5a263dd13d4c3db94c0b4', class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { key: '8e51117f3e341260b9a1794ff2432811dfba0683', ref: (el) => (this.nav = el) }, h("slot", { key: '2d1c7cece920f74947f5e07565498b162680d87b' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-app-header/index.js CHANGED Viewed

@@ -62,7 +62,7 @@ export class ZAppHeader {
     openDrawer() {
         this.drawerOpen = true;
         this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
-        setTimeout(() => this.closeMenuButton.focus(), 100);
+        setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */
     }
     closeDrawer() {
         this.drawerOpen = false;
@@ -109,17 +109,58 @@ export class ZAppHeader {
         current.htmlTabindex = -1;
         receiver.setFocus();
     }
-    /** Close each menu except the one receiving focus/click */
-    manageMenus(ev) {
-        this.menuElements.forEach((menu) => {
-            if (!menu.open || !menu.floating || menu.verticalContext || containsElement(menu, ev.target)) {
-                return;
+    onOffcanvasKeydown(ev) {
+        var _a, _b;
+        if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {
+            return;
+        }
+        const closestMenu = ev.target.closest("z-menu");
+        if (closestMenu) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            // restore tabindex to the zmenu containing the focused element
+            closestMenu.htmlTabindex = 0;
+            this.closeDrawerButton.focus();
+        }
+        else if (ev.target === this.closeDrawerButton) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            if (ev.shiftKey) {
+                // give focus to the last open menu if any or the last menu otherwhise
+                ((_a = this.menuElements.filter((menu) => menu.open).pop()) !== null && _a !== void 0 ? _a : this.menuElements[this.menuLength - 1]).setFocus();
             }
-            menu.open = false;
-        });
+            else {
+                // give focus to the first open menu if any or the first menu otherwhise
+                ((_b = this.menuElements.find((menu) => menu.open)) !== null && _b !== void 0 ? _b : this.menuElements[0]).setFocus();
+            }
+        }
     }
-    handleMenubarKeydown(ev) {
+    /** Close each menu except the one receiving focus/click, if any */
+    manageMenus(ev) {
+        const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target));
+        if (targetMenu) {
+            this.menuElements.forEach((menu) => {
+                if (menu === targetMenu) {
+                    return;
+                }
+                menu.htmlTabindex = -1;
+                if (!this.drawerOpen) {
+                    menu.open = false;
+                }
+            });
+        }
+        else if (!this.drawerOpen) {
+            this.menuElements.forEach((menu) => {
+                menu.open = false;
+            });
+        }
+    }
+    handleKeydown(ev) {
         var _a, _b;
+        if (ev.key === KeyboardCode.ESC && this.drawerOpen) {
+            this.closeDrawer();
+            return;
+        }
         if (!this.menuElements.some((elem) => elem.contains(ev.target))) {
             return;
         }
@@ -160,10 +201,10 @@ export class ZAppHeader {
     }
     renderMenuButton() {
         return (this.menuLength > 0 &&
-            (this.enableOffcanvas || this._stuck || this.isMobile) && (h("button", { ref: (el) => (this.burgerButton = el), "aria-label": "Apri menu", "aria-haspopup": "menu", "aria-expanded": `${this.drawerOpen}`, "aria-controls": "offcanvas-menu", class: "drawer-trigger", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))));
+            (this.enableOffcanvas || this._stuck || this.isMobile) && (h("button", { ref: (el) => (this.burgerButton = el), class: "drawer-trigger", "aria-label": "Apri menu", "aria-haspopup": "menu", "aria-expanded": `${this.drawerOpen}`, "aria-controls": "offcanvas-menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))));
     }
     renderOffcanvas() {
-        return (h("z-offcanvas", { id: "offcanvas-menu", variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("div", { slot: "canvasContent" }, h("button", { ref: (el) => (this.closeMenuButton = el), class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))));
+        return (h("z-offcanvas", { id: "offcanvas-menu", variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail), onKeyDown: this.onOffcanvasKeydown }, h("div", { slot: "canvasContent" }, h("button", { ref: (el) => (this.closeDrawerButton = el), class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))));
     }
     renderStuck() {
         return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("div", { class: "stucked-title" }, h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
@@ -190,6 +231,7 @@ export class ZAppHeader {
         this.openDrawer = this.openDrawer.bind(this);
         this.closeDrawer = this.closeDrawer.bind(this);
         this.collectMenuElements = this.collectMenuElements.bind(this);
+        this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);
     }
     componentWillLoad() {
         this.collectMenuElements();
@@ -211,7 +253,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'f3b2e205d9ccacf49785df2ab30ebbba03084338', "menu-length": this.menuLength }, h("div", { key: 'fb6663fa9a943c6940a2e0d31834843640f56dbd', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '072583668ba0681b9dbc3e4c8c0a49f0f3875e88', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '7cd576f613a777094851a45ff544663adf8f60dc', class: "top-subtitle" }, h("slot", { key: 'c4f1287f72d5bf94a45b517414ac212fbea37ba3', name: "top-subtitle" }))), h("div", { key: '8b10882a779a28db15f4d3f078322f77d06f53ca', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: 'c7437c627d86d78cdb76f7ce783a60b297158fbe', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'dd5c413b208a066f2df51d49f116dd64a0af1656', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'a711bb60306c6b40e4b8db5f751b3942c0c76389', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'f06bbe90b8b5b46ed1162c77a6f3b6710c618787', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'f75168a2f0382aa913d97f584d3633a5bdfbfa9c', "menu-length": this.menuLength }, h("div", { key: '124e4e42c49b555e9e0a7fbf74fbed58a34eff26', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '59a0f19801d6667ba0bb2ab532e8fef017b7a1f4', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '90477c97647ac20836742a0f66cf33f4a314b096', class: "top-subtitle" }, h("slot", { key: '79635b43939be93a2c8453760325e438a88ac7a6', name: "top-subtitle" }))), h("div", { key: '886bc226038945a58945f76e327c700bf046c573', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: 'eec8098326dfc1c57dacfbd1b7c048b0cda46163', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '4fab027ebeb20cb1be744961c86566328535cc39', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'e7b8a2c2131e550144a5203c07cc09a77af7f977', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '4e020acf3f33bb6fef9da32e9dd69a8b6ed40412', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -409,7 +451,7 @@ export class ZAppHeader {
                 "passive": true
             }, {
                 "name": "keydown",
-                "method": "handleMenubarKeydown",
+                "method": "handleKeydown",
                 "target": undefined,
                 "capture": false,
                 "passive": true

package/dist/collection/components/z-app-header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC5G,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,6BAA6B,GAAG,OAAO,oBAAoB,KAAK,WAAW,CAAC;AAElF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,UAAU;IAoGrB,OAAO;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACpC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;YACrB,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,aAAa;;QACX,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,MAAA,IAAI,CAAC,qBAAqB,0CAAE,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,IAAY,KAAK;;QACf,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,0CAAE,WAAW,CAAC,IAAI,EAAE,CAAC;IAC9E,CAAC;IAED,IAAY,YAAY;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,MAAM,KAAK,QAAQ,CAAC,eAAe,EAAE,CAAC;YACpE,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IACrG,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;IACtD,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;QACnF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS;gBACZ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;oBAChF,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,4CAA4C,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mFAAmF;IAC3E,uBAAuB;QAC7B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACvD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAE5B,OAAO;YACT,CAAC;YAED,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;YAC/D,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,GAAG,cAAc,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC7D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC9B,CAAC;iBAAM,IAAI,IAAI,CAAC,SAAS,IAAI,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACpE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClD,CAAC;IAEO,OAAO,CAAC,QAAgB;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;IACzE,CAAC;IAEO,SAAS,CAAC,OAAyB,EAAE,QAA0B;QACrE,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC;IACtB,CAAC;IAED,2DAA2D;IAG3D,WAAW,CAAC,EAA6B;QACvC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,IAAI,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,MAAiB,CAAC,EAAE,CAAC;gBACxG,OAAO;YACT,CAAC;YACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,oBAAoB,CAAC,EAAiB;;QACpC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,CAAC,EAAE,CAAC;YAC/E,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACxD,IAAI,QAA0B,CAAC;QAC/B,IACE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YACjE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,OAAO,CAAC,eAAe,CAAC,EAC/D,CAAC;YACD,QAAQ,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC;aAAM,IACL,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YAChE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,OAAO,CAAC,eAAe,CAAC,EAC7D,CAAC;YACD,QAAQ,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC3F,CAAC;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,OAAO,CAAC,eAAe,EAAE,CAAC;YAChE,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAClB,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBAC1B,QAAQ,CAAC,aAAa,EAAE,CAAC;gBAEzB,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACpC,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO,CACL,gBACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,WAAW,CAAC,OAAO,GACzB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,CACL,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACpD,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAC3C,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,GACrD,CACH,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO,CACL,EAAC,QAAQ;YACN,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,KAAK,EAAC,QAAQ;gBAClB,WAAK,GAAG,EAAC,iBAAiB,GAAG,CACxB,CACR;YACA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,IAAI,CAC1D,YAAM,KAAK,EAAC,cAAc;gBACxB,YAAM,IAAI,EAAC,cAAc,GAAG,CACvB,CACR,CACQ,CACZ,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,CACL,IAAI,CAAC,UAAU,GAAG,CAAC;YACnB,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CACxD,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAuB,CAAC,gBAC/C,WAAW,mBACR,MAAM,mBACL,GAAG,IAAI,CAAC,UAAU,EAAE,mBACrB,gBAAgB,EAC9B,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,UAAU;YAExB,cAAQ,IAAI,EAAC,aAAa,GAAG,CACtB,CACV,CACF,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,CACL,mBACE,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,EAC9C,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,yBAAyB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC;YAEhE,WAAK,IAAI,EAAC,eAAe;gBACvB,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAuB,CAAC,EAC7D,KAAK,EAAC,cAAc,gBACT,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,iBACZ,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;oBAE1B,cAAQ,IAAI,EAAC,OAAO,GAAG,CAChB;gBAET,WACE,KAAK,EAAC,gBAAgB,iBACT,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE;oBAElC,YACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GACtC,CACE,CACF,CACM,CACf,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;YACxB,WAAK,KAAK,EAAC,uBAAuB;gBAC/B,IAAI,CAAC,gBAAgB,EAAE;gBACxB,WAAK,KAAK,EAAC,eAAe;oBACvB,IAAI,CAAC,kBAAkB,EAAE;oBAC1B,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACF;gBACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,CACvC,CACF,CACP,CAAC;IACJ,CAAC;IAED;QA1SQ,iBAAY,GAAuB,EAAE,CAAC;QAUtC,0BAAqB,GAA0B,6BAA6B;YAClF,CAAC,CAAC,IAAI,oBAAoB,CACtB,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;gBACV,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;YACtC,CAAC,EACD,EAAC,SAAS,EAAE,GAAG,EAAC,CACjB;YACH,CAAC,CAAC,SAAS,CAAC;qBAzFN,KAAK;+BAMK,KAAK;4BAMR,KAAK;iCAMA,OAAO;4BAMZ,EAAE;;2BAcH,IAAI;sBAYD,KAAK;;0BAYD,KAAK;wBAGP,IAAI;wBAGJ,KAAK;QA+StB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChE;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE3B,4CAA4C;QAC5C,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;QACnF,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAChF,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CACxC,eAAe,WAAW,CAAC,MAAM,GAAG,CAAC,uBAAuB,WAAW,CAAC,MAAM,KAAK,CACpF,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAClF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,kBAAkB,0CAAE,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEpD,OAAO,CACL,EAAC,IAAI,oEAAc,IAAI,CAAC,UAAU;YAChC,4DACE,KAAK,EAAE,EAAC,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC,EAC3F,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBAElC,4DAAK,KAAK,EAAC,mBAAmB;oBAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAC5D,4DAAK,KAAK,EAAC,cAAc;wBACvB,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,CACP;oBACD,4DAAK,KAAK,EAAC,eAAe;wBACvB,IAAI,CAAC,gBAAgB,EAAE;wBACvB,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE;wBAC7D,6DAAM,IAAI,EAAC,OAAO,GAAG;wBACpB,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CACzD;oBACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CACxD;gBAEN,4DACE,KAAK,EAAC,gBAAgB,gBACV,IAAI,CAAC,KAAK,IAAI,SAAS,IAElC,IAAI,CAAC,WAAW,IAAI,CACnB,4DACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,KAAK,IAAI,SAAS;oBAEnC,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GACtC,CACE,CACP,CACG,CACF;YACL,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\n @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n /\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n Enable laZ logo.\n /\n @Prop({reflect: true})\n enableZLogo = true;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current count of menu items.\n /\n @State()\n private menuLength: number;\n\n /\n The opening state of the drawer.\n /\n @State()\n private drawerOpen = false;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeMenuButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.closeMenuButton.focus(), 100);\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) 32 /* 32px is the gap between each menu item /;\n }\n this.setMenuFloatingMode();\n }\n\n /* Automatically use offcanvas mode when the menubar doesn't fit in the header. /\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n /* Close each menu except the one receiving focus/click */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent \| PointerEvent): void {\n this.menuElements.forEach((menu) => {\n if (!menu.open \|\| !menu.floating \|\| menu.verticalContext \|\| containsElement(menu, ev.target as Element)) {\n return;\n }\n menu.open = false;\n });\n }\n\n @Listen(\"keydown\", {passive: true})\n handleMenubarKeydown(ev: KeyboardEvent): void {\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement \| HTMLZSearchbarElement \| undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile \|\| this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile \|\| this.isTablet}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderProductLogos(): HTMLElement \| null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas \|\| this._stuck \|\| this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n class=\"drawer-trigger\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeMenuButton = el as HTMLButtonElement)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n {((!this.enableSearch && this.isMobile) \|\| !this.isMobile) && (\n <div class=\"top-subtitle\">\n <slot name=\"top-subtitle\" />\n </div>\n )}\n <div class=\"heading-title\">\n {this.renderMenuButton()}\n {!hasTopSubtitle && !this._stuck && this.renderProductLogos()}\n <slot name=\"title\" />\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title \|\| undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title \|\| undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\n @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n /\n@Component({\n tag: \"z-app-header\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZAppHeader {\n @Element() hostElement: HTMLZAppHeaderElement;\n\n /\n Stuck mode for the header.\n * You can programmatically set it using an IntersectionObserver.\n /\n @Prop({reflect: true})\n stuck = false;\n\n /\n When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n /\n @Prop({reflect: true, mutable: true})\n enableOffcanvas = false;\n\n /\n Enable the search bar.\n /\n @Prop({reflect: true})\n enableSearch = false;\n\n /\n Placeholder text for the search bar.\n /\n @Prop()\n searchPlaceholder = \"Cerca\";\n\n /\n Search string for the search bar.\n /\n @Prop({mutable: true})\n searchString = \"\";\n\n /\n Url to the search page.\n * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n * The link will also appear on the sticky header.\n /\n @Prop()\n searchPageUrl: string;\n\n /\n Enable laZ logo.\n /\n @Prop({reflect: true})\n enableZLogo = true;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n /\n The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current count of menu items.\n /\n @State()\n private menuLength: number;\n\n /\n The opening state of the drawer.\n /\n @State()\n private drawerOpen = false;\n\n @State()\n private isMobile = true;\n\n @State()\n private isTablet = false;\n\n private container?: HTMLDivElement;\n\n private menuElements: HTMLZMenuElement[] = [];\n\n private menuWidth: number;\n\n private closeDrawerButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private menuResizeObserver: ResizeObserver;\n\n private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n ? new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {threshold: 0.5}\n )\n : undefined;\n\n @Watch(\"_stuck\")\n onStuck(): void {\n const scrollParent = this.scrollParent;\n if (!scrollParent) {\n return;\n }\n\n this.sticking.emit(this._stuck);\n }\n\n @Watch(\"drawerOpen\")\n setMenuFloatingMode(): void {\n if (this.menuElements.length === 0) {\n return;\n }\n\n this.menuElements.forEach((element) => {\n element.open = false;\n element.verticalContext = this.drawerOpen;\n });\n }\n\n @Watch(\"stuck\")\n onStuckChange(): void {\n if (this.stuck) {\n this.stuckIntersecObserver?.observe(this.container);\n } else {\n this._stuck = false;\n this.stuckIntersecObserver?.unobserve(this.container);\n }\n }\n\n private get title(): string {\n return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n }\n\n private get scrollParent(): Window \| Element {\n const parent = this.hostElement.offsetParent;\n if (parent === document.body \|\| parent === document.documentElement) {\n return window;\n }\n\n return parent;\n }\n\n private get canShowMenu(): boolean {\n return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n }\n\n private get focusableMenu(): HTMLZMenuElement {\n return this.menuElements.find((el) => el.htmlTabindex === 0);\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n setTimeout(() => this.menuElements[0].setFocus(), 400); / wait for the 400ms offcanvas transition /\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n setTimeout(() => this.burgerButton.focus(), 100);\n }\n\n private collectMenuElements(): void {\n this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n this.menuLength = this.menuElements.length;\n if (!this.enableOffcanvas) {\n this.menuWidth =\n this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n (this.menuLength - 1) 32 /* 32px is the gap between each menu item /;\n }\n this.setMenuFloatingMode();\n }\n\n /* Automatically use offcanvas mode when the menubar doesn't fit in the header. /\n private setupMenuResizeObserver(): void {\n if (this.enableOffcanvas) {\n return;\n }\n\n this.menuResizeObserver = new ResizeObserver((entries) => {\n if (this.isMobile) {\n this.enableOffcanvas = true;\n\n return;\n }\n\n const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n if (this.menuWidth === 0) {\n return;\n }\n\n if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n this.menuResizeObserver.observe(this.container);\n }\n\n private hasSlot(slotName: string): boolean {\n return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n }\n\n private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n current.htmlTabindex = -1;\n receiver.setFocus();\n }\n\n private onOffcanvasKeydown(ev: KeyboardEvent): void {\n if (ev.key !== KeyboardCode.TAB \|\| !this.drawerOpen) {\n return;\n }\n\n const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n if (closestMenu) {\n ev.preventDefault();\n ev.stopPropagation();\n // restore tabindex to the zmenu containing the focused element\n closestMenu.htmlTabindex = 0;\n this.closeDrawerButton.focus();\n } else if (ev.target === this.closeDrawerButton) {\n ev.preventDefault();\n ev.stopPropagation();\n if (ev.shiftKey) {\n // give focus to the last open menu if any or the last menu otherwhise\n (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n } else {\n // give focus to the first open menu if any or the first menu otherwhise\n (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n }\n }\n }\n\n /* Close each menu except the one receiving focus/click, if any */\n @Listen(\"focusin\", {target: \"document\", passive: true})\n @Listen(\"click\", {target: \"document\", passive: true})\n manageMenus(ev: FocusEvent \| PointerEvent): void {\n const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n if (targetMenu) {\n this.menuElements.forEach((menu) => {\n if (menu === targetMenu) {\n return;\n }\n\n menu.htmlTabindex = -1;\n if (!this.drawerOpen) {\n menu.open = false;\n }\n });\n } else if (!this.drawerOpen) {\n this.menuElements.forEach((menu) => {\n menu.open = false;\n });\n }\n }\n\n @Listen(\"keydown\", {passive: true})\n handleKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n\n if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n return;\n }\n\n const current = this.focusableMenu;\n const currentIndex = this.menuElements.indexOf(current);\n let receiver: HTMLZMenuElement;\n if (\n (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n } else if (\n (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) \|\|\n (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n ) {\n receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n }\n if (!receiver) {\n return;\n }\n\n if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n if (receiver.open) {\n current.htmlTabindex = -1;\n receiver.focusLastItem();\n\n return;\n }\n }\n\n this.moveFocus(current, receiver);\n }\n\n private renderSeachbar(): HTMLZButtonElement \| HTMLZSearchbarElement \| undefined {\n if (this.isMobile && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.isMobile \|\| this.isTablet)) {\n return (\n <z-button\n class=\"search-page-button\"\n variant={ButtonVariant.SECONDARY}\n href={this.searchPageUrl}\n icon=\"search\"\n size={ControlSize.X_SMALL}\n />\n );\n }\n\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={this.isMobile \|\| this.isTablet}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n />\n );\n }\n\n private renderProductLogos(): HTMLElement \| null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <span class=\"z-logo\">\n <img alt=\"Logo Zanichelli\" />\n </span>\n )}\n {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n <span class=\"product-logo\">\n <slot name=\"product-logo\" />\n </span>\n )}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas \|\| this._stuck \|\| this.isMobile) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"offcanvas-menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\" />\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n id=\"offcanvas-menu\"\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n onKeyDown={this.onOffcanvasKeydown}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeDrawerButton = el)}\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\" />\n </button>\n\n <div\n class=\"drawer-content\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n </div>\n </z-offcanvas>\n );\n }\n\n private renderStuck(): HTMLElement {\n return (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.renderMenuButton()}\n <div class=\"heading-title\">\n {this.renderProductLogos()}\n <div class=\"stucked-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n constructor() {\n this.openDrawer = this.openDrawer.bind(this);\n this.closeDrawer = this.closeDrawer.bind(this);\n this.collectMenuElements = this.collectMenuElements.bind(this);\n this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n\n // mobile and tablet media queries listeners\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n const tabletMediaQuery = window.matchMedia(\n `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n );\n this.isTablet = tabletMediaQuery.matches;\n tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n }\n\n componentDidLoad(): void {\n this.onStuckChange();\n this.setupMenuResizeObserver();\n }\n\n disconnectedCallback(): void {\n this.menuResizeObserver?.disconnect();\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n {((!this.enableSearch && this.isMobile) \|\| !this.isMobile) && (\n <div class=\"top-subtitle\">\n <slot name=\"top-subtitle\" />\n </div>\n )}\n <div class=\"heading-title\">\n {this.renderMenuButton()}\n {!hasTopSubtitle && !this._stuck && this.renderProductLogos()}\n <slot name=\"title\" />\n {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n </div>\n {this.enableSearch && this.isMobile && this.renderSeachbar()}\n </div>\n\n <nav\n class=\"menu-container\"\n aria-label={this.title \|\| undefined}\n >\n {this.canShowMenu && (\n <div\n role=\"menubar\"\n aria-label={this.title \|\| undefined}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n />\n </div>\n )}\n </nav>\n </div>\n {this.renderOffcanvas()}\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"]}