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/deprecated/z-app-header-deprecated/index.stories.js ADDED Viewed

@@ -0,0 +1,635 @@
+import { html } from "lit";
+import "../z-menu-deprecated/index";
+import "../z-menu-section-deprecated/index";
+import "./index";
+import "./index.stories.css";
+const StoryMeta = {
+    title: "Deprecated/ZAppHeaderDeprecated",
+    component: "z-app-header-deprecated",
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {
+        flow: {
+            control: {
+                type: "inline-radio",
+            },
+            options: ["auto", "stack", "offcanvas"],
+        },
+    },
+    args: {
+        "--app-header-content-max-width": "100%",
+        "enableSearch": false,
+        "searchPageUrl": "",
+        "flow": "auto",
+    },
+};
+export default StoryMeta;
+const menuTemplate = () => {
+    return html `
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <a href>Menu label</a>
+    </z-menu-deprecated>
+  `;
+};
+const longMenuTemplate = () => {
+    return html `
+    <z-menu-deprecated
+      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-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+    <z-menu-deprecated
+      slot="menu"
+      floating
+    >
+      <h3>Menu label</h3>
+      <a
+        href=""
+        slot="item"
+        >Item 1</a
+      >
+      <a
+        href=""
+        slot="item"
+        >Item 2</a
+      >
+      <z-menu-section-deprecated 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-deprecated>
+      <z-menu-section-deprecated 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-deprecated>
+      <a
+        href=""
+        slot="item"
+        >Item 5</a
+      >
+    </z-menu-deprecated>
+  `;
+};
+export const Title = {
+    parameters: {
+        controls: {
+            exclude: ["flow"],
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      .enableSearch=${args.enableSearch}
+      .searchPageUrl=${args.searchPageUrl}
+      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
+    >
+      <h1 slot="title">Applicazione</h1>
+    </z-app-header-deprecated>`,
+};
+export const Subtitle = {
+    parameters: {
+        controls: {
+            exclude: ["flow"],
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      .enableSearch=${args.enableSearch}
+      .searchPageUrl=${args.searchPageUrl}
+      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
+    >
+      <h1 slot="title">Applicazione</h1>
+      <h2 slot="subtitle">Payoff dell'applicazione</h2>
+    </z-app-header-deprecated>`,
+};
+export const TopSubtitle = {
+    parameters: {
+        controls: {
+            exclude: ["flow"],
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      .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>
+    </z-app-header-deprecated>`,
+};
+export const Menu = {
+    render: (args) => html `<z-app-header-deprecated
+      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</h1>
+      <h2 slot="subtitle">Payoff dell'applicazione</h2>
+      ${menuTemplate()}
+    </z-app-header-deprecated>`,
+};
+export const LongTitle = {
+    render: (args) => html `<z-app-header-deprecated
+      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>
+      ${menuTemplate()}
+    </z-app-header-deprecated>`,
+};
+export const VeryLongMenu = {
+    render: (args) => html `<z-app-header-deprecated
+      .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-deprecated>`,
+};
+export const OffcanvasMenu = {
+    parameters: {
+        controls: {
+            exclude: ["flow"],
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      flow="offcanvas"
+      .enableSearch=${args.enableSearch}
+      .searchPageUrl=${args.searchPageUrl}
+      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-deprecated>`,
+};
+export const Stuck = {
+    decorators: [
+        (Story) => html `
+      <div style="padding: 16px var(--grid-margin)">Scroll to see <code>stuck</code> prop in action.</div>
+      <div style="height: 200vh">${Story()}</div>
+    `,
+    ],
+    parameters: {
+        docs: {
+            inlineStories: false,
+            iframeHeight: "400px",
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      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-deprecated>`,
+};
+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",
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      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>
+      ${menuTemplate()}
+    </z-app-header-deprecated>`,
+};
+export const CoverHeroWithSlottedImage = {
+    args: {
+        overlay: true,
+        hero: "",
+    },
+    render: (args) => html `<z-app-header-deprecated
+      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-deprecated>`,
+};
+export const Searchbar = {
+    parameters: {
+        controls: {
+            exclude: ["searchPageUrl", "enableSearch"],
+        },
+    },
+    render: (args) => html `<z-app-header-deprecated
+      flow=${args.flow}
+      enable-search
+      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
+    >
+      <h1 slot="title">Applicazione</h1>
+      <h2 slot="subtitle">Payoff dell'applicazione</h2>
+      ${menuTemplate()}
+    </z-app-header-deprecated>`,
+};
+export const SearchPageButton = {
+    parameters: {
+        controls: {
+            exclude: ["searchPageUrl", "enableSearch"],
+        },
+    },
+    decorators: [
+        (Story) => html `
+      <div style="padding: 16px var(--grid-margin)">
+        The prop <code>searchPageUrl</code> only affects the component in tablet and mobile viewports.
+      </div>
+      ${Story()}
+    `,
+    ],
+    render: (args) => html `<z-app-header-deprecated
+      flow=${args.flow}
+      enable-search
+      search-page-url="https://www.zanichelli.it"
+      style="--app-header-content-max-width: ${args["--app-header-content-max-width"]}"
+    >
+      <h1 slot="title">Applicazione</h1>
+      <h2 slot="subtitle">Payoff dell'applicazione</h2>
+      ${menuTemplate()}
+    </z-app-header-deprecated>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/deprecated/z-app-header-deprecated/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {ZAppHeaderDeprecated} from \".\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../z-menu-deprecated/index\";\nimport \"../z-menu-section-deprecated/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZAppHeaderDeprecatedStoriesArgs = ZAppHeaderDeprecated & CSSVarsArguments<\"app-header-content-max-width\">;\n\nconst StoryMeta = {\n title: \"Deprecated/ZAppHeaderDeprecated\",\n component: \"z-app-header-deprecated\",\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<ZAppHeaderDeprecatedStoriesArgs>;\n\nexport default StoryMeta;\n\nconst menuTemplate = (): TemplateResult => {\n return html`\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\n slot=\"menu\"\n floating\n >\n <a href>Menu label</a>\n </z-menu-deprecated>\n `;\n};\n\nconst longMenuTemplate = (): TemplateResult => {\n return html`\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n <z-menu-deprecated\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-deprecated 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-deprecated>\n <z-menu-section-deprecated 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-deprecated>\n <a\n href=\"\"\n slot=\"item\"\n >Item 5</a\n >\n </z-menu-deprecated>\n `;\n};\n\ntype Story = Meta<ZAppHeaderDeprecatedStoriesArgs>;\n\nexport const Title = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const Subtitle = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const TopSubtitle = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const Menu = {\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const LongTitle = {\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const VeryLongMenu = {\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const OffcanvasMenu = {\n parameters: {\n controls: {\n exclude: [\"flow\"],\n },\n },\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\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-deprecated\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-deprecated>`,\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-deprecated\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-deprecated>`,\n} satisfies Story;\n\nexport const CoverHeroWithSlottedImage = {\n args: {\n overlay: true,\n hero: \"\",\n },\n render: (args) =>\n html`<z-app-header-deprecated\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-deprecated>`,\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-deprecated\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-deprecated>`,\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-deprecated\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-deprecated>`,\n} satisfies Story;\n"]}