npm - @zanichelli/albe-web-components - Versions diffs - 19.1.4-RC1 → 19.2.0 - Mend

@zanichelli/albe-web-components 19.1.4-RC1 → 19.2.0

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 (836) hide show

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

@@ -1,37 +1,30 @@
 import { html } from "lit";
+import "../z-button/index";
 import "../z-divider/index";
 import "../z-tool/index";
 import "./index";
+import "./index.stories.css";
+/**
+ * This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.
+ * ### Active state
+ * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.
+ * ### Visual grouping with `z-divider`
+ * Use `<z-divider orientation="vertical">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.
+ * ### Mobile multiline layout with `--z-toolbar-columns`
+ * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.
+ */
 const StoryMeta = {
     title: "ZToolbar",
     component: "z-toolbar",
-    parameters: {
-        docs: {
-            description: {
-                component: [
-                    "The `z-toolbar` component implements the WCAG toolbar pattern with roving tabindex keyboard navigation.",
-                    "",
-                    "### Active state",
-                    "The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.",
-                    "",
-                    "### Visual grouping with `z-divider`",
-                    'Use `<z-divider orientation="vertical">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.',
-                    "",
-                    "### Multiline layout with `--z-toolbar-columns`",
-                    "Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.",
-                ].join("\n"),
-            },
-        },
-    },
     args: {
         htmlAriaLabel: "Toolbar principale",
     },
     decorators: [
         (story) => html `<div
-        style="display: flex; justify-content: center; align-items: center; min-height: 100px;"
+        class="toolbar-container"
         @click=${(e) => {
             const tool = e.target.closest("z-tool");
-            if (tool && !tool.disabled && !tool.querySelector("z-toolbar")) {
+            if (tool && !tool.disabled && !tool.children.length) {
                 tool.active = !tool.active;
             }
         }}
@@ -92,213 +85,97 @@ export const WithDividers = {
 };
 export const WithNestedToolbar = {
     render: (args) => html `
-    <div style="display: flex; justify-content: center; align-items: flex-start; min-height: 200px; padding-top: 20px;">
-      <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni"
-        >
-          <z-toolbar html-aria-label="Sotto-toolbar">
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-            <z-divider orientation="vertical"></z-divider>
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-tool
-          icon="chevron-up"
-          tooltip="Su"
-        ></z-tool>
-        <z-tool
-          icon="chevron-up"
-          tooltip="Su"
-        ></z-tool>
-        <z-divider orientation="vertical"></z-divider>
-        <z-tool
-          icon="download"
-          tooltip="Scarica"
-        ></z-tool>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni"
-        >
-          <z-toolbar html-aria-label="Sotto-toolbar">
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-            <z-divider orientation="vertical"></z-divider>
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni"
-        >
-          <z-toolbar html-aria-label="Sotto-toolbar">
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-            <z-divider orientation="vertical"></z-divider>
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-tool
-          icon="upload"
-          tooltip="Carica"
-        ></z-tool>
-      </z-toolbar>
-    </div>
-  `,
-};
-export const ProgrammaticSubmenuClosure = {
-    render: (args) => html `
-    <div
-      style="display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;"
-    >
-      <z-toolbar
-        id="toolbar-close-demo"
-        html-aria-label=${args.htmlAriaLabel}
+    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
+      <z-tool
+        icon="bg-color"
+        tooltip="Scegli un colore"
       >
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni"
-        >
-          <z-toolbar html-aria-label="Sotto-toolbar">
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-tool
-          icon="download"
-          tooltip="Scarica"
-        ></z-tool>
-        <z-tool
-          icon="upload"
-          tooltip="Carica"
-        ></z-tool>
-        <z-divider orientation="vertical"></z-divider>
-        <z-tool
-          icon="copy"
-          tooltip="Copia"
-        >
-          <z-toolbar html-aria-label="Sotto-toolbar">
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni 2"
-        ></z-tool>
-        <z-tool
-          icon="download"
-          tooltip="Scarica 2"
-        ></z-tool>
-      </z-toolbar>
-      <button
-        type="button"
-        onclick="this.parentElement.querySelector('z-toolbar').closeSubmenus()"
+        <z-color-picker></z-color-picker>
+      </z-tool>
+      <z-tool
+        icon="plus"
+        tooltip="Apri sotto-toolbar"
       >
-        call closeSubmenus()
-      </button>
-    </div>
-  `,
-};
-export const ProgrammaticActivation = {
-    render: (args) => html `
-    <div
-      style="display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;"
-    >
-      <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni"
-        >
-          <z-toolbar html-aria-label="Sotto-toolbar">
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-tool
-          icon="download"
-          tooltip="Scarica"
-        ></z-tool>
-        <z-tool
-          icon="upload"
-          tooltip="Carica"
-        ></z-tool>
-        <z-divider orientation="vertical"></z-divider>
-        <z-tool
-          icon="copy"
-          tooltip="Copia"
-        ></z-tool>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni 2"
-        ></z-tool>
-        <z-tool
-          icon="download"
-          tooltip="Scarica 2"
-        ></z-tool>
-      </z-toolbar>
-      <div style="display: flex; gap: 8px; margin-top:50px;">
-        <button
-          type="button"
-          onclick="var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[0].open = !tools[0].open;"
-        >
-          toggle 1st tool (submenu)
-        </button>
-        <button
-          type="button"
-          onclick="var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[3].active = !tools[3].active;"
-        >
-          toggle 4th tool
-        </button>
-      </div>
-    </div>
+        <z-toolbar html-aria-label="Sotto-toolbar">
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-down"
+            tooltip="Giù"
+          ></z-tool>
+          <z-divider orientation="vertical"></z-divider>
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="bg-color"
+            tooltip="Scegli un colore"
+          >
+            <z-color-picker></z-color-picker>
+          </z-tool>
+        </z-toolbar>
+      </z-tool>
+      <z-tool
+        icon="chevron-up"
+        tooltip="Su"
+      ></z-tool>
+      <z-tool
+        icon="chevron-up"
+        tooltip="Su"
+      ></z-tool>
+      <z-divider orientation="vertical"></z-divider>
+      <z-tool
+        icon="download"
+        tooltip="Scarica"
+      ></z-tool>
+      <z-tool
+        icon="gear"
+        tooltip="Impostazioni"
+      >
+        <z-toolbar html-aria-label="Sotto-toolbar">
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-down"
+            tooltip="Giù"
+          ></z-tool>
+          <z-divider orientation="vertical"></z-divider>
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+        </z-toolbar>
+      </z-tool>
+      <z-tool
+        icon="gear"
+        tooltip="Impostazioni"
+      >
+        <z-toolbar html-aria-label="Sotto-toolbar">
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-down"
+            tooltip="Giù"
+          ></z-tool>
+          <z-divider orientation="vertical"></z-divider>
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+        </z-toolbar>
+      </z-tool>
+      <z-tool
+        icon="upload"
+        tooltip="Carica"
+      ></z-tool>
+    </z-toolbar>
   `,
 };
 export const WithDisabledTool = {
@@ -340,98 +217,102 @@ export const WithActiveTool = {
   `,
 };
 export const MultilineMobile = {
+    args: {
+        "--z-toolbar-columns": "4",
+    },
     parameters: {
         viewport: {
             defaultViewport: "mobile",
         },
     },
     render: (args) => html `
-    <style>
-      .multiline-container {
-        --z-toolbar-columns: 4;
-      }
-      .inner-different-columns {
-        --z-toolbar-columns: 2;
-      }
-    </style>
-    <div
-      style="display: flex; justify-content: center; align-items: flex-start; min-height: 300px; padding-top: 150px;"
+    <z-toolbar
+      class="multiline-container"
+      html-aria-label=${args.htmlAriaLabel}
+      style="--z-toolbar-columns: ${args["--z-toolbar-columns"]};"
     >
-      <z-toolbar
-        class="multiline-container"
-        html-aria-label=${args.htmlAriaLabel}
+      <z-tool
+        icon="gear"
+        tooltip="Impostazioni"
+      ></z-tool>
+      <z-tool
+        icon="download"
+        tooltip="Scarica"
+      ></z-tool>
+      <z-divider orientation="vertical"></z-divider>
+      <z-tool
+        icon="upload"
+        tooltip="Carica"
+      ></z-tool>
+      <z-tool
+        icon="plus"
+        tooltip="Aggiungi"
       >
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni"
-        ></z-tool>
-        <z-tool
-          icon="download"
-          tooltip="Scarica"
-        ></z-tool>
-        <z-divider orientation="vertical"></z-divider>
-        <z-tool
-          icon="upload"
-          tooltip="Carica"
-        ></z-tool>
-        <z-tool
-          icon="copy"
-          tooltip="Copia"
-        >
-          <z-toolbar
-            class="inner-different-columns"
-            html-aria-label="Sotto-toolbar copia"
-          >
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-up"
-              tooltip="Su"
-            ></z-tool>
-            <z-tool
-              icon="chevron-down"
-              tooltip="Giù"
-            ></z-tool>
-          </z-toolbar>
-        </z-tool>
-        <z-divider orientation="vertical"></z-divider>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni 2"
-        ></z-tool>
-        <z-tool
-          icon="download"
-          tooltip="Scarica 2"
-        ></z-tool>
-        <z-tool
-          icon="upload"
-          tooltip="Carica 2"
-        ></z-tool>
-        <z-tool
-          icon="copy"
-          tooltip="Copia 2"
-        ></z-tool>
-        <z-tool
-          icon="gear"
-          tooltip="Impostazioni 3"
-          disabled
-        ></z-tool>
-        <z-tool
-          icon="upload"
-          tooltip="Carica 3"
-        ></z-tool>
-      </z-toolbar>
-    </div>
+        <z-toolbar html-aria-label="Sotto-toolbar aggiungi">
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-down"
+            tooltip="Giù"
+          ></z-tool>
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-up"
+            tooltip="Su"
+          ></z-tool>
+          <z-tool
+            icon="chevron-down"
+            tooltip="Giù"
+          ></z-tool>
+        </z-toolbar>
+      </z-tool>
+      <z-divider orientation="vertical"></z-divider>
+      <z-tool
+        icon="gear"
+        tooltip="Impostazioni 2"
+      ></z-tool>
+      <z-tool
+        icon="download"
+        tooltip="Scarica 2"
+      ></z-tool>
+      <z-tool
+        icon="plus"
+        tooltip="Aggiungi"
+      >
+        <z-toolbar html-aria-label="Sotto-toolbar aggiungi">
+          <z-tool
+            icon="copy"
+            tooltip="Copia"
+          ></z-tool>
+          <z-tool
+            icon="edit"
+            tooltip="Modifica"
+          ></z-tool>
+        </z-toolbar>
+      </z-tool>
+      <z-tool
+        icon="upload"
+        tooltip="Carica 2"
+      ></z-tool>
+      <z-tool
+        icon="copy"
+        tooltip="Copia 2"
+      ></z-tool>
+      <z-tool
+        icon="gear"
+        tooltip="Impostazioni 3"
+        disabled
+      ></z-tool>
+      <z-tool
+        icon="upload"
+        tooltip="Carica 3"
+      ></z-tool>
+    </z-toolbar>
   `,
 };
 //# sourceMappingURL=index.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToolbar} from \".\";\nimport \"../z-divider/index\";\nimport \"../z-tool/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZToolbar\",\n component: \"z-toolbar\",\n parameters: {\n docs: {\n description: {\n component: [\n \"The `z-toolbar` component implements the WCAG toolbar pattern with roving tabindex keyboard navigation.\",\n \"\",\n \"### Active state\",\n \"The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.\",\n \"\",\n \"### Visual grouping with `z-divider`\",\n 'Use `<z-divider orientation=\"vertical\">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.',\n \"\",\n \"### Multiline layout with `--z-toolbar-columns`\",\n \"Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.\",\n ].join(\"\\n\"),\n },\n },\n },\n args: {\n htmlAriaLabel: \"Toolbar principale\",\n },\n decorators: [\n (story) =>\n html`<div\n style=\"display: flex; justify-content: center; align-items: center; min-height: 100px;\"\n @click=${(e: Event) => {\n const tool = (e.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement \| null;\n if (tool && !tool.disabled && !tool.querySelector(\"z-toolbar\")) {\n tool.active = !tool.active;\n }\n }}\n >\n ${story()}\n </div>`,\n ],\n} satisfies Meta<ZToolbar>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToolbar>;\n\nexport const Default = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithDividers = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithNestedToolbar = {\n render: (args) => html`\n <div style=\"display: flex; justify-content: center; align-items: flex-start; min-height: 200px; padding-top: 20px;\">\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n </div>\n `,\n} satisfies Story;\n\nexport const ProgrammaticSubmenuClosure = {\n render: (args) => html`\n <div\n style=\"display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;\"\n >\n <z-toolbar\n id=\"toolbar-close-demo\"\n html-aria-label=${args.htmlAriaLabel}\n >\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni 2\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica 2\"\n ></z-tool>\n </z-toolbar>\n <button\n type=\"button\"\n onclick=\"this.parentElement.querySelector('z-toolbar').closeSubmenus()\"\n >\n call closeSubmenus()\n </button>\n </div>\n `,\n} satisfies Story;\n\nexport const ProgrammaticActivation = {\n render: (args) => html`\n <div\n style=\"display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 200px; padding-top: 20px;\"\n >\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia\"\n ></z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni 2\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica 2\"\n ></z-tool>\n </z-toolbar>\n <div style=\"display: flex; gap: 8px; margin-top:50px;\">\n <button\n type=\"button\"\n onclick=\"var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[0].open = !tools[0].open;\"\n >\n toggle 1st tool (submenu)\n </button>\n <button\n type=\"button\"\n onclick=\"var toolbar = this.parentElement.previousElementSibling; var tools = toolbar.querySelectorAll(':scope > z-tool'); tools[3].active = !tools[3].active;\"\n >\n toggle 4th tool\n </button>\n </div>\n </div>\n `,\n} satisfies Story;\n\nexport const WithDisabledTool = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n disabled\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithActiveTool = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n active\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const MultilineMobile = {\n parameters: {\n viewport: {\n defaultViewport: \"mobile\",\n },\n },\n render: (args) => html`\n <style>\n .multiline-container {\n --z-toolbar-columns: 4;\n }\n .inner-different-columns {\n --z-toolbar-columns: 2;\n }\n </style>\n <div\n style=\"display: flex; justify-content: center; align-items: flex-start; min-height: 300px; padding-top: 150px;\"\n >\n <z-toolbar\n class=\"multiline-container\"\n html-aria-label=${args.htmlAriaLabel}\n >\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia\"\n >\n <z-toolbar\n class=\"inner-different-columns\"\n html-aria-label=\"Sotto-toolbar copia\"\n >\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni 2\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica 2\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica 2\"\n ></z-tool>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia 2\"\n ></z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni 3\"\n disabled\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica 3\"\n ></z-tool>\n </z-toolbar>\n </div>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-toolbar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;;;;;;;GAQG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,aAAa,EAAE,oBAAoB;KACpC;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CACR,IAAI,CAAA;;iBAEO,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAA4B,CAAC;YACpF,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;YAC7B,CAAC;QACH,CAAC;;UAEC,KAAK,EAAE;aACJ;KACV;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;GAchD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FhD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;iCACS,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;GAehD;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,qBAAqB,EAAE,GAAG;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,eAAe,EAAE,QAAQ;SAC1B;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;wBAGA,IAAI,CAAC,aAAa;oCACN,IAAI,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoF5D;CACc,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZToolbar} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-divider/index\";\nimport \"../z-tool/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZToolbarStoriesArgs = ZToolbar & CSSVarsArguments<\"--z-toolbar-columns\">;\n\n/*\n This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * ### Active state\n * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.\n * ### Visual grouping with `z-divider`\n * Use `<z-divider orientation=\"vertical\">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.\n * ### Mobile multiline layout with `--z-toolbar-columns`\n * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.\n */\nconst StoryMeta = {\n title: \"ZToolbar\",\n component: \"z-toolbar\",\n args: {\n htmlAriaLabel: \"Toolbar principale\",\n },\n decorators: [\n (story) =>\n html`<div\n class=\"toolbar-container\"\n @click=${(e: Event) => {\n const tool = (e.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement \| null;\n if (tool && !tool.disabled && !tool.children.length) {\n tool.active = !tool.active;\n }\n }}\n >\n ${story()}\n </div>`,\n ],\n} satisfies Meta<ZToolbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZToolbarStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithDividers = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithNestedToolbar = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"bg-color\"\n tooltip=\"Scegli un colore\"\n >\n <z-color-picker></z-color-picker>\n </z-tool>\n <z-tool\n icon=\"plus\"\n tooltip=\"Apri sotto-toolbar\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"bg-color\"\n tooltip=\"Scegli un colore\"\n >\n <z-color-picker></z-color-picker>\n </z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithDisabledTool = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n disabled\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const WithActiveTool = {\n render: (args) => html`\n <z-toolbar html-aria-label=${args.htmlAriaLabel}>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n active\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n\nexport const MultilineMobile = {\n args: {\n \"--z-toolbar-columns\": \"4\",\n },\n parameters: {\n viewport: {\n defaultViewport: \"mobile\",\n },\n },\n render: (args) => html`\n <z-toolbar\n class=\"multiline-container\"\n html-aria-label=${args.htmlAriaLabel}\n style=\"--z-toolbar-columns: ${args[\"--z-toolbar-columns\"]};\"\n >\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica\"\n ></z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica\"\n ></z-tool>\n <z-tool\n icon=\"plus\"\n tooltip=\"Aggiungi\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-up\"\n tooltip=\"Su\"\n ></z-tool>\n <z-tool\n icon=\"chevron-down\"\n tooltip=\"Giù\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-divider orientation=\"vertical\"></z-divider>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni 2\"\n ></z-tool>\n <z-tool\n icon=\"download\"\n tooltip=\"Scarica 2\"\n ></z-tool>\n <z-tool\n icon=\"plus\"\n tooltip=\"Aggiungi\"\n >\n <z-toolbar html-aria-label=\"Sotto-toolbar aggiungi\">\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia\"\n ></z-tool>\n <z-tool\n icon=\"edit\"\n tooltip=\"Modifica\"\n ></z-tool>\n </z-toolbar>\n </z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica 2\"\n ></z-tool>\n <z-tool\n icon=\"copy\"\n tooltip=\"Copia 2\"\n ></z-tool>\n <z-tool\n icon=\"gear\"\n tooltip=\"Impostazioni 3\"\n disabled\n ></z-tool>\n <z-tool\n icon=\"upload\"\n tooltip=\"Carica 3\"\n ></z-tool>\n </z-toolbar>\n `,\n} satisfies Story;\n"]}