npm - @zanichelli/albe-web-components - Versions diffs - 16.0.0-rc2 → 16.0.0 - Mend

@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.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 (764) hide show

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

@@ -9,19 +9,16 @@ const StoryMeta = {
     parameters: {
         layout: "fullscreen",
     },
-    argTypes: {
-        flow: {
-            control: {
-                type: "inline-radio",
-            },
-            options: ["auto", "stack", "offcanvas"],
-        },
+    subcomponents: {
+        ZMenu: "z-menu",
+        ZMenuSection: "z-menu-section",
     },
     args: {
         "--app-header-content-max-width": "100%",
         "enableSearch": false,
         "searchPageUrl": "",
-        "flow": "auto",
+        "enableZLogo": false,
+        "enableOffcanvas": false,
     },
 };
 export default StoryMeta;
@@ -46,12 +43,12 @@ const menuTemplate = () => {
         <h3>Item 3</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.2</a
         >
       </z-menu-section>
@@ -59,12 +56,12 @@ const menuTemplate = () => {
         <h3>Item 4</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.2</a
         >
       </z-menu-section>
@@ -80,57 +77,6 @@ const menuTemplate = () => {
     >
       <a href>Menu label</a>
     </z-menu>
-  `;
-};
-const longMenuTemplate = () => {
-    return html `
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Not so short menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <z-menu-section slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 4.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu>
     <z-menu
       slot="menu"
       floating
@@ -150,12 +96,12 @@ const longMenuTemplate = () => {
         <h3>Item 3</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.2</a
         >
       </z-menu-section>
@@ -163,12 +109,12 @@ const longMenuTemplate = () => {
         <h3>Item 4</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.2</a
         >
       </z-menu-section>
@@ -197,12 +143,12 @@ const longMenuTemplate = () => {
         <h3>Item 3</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.1</a
         >
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 3.2</a
         >
       </z-menu-section>
@@ -210,200 +156,12 @@ const longMenuTemplate = () => {
         <h3>Item 4</h3>
         <a
           href=""
-          slot="item"
+          slot="section"
           >Item 4.1</a
         >
         <a
           href=""
-          slot="item"
-          >Item 4.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <z-menu-section slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 4.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <z-menu-section slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 4.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <z-menu-section slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 4.2</a
-        >
-      </z-menu-section>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu>
-    <z-menu
-      slot="menu"
-      floating
-    >
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section>
-      <z-menu-section slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="item"
+          slot="section"
           >Item 4.2</a
         >
       </z-menu-section>
@@ -418,36 +176,42 @@ const longMenuTemplate = () => {
 export const Title = {
     parameters: {
         controls: {
-            exclude: ["flow"],
+            exclude: ["enableOffcanvas"],
         },
     },
     render: (args) => html `<z-app-header
       .enableSearch=${args.enableSearch}
       .searchPageUrl=${args.searchPageUrl}
+      .enableZLogo=${args.enableZLogo}
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >
       <h1 slot="title">Applicazione</h1>
     </z-app-header>`,
 };
-export const Subtitle = {
+export const ProductLogo = {
     parameters: {
         controls: {
-            exclude: ["flow"],
+            exclude: ["enableOffcanvas"],
         },
     },
     render: (args) => html `<z-app-header
       .enableSearch=${args.enableSearch}
       .searchPageUrl=${args.searchPageUrl}
+      .enableZLogo=${args.enableZLogo}
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >
       <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
+      <img
+        slot="product-logo"
+        src="src/assets/orientamento.svg"
+        alt=""
+      />
     </z-app-header>`,
 };
-export const TopSubtitle = {
+export const TopTitle = {
     parameters: {
         controls: {
-            exclude: ["flow"],
+            exclude: ["enableOffcanvas", "enableZLogo"],
         },
     },
     render: (args) => html `<z-app-header
@@ -459,57 +223,51 @@ export const TopSubtitle = {
       <h1 slot="title">Applicazione</h1>
     </z-app-header>`,
 };
-export const Menu = {
+export const MenuWithTopTitle = {
+    parameters: {
+        controls: {
+            exclude: ["enableZLogo"],
+        },
+    },
+    args: {
+        enableOffcanvas: true,
+    },
     render: (args) => html `<z-app-header
-      flow=${args.flow}
+      .enableOffcanvas=${args.enableOffcanvas}
       .enableSearch=${args.enableSearch}
       .searchPageUrl=${args.searchPageUrl}
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >
+      <h2 slot="top-subtitle">Payoff dell'applicazione</h2>
       <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
       ${menuTemplate()}
     </z-app-header>`,
 };
 export const LongTitle = {
-    render: (args) => html `<z-app-header
-      flow=${args.flow}
-      .enableSearch=${args.enableSearch}
-      .searchPageUrl=${args.searchPageUrl}
-      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
-    >
-      <h1 slot="title">Applicazione con nome veramente lungo che fa andare il menu a capo</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
+    parameters: {
+        controls: {
+            exclude: ["enableOffcanvas", "enableZLogo", "enableSearch", "searchPageUrl"],
+        },
+    },
+    render: (args) => html `<z-app-header style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}">
+      <h1 slot="title">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>
+      <h2 slot="top-subtitle">Jearl Walker, David Halliday, Robert Resnick</h2>
       ${menuTemplate()}
     </z-app-header>`,
 };
-export const VeryLongMenu = {
-    render: (args) => html `<z-app-header
-      .enableSearch=${args.enableSearch}
-      .searchPageUrl=${args.searchPageUrl}
-      flow=${args.flow}
-      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
-    >
-      <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
-      ${longMenuTemplate()}
-    </z-app-header>`,
-};
 export const OffcanvasMenu = {
-    parameters: {
-        controls: {
-            exclude: ["flow"],
-        },
+    args: {
+        enableOffcanvas: true,
     },
     render: (args) => html `<z-app-header
-      flow="offcanvas"
+      .enableOffcanvas=${args.enableOffcanvas}
       .enableSearch=${args.enableSearch}
       .searchPageUrl=${args.searchPageUrl}
+      .enableZLogo=${args.enableZLogo}
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >
       <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
-      ${longMenuTemplate()}
+      ${menuTemplate()}
     </z-app-header>`,
 };
 export const Stuck = {
@@ -524,93 +282,25 @@ export const Stuck = {
             inlineStories: false,
             iframeHeight: "400px",
         },
-    },
-    render: (args) => html `<z-app-header
-      stuck
-      .flow=${args.flow}
-      .enableSearch=${args.enableSearch}
-      .searchPageUrl=${args.searchPageUrl}
-      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}; --app-header-top-offset: 0"
-    >
-      <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
-      ${longMenuTemplate()}
-    </z-app-header>`,
-};
-export const MaxWidth = {
-    args: {
-        "--app-header-content-max-width": "1366px",
-    },
-    decorators: [
-        (Story) => html `
-      <div style="padding: 16px var(--grid-margin)">Scroll to see max width also in stuck header.</div>
-      <div style="height: 200vh">${Story()}</div>
-    `,
-    ],
-    parameters: {
-        docs: {
-            inlineStories: false,
-            iframeHeight: "400px",
+        controls: {
+            exclude: ["enableOffcanvas"],
         },
     },
     render: (args) => html `<z-app-header
       stuck
-      .flow=${args.flow}
+      .enableZLogo=${args.enableZLogo}
       .enableSearch=${args.enableSearch}
       .searchPageUrl=${args.searchPageUrl}
-      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}; --app-header-top-offset: 0;"
-    >
-      <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
-      ${menuTemplate()}
-    </z-app-header>`,
-};
-export const CoverHeroWithSlottedImage = {
-    args: {
-        overlay: true,
-        hero: "",
-    },
-    render: (args) => html `<z-app-header
-      id="hero"
-      .overlay=${args.overlay}
-      .enableSearch=${args.enableSearch}
-      .searchPageUrl=${args.searchPageUrl}
-      .hero=${args.hero}
-      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
-      flow=${args.flow}
-    >
-      <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
-      ${args.hero
-        ? ""
-        : html `<img
-            slot="hero"
-            src="https://miro.medium.com/max/2560/1*q8Lf442Gq2Wrb2aNr3urVg.jpeg"
-            alt=""
-          />`}
-      ${longMenuTemplate()}
-    </z-app-header>`,
-};
-export const Searchbar = {
-    parameters: {
-        controls: {
-            exclude: ["searchPageUrl", "enableSearch"],
-        },
-    },
-    render: (args) => html `<z-app-header
-      flow=${args.flow}
-      enable-search
-      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
+      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}; --app-header-top-offset: 0"
     >
       <h1 slot="title">Applicazione</h1>
-      <h2 slot="subtitle">Payoff dell'applicazione</h2>
       ${menuTemplate()}
     </z-app-header>`,
 };
 export const SearchPageButton = {
     parameters: {
         controls: {
-            exclude: ["searchPageUrl", "enableSearch"],
+            exclude: ["searchPageUrl", "enableSearch", "enableOffcanvas"],
         },
     },
     decorators: [
@@ -622,8 +312,8 @@ export const SearchPageButton = {
     `,
     ],
     render: (args) => html `<z-app-header
-      flow=${args.flow}
       enable-search
+      .enableZLogo=${args.enableZLogo}
       search-page-url="https://www.zanichelli.it"
       style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
     >

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-app-header/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {ZAppHeader} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-menu-section/index\";\nimport \"../z-menu/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZAppHeaderStoriesArgs = ZAppHeader & CSSVarsArguments<\"app-header-content-max-width\">;\n\nconst StoryMeta = {\n title: \"ZAppHeader\",\n component: \"z-app-header\",\n parameters: {\n layout: \"fullscreen\",\n },\n argTypes: {\n flow: {\n control: {\n type: \"inline-radio\",\n },\n options: [\"auto\", \"stack\", \"offcanvas\"],\n },\n },\n args: {\n \"--app-header-content-max-width\": \"100%\",\n \"enableSearch\": false,\n \"searchPageUrl\": \"\",\n \"flow\": \"auto\",\n },\n} satisfies Meta<ZAppHeaderStoriesArgs>;\n\nexport default StoryMeta;\n\nconst menuTemplate = (): TemplateResult => {\n return html`\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <a href>Menu label</a>\n </z-menu>\n `;\n};\n\nconst longMenuTemplate = (): TemplateResult => {\n return html`\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Not so short menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n `;\n};\n\ntype Story = Meta<ZAppHeaderStoriesArgs>;\n\nexport const Title = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n </z-app-header>`,\n} satisfies Story;\n\nexport const Subtitle = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n </z-app-header>`,\n} satisfies Story;\n\nexport const TopSubtitle = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n <h1 slot=\"title\">Applicazione</h1>\n </z-app-header>`,\n} satisfies Story;\n\nexport const Menu = {\n render: (args) =>\n html`<z-app-header\n flow=${args.flow}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const LongTitle = {\n render: (args) =>\n html`<z-app-header\n flow=${args.flow}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione con nome veramente lungo che fa andare il menu a capo</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const VeryLongMenu = {\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n flow=${args.flow}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${longMenuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const OffcanvasMenu = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n flow=\"offcanvas\"\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${longMenuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const Stuck = {\n decorators: [\n (Story) => html`\n <div style=\"padding: 16px var(--grid-margin)\">Scroll to see <code>stuck</code> prop in action.</div>\n <div style=\"height: 200vh\">${Story()}</div>\n `,\n ],\n parameters: {\n docs: {\n inlineStories: false,\n iframeHeight: \"400px\",\n },\n },\n render: (args) =>\n html`<z-app-header\n stuck\n .flow=${args.flow}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}; --app-header-top-offset: 0\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${longMenuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const MaxWidth = {\n args: {\n \"--app-header-content-max-width\": \"1366px\",\n },\n decorators: [\n (Story) => html`\n <div style=\"padding: 16px var(--grid-margin)\">Scroll to see max width also in stuck header.</div>\n <div style=\"height: 200vh\">${Story()}</div>\n `,\n ],\n parameters: {\n docs: {\n inlineStories: false,\n iframeHeight: \"400px\",\n },\n },\n render: (args) =>\n html`<z-app-header\n stuck\n .flow=${args.flow}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}; --app-header-top-offset: 0;\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const CoverHeroWithSlottedImage = {\n args: {\n overlay: true,\n hero: \"\",\n },\n render: (args) =>\n html`<z-app-header\n id=\"hero\"\n .overlay=${args.overlay}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n .hero=${args.hero}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n flow=${args.flow}\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${args.hero\n ? \"\"\n : html`<img\n slot=\"hero\"\n src=\"https://miro.medium.com/max/2560/1*q8Lf442Gq2Wrb2aNr3urVg.jpeg\"\n alt=\"\"\n />`}\n ${longMenuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const Searchbar = {\n parameters: {\n controls: {\n exclude: [\"searchPageUrl\", \"enableSearch\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n flow=${args.flow}\n enable-search\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const SearchPageButton = {\n parameters: {\n controls: {\n exclude: [\"searchPageUrl\", \"enableSearch\"],\n },\n },\n decorators: [\n (Story) => html`\n <div style=\"padding: 16px var(--grid-margin)\">\n The prop <code>searchPageUrl</code> only affects the component in tablet and mobile viewports.\n </div>\n ${Story()}\n `,\n ],\n render: (args) =>\n html`<z-app-header\n flow=${args.flow}\n enable-search\n search-page-url=\"https://www.zanichelli.it\"\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-app-header/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport {ZAppHeader} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-menu-section/index\";\nimport \"../z-menu/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZAppHeaderStoriesArgs = ZAppHeader & CSSVarsArguments<\"app-header-content-max-width\">;\n\nconst StoryMeta = {\n title: \"ZAppHeader\",\n component: \"z-app-header\",\n parameters: {\n layout: \"fullscreen\",\n },\n subcomponents: {\n ZMenu: \"z-menu\",\n ZMenuSection: \"z-menu-section\",\n },\n args: {\n \"--app-header-content-max-width\": \"100%\",\n \"enableSearch\": false,\n \"searchPageUrl\": \"\",\n \"enableZLogo\": false,\n \"enableOffcanvas\": false,\n },\n} satisfies Meta<ZAppHeaderStoriesArgs>;\n\nexport default StoryMeta;\n\nconst menuTemplate = (): TemplateResult => {\n return html`\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <a href>Menu label</a>\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n <z-menu\n slot=\"menu\"\n floating\n >\n <h3>Menu label</h3>\n <a\n href=\"\"\n slot=\"item\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"item\"\n >Item 2</a\n >\n <z-menu-section slot=\"item\">\n <h3>Item 3</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 3.1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 3.2</a\n >\n </z-menu-section>\n <z-menu-section slot=\"item\">\n <h3>Item 4</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 4.1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 4.2</a\n >\n </z-menu-section>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu>\n `;\n};\n\ntype Story = Meta<ZAppHeaderStoriesArgs>;\n\nexport const Title = {\n parameters: {\n controls: {\n exclude: [\"enableOffcanvas\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n .enableZLogo=${args.enableZLogo}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n </z-app-header>`,\n} satisfies Story;\n\nexport const ProductLogo = {\n parameters: {\n controls: {\n exclude: [\"enableOffcanvas\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n .enableZLogo=${args.enableZLogo}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <img\n slot=\"product-logo\"\n src=\"src/assets/orientamento.svg\"\n alt=\"\"\n />\n </z-app-header>`,\n} satisfies Story;\n\nexport const TopTitle = {\n parameters: {\n controls: {\n exclude: [\"enableOffcanvas\", \"enableZLogo\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n <h1 slot=\"title\">Applicazione</h1>\n </z-app-header>`,\n} satisfies Story;\n\nexport const MenuWithTopTitle = {\n parameters: {\n controls: {\n exclude: [\"enableZLogo\"],\n },\n },\n args: {\n enableOffcanvas: true,\n },\n render: (args) =>\n html`<z-app-header\n .enableOffcanvas=${args.enableOffcanvas}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n <h1 slot=\"title\">Applicazione</h1>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const LongTitle = {\n parameters: {\n controls: {\n exclude: [\"enableOffcanvas\", \"enableZLogo\", \"enableSearch\", \"searchPageUrl\"],\n },\n },\n render: (args) =>\n html`<z-app-header style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\">\n <h1 slot=\"title\">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>\n <h2 slot=\"top-subtitle\">Jearl Walker, David Halliday, Robert Resnick</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const OffcanvasMenu = {\n args: {\n enableOffcanvas: true,\n },\n render: (args) =>\n html`<z-app-header\n .enableOffcanvas=${args.enableOffcanvas}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n .enableZLogo=${args.enableZLogo}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const Stuck = {\n decorators: [\n (Story) => html`\n <div style=\"padding: 16px var(--grid-margin)\">Scroll to see <code>stuck</code> prop in action.</div>\n <div style=\"height: 200vh\">${Story()}</div>\n `,\n ],\n parameters: {\n docs: {\n inlineStories: false,\n iframeHeight: \"400px\",\n },\n controls: {\n exclude: [\"enableOffcanvas\"],\n },\n },\n render: (args) =>\n html`<z-app-header\n stuck\n .enableZLogo=${args.enableZLogo}\n .enableSearch=${args.enableSearch}\n .searchPageUrl=${args.searchPageUrl}\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}; --app-header-top-offset: 0\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n\nexport const SearchPageButton = {\n parameters: {\n controls: {\n exclude: [\"searchPageUrl\", \"enableSearch\", \"enableOffcanvas\"],\n },\n },\n decorators: [\n (Story) => html`\n <div style=\"padding: 16px var(--grid-margin)\">\n The prop <code>searchPageUrl</code> only affects the component in tablet and mobile viewports.\n </div>\n ${Story()}\n `,\n ],\n render: (args) =>\n html`<z-app-header\n enable-search\n .enableZLogo=${args.enableZLogo}\n search-page-url=\"https://www.zanichelli.it\"\n style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n >\n <h1 slot=\"title\">Applicazione</h1>\n <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n ${menuTemplate()}\n </z-app-header>`,\n} satisfies Story;\n"]}