@zanichelli/albe-web-components 19.2.12-rc2 → 19.2.12

package/dist/collection/components/z-modal/index.stories.js

@@ -1,201 +0,0 @@
-import { html } from "lit";
-import "../date-picker/z-date-picker/index";
-import "../z-button/index";
-import "../z-select/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZModal",
-    component: "z-modal",
-    args: {
-        "modalid": "my-modal",
-        "modaltitle": "My modal title",
-        "modalsubtitle": "My modal subtitle",
-        "closeButtonLabel": "chiudi modale",
-        "alertdialog": false,
-        "closable": true,
-        "scrollInside": true,
-        "lockPageScroll": true,
-        "--z-modal-content-padding": "calc(var(--space-unit) * 2)",
-    },
-    decorators: [
-        (Story) => html `
-      <script>
-        function openZModal() {
-          document.querySelector("z-modal").open();
-        }
-        function closeZModal() {
-          document.querySelector("z-modal").close();
-        }
-      </script>
-      ${Story()}
-    `,
-    ],
-};
-export default StoryMeta;
-export const ShortText = {
-    args: {
-        modalid: "my-modal-short",
-    },
-    render: (args) => html `
-    <z-modal
-      modalid=${args.modalid}
-      modaltitle=${args.modaltitle}
-      modalsubtitle=${args.modalsubtitle}
-      close-button-label=${args.closeButtonLabel}
-      alertdialog=${args.alertdialog}
-      closable=${args.closable}
-      scroll-inside=${args.scrollInside}
-      lock-page-scroll=${args.lockPageScroll}
-      style="--z-modal-content-padding: ${args["--z-modal-content-padding"]}"
-    >
-      <div slot="modalContent">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <br />
-        <z-button onclick="closeZModal()">close</z-button>
-      </div>
-    </z-modal>
-    <z-button onclick="openZModal()">apri modale</z-button>
-  `,
-};
-export const LongText = {
-    args: {
-        modalid: "my-modal-long",
-    },
-    render: (args) => html `
-    <z-modal
-      modalid=${args.modalid}
-      modaltitle=${args.modaltitle}
-      modalsubtitle=${args.modalsubtitle}
-      close-button-label=${args.closeButtonLabel}
-      alertdialog=${args.alertdialog}
-      closable=${args.closable}
-      scroll-inside=${args.scrollInside}
-      lock-page-scroll=${args.lockPageScroll}
-      style="--z-modal-content-padding: ${args["--z-modal-content-padding"]}"
-    >
-      <div slot="modalContent">
-        <z-date-picker
-          date-picker-id="date-picker-1"
-          ariaLabel="stringaQualsiasi"
-          label="label"
-        ></z-date-picker>
-        Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in
-        Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne
-        ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,
-        orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae
-        volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.
-        Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec
-        honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te
-        enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset
-        inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae
-        superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare
-        sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio
-        quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad
-        animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis
-        ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,
-        inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil
-        enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem
-        ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui
-        dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita
-        summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,
-        torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec
-        vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,
-        inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae
-        dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem
-        aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,
-        inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori
-        sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent
-        tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum
-        anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,
-        falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et
-        adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit
-        Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc
-        differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor
-        sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit
-        amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere
-        quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum
-        dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur
-        eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum
-        nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,
-        et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,
-        praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum
-        puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum
-        quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae
-        conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et
-        nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?
-        Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod
-        negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi
-        perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,
-        quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.
-        Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.
-        <z-select
-          items='[{"id":"item_1","name":"first item","selected":false},{"id":"item_2","name":"second item","selected":true},{"id":"item_3","name":"disabled item","selected":false,"disabled":true},{"id":"item_4","name":"fourth item","selected":false}]'
-          label="this is the label"
-          aria-label=""
-          placeholder="select placeholder"
-          name=""
-          status="-"
-          message="helper text"
-          autocomplete="false"
-          noresultslabel="Nessun risultato"
-          disabled="false"
-          readonly="false"
-          htmlid=""
-          htmltitle=""
-          reset-item=""
-          isfixed="false"
-          size="big"
-        ></z-select>
-      </div>
-    </z-modal>
-    <z-button onclick="openZModal()">apri modale</z-button>
-  `,
-};

package/dist/collection/components/z-navigation-tabs/index.stories.js

