npm - @zanichelli/albe-web-components - Versions diffs - 16.4.0-rc-2 → 16.4.0 - Mend

@zanichelli/albe-web-components 16.4.0-rc-2 → 16.4.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 (258) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-modal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,gBAAgB;QAC9B,eAAe,EAAE,mBAAmB;QACpC,kBAAkB,EAAE,eAAe;QACnC,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;QASX,KAAK,EAAE;KACV;KACF;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;0CACG,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;GASxE;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;0CACG,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HxE;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZModal} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../date-picker/z-date-picker/index\";\nimport \"../z-button/index\";\nimport \"../z-select/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZSearchbarStoriesArgs = ZModal & CSSVarsArguments<\"--z-modal-content-padding\">;\n\nconst StoryMeta = {\n title: \"ZModal\",\n component: \"z-modal\",\n args: {\n \"modalid\": \"my-modal\",\n \"modaltitle\": \"My modal title\",\n \"modalsubtitle\": \"My modal subtitle\",\n \"closeButtonLabel\": \"chiudi modale\",\n \"alertdialog\": false,\n \"closable\": true,\n \"scrollInside\": true,\n \"--z-modal-content-padding\": \"var(--space-unit)\",\n },\n decorators: [\n (Story) => html`\n <script>\n function openZModal() {\n document.querySelector(\"z-modal\").open();\n }\n function closeZModal() {\n document.querySelector(\"z-modal\").close();\n }\n </script>\n ${Story()}\n `,\n ],\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZModal>;\n\nexport const ShortText = {\n args: {\n modalid: \"my-modal-short\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n <br />\n <z-button onclick=\"closeZModal()\">close</z-button>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n\nexport const LongText = {\n args: {\n modalid: \"my-modal-long\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n <z-date-picker\n date-picker-id=\"date-picker-1\"\n ariaLabel=\"stringaQualsiasi\"\n label=\"label\"\n ></z-date-picker>\n Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne\n ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,\n orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae\n volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.\n Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec\n honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te\n enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset\n inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae\n superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare\n sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio\n quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad\n animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis\n ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,\n inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil\n enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem\n ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui\n dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec\n vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,\n inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae\n dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem\n aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,\n inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori\n sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent\n tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum\n anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,\n falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et\n adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit\n Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc\n differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor\n sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.\n <z-select\n 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}]'\n label=\"this is the label\"\n aria-label=\"\"\n placeholder=\"select placeholder\"\n name=\"\"\n status=\"-\"\n message=\"helper text\"\n autocomplete=\"false\"\n noresultslabel=\"Nessun risultato\"\n disabled=\"false\"\n readonly=\"false\"\n htmlid=\"\"\n htmltitle=\"\"\n reset-item=\"\"\n isfixed=\"false\"\n size=\"big\"\n ></z-select>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,gBAAgB;QAC9B,eAAe,EAAE,mBAAmB;QACpC,kBAAkB,EAAE,eAAe;QACnC,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;QASX,KAAK,EAAE;KACV;KACF;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;0CACG,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;GASxE;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;0CACG,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HxE;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZModal} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../date-picker/z-date-picker/index\";\nimport \"../z-button/index\";\nimport \"../z-select/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZSearchbarStoriesArgs = ZModal & CSSVarsArguments<\"--z-modal-content-padding\">;\n\nconst StoryMeta = {\n title: \"ZModal\",\n component: \"z-modal\",\n args: {\n \"modalid\": \"my-modal\",\n \"modaltitle\": \"My modal title\",\n \"modalsubtitle\": \"My modal subtitle\",\n \"closeButtonLabel\": \"chiudi modale\",\n \"alertdialog\": false,\n \"closable\": true,\n \"scrollInside\": true,\n \"--z-modal-content-padding\": \"var(--space-unit)\",\n },\n decorators: [\n (Story) => html`\n <script>\n function openZModal() {\n document.querySelector(\"z-modal\").open();\n }\n function closeZModal() {\n document.querySelector(\"z-modal\").close();\n }\n </script>\n ${Story()}\n `,\n ],\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZModal>;\n\nexport const ShortText = {\n args: {\n modalid: \"my-modal-short\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n <br />\n <z-button onclick=\"closeZModal()\">close</z-button>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n\nexport const LongText = {\n args: {\n modalid: \"my-modal-long\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n <z-date-picker\n date-picker-id=\"date-picker-1\"\n ariaLabel=\"stringaQualsiasi\"\n label=\"label\"\n ></z-date-picker>\n Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne\n ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,\n orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae\n volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.\n Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec\n honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te\n enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset\n inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae\n superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare\n sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio\n quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad\n animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis\n ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,\n inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil\n enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem\n ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui\n dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec\n vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,\n inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae\n dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem\n aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,\n inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori\n sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent\n tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum\n anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,\n falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et\n adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit\n Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc\n differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor\n sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.\n <z-select\n 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}]'\n label=\"this is the label\"\n aria-label=\"\"\n placeholder=\"select placeholder\"\n name=\"\"\n status=\"-\"\n message=\"helper text\"\n autocomplete=\"false\"\n noresultslabel=\"Nessun risultato\"\n disabled=\"false\"\n readonly=\"false\"\n htmlid=\"\"\n htmltitle=\"\"\n reset-item=\"\"\n isfixed=\"false\"\n size=\"big\"\n ></z-select>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-navigation-tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/*\n Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n /\n@Component({\n tag: \"z-navigation-tabs\",\n styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n /\n Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n /\n @Prop()\n ariaLabel = \"\";\n\n /\n Navigation tabs orientation.\n /\n @Prop({reflect: true})\n orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n /\n Navigation tabs size.\n /\n @Prop({reflect: true})\n size? = NavigationTabsSize.BIG;\n\n /\n Index of the selected tab.\n * Useful to programmatically select a tab.\n * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n /\n @Prop({mutable: true})\n selectedTab: number = undefined;\n\n /\n Emitted when the selected tab changes.\n * Contains the index of the new selected tab in the `detail` of the event.\n /\n @Event()\n selected: EventEmitter<number>;\n\n /\n Whether to show navigation buttons.\n /\n @State()\n canNavigate: boolean;\n\n /\n Whether backwards navigation is allowed.\n /\n @State()\n canNavigatePrev: boolean;\n\n /\n Whether forward navigation is allowed.\n /\n @State()\n canNavigateNext: boolean;\n\n @Element() host: HTMLZNavigationTabsElement;\n\n /\n Index of the last tab that held focus.\n /\n private focusedTab = undefined;\n\n /\n Reference to the `<nav>` element\n /\n private nav: HTMLElement;\n\n /\n Getter for the direction to check based on current orientation.\n /\n get direction(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n }\n\n /\n Getter for the dimension to check based on current orientation.\n /\n get dimension(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n }\n\n get tabs(): HTMLElement[] {\n return Array.from(this.nav.children) as HTMLElement[];\n }\n\n private resizeObserver: ResizeObserver;\n\n /\n Scroll into view to center the tab.\n /\n private scrollToTab(tabElement: HTMLElement): void {\n const scrollOptions = (\n this.orientation === NavigationTabsOrientation.HORIZONTAL\n ? {block: \"nearest\", inline: \"center\"}\n : {block: \"center\", inline: \"nearest\"}\n ) as ScrollIntoViewOptions;\n\n tabElement.scrollIntoView({\n behavior: \"smooth\",\n ...scrollOptions,\n });\n }\n\n /\n Scroll the navigation bar half of its size backward.\n /\n private navigateBackwards(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Scroll the navigation bar half of its size forward.\n /\n private navigateForward(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if a keyboard event was triggered by an arrow key.\n /\n private isArrowNavigation(e: KeyboardEvent): boolean {\n return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n }\n\n /\n Check if the navigation buttons are needed.\n /\n private checkScrollVisible(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n }\n\n /\n Check if navigation buttons can be enabled for each direction.\n /\n @Watch(\"canNavigate\")\n checkScrollEnabled(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigateNext =\n this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n }\n\n /\n When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n /\n @Watch(\"selectedTab\")\n onTabSelected(): void {\n this.tabs.forEach((tab, i) => {\n const zicon = tab.querySelector(\"z-icon\");\n const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n if (zicon) {\n zicon.name = strokeIcon;\n }\n\n return;\n }\n\n if (zicon) {\n zicon.name = `${strokeIcon}-filled`;\n }\n tab.setAttribute(\"aria-selected\", \"true\");\n });\n this.selected.emit(this.selectedTab);\n if (this.selectedTab !== undefined) {\n this.scrollToTab(this.tabs[this.selectedTab]);\n }\n }\n\n /\n Handle click on the tabs.\n * @param event `click` event triggered by a child tab\n /\n @Listen(\"click\")\n handleTabClick(event: MouseEvent): void {\n const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n if (!this.tabs.some((child) => child.contains(clickedTab))) {\n return;\n }\n\n this.selectedTab = this.tabs.indexOf(clickedTab);\n }\n\n /\n When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n /\n @Listen(\"focusin\")\n onTabFocusIn(event: FocusEvent): void {\n const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n if (focused === -1) {\n return;\n }\n\n if (this.selectedTab !== undefined) {\n this.tabs[this.selectedTab].tabIndex = -1;\n }\n this.focusedTab = focused;\n this.tabs[this.focusedTab].tabIndex = -1;\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n Handle keyboard navigation through tabs with arrow keys.\n /\n @Listen(\"keydown\")\n navigateThroughTabs(event: KeyboardEvent): void \| boolean {\n if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) \|\| !this.isArrowNavigation(event)) {\n return true;\n }\n\n event.preventDefault();\n if (\n (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move forward\n this.focusedTab++;\n if (this.focusedTab >= this.tabs.length) {\n this.focusedTab = 0;\n }\n } else if (\n (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move backward\n this.focusedTab--;\n if (this.focusedTab < 0) {\n this.focusedTab = this.tabs.length - 1;\n }\n }\n // Ignore disabled tabs\n if (\n this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n ) {\n return this.navigateThroughTabs(event);\n }\n\n this.tabs[this.focusedTab].focus();\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n */\n @Listen(\"focusout\")\n onTabFocusOut(event: FocusEvent): void {\n if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n this.focusedTab = undefined;\n }\n }\n\n connectedCallback(): void {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n }\n\n componentDidLoad(): void {\n // Set role and tabindex to each slotted tab\n this.tabs.forEach((tab) => {\n tab.setAttribute(\"role\", \"tab\");\n tab.tabIndex = -1;\n });\n\n const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n if (preselectedTab !== -1) {\n this.selectedTab = preselectedTab;\n this.tabs[preselectedTab].tabIndex = 0;\n this.onTabSelected();\n } else {\n this.tabs[0].tabIndex = 0;\n }\n\n this.resizeObserver.observe(this.nav);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZNavigationTabsElement {\n return (\n <Host\n class={{\n \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n }}\n scrollable={this.canNavigate}\n >\n <button\n class=\"navigation-button\"\n onClick={this.navigateBackwards.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigatePrev}\n aria-label=\"Mostra elementi precedenti\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n </button>\n\n <nav\n role=\"tablist\"\n aria-label={this.ariaLabel}\n ref={(el) => (this.nav = el ?? this.nav)}\n onScroll={this.checkScrollEnabled.bind(this)}\n aria-orientation={this.orientation}\n >\n <slot></slot>\n </nav>\n\n <button\n class=\"navigation-button\"\n onClick={this.navigateForward.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigateNext}\n aria-label=\"Mostra elementi successivi\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n width={16}\n height={16}\n />\n </button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-navigation-tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {NavigationTabsKeyboardEvents, NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\n\n/*\n Navigation tabs component.\n * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.\n * @slot - Main slot. Use `<button>` or `<a>` tags as children.\n * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.\n * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.\n /\n@Component({\n tag: \"z-navigation-tabs\",\n styleUrl: \"styles.css\",\n})\nexport class ZNavigationTabs {\n /\n Set `aria-label` attribute to the internal `<nav>` element with `tablist` role.\n /\n @Prop()\n ariaLabel = \"\";\n\n /\n Navigation tabs orientation.\n /\n @Prop({reflect: true})\n orientation? = NavigationTabsOrientation.HORIZONTAL;\n\n /\n Navigation tabs size.\n /\n @Prop({reflect: true})\n size? = NavigationTabsSize.BIG;\n\n /\n Index of the selected tab.\n * Useful to programmatically select a tab.\n * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.\n /\n @Prop({mutable: true})\n selectedTab: number = undefined;\n\n /\n Emitted when the selected tab changes.\n * Contains the index of the new selected tab in the `detail` of the event.\n /\n @Event()\n selected: EventEmitter<number>;\n\n /\n Whether to show navigation buttons.\n /\n @State()\n canNavigate: boolean;\n\n /\n Whether backwards navigation is allowed.\n /\n @State()\n canNavigatePrev: boolean;\n\n /\n Whether forward navigation is allowed.\n /\n @State()\n canNavigateNext: boolean;\n\n @Element() host: HTMLZNavigationTabsElement;\n\n /\n Index of the last tab that held focus.\n /\n private focusedTab = undefined;\n\n /\n Reference to the `<nav>` element\n /\n private nav: HTMLElement;\n\n /\n Getter for the direction to check based on current orientation.\n /\n get direction(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Left\" : \"Top\";\n }\n\n /\n Getter for the dimension to check based on current orientation.\n /\n get dimension(): string {\n return this.orientation == NavigationTabsOrientation.HORIZONTAL ? \"Width\" : \"Height\";\n }\n\n get tabs(): HTMLElement[] {\n return Array.from(this.nav.children) as HTMLElement[];\n }\n\n private resizeObserver: ResizeObserver;\n\n /\n Scroll into view to center the tab.\n /\n private scrollToTab(tabElement: HTMLElement): void {\n const scrollOptions = (\n this.orientation === NavigationTabsOrientation.HORIZONTAL\n ? {block: \"nearest\", inline: \"center\"}\n : {block: \"center\", inline: \"nearest\"}\n ) as ScrollIntoViewOptions;\n\n tabElement.scrollIntoView({\n behavior: \"smooth\",\n ...scrollOptions,\n });\n }\n\n /\n Scroll the navigation bar half of its size backward.\n /\n private navigateBackwards(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Scroll the navigation bar half of its size forward.\n /\n private navigateForward(): void {\n this.nav.scrollBy({\n [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,\n behavior: \"smooth\",\n });\n }\n\n /\n Check if a keyboard event was triggered by an arrow key.\n /\n private isArrowNavigation(e: KeyboardEvent): boolean {\n return Object.values(NavigationTabsKeyboardEvents).includes(e.key as NavigationTabsKeyboardEvents);\n }\n\n /\n Check if the navigation buttons are needed.\n /\n private checkScrollVisible(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];\n }\n\n /\n Check if navigation buttons can be enabled for each direction.\n /\n @Watch(\"canNavigate\")\n checkScrollEnabled(): void {\n if (!this.nav) {\n return;\n }\n\n this.canNavigateNext =\n this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];\n this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;\n }\n\n /\n When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.\n /\n @Watch(\"selectedTab\")\n onTabSelected(): void {\n this.tabs.forEach((tab, i) => {\n const zicon = tab.querySelector(\"z-icon\");\n const strokeIcon = zicon?.name.replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n if (zicon) {\n zicon.name = strokeIcon;\n }\n\n return;\n }\n\n if (zicon) {\n zicon.name = `${strokeIcon}-filled`;\n }\n tab.setAttribute(\"aria-selected\", \"true\");\n });\n this.selected.emit(this.selectedTab);\n if (this.selectedTab !== undefined) {\n this.scrollToTab(this.tabs[this.selectedTab]);\n }\n }\n\n /\n Handle click on the tabs.\n * @param event `click` event triggered by a child tab\n /\n @Listen(\"click\")\n handleTabClick(event: MouseEvent): void {\n const clickedTab = (event.target as HTMLElement).closest<HTMLElement>(\"[role='tab']\");\n if (!this.tabs.some((child) => child.contains(clickedTab))) {\n return;\n }\n\n this.selectedTab = this.tabs.indexOf(clickedTab);\n }\n\n /\n When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.\n /\n @Listen(\"focusin\")\n onTabFocusIn(event: FocusEvent): void {\n const focused = this.tabs.findIndex((tab) => tab.contains(event.target as HTMLElement));\n if (focused === -1) {\n return;\n }\n\n if (this.selectedTab !== undefined) {\n this.tabs[this.selectedTab].tabIndex = -1;\n }\n this.focusedTab = focused;\n this.tabs[this.focusedTab].tabIndex = -1;\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n Handle keyboard navigation through tabs with arrow keys.\n /\n @Listen(\"keydown\")\n navigateThroughTabs(event: KeyboardEvent): void \| boolean {\n if (!this.tabs.some((tab) => tab.contains(event.target as HTMLElement)) \|\| !this.isArrowNavigation(event)) {\n return true;\n }\n\n event.preventDefault();\n if (\n (event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move forward\n this.focusedTab++;\n if (this.focusedTab >= this.tabs.length) {\n this.focusedTab = 0;\n }\n } else if (\n (event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) \|\|\n (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)\n ) {\n // Move backward\n this.focusedTab--;\n if (this.focusedTab < 0) {\n this.focusedTab = this.tabs.length - 1;\n }\n }\n // Ignore disabled tabs\n if (\n this.tabs[this.focusedTab].hasAttribute(\"disabled\") &&\n this.tabs[this.focusedTab].getAttribute(\"disabled\") !== \"false\"\n ) {\n return this.navigateThroughTabs(event);\n }\n\n this.tabs[this.focusedTab].focus();\n this.scrollToTab(this.tabs[this.focusedTab]);\n }\n\n /\n If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.\n */\n @Listen(\"focusout\")\n onTabFocusOut(event: FocusEvent): void {\n if (!this.tabs.some((tab) => tab.contains(event.relatedTarget as HTMLElement))) {\n this.tabs[this.selectedTab ?? 0].tabIndex = 0;\n this.focusedTab = undefined;\n }\n }\n\n connectedCallback(): void {\n this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());\n }\n\n componentDidLoad(): void {\n // Set role and tabindex to each slotted tab\n this.tabs.forEach((tab) => {\n tab.setAttribute(\"role\", \"tab\");\n tab.tabIndex = -1;\n });\n\n const preselectedTab = this.selectedTab ?? this.tabs.findIndex((tab) => tab.ariaSelected === \"true\");\n if (preselectedTab !== -1) {\n this.selectedTab = preselectedTab;\n this.tabs[preselectedTab].tabIndex = 0;\n this.onTabSelected();\n } else {\n this.tabs[0].tabIndex = 0;\n }\n\n this.resizeObserver.observe(this.nav);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZNavigationTabsElement {\n return (\n <Host\n class={{\n \"interactive-2\": this.size === NavigationTabsSize.SMALL,\n \"interactive-1\": this.size !== NavigationTabsSize.SMALL,\n }}\n scrollable={this.canNavigate}\n >\n <button\n class=\"navigation-button\"\n onClick={this.navigateBackwards.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigatePrev}\n aria-label=\"Mostra elementi precedenti\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-left\" : \"chevron-up\"}\n width={16}\n height={16}\n />\n </button>\n\n <nav\n role=\"tablist\"\n aria-label={this.ariaLabel}\n ref={(el) => (this.nav = el ?? this.nav)}\n onScroll={this.checkScrollEnabled.bind(this)}\n aria-orientation={this.orientation}\n >\n <slot></slot>\n </nav>\n\n <button\n class=\"navigation-button\"\n onClick={this.navigateForward.bind(this)}\n tabIndex={-1}\n disabled={!this.canNavigateNext}\n aria-label=\"Mostra elementi successivi\"\n hidden={!this.canNavigate}\n >\n <z-icon\n name={this.orientation === NavigationTabsOrientation.HORIZONTAL ? \"chevron-right\" : \"chevron-down\"}\n width={16}\n height={16}\n />\n </button>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../~~src/components/z-navigation-tabs/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZNavigationTabs} from \".\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans/index\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNavigationTabsStoriesArgs = ZNavigationTabs &\n CSSVarsArguments<\"z-navigation-tabs-nav-buttons-bg\" \| \"z-navigation-tabs-nav-buttons-fg\">;\n\nconst StoryMeta = {\n title: \"ZNavigationTabs\",\n component: \"z-navigation-tabs\",\n argTypes: {\n \"orientation\": {\n options: Object.values(NavigationTabsOrientation),\n control: {\n type: \"inline-radio\",\n },\n },\n \"--z-navigation-tabs-nav-buttons-bg\": getColorTokenArgConfig(),\n \"--z-navigation-tabs-nav-buttons-fg\": getColorTokenArgConfig(),\n },\n args: {\n \"--z-navigation-tabs-nav-buttons-bg\": undefined,\n \"--z-navigation-tabs-nav-buttons-fg\": undefined,\n },\n} satisfies Meta<ZNavigationTabsStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNavigationTabsStoriesArgs>;\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const tabs = document.querySelector(\"z-navigation-tabs\");\n tabs?.addEventListener(\"selected\", ({detail: selectedTab}) => {\n const controlledPanel = tabs.querySelectorAll('[role=\"tab\"]')?.[selectedTab]?.getAttribute(\"aria-controls\");\n const panels = Array.from(document.querySelectorAll('[role=\"tabpanel\"]'));\n panels.forEach((panel: HTMLElement) => (panel.hidden = true));\n const panelToActivate = panels.find((panel) => panel.id === controlledPanel) as HTMLElement;\n if (panelToActivate) {\n panelToActivate.hidden = false;\n }\n });\n});\n\nconst tabsTemplate = (): TemplateResult =>\n html`<button>\n <z-icon name=\"house\"></z-icon>\n <span>Home</span>\n </button>\n <button>\n <z-icon name=\"map\"></z-icon>\n <span>Maps</span>\n </button>\n <button disabled>\n <z-icon name=\"download\"></z-icon>\n <span>Download</span>\n </button>\n <button>\n <z-icon name=\"user-avatar\"></z-icon>\n <span>Users</span>\n </button>\n <button>\n <z-icon name=\"artist\"></z-icon>\n <span>Artisti</span>\n </button>\n <a\n href=\"https://www.google.com\"\n target=\"_blank\"\n title=\"Vai a Google\"\n >\n <z-icon name=\"arrow-quad-north-east\"></z-icon>\n <span>Link esterno</span>\n </a>`;\n\nexport const Horizontal = {\n argTypes: {\n size: {\n options: Object.values(NavigationTabsSize),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n orientation: NavigationTabsOrientation.HORIZONTAL,\n size: NavigationTabsSize.BIG,\n ariaLabel: \"\",\n },\n parameters: {\n controls: {\n exclude: [\"orientation\"],\n },\n },\n render: (args) => html`\n <z-navigation-tabs\n orientation=${args.orientation}\n size=${args.size}\n .ariaLabel=${args.ariaLabel}\n style=${styleMap({\n \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n })}\n >\n ${tabsTemplate()}\n </z-navigation-tabs>\n `,\n} satisfies Story;\n\n/*\n When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.\n * 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.\n /\nexport const Vertical = {\n args: {\n orientation: NavigationTabsOrientation.VERTICAL,\n ariaLabel: \"\",\n },\n parameters: {\n controls: {\n exclude: [\"orientation\"],\n },\n },\n render: (args) => html`\n <z-navigation-tabs\n orientation=${args.orientation}\n .ariaLabel=${args.ariaLabel}\n style=${styleMap({\n \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n })}\n >\n ${tabsTemplate()}\n </z-navigation-tabs>\n `,\n} satisfies Story;\n\n/\n 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.\n * 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`).\n * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.\n \n For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\\_role\n */\nexport const Tabpanels = {\n args: {\n ariaLabel: \"\",\n orientation: NavigationTabsOrientation.HORIZONTAL,\n },\n render: (args) => html`\n <div class=\"panels-story-wrapper ${args.orientation}\">\n <z-navigation-tabs\n orientation=${args.orientation}\n size=${NavigationTabsSize.BIG}\n .ariaLabel=${args.ariaLabel}\n .selectedTab=${0}\n style=${styleMap({\n \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n })}\n >\n <button\n aria-controls=\"panel-1\"\n aria-label=\"home\"\n id=\"tab-1\"\n >\n <z-icon name=\"house\" />\n <span>Home</span>\n </button>\n <button\n aria-controls=\"panel-2\"\n aria-label=\"info\"\n id=\"tab-2\"\n >\n <z-icon name=\"info\" />\n <span>Info</span>\n </button>\n </z-navigation-tabs>\n <div\n class=\"panel\"\n id=\"panel-1\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-1\"\n >\n <span>Pannello 1</span>\n <span><z-icon name=\"house-filled\" /></span>\n </div>\n <div\n class=\"panel\"\n id=\"panel-2\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-2\"\n hidden\n >\n <span>Pannello 2</span>\n <span><z-icon name=\"info-filled\" /></span>\n </div>\n </div>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-navigation-tabs/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZNavigationTabs} from \".\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans/index\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNavigationTabsStoriesArgs = ZNavigationTabs &\n CSSVarsArguments<\"z-navigation-tabs-nav-buttons-bg\" \| \"z-navigation-tabs-nav-buttons-fg\">;\n\nconst StoryMeta = {\n title: \"ZNavigationTabs\",\n component: \"z-navigation-tabs\",\n argTypes: {\n \"orientation\": {\n options: Object.values(NavigationTabsOrientation),\n control: {\n type: \"inline-radio\",\n },\n },\n \"--z-navigation-tabs-nav-buttons-bg\": getColorTokenArgConfig(),\n \"--z-navigation-tabs-nav-buttons-fg\": getColorTokenArgConfig(),\n },\n args: {\n \"--z-navigation-tabs-nav-buttons-bg\": undefined,\n \"--z-navigation-tabs-nav-buttons-fg\": undefined,\n },\n} satisfies Meta<ZNavigationTabsStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNavigationTabsStoriesArgs>;\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const tabs = document.querySelector(\"z-navigation-tabs\");\n tabs?.addEventListener(\"selected\", ({detail: selectedTab}) => {\n const controlledPanel = tabs.querySelectorAll('[role=\"tab\"]')?.[selectedTab]?.getAttribute(\"aria-controls\");\n const panels = Array.from(document.querySelectorAll('[role=\"tabpanel\"]'));\n panels.forEach((panel: HTMLElement) => (panel.hidden = true));\n const panelToActivate = panels.find((panel) => panel.id === controlledPanel) as HTMLElement;\n if (panelToActivate) {\n panelToActivate.hidden = false;\n }\n });\n});\n\nconst tabsTemplate = (): TemplateResult =>\n html`<button>\n <z-icon name=\"house\"></z-icon>\n <span>Home</span>\n </button>\n <button>\n <z-icon name=\"map\"></z-icon>\n <span>Maps</span>\n </button>\n <button disabled>\n <z-icon name=\"download\"></z-icon>\n <span>Download</span>\n </button>\n <button>\n <z-icon name=\"user-avatar\"></z-icon>\n <span>Users</span>\n </button>\n <button>\n <z-icon name=\"artist\"></z-icon>\n <span>Artisti</span>\n </button>\n <a\n href=\"https://www.google.com\"\n target=\"_blank\"\n title=\"Vai a Google\"\n >\n <z-icon name=\"arrow-quad-north-east\"></z-icon>\n <span>Link esterno</span>\n </a>`;\n\nexport const Horizontal = {\n argTypes: {\n size: {\n options: Object.values(NavigationTabsSize),\n control: {\n type: \"inline-radio\",\n },\n },\n },\n args: {\n orientation: NavigationTabsOrientation.HORIZONTAL,\n size: NavigationTabsSize.BIG,\n ariaLabel: \"\",\n },\n parameters: {\n controls: {\n exclude: [\"orientation\"],\n },\n },\n render: (args) => html`\n <z-navigation-tabs\n orientation=${args.orientation}\n size=${args.size}\n .ariaLabel=${args.ariaLabel}\n style=${styleMap({\n \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n })}\n >\n ${tabsTemplate()}\n </z-navigation-tabs>\n `,\n} satisfies Story;\n\n/*\n When orientation is set to `VERTICAL`, the text of slotted tabs is hidden by default.\n * 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.\n /\nexport const Vertical = {\n args: {\n orientation: NavigationTabsOrientation.VERTICAL,\n ariaLabel: \"\",\n },\n parameters: {\n controls: {\n exclude: [\"orientation\"],\n },\n },\n render: (args) => html`\n <z-navigation-tabs\n orientation=${args.orientation}\n .ariaLabel=${args.ariaLabel}\n style=${styleMap({\n \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n })}\n >\n ${tabsTemplate()}\n </z-navigation-tabs>\n `,\n} satisfies Story;\n\n/\n 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.\n * 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`).\n * Similarly, the `aria-controls` attribute must be set on the tabs with the `id` of the controlled panel.\n \n For more details check the documentation: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab\\_role\n */\nexport const Tabpanels = {\n args: {\n ariaLabel: \"\",\n orientation: NavigationTabsOrientation.HORIZONTAL,\n },\n render: (args) => html`\n <div class=\"panels-story-wrapper ${args.orientation}\">\n <z-navigation-tabs\n orientation=${args.orientation}\n size=${NavigationTabsSize.BIG}\n .ariaLabel=${args.ariaLabel}\n .selectedTab=${0}\n style=${styleMap({\n \"--z-navigation-tabs-nav-buttons-bg\": args[\"--z-navigation-tabs-nav-buttons-bg\"],\n \"--z-navigation-tabs-nav-buttons-fg\": args[\"--z-navigation-tabs-nav-buttons-fg\"],\n })}\n >\n <button\n aria-controls=\"panel-1\"\n aria-label=\"home\"\n id=\"tab-1\"\n >\n <z-icon name=\"house\" />\n <span>Home</span>\n </button>\n <button\n aria-controls=\"panel-2\"\n aria-label=\"info\"\n id=\"tab-2\"\n >\n <z-icon name=\"info\" />\n <span>Info</span>\n </button>\n </z-navigation-tabs>\n <div\n class=\"panel\"\n id=\"panel-1\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-1\"\n >\n <span>Pannello 1</span>\n <span><z-icon name=\"house-filled\" /></span>\n </div>\n <div\n class=\"panel\"\n id=\"panel-2\"\n role=\"tabpanel\"\n aria-labelledby=\"tab-2\"\n hidden\n >\n <span>Pannello 2</span>\n <span><z-icon name=\"info-filled\" /></span>\n </div>\n </div>\n `,\n} satisfies Story;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../~~src/components/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;gBAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/*\n Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n /\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /* Name of the icon on the left of the content /\n @Prop()\n contenticonname?: string;\n\n /* Action button text /\n @Prop()\n actiontext?: string;\n\n /* Alert variant type /\n @Prop({reflect: true})\n type: NotificationType;\n\n /* Enable close icon /\n @Prop()\n showclose?: boolean = false;\n\n /\n Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n /\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /* Enable sticky notification bar. /\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /* Call to action clicked /\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /* Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,aAAa;IAgChB,uBAAuB,CAAC,CAAa;QAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAMO,sBAAsB,CAAC,CAAa;QAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED;;;;yBA/BsB,KAAK;0BAOJ,KAAK;sBAIT,KAAK;QAqBtB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACH;YACD,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACL,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,IAAI,CAC5B,+DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,uBAAuB,IAEpC,IAAI,CAAC,UAAU,CACT,CACV,CACG;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB;gBAEpC,+DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACK,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/*\n Notification bar component.\n * @slot - The text of the notification.\n * @cssprop --z-notification--top-offset - The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n /\n@Component({\n tag: \"z-notification\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZNotification {\n /* Name of the icon on the left of the content /\n @Prop()\n contenticonname?: string;\n\n /* Action button text /\n @Prop()\n actiontext?: string;\n\n /* Alert variant type /\n @Prop({reflect: true})\n type: NotificationType;\n\n /* Enable close icon /\n @Prop()\n showclose?: boolean = false;\n\n /\n Enable shadow.\n * @deprecated shadow is available only for the `sticky` version of the notification.\n /\n @Prop({reflect: true})\n showshadow?: boolean = false;\n\n /* Enable sticky notification bar. /\n @Prop({reflect: true})\n sticky?: boolean = false;\n\n /* Call to action clicked /\n @Event()\n notificationAction: EventEmitter;\n\n private handleActionButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationAction.emit();\n }\n\n /* Close button clicked */\n @Event()\n notificationClose: EventEmitter;\n\n private handleCloseButtonClick(e: MouseEvent): void {\n e.preventDefault();\n this.notificationClose.emit();\n }\n\n constructor() {\n this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n }\n\n render(): HTMLZNotificationElement {\n return (\n <Host>\n {this.contenticonname && (\n <z-icon\n class=\"status-icon\"\n name={this.contenticonname}\n width={16}\n height={16}\n />\n )}\n <div class=\"content-container\">\n <div class=\"content-text\">\n <slot></slot>\n </div>\n {!!this.actiontext?.trim() && (\n <button\n class=\"action-button\"\n type=\"button\"\n onClick={this.handleActionButtonClick}\n >\n {this.actiontext}\n </button>\n )}\n </div>\n {this.showclose && (\n <button\n class=\"close-button\"\n type=\"button\"\n onClick={this.handleCloseButtonClick}\n >\n <z-icon\n name=\"multiply-circle\"\n width={16}\n height={16}\n />\n </button>\n )}\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../~~src/components/z-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;SACzC;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,yBAAyB;QAC1C,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,gBAAgB,CAAC,OAAO;KAC/B;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;GAIxB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;;;;GAOxB;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;2BAGG,IAAI,CAAC,eAAe;sBACzB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,SAAS;;;UAGzB,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC5B;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;0BAGE,IAAI,CAAC,eAAe;qBACzB,IAAI,CAAC,UAAU;eACrB,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,SAAS;;;UAGxB,IAAI,CAAC,gBAAgB;;;;;;;;;;GAU5B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZNotification} from \".\";\nimport {NotificationType} from \"../../beans\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNotificationStoriesArgs = ZNotification & {notificationText: string};\n\nconst StoryMeta = {\n title: \"ZNotification\",\n component: \"z-notification\",\n argTypes: {\n type: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(NotificationType),\n },\n },\n args: {\n contenticonname: \"checkmark-circle-filled\",\n actiontext: \"Annulla\",\n showclose: false,\n sticky: false,\n type: NotificationType.SUCCESS,\n },\n} satisfies Meta<ZNotificationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNotificationStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <z-notification\n .contenticonname=${args.contenticonname}\n .actiontext=${args.actiontext}\n .type=${args.type}\n .showclose=${args.showclose}\n .sticky=${args.sticky}\n >\n <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n </z-notification>\n `,\n} satisfies Story;\n\nexport const LongText = {\n render: (args) => html`\n <z-notification\n .contenticonname=${args.contenticonname}\n .actiontext=${args.actiontext}\n .type=${args.type}\n .showclose=${args.showclose}\n .sticky=${args.sticky}\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue\n turpis, eu consectetur purus consectetur vitae.\n </z-notification>\n `,\n} satisfies Story;\n\n/*\n To use the banner variant set the `sticky` property to `true`.\n /\nexport const BannerVariant = {\n args: {\n notificationText: \"Questo è il testo della notifica\",\n },\n parameters: {\n controls: {\n exclude: [\"sticky\"],\n },\n },\n render: (args) => html`\n <div class=\"banner-notification-demo\">\n <z-notification\n .contenticonname=${args.contenticonname}\n .actiontext=${args.actiontext}\n .type=${args.type}\n .showclose=${args.showclose}\n sticky=\"true\"\n >\n ${args.notificationText}\n </z-notification>\n <h2 class=\"heading-1-sb\">Titolo della pagina</h2>\n <div class=\"body-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis\n augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.\n Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed\n felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus\n fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante\n felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,\n pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,\n tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a\n facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper\n risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus\n lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius\n facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet\n mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem\n posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus\n hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.\n Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu\n nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque\n dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet\n posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,\n non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,\n elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent\n quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis\n vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec\n fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in\n ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et\n condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est\n vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus\n massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at\n sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.\n </div>\n </div>\n `,\n} satisfies Story;\n\n/\n To use the inline variant set the `sticky` property to `false`.\n */\nexport const InlineVariant = {\n args: {\n notificationText: \"Questo è il testo della notifica\",\n },\n parameters: {\n controls: {\n exclude: [\"sticky\"],\n },\n },\n render: (args) => html`\n <div class=\"inline-notification-demo\">\n <z-notification\n contenticonname=${args.contenticonname}\n actiontext=${args.actiontext}\n type=${args.type}\n showclose=${args.showclose}\n sticky=\"false\"\n >\n ${args.notificationText}\n </z-notification>\n <div class=\"content\">\n <h2 class=\"heading-1\">Titolo della scheda</h2>\n <div class=\"body-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.\n </div>\n </div>\n </div>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;SACzC;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,yBAAyB;QAC1C,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,gBAAgB,CAAC,OAAO;KAC/B;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;GAIxB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;;;;GAOxB;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;2BAGG,IAAI,CAAC,eAAe;sBACzB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,SAAS;;;UAGzB,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC5B;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;0BAGE,IAAI,CAAC,eAAe;qBACzB,IAAI,CAAC,UAAU;eACrB,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,SAAS;;;UAGxB,IAAI,CAAC,gBAAgB;;;;;;;;;;GAU5B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZNotification} from \".\";\nimport {NotificationType} from \"../../beans\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNotificationStoriesArgs = ZNotification & {notificationText: string};\n\nconst StoryMeta = {\n title: \"ZNotification\",\n component: \"z-notification\",\n argTypes: {\n type: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(NotificationType),\n },\n },\n args: {\n contenticonname: \"checkmark-circle-filled\",\n actiontext: \"Annulla\",\n showclose: false,\n sticky: false,\n type: NotificationType.SUCCESS,\n },\n} satisfies Meta<ZNotificationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNotificationStoriesArgs>;\n\nexport const Default = {\n render: (args) => html`\n <z-notification\n .contenticonname=${args.contenticonname}\n .actiontext=${args.actiontext}\n .type=${args.type}\n .showclose=${args.showclose}\n .sticky=${args.sticky}\n >\n <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n </z-notification>\n `,\n} satisfies Story;\n\nexport const LongText = {\n render: (args) => html`\n <z-notification\n .contenticonname=${args.contenticonname}\n .actiontext=${args.actiontext}\n .type=${args.type}\n .showclose=${args.showclose}\n .sticky=${args.sticky}\n >\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue\n turpis, eu consectetur purus consectetur vitae.\n </z-notification>\n `,\n} satisfies Story;\n\n/*\n To use the banner variant set the `sticky` property to `true`.\n /\nexport const BannerVariant = {\n args: {\n notificationText: \"Questo è il testo della notifica\",\n },\n parameters: {\n controls: {\n exclude: [\"sticky\"],\n },\n },\n render: (args) => html`\n <div class=\"banner-notification-demo\">\n <z-notification\n .contenticonname=${args.contenticonname}\n .actiontext=${args.actiontext}\n .type=${args.type}\n .showclose=${args.showclose}\n sticky=\"true\"\n >\n ${args.notificationText}\n </z-notification>\n <h2 class=\"heading-1-sb\">Titolo della pagina</h2>\n <div class=\"body-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis\n augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.\n Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed\n felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus\n fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante\n felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,\n pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,\n tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a\n facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper\n risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus\n lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius\n facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet\n mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem\n posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus\n hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.\n Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu\n nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque\n dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet\n posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,\n non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,\n elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent\n quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis\n vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec\n fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in\n ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et\n condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est\n vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus\n massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at\n sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.\n </div>\n </div>\n `,\n} satisfies Story;\n\n/\n To use the inline variant set the `sticky` property to `false`.\n */\nexport const InlineVariant = {\n args: {\n notificationText: \"Questo è il testo della notifica\",\n },\n parameters: {\n controls: {\n exclude: [\"sticky\"],\n },\n },\n render: (args) => html`\n <div class=\"inline-notification-demo\">\n <z-notification\n contenticonname=${args.contenticonname}\n actiontext=${args.actiontext}\n type=${args.type}\n showclose=${args.showclose}\n sticky=\"false\"\n >\n ${args.notificationText}\n </z-notification>\n <div class=\"content\">\n <h2 class=\"heading-1\">Titolo della scheda</h2>\n <div class=\"body-1\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.\n </div>\n </div>\n </div>\n `,\n} satisfies Story;\n"]}

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

@@ -14,6 +14,16 @@ export class ZOffcanvas {
         this.skipLoadAnimation = false;
         this.skipAnimation = false;
     }
+    /**
+     * Stop the event default behavior and propagation when the offcanvas is closed.
+     */
+    stopEvent(event) {
+        if (this.open) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
     /**
      * Hide the body overflow when the offcanvas is open.
      */
@@ -56,8 +66,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '136525b1dbd1537072fdb065403d80297db67da7', "skip-animation": this.skipAnimation, inert: !this.open }, h("div", { key: '49595a37776b677730a25241e3dee2b3070684b1', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'd2381a55e6ce4037de2cdd6f040394b100b52143', class: "canvas-content", role: "presentation" }, h("slot", { key: '4c6d50f980edc099d946ddf284eb3c1bb0b757c0', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.open && (h("div", { key: '766613ee48a99bad3bd2dc98bbff6b4bf2fe34a9', class: "canvas-background", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'd6d26ab3d262f18a7f7b0d79064d833550d7dc5e', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '5006a356d94cd614e646f8c6cc22ef9bc82b230c', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: 'cdf6e5c0d1d7b594a75ba49214c7782c09f13fab', class: "canvas-content", role: "presentation" }, h("slot", { key: '9576d80ca8e63ae785fb66e01b696412ab8acad2', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '91e08d2782d1c4ec027ebf452f128d64b96ef01d', class: "canvas-background", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -91,7 +100,7 @@ export class ZOffcanvas {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Offcanvas variant.\n- `overlay`: The offcanvas covers the page content putting an overlay.\n- `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n> NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly."
+                    "text": "Offcanvas variant.\n- `overlay`: The offcanvas covers the page content putting an overlay.\n- `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n> NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\nAlso, the `pushcontent` variant doesn't have the open/close transition."
                 },
                 "attribute": "variant",
                 "reflect": true,
@@ -194,5 +203,20 @@ export class ZOffcanvas {
                 "methodName": "onOpenChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "stopEvent",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "focusin",
+                "method": "stopEvent",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["~~../../../~~src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;~~AAC1F~~,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAElE;;;;;GAKG;AAOH,MAAM,OAAO,UAAU;;~~uBAQQ~~,gBAAgB,CAAC,WAAW;oBAIlD,KAAK;mCAOgC,mBAAmB,CAAC,IAAI;iCAQhD,KAAK;6BAQD,KAAK;;IAI7B;;OAEG;IAEK,kBAAkB;QACxB,MAAM,QAAQ,GACZ,IAAI,CAAC,OAAO,KAAK,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE;YAC9F,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,YAAY,CAAC;QAEnB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5D,CAAC;IAGD,aAAa;;QACX,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,2GAA2G;YAC3G,MAAM,gBAAgB,GAAG,GAAS,EAAE;gBAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;YAC9E,CAAC,CAAC;YAEF,MAAA,IAAI,CAAC,eAAe,0CAAE,gBAAgB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uEACa,IAAI,CAAC,aAAa,~~EAClC~~,~~KAAK~~,~~EAAE~~,CAAC,IAAI,CAAC,IAAI;~~YAEjB~~,4DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;gBAExC,4DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,cAAc;oBAEnB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;YACL,CAAC,IAAI,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,EAAE,CAAC~~;gBAChG~~,IAAI,~~CAAC~~,~~IAAI,IAAI,CACX,~~4DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAC7B,CACR,~~CACE~~,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/*\n @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n /\n@Component({\n tag: \"z-offcanvas\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZOffcanvas {\n /\n Offcanvas variant.\n * - `overlay`: The offcanvas covers the page content putting an overlay.\n * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n /\n @Prop({reflect: true})\n variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n /* Whether the offcanvas is open. Default: false /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Open the content transitioning to a specified direction.\n * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n /\n @Prop({reflect: true})\n transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n /\n Skip the opening transition when the offcanvas is already open at the first render.\n * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n /\n @Prop()\n skipLoadAnimation = false;\n\n /* emitted when `open` prop changes /\n @Event()\n canvasOpenStatusChanged: EventEmitter;\n\n /* Used to skip the opening transition when the offcanvas is already open at the first render. /\n @State()\n private skipAnimation = false;\n\n private canvasContainer: HTMLElement;\n\n /\n Hide the body overflow when the offcanvas is open.\n */\n @Watch(\"variant\")\n private handlePageOverflow(): void {\n const overflow =\n this.variant === OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP\n ? \"overflow-y\"\n : \"overflow-x\";\n\n document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n this.canvasOpenStatusChanged.emit(this.open);\n\n if (!this.open) {\n // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n const listenerCallback = (): void => {\n this.handlePageOverflow();\n this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n };\n\n this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n } else {\n this.handlePageOverflow();\n }\n }\n\n componentWillLoad(): void {\n if (this.open) {\n this.skipAnimation = true;\n }\n }\n\n componentDidLoad(): void {\n this.handlePageOverflow();\n }\n\n componentDidRender(): void {\n this.skipAnimation = false;\n }\n\n connectedCallback(): void {\n this.handlePageOverflow();\n }\n\n disconnectedCallback(): void {\n this.open = false;\n }\n\n render(): HTMLZOffcanvasElement {\n return (\n <Host\n skip-animation={this.skipAnimation}\n ~~inert~~={!this.open}\n >\n <div\n class=\"canvas-container\"\n role=\"presentation\"\n ref={(el) => (this.canvasContainer = el)}\n >\n <div\n class=\"canvas-content\"\n role=\"presentation\"\n >\n <slot name=\"canvasContent\"></slot>\n </div>\n </div>\n {(this.variant == OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP) ~~&&\n this.open~~ && (\n <div\n class=\"canvas-background\"\n onClick={() => (this.open = false)}\n ></div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch} from \"@stencil/core\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\n/*\n @slot canvasContent - Slot for the offcanvas content.\n * @cssprop --z-offcanvas--top-space - Top offset of the offcanvas, for `overlay` variant. Useful when there is some fixed element above the offcanvas. Default: `0`.\n * @cssprop --z-offcanvas--container-width - Width of the offcanvas for `left` and `right` direction. Default: `375px`.\n * @cssprop --z-offcanvas--container-height - Height of the offcanvas for `up` direction. Default: `90%`.\n /\n@Component({\n tag: \"z-offcanvas\",\n styleUrl: \"styles.css\",\n shadow: false,\n scoped: true,\n})\nexport class ZOffcanvas {\n /\n Offcanvas variant.\n * - `overlay`: The offcanvas covers the page content putting an overlay.\n * - `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\n * Also, the `pushcontent` variant doesn't have the open/close transition.\n /\n @Prop({reflect: true})\n variant?: OffCanvasVariant = OffCanvasVariant.PUSHCONTENT;\n\n /* Whether the offcanvas is open. Default: false /\n @Prop({reflect: true, mutable: true})\n open = false;\n\n /\n Open the content transitioning to a specified direction.\n * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.\n /\n @Prop({reflect: true})\n transitiondirection?: TransitionDirection = TransitionDirection.LEFT;\n\n /\n Skip the opening transition when the offcanvas is already open at the first render.\n * @deprecated This prop is not needed anymore, the component will automatically skip the transition\n * when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.\n /\n @Prop()\n skipLoadAnimation = false;\n\n /* emitted when `open` prop changes /\n @Event()\n canvasOpenStatusChanged: EventEmitter;\n\n /* Used to skip the opening transition when the offcanvas is already open at the first render. /\n @State()\n private skipAnimation = false;\n\n private canvasContainer: HTMLElement;\n\n /\n Stop the event default behavior and propagation when the offcanvas is closed.\n /\n @Listen(\"click\", {capture: true})\n @Listen(\"focusin\", {capture: true})\n stopEvent(event: Event): void {\n if (this.open) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n }\n\n /\n Hide the body overflow when the offcanvas is open.\n */\n @Watch(\"variant\")\n private handlePageOverflow(): void {\n const overflow =\n this.variant === OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP\n ? \"overflow-y\"\n : \"overflow-x\";\n\n document.body.style[overflow] = this.open ? \"hidden\" : \"\";\n }\n\n @Watch(\"open\")\n onOpenChanged(): void {\n this.canvasOpenStatusChanged.emit(this.open);\n\n if (!this.open) {\n // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow\n const listenerCallback = (): void => {\n this.handlePageOverflow();\n this.canvasContainer.removeEventListener(\"transitionend\", listenerCallback);\n };\n\n this.canvasContainer?.addEventListener(\"transitionend\", listenerCallback);\n } else {\n this.handlePageOverflow();\n }\n }\n\n componentWillLoad(): void {\n if (this.open) {\n this.skipAnimation = true;\n }\n }\n\n componentDidLoad(): void {\n this.handlePageOverflow();\n }\n\n componentDidRender(): void {\n this.skipAnimation = false;\n }\n\n connectedCallback(): void {\n this.handlePageOverflow();\n }\n\n disconnectedCallback(): void {\n this.open = false;\n }\n\n render(): HTMLZOffcanvasElement {\n return (\n <Host\n skip-animation={this.skipAnimation}\n aria-hidden={!this.open ? \"true\" : null}\n >\n <div\n class=\"canvas-container\"\n role=\"presentation\"\n ref={(el) => (this.canvasContainer = el)}\n >\n <div\n class=\"canvas-content\"\n role=\"presentation\"\n >\n <slot name=\"canvasContent\"></slot>\n </div>\n </div>\n {(this.variant == OffCanvasVariant.OVERLAY \|\| this.transitiondirection === TransitionDirection.UP) && (\n <div\n class=\"canvas-background\"\n onClick={() => (this.open = false)}\n ></div>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -7,20 +7,6 @@ const StoryMeta = {
     component: "z-offcanvas",
     parameters: {
         layout: "fullscreen",
-        openOffcanvas: () => {
-            const offcanvas = document.querySelector("z-offcanvas");
-            if (!offcanvas) {
-                return;
-            }
-            offcanvas.open = true;
-        },
-        closeOffcanvas: () => {
-            const offcanvas = document.querySelector("z-offcanvas");
-            if (!offcanvas) {
-                return;
-            }
-            offcanvas.open = false;
-        },
         docs: {
             story: {
                 inline: false,
@@ -51,7 +37,7 @@ const StoryMeta = {
 export default StoryMeta;
 const DEMO_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.";
 export const OverlayTransitionDirectionRight = {
-    render: (args, context) => html `<div id="offcanvas-story-container">
+    render: (args) => html `<div id="offcanvas-story-container">
       <z-offcanvas
         .variant=${OffCanvasVariant.OVERLAY}
         .open=${args.open}
@@ -59,24 +45,20 @@ export const OverlayTransitionDirectionRight = {
         style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <button
-            class="offcanvas-close"
-            .onclick=${context.parameters.closeOffcanvas}
-          >
-            <z-icon name="close" />
-          </button>
           <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
       <div class="offcanvas-story-content">
-        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+        <div class="heading-2-sb">Page content</div>
+        ${DEMO_TEXT}
       </div>
     </div>`,
 };
 export const OverlayTransitionDirectionLeft = {
-    render: (args, context) => html `<div id="offcanvas-story-container">
+    render: (args) => html `<div id="offcanvas-story-container">
       <div class="offcanvas-story-content">
-        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+        <div class="heading-2-sb">Page content</div>
+        ${DEMO_TEXT}
       </div>
       <z-offcanvas
         .variant=${OffCanvasVariant.OVERLAY}
@@ -85,12 +67,6 @@ export const OverlayTransitionDirectionLeft = {
         style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <button
-            class="offcanvas-close"
-            .onclick=${context.parameters.closeOffcanvas}
-          >
-            <z-icon name="close" />
-          </button>
           <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
@@ -106,9 +82,10 @@ export const TransitionDirectionUp = {
     args: {
         "--z-offcanvas--container-height": "90%",
     },
-    render: (args, context) => html `<div id="offcanvas-story-container">
+    render: (args) => html `<div id="offcanvas-story-container">
       <div class="offcanvas-story-content">
-        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+        <div class="heading-2-sb">Page content</div>
+        ${DEMO_TEXT}
       </div>
       <z-offcanvas
         .open=${args.open}
@@ -117,12 +94,6 @@ export const TransitionDirectionUp = {
         style="--z-offcanvas--container-height: ${args["--z-offcanvas--container-height"]}"
       >
         <div slot="canvasContent">
-          <button
-            class="offcanvas-close"
-            .onclick=${context.parameters.closeOffcanvas}
-          >
-            <z-icon name="close" />
-          </button>
           <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
@@ -137,7 +108,7 @@ export const PushContent = {
     args: {
         transitiondirection: TransitionDirection.RIGHT,
     },
-    render: (args, context) => html `<div
+    render: (args) => html `<div
       class="pushcontent-story ${args.transitiondirection}"
       id="offcanvas-story-container"
     >
@@ -148,18 +119,13 @@ export const PushContent = {
         style="--z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <button
-            class="offcanvas-close"
-            .onclick=${context.parameters.closeOffcanvas}
-          >
-            <z-icon name="close" />
-          </button>
           <p>Offcanvas content</p>
         </div>
       </z-offcanvas>
       <div class="offcanvas-story-content">
-        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+        <div class="heading-2-sb">Page content</div>
+        ${DEMO_TEXT}
       </div>
     </div>`,
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZOffcanvasStoriesArgs = ZOffcanvas &\n CSSVarsArguments<\"z-offcanvas--top-space\" \| \"--z-offcanvas--container-width\" \| \"--z-offcanvas--container-height\">;\n\nconst StoryMeta = {\n title: \"ZOffcanvas\",\n component: \"z-offcanvas\",\n parameters: {\n layout: \"fullscreen\",\n openOffcanvas: (): void => {\n const offcanvas = document.querySelector(\"z-offcanvas\") as HTMLZOffcanvasElement;\n if (!offcanvas) {\n return;\n }\n\n offcanvas.open = true;\n },\n closeOffcanvas: (): void => {\n const offcanvas = document.querySelector(\"z-offcanvas\") as HTMLZOffcanvasElement;\n if (!offcanvas) {\n return;\n }\n\n offcanvas.open = false;\n },\n docs: {\n story: {\n inline: false,\n iframeHeight: \"600px\",\n },\n },\n },\n argTypes: {\n variant: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(OffCanvasVariant),\n },\n transitiondirection: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(TransitionDirection),\n },\n },\n args: {\n \"open\": true,\n \"--z-offcanvas--top-space\": \"0px\",\n \"--z-offcanvas--container-width\": \"375px\",\n },\n} satisfies Meta<ZOffcanvasStoriesArgs>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvasStoriesArgs>;\n\nconst DEMO_TEXT =\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\";\n\nexport const OverlayTransitionDirectionRight = {\n render: (args, context) =>\n html`<div id=\"offcanvas-story-container\">\n <z-offcanvas\n .variant=${OffCanvasVariant.OVERLAY}\n .open=${args.open}\n .transitiondirection=${TransitionDirection.RIGHT}\n style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n \"--z-offcanvas--container-width\"\n ]}\"\n >\n <div slot=\"canvasContent\">\n <button\n class=\"offcanvas-close\"\n .onclick=${context.parameters.closeOffcanvas}\n >\n <z-icon name=\"close\" />\n </button>\n <p>${DEMO_TEXT}</p>\n </div>\n </z-offcanvas>\n <div class=\"offcanvas-story-content\">\n <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n </div>\n </div>`,\n} satisfies Story;\n\nexport const OverlayTransitionDirectionLeft = {\n render: (args, context) =>\n html`<div id=\"offcanvas-story-container\">\n <div class=\"offcanvas-story-content\">\n <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n </div>\n <z-offcanvas\n .variant=${OffCanvasVariant.OVERLAY}\n .open=${args.open}\n .transitiondirection=${TransitionDirection.LEFT}\n style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n \"--z-offcanvas--container-width\"\n ]}\"\n >\n <div slot=\"canvasContent\">\n <button\n class=\"offcanvas-close\"\n .onclick=${context.parameters.closeOffcanvas}\n >\n <z-icon name=\"close\" />\n </button>\n <p>${DEMO_TEXT}</p>\n </div>\n </z-offcanvas>\n ${args.transitiondirection === \"right\" ? html`<div class=\"offcanvas-story-content\"></div>` : \"\"}\n </div>`,\n} satisfies Story;\n\nexport const TransitionDirectionUp = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"transitiondirection\", \"--z-offcanvas--top-space\", \"--z-offcanvas--container-width\"],\n },\n },\n args: {\n \"--z-offcanvas--container-height\": \"90%\",\n },\n render: (args, context) =>\n html`<div id=\"offcanvas-story-container\">\n <div class=\"offcanvas-story-content\">\n <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n </div>\n <z-offcanvas\n .open=${args.open}\n .variant=${OffCanvasVariant.OVERLAY}\n .transitiondirection=${TransitionDirection.UP}\n style=\"--z-offcanvas--container-height: ${args[\"--z-offcanvas--container-height\"]}\"\n >\n <div slot=\"canvasContent\">\n <button\n class=\"offcanvas-close\"\n .onclick=${context.parameters.closeOffcanvas}\n >\n <z-icon name=\"close\" />\n </button>\n <p>${DEMO_TEXT}</p>\n </div>\n </z-offcanvas>\n </div>`,\n} satisfies Story;\n\nexport const PushContent = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"--z-offcanvas--top-space\"],\n },\n },\n args: {\n transitiondirection: TransitionDirection.RIGHT,\n },\n render: (args, context) =>\n html`<div\n class=\"pushcontent-story ${args.transitiondirection}\"\n id=\"offcanvas-story-container\"\n >\n <z-offcanvas\n .open=${args.open}\n .variant=${OffCanvasVariant.PUSHCONTENT}\n .transitiondirection=${args.transitiondirection}\n style=\"--z-offcanvas--container-width: ${args[\"--z-offcanvas--container-width\"]}\"\n >\n <div slot=\"canvasContent\">\n <button\n class=\"offcanvas-close\"\n .onclick=${context.parameters.closeOffcanvas}\n >\n <z-icon name=\"close\" />\n </button>\n <p>Offcanvas content</p>\n </div>\n </z-offcanvas>\n\n <div class=\"offcanvas-story-content\">\n <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n </div>\n </div>`,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZOffcanvasStoriesArgs = ZOffcanvas &\n CSSVarsArguments<\"z-offcanvas--top-space\" \| \"--z-offcanvas--container-width\" \| \"--z-offcanvas--container-height\">;\n\nconst StoryMeta = {\n title: \"ZOffcanvas\",\n component: \"z-offcanvas\",\n parameters: {\n layout: \"fullscreen\",\n docs: {\n story: {\n inline: false,\n iframeHeight: \"600px\",\n },\n },\n },\n argTypes: {\n variant: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(OffCanvasVariant),\n },\n transitiondirection: {\n control: {\n type: \"inline-radio\",\n },\n options: Object.values(TransitionDirection),\n },\n },\n args: {\n \"open\": true,\n \"--z-offcanvas--top-space\": \"0px\",\n \"--z-offcanvas--container-width\": \"375px\",\n },\n} satisfies Meta<ZOffcanvasStoriesArgs>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvasStoriesArgs>;\n\nconst DEMO_TEXT =\n \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\";\n\nexport const OverlayTransitionDirectionRight = {\n render: (args) =>\n html`<div id=\"offcanvas-story-container\">\n <z-offcanvas\n .variant=${OffCanvasVariant.OVERLAY}\n .open=${args.open}\n .transitiondirection=${TransitionDirection.RIGHT}\n style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n \"--z-offcanvas--container-width\"\n ]}\"\n >\n <div slot=\"canvasContent\">\n <p>${DEMO_TEXT}</p>\n </div>\n </z-offcanvas>\n <div class=\"offcanvas-story-content\">\n <div class=\"heading-2-sb\">Page content</div>\n ${DEMO_TEXT}\n </div>\n </div>`,\n} satisfies Story;\n\nexport const OverlayTransitionDirectionLeft = {\n render: (args) =>\n html`<div id=\"offcanvas-story-container\">\n <div class=\"offcanvas-story-content\">\n <div class=\"heading-2-sb\">Page content</div>\n ${DEMO_TEXT}\n </div>\n <z-offcanvas\n .variant=${OffCanvasVariant.OVERLAY}\n .open=${args.open}\n .transitiondirection=${TransitionDirection.LEFT}\n style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n \"--z-offcanvas--container-width\"\n ]}\"\n >\n <div slot=\"canvasContent\">\n <p>${DEMO_TEXT}</p>\n </div>\n </z-offcanvas>\n ${args.transitiondirection === \"right\" ? html`<div class=\"offcanvas-story-content\"></div>` : \"\"}\n </div>`,\n} satisfies Story;\n\nexport const TransitionDirectionUp = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"transitiondirection\", \"--z-offcanvas--top-space\", \"--z-offcanvas--container-width\"],\n },\n },\n args: {\n \"--z-offcanvas--container-height\": \"90%\",\n },\n render: (args) =>\n html`<div id=\"offcanvas-story-container\">\n <div class=\"offcanvas-story-content\">\n <div class=\"heading-2-sb\">Page content</div>\n ${DEMO_TEXT}\n </div>\n <z-offcanvas\n .open=${args.open}\n .variant=${OffCanvasVariant.OVERLAY}\n .transitiondirection=${TransitionDirection.UP}\n style=\"--z-offcanvas--container-height: ${args[\"--z-offcanvas--container-height\"]}\"\n >\n <div slot=\"canvasContent\">\n <p>${DEMO_TEXT}</p>\n </div>\n </z-offcanvas>\n </div>`,\n} satisfies Story;\n\nexport const PushContent = {\n parameters: {\n controls: {\n exclude: [\"variant\", \"--z-offcanvas--top-space\"],\n },\n },\n args: {\n transitiondirection: TransitionDirection.RIGHT,\n },\n render: (args) =>\n html`<div\n class=\"pushcontent-story ${args.transitiondirection}\"\n id=\"offcanvas-story-container\"\n >\n <z-offcanvas\n .open=${args.open}\n .variant=${OffCanvasVariant.PUSHCONTENT}\n .transitiondirection=${args.transitiondirection}\n style=\"--z-offcanvas--container-width: ${args[\"--z-offcanvas--container-width\"]}\"\n >\n <div slot=\"canvasContent\">\n <p>Offcanvas content</p>\n </div>\n </z-offcanvas>\n\n <div class=\"offcanvas-story-content\">\n <div class=\"heading-2-sb\">Page content</div>\n ${DEMO_TEXT}\n </div>\n </div>`,\n} satisfies Story;\n"]}