@@ -1,190 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans/index";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-icon/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZNavigationTabs",
-    component: "z-navigation-tabs",
-    argTypes: {
-        "orientation": {
-            options: Object.values(NavigationTabsOrientation),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        "--z-navigation-tabs-nav-buttons-bg": getColorTokenArgConfig(),
-        "--z-navigation-tabs-nav-buttons-fg": getColorTokenArgConfig(),
-    },
-    args: {
-        "--z-navigation-tabs-nav-buttons-bg": undefined,
-        "--z-navigation-tabs-nav-buttons-fg": undefined,
-    },
-};
-export default StoryMeta;
-document.addEventListener("DOMContentLoaded", () => {
-    const tabs = document.querySelector("z-navigation-tabs");
-    tabs === null || tabs === void 0 ? void 0 : tabs.addEventListener("selected", ({ detail: selectedTab }) => {
-        var _a, _b;
-        const controlledPanel = (_b = (_a = tabs.querySelectorAll('[role="tab"]')) === null || _a === void 0 ? void 0 : _a[selectedTab]) === null || _b === void 0 ? void 0 : _b.getAttribute("aria-controls");
-        const panels = Array.from(document.querySelectorAll('[role="tabpanel"]'));
-        panels.forEach((panel) => (panel.hidden = true));
-        const panelToActivate = panels.find((panel) => panel.id === controlledPanel);
-        if (panelToActivate) {
-            panelToActivate.hidden = false;
-        }
-    });
-});
-const tabsTemplate = () => html `<button>
-      <z-icon name="house"></z-icon>
-      <span>Home</span>
-    </button>
-    <button>
-      <z-icon name="map"></z-icon>
-      <span>Maps</span>
-    </button>
-    <button disabled>
-      <z-icon name="download"></z-icon>
-      <span>Download</span>
-    </button>
-    <button>
-      <z-icon name="user-avatar"></z-icon>
-      <span>Users</span>
-    </button>
-    <button>
-      <z-icon name="artist"></z-icon>
-      <span>Artisti</span>
-    </button>
-    <a
-      href="https://www.google.com"
-      target="_blank"
-      title="Vai a Google"
-    >
-      <z-icon name="arrow-quad-north-east"></z-icon>
-      <span>Link esterno</span>
-    </a>`;
-export const Horizontal = {
-    argTypes: {
-        size: {
-            options: Object.values(NavigationTabsSize),
-            control: {
-                type: "inline-radio",
-            },
-        },
-    },
-    args: {
-        orientation: NavigationTabsOrientation.HORIZONTAL,
-        size: NavigationTabsSize.BIG,
-        ariaLabel: "",
-    },
-    parameters: {
-        controls: {
-            exclude: ["orientation"],
-        },
-    },
-    render: (args) => html `
-    <z-navigation-tabs
-      orientation=${args.orientation}
-      size=${args.size}
-      .ariaLabel=${args.ariaLabel}
-      style=${styleMap({
-        "--z-navigation-tabs-nav-buttons-bg": args["--z-navigation-tabs-nav-buttons-bg"],
-        "--z-navigation-tabs-nav-buttons-fg": args["--z-navigation-tabs-nav-buttons-fg"],
-    })}
-    >
-      ${tabsTemplate()}
-    </z-navigation-tabs>
-  `,
-};
-/**
- * When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.
- * Be sure to put an icon inside the tab to have something visible and don't forget to put an `aria-label` to provide a description for screen readers.
- */
-export const Vertical = {
-    args: {
-        orientation: NavigationTabsOrientation.VERTICAL,
-        ariaLabel: "",
-    },
-    parameters: {
-        controls: {
-            exclude: ["orientation"],
-        },
-    },
-    render: (args) => html `
-    <z-navigation-tabs
-      orientation=${args.orientation}
-      .ariaLabel=${args.ariaLabel}
-      style=${styleMap({
-        "--z-navigation-tabs-nav-buttons-bg": args["--z-navigation-tabs-nav-buttons-bg"],
-        "--z-navigation-tabs-nav-buttons-fg": args["--z-navigation-tabs-nav-buttons-fg"],
-    })}
-    >
-      ${tabsTemplate()}
-    </z-navigation-tabs>
-  `,
-};
-/**
- * This story provides an example of how to handle a `ZNavigationTabs` with switchable `tabpanel`s, which is the most common use for the navigation tabs.
- * Each panel must have the `tabpanel` role and the `aria-labelledby` attribute, referencing the tab that controls it (unless a different label is provided using `aria-label`).
- * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.
- *
- * For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\_role
- */
-export const Tabpanels = {
-    args: {
-        ariaLabel: "",
-        orientation: NavigationTabsOrientation.HORIZONTAL,
-    },
-    render: (args) => html `
-    <div class="panels-story-wrapper ${args.orientation}">
-      <z-navigation-tabs
-        orientation=${args.orientation}
-        size=${NavigationTabsSize.BIG}
-        .ariaLabel=${args.ariaLabel}
-        .selectedTab=${0}
-        style=${styleMap({
-        "--z-navigation-tabs-nav-buttons-bg": args["--z-navigation-tabs-nav-buttons-bg"],
-        "--z-navigation-tabs-nav-buttons-fg": args["--z-navigation-tabs-nav-buttons-fg"],
-    })}
-      >
-        <button
-          aria-controls="panel-1"
-          aria-label="home"
-          id="tab-1"
-        >
-          <z-icon name="house" />
-          <span>Home</span>
-        </button>
-        <button
-          aria-controls="panel-2"
-          aria-label="info"
-          id="tab-2"
-        >
-          <z-icon name="info" />
-          <span>Info</span>
-        </button>
-      </z-navigation-tabs>
-      <div
-        class="panel"
-        id="panel-1"
-        role="tabpanel"
-        aria-labelledby="tab-1"
-      >
-        <span>Pannello 1</span>
-        <span><z-icon name="house-filled" /></span>
-      </div>
-      <div
-        class="panel"
-        id="panel-2"
-        role="tabpanel"
-        aria-labelledby="tab-2"
-        hidden
-      >
-        <span>Pannello 2</span>
-        <span><z-icon name="info-filled" /></span>
-      </div>
-    </div>
-  `,
-};

package/dist/collection/components/z-notification/index.stories.js

@@ -1,174 +0,0 @@
-import { html } from "lit";
-import { NotificationType } from "../../beans";
-import "./index";
-import "./index.stories.css";
-const DEMO_LONG_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum. Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie, justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget. Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna, pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod, tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget. Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est, non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor, elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.";
-const StoryMeta = {
-    title: "ZNotification",
-    component: "z-notification",
-    argTypes: {
-        type: {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(NotificationType),
-        },
-        borderposition: {
-            control: {
-                type: "inline-radio",
-            },
-            options: ["top", "bottom"],
-        },
-    },
-    args: {
-        "--z-notification--content-max-width": "100%",
-        "contenticonname": "checkmark-circle-filled",
-        "borderposition": "bottom",
-        "actiontext": "Annulla",
-        "showclose": false,
-        "sticky": false,
-        "type": NotificationType.SUCCESS,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-notification
-      .contenticonname=${args.contenticonname}
-      .actiontext=${args.actiontext}
-      .type=${args.type}
-      .showclose=${args.showclose}
-      .sticky=${args.sticky}
-      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-    >
-      <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
-    </z-notification>
-  `,
-};
-export const LongText = {
-    render: (args) => html `
-    <z-notification
-      .contenticonname=${args.contenticonname}
-      .actiontext=${args.actiontext}
-      .type=${args.type}
-      .showclose=${args.showclose}
-      .sticky=${args.sticky}
-      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-    >
-      <div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
-        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
-        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis
-        augue turpis, eu consectetur purus consectetur vitae.
-      </div>
-    </z-notification>
-  `,
-};
-export const StickyBanner = {
-    args: {
-        "--z-notification--top-offset": "0",
-    },
-    parameters: {
-        controls: {
-            exclude: ["sticky"],
-        },
-    },
-    render: (args) => html `
-    <div class="banner-notification-demo">
-      <z-notification
-        .contenticonname=${args.contenticonname}
-        .actiontext=${args.actiontext}
-        .type=${args.type}
-        .showclose=${args.showclose}
-        .sticky="true"
-        style="--z-notification--top-offset: ${args["--z-notification--top-offset"]}; --z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-      >
-        Questo è il testo della notifica
-      </z-notification>
-      <div class="heading-1-sb">Titolo della pagina</div>
-      <div class="body-1">${DEMO_LONG_TEXT}</div>
-    </div>
-  `,
-};
-export const CenteredContent = {
-    args: {
-        "--z-notification--content-max-width": "768px",
-    },
-    render: (args) => html `
-    <z-notification
-      .contenticonname=${args.contenticonname}
-      .actiontext=${args.actiontext}
-      .type=${args.type}
-      .showclose=${args.showclose}
-      .sticky=${args.sticky}
-      .borderposition=${args.borderposition}
-      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-    >
-      <div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
-        Curabitur volutpat mi purus, in maximus nisl volutpat quis.
-      </div>
-    </z-notification>
-    <div
-      class="z-notification-demo-page"
-      style="max-width: ${args["--z-notification--content-max-width"]}"
-    >
-      <div class="heading-1">Titolo della pagina</div>
-      <div class="body-1">${DEMO_LONG_TEXT}</div>
-    </div>
-  `,
-};
-/**
- * To have an inline notification keep the `sticky` property set to `false`.
- */
-export const Inline = {
-    parameters: {
-        controls: {
-            exclude: ["sticky"],
-        },
-    },
-    render: (args) => html `
-    <div class="inline-notification-demo">
-      <z-notification
-        .contenticonname=${args.contenticonname}
-        .actiontext=${args.actiontext}
-        .type=${args.type}
-        .showclose=${args.showclose}
-        .sticky="false"
-        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-      >
-        Questo è il testo della notifica
-      </z-notification>
-      <div class="content">
-        <div class="heading-1">Titolo della scheda</div>
-        <div class="body-1">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
-          Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.
-        </div>
-      </div>
-    </div>
-  `,
-};
-/**
- * The position of the border can be changed to correctly display the notification when put on the bottom of the screen.
- */
-export const BorderPosition = {
-    args: {
-        borderposition: "top",
-    },
-    render: (args) => html `
-    <div class="z-notification-border-position-demo">
-      <z-notification
-        .contenticonname=${args.contenticonname}
-        .actiontext=${args.actiontext}
-        .type=${args.type}
-        .showclose=${args.showclose}
-        .sticky=${args.sticky}
-        .borderposition=${args.borderposition}
-        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
-      >
-        <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
-      </z-notification>
-    </div>
-  `,
-};