npm - @zanichelli/albe-web-components - Versions diffs - 16.3.0 → 16.3.1 - Mend

@zanichelli/albe-web-components 16.3.0 → 16.3.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["~~../../../../~~src/components/z-menu-section/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CAC2B,CAAC;AAE/B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBtC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;GAGtC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSection} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZMenu/ZMenuSection\",\n component: \"z-menu-section\",\n args: {\n active: false,\n },\n} satisfies Meta<ZMenuSection>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSection>;\n\nexport const WithItems = {\n render: (args) => html`\n <z-menu-section .active=${args.active}>\n <h3>Label</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 2</a\n >\n <a\n href=\"\"\n slot=\"seection\"\n active\n >Item 3 - active</a\n >\n </z-menu-section>\n `,\n} satisfies Story;\n\nexport const WithoutItems = {\n render: (args) => html`\n <z-menu-section .active=${args.active}>\n <h3>Label</h3>\n </z-menu-section>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-menu-section/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CAC2B,CAAC;AAE/B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;;;;GAmBtC;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,MAAM;;;GAGtC;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZMenuSection} from \".\";\nimport \"./index\";\n\nconst StoryMeta = {\n title: \"ZMenu/ZMenuSection\",\n component: \"z-menu-section\",\n args: {\n active: false,\n },\n} satisfies Meta<ZMenuSection>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZMenuSection>;\n\nexport const WithItems = {\n render: (args) => html`\n <z-menu-section .active=${args.active}>\n <h3>Label</h3>\n <a\n href=\"\"\n slot=\"section\"\n >Item 1</a\n >\n <a\n href=\"\"\n slot=\"section\"\n >Item 2</a\n >\n <a\n href=\"\"\n slot=\"seection\"\n active\n >Item 3 - active</a\n >\n </z-menu-section>\n `,\n} satisfies Story;\n\nexport const WithoutItems = {\n render: (args) => html`\n <z-menu-section .active=${args.active}>\n <h3>Label</h3>\n </z-menu-section>\n `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-menu-section/styles.css CHANGED Viewed

@@ -1,5 +1,5 @@
 :host {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
@@ -23,24 +23,13 @@
   font-weight: var(--font-rg);
 }
-:host(:is([active], [open])) .label,
-.label:hover {
-  border-color: var(--color-secondary01);
-}
-:host(:is([active], [open])) .label ::slotted(*),
-.label:focus:focus-visible ::slotted(*),
-.label:hover ::slotted(*) {
-  font-weight: var(--font-bd);
-}
 .label {
   display: flex;
   width: 100%;
   align-items: center;
-  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);
+  padding: var(--space-unit) 0;
   border: 0;
-  border-bottom: var(--border-size-small) solid var(--color-surface05);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
   margin: 0;
   background: transparent;
   border-radius: 0;
@@ -48,6 +37,23 @@
   text-align: left;
 }
+:host(:is([active], [open])) .label,
+.label:focus:focus-visible,
+.label:hover {
+  border-color: var(--color-secondary01);
+}
+.label:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+:host(:is([active], [open])) .label ::slotted(*),
+.label:focus:focus-visible ::slotted(*),
+.label:hover ::slotted(*) {
+  font-weight: var(--font-bd);
+}
 ::slotted([data-text]) {
   display: inline-flex;
   flex-direction: column;
@@ -80,12 +86,7 @@ when placed below the real text using `flex-direction: column`. */
   width: 100%;
   margin: 0;
   font-size: var(--font-size-3);
-  line-height: 1.25;
-}
-.label:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+  line-height: 1.5;
 }
 .label z-icon {
@@ -101,23 +102,27 @@ when placed below the real text using `flex-direction: column`. */
   padding-bottom: calc(var(--space-unit) * 1.5);
 }
-.items > ::slotted([slot="section"]) {
+::slotted([slot="section"]) {
   display: inline-flex;
   padding: calc(var(--space-unit) / 2);
   margin: 0;
-  font-size: var(--font-size-2);
-  line-height: 1.4;
+  font-size: var(--font-size-1);
+  line-height: 1.333;
   outline: none;
 }
-.items > ::slotted([slot="section"]:focus:focus-visible) {
+::slotted([slot="section"]:last-of-type) {
+  border: none;
+}
+::slotted([slot="section"]:focus:focus-visible) {
   box-shadow: var(--shadow-focus-primary);
   color: var(--color-secondary01);
 }
-.items > ::slotted([slot="section"]:hover),
-.items > ::slotted([slot="section"]:focus:focus-visible),
-.items > ::slotted([slot="section"][active]) {
+::slotted([slot="section"]:hover),
+::slotted([slot="section"]:focus:focus-visible),
+::slotted([slot="section"][active]) {
   color: var(--color-secondary01);
   font-weight: var(--font-bd);
 }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import dialogPolyfill from "dialog-polyfill";
 import { KeyboardCode } from "../../beans";
-import { mobileBreakpoint } from "../../constants/breakpoints";
+import { Breakpoints } from "../../constants/breakpoints";
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
 /**
  * @slot modalCloseButton - accept custom close button
@@ -32,7 +32,7 @@ export class ZModal {
         }
     }
     handlePageOverflow() {
-        const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+        const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);
         document.body.style["overflow-y"] = mobileMediaQuery.matches ? "hidden" : "";
     }
     componentDidLoad() {
@@ -111,16 +111,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: 'a1e93e72fa4aa80d94192e1fb18bca7a50ad0aa3', class: {
+        return (h("dialog", { key: '879616ceb0fe8efdc260faf34308b8abde70a9dc', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '5346f87a3812911b434a2b9b95691e86ecaeb853', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'cbb8ef7c9ddabbdfddf1abd92a95ffb78109f3ba', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'ae7f3aa101e7a55276c4a07a58fd126da494ba83', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '6938cbb56171186773c6b2d14323bde7d2f40761' }, this.modaltitle && h("h1", { key: '0cc3ee46b3598ec91465c1f8668b399c0c32034f', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '453e07da973d95eed5e66c4768c86cfe47cadbf3', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'bb5a5facd7b854e172a4f0502f97a6fffc03552a', class: {
+            }, id: this.modalid }, h("header", { key: 'fa1811f7d3ac5a58163acc6e9292fa0cbf899b6f', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'ded46a7e313929991a9740c7f1baf3885b85ce15' }, this.modaltitle && h("h1", { key: 'd127c62752ed24c849fb1de7e3e44e3ef72ea564', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '7055e46bc31534ef074246aaf95158b1cd9b4078', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'fec1db797c7cd9ed298c62da41327f07547375d4', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '3c2b58be34c464e06065258e710853e716d415df', name: "modalContent" }))), h("div", { key: '2b0e3e016ba08aeb65307ead19d9ca2ca408a85d', class: {
+            }, id: "modal-content" }, h("slot", { key: 'fead24447d41a1eaf4972d9c65bdc42b1937988f', name: "modalContent" }))), h("div", { key: '322c011045b5ed86aabc924217e142a7233f1eeb', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\nimport {mobileBreakpoint} from \"../../constants/breakpoints\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/*\n @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px\n /\n@Component({\n tag: \"z-modal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZModal {\n /* unique id /\n @Prop()\n modalid: string;\n\n /* title text (optional) /\n @Prop()\n modaltitle?: string;\n\n /* subtitle (optional) /\n @Prop()\n modalsubtitle?: string;\n\n /* aria-label for close button (optional) /\n @Prop()\n closeButtonLabel = \"chiudi modale\";\n\n /* add role \"alertdialog\" to dialog (optional, default is false) /\n @Prop()\n alertdialog?: boolean = false;\n\n /* if true, the modal is closable (optional, default is true) /\n @Prop()\n closable?: boolean = true;\n\n /* if true, the modal can scroll inside, if false the viewport can scroll /\n @Prop()\n scrollInside?: boolean = true;\n\n private dialog: HTMLDialogElement;\n\n @Element() host: HTMLZModalElement;\n\n /* emitted on close button click, returns modalid /\n @Event()\n modalClose: EventEmitter;\n\n private emitModalClose(): void {\n if (this.closable) {\n this.modalClose.emit({modalid: this.modalid});\n }\n }\n\n /* emitted on modal header click, returns modalid /\n @Event()\n modalHeaderActive: EventEmitter;\n\n private emitModalHeaderActive(): void {\n this.modalHeaderActive.emit({modalid: this.modalid});\n }\n\n /* emitted on background click, returns modalid /\n @Event()\n modalBackgroundClick: EventEmitter;\n\n private emitBackgroundClick(): void {\n if (this.closable) {\n this.modalBackgroundClick.emit({modalid: this.modalid});\n }\n }\n\n private handlePageOverflow(): void {\n const mobileMediaQuery = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);\n document.body.style[\"overflow-y\"] = mobileMediaQuery.matches ? \"hidden\" : \"\";\n }\n\n componentDidLoad(): void {\n if (typeof window.HTMLDialogElement !== \"function\") {\n / workaround to fix `registerDialog` in test environment:\n stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n which is used by `registerDialog` to recognize the element as dialog /\n if (!this.dialog.localName) {\n Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n }\n dialogPolyfill.registerDialog(this.dialog);\n this.dialog.setAttribute(\"open\", \"true\");\n } else {\n this.open();\n }\n\n this.handlePageOverflow();\n }\n\n /* open modal /\n @Method()\n async open(): Promise<void> {\n this.dialog?.showModal();\n }\n\n /* close modal /\n @Method()\n async close(): Promise<void> {\n if (this.closable) {\n this.dialog?.close();\n }\n }\n\n /\n Get a list of focusable elements in the dialog.\n * Remove elements with `display: none` from the list, because they're not focusable.\n \n N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n */\n private get focusableElements(): HTMLElement[] {\n return [\n ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ].filter((element) => getComputedStyle(element).display !== \"none\");\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ESC && !this.closable) {\n e.preventDefault();\n }\n\n if (e.code !== KeyboardCode.TAB) {\n return;\n }\n\n const focusableElements = this.focusableElements;\n const shadowActiveElement = this.host.shadowRoot.activeElement;\n const activeElement = this.host.ownerDocument.activeElement;\n const firstFocusableElement = focusableElements[0];\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n if (e.shiftKey && (shadowActiveElement == firstFocusableElement \|\| activeElement == firstFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n lastFocusableElement.focus();\n } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement \|\| activeElement == lastFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n private closeButtonSlot(): HTMLElement \| void {\n if (this.closable) {\n return (\n <slot name=\"modalCloseButton\">\n <button\n aria-label={this.closeButtonLabel}\n onClick={() => this.close()}\n >\n <z-icon name=\"multiply-circle-filled\"></z-icon>\n </button>\n </slot>\n );\n }\n }\n\n private handleEscape(e: Event): void {\n if (this.closable) {\n return;\n }\n e.preventDefault();\n }\n\n render(): HTMLZModalElement {\n return (\n <dialog\n class={{\n \"modal-dialog\": !this.scrollInside,\n }}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-content\"\n role={this.alertdialog ? \"alertdialog\" : undefined}\n ref={(el) => (this.dialog = el as HTMLDialogElement)}\n onClose={() => this.emitModalClose()}\n onCancel={(e) => this.handleEscape(e)}\n >\n <div\n class={{\n \"modal-container\": true,\n \"modal-container-scroll-inside\": this.scrollInside,\n \"modal-container-scroll-outside\": !this.scrollInside,\n }}\n id={this.modalid}\n >\n <header onClick={this.emitModalHeaderActive.bind(this)}>\n <div>\n {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n {this.closeButtonSlot()}\n </div>\n {this.modalsubtitle && (\n <div\n class=\"subtitle\"\n id=\"modal-subtitle\"\n >\n {this.modalsubtitle}\n </div>\n )}\n </header>\n\n <div\n class={{\n \"modal-content-scroll-inside\": this.scrollInside,\n \"modal-content-scroll-outside\": !this.scrollInside,\n }}\n id=\"modal-content\"\n >\n <slot name=\"modalContent\"></slot>\n </div>\n </div>\n <div\n class={{\n \"modal-background\": true,\n \"modal-background-scroll-outside\": !this.scrollInside,\n }}\n data-action=\"modalBackground\"\n data-modal={this.modalid}\n onClick={() => {\n this.emitBackgroundClick();\n this.close();\n }}\n ></div>\n </dialog>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/*\n @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px\n /\n@Component({\n tag: \"z-modal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZModal {\n /* unique id /\n @Prop()\n modalid: string;\n\n /* title text (optional) /\n @Prop()\n modaltitle?: string;\n\n /* subtitle (optional) /\n @Prop()\n modalsubtitle?: string;\n\n /* aria-label for close button (optional) /\n @Prop()\n closeButtonLabel = \"chiudi modale\";\n\n /* add role \"alertdialog\" to dialog (optional, default is false) /\n @Prop()\n alertdialog?: boolean = false;\n\n /* if true, the modal is closable (optional, default is true) /\n @Prop()\n closable?: boolean = true;\n\n /* if true, the modal can scroll inside, if false the viewport can scroll /\n @Prop()\n scrollInside?: boolean = true;\n\n private dialog: HTMLDialogElement;\n\n @Element() host: HTMLZModalElement;\n\n /* emitted on close button click, returns modalid /\n @Event()\n modalClose: EventEmitter;\n\n private emitModalClose(): void {\n if (this.closable) {\n this.modalClose.emit({modalid: this.modalid});\n }\n }\n\n /* emitted on modal header click, returns modalid /\n @Event()\n modalHeaderActive: EventEmitter;\n\n private emitModalHeaderActive(): void {\n this.modalHeaderActive.emit({modalid: this.modalid});\n }\n\n /* emitted on background click, returns modalid /\n @Event()\n modalBackgroundClick: EventEmitter;\n\n private emitBackgroundClick(): void {\n if (this.closable) {\n this.modalBackgroundClick.emit({modalid: this.modalid});\n }\n }\n\n private handlePageOverflow(): void {\n const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n document.body.style[\"overflow-y\"] = mobileMediaQuery.matches ? \"hidden\" : \"\";\n }\n\n componentDidLoad(): void {\n if (typeof window.HTMLDialogElement !== \"function\") {\n / workaround to fix `registerDialog` in test environment:\n stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n which is used by `registerDialog` to recognize the element as dialog /\n if (!this.dialog.localName) {\n Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n }\n dialogPolyfill.registerDialog(this.dialog);\n this.dialog.setAttribute(\"open\", \"true\");\n } else {\n this.open();\n }\n\n this.handlePageOverflow();\n }\n\n /* open modal /\n @Method()\n async open(): Promise<void> {\n this.dialog?.showModal();\n }\n\n /* close modal /\n @Method()\n async close(): Promise<void> {\n if (this.closable) {\n this.dialog?.close();\n }\n }\n\n /\n Get a list of focusable elements in the dialog.\n * Remove elements with `display: none` from the list, because they're not focusable.\n \n N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n */\n private get focusableElements(): HTMLElement[] {\n return [\n ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ].filter((element) => getComputedStyle(element).display !== \"none\");\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ESC && !this.closable) {\n e.preventDefault();\n }\n\n if (e.code !== KeyboardCode.TAB) {\n return;\n }\n\n const focusableElements = this.focusableElements;\n const shadowActiveElement = this.host.shadowRoot.activeElement;\n const activeElement = this.host.ownerDocument.activeElement;\n const firstFocusableElement = focusableElements[0];\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n if (e.shiftKey && (shadowActiveElement == firstFocusableElement \|\| activeElement == firstFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n lastFocusableElement.focus();\n } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement \|\| activeElement == lastFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n private closeButtonSlot(): HTMLElement \| void {\n if (this.closable) {\n return (\n <slot name=\"modalCloseButton\">\n <button\n aria-label={this.closeButtonLabel}\n onClick={() => this.close()}\n >\n <z-icon name=\"multiply-circle-filled\"></z-icon>\n </button>\n </slot>\n );\n }\n }\n\n private handleEscape(e: Event): void {\n if (this.closable) {\n return;\n }\n e.preventDefault();\n }\n\n render(): HTMLZModalElement {\n return (\n <dialog\n class={{\n \"modal-dialog\": !this.scrollInside,\n }}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-content\"\n role={this.alertdialog ? \"alertdialog\" : undefined}\n ref={(el) => (this.dialog = el as HTMLDialogElement)}\n onClose={() => this.emitModalClose()}\n onCancel={(e) => this.handleEscape(e)}\n >\n <div\n class={{\n \"modal-container\": true,\n \"modal-container-scroll-inside\": this.scrollInside,\n \"modal-container-scroll-outside\": !this.scrollInside,\n }}\n id={this.modalid}\n >\n <header onClick={this.emitModalHeaderActive.bind(this)}>\n <div>\n {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n {this.closeButtonSlot()}\n </div>\n {this.modalsubtitle && (\n <div\n class=\"subtitle\"\n id=\"modal-subtitle\"\n >\n {this.modalsubtitle}\n </div>\n )}\n </header>\n\n <div\n class={{\n \"modal-content-scroll-inside\": this.scrollInside,\n \"modal-content-scroll-outside\": !this.scrollInside,\n }}\n id=\"modal-content\"\n >\n <slot name=\"modalContent\"></slot>\n </div>\n </div>\n <div\n class={{\n \"modal-background\": true,\n \"modal-background-scroll-outside\": !this.scrollInside,\n }}\n data-action=\"modalBackground\"\n data-modal={this.modalid}\n onClick={() => {\n this.emitBackgroundClick();\n this.close();\n }}\n ></div>\n </dialog>\n );\n }\n}\n"]}

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 CHANGED Viewed

@@ -204,10 +204,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '16294d384c48cb2380178445630240fcc6f085cc', class: {
+        return (h(Host, { key: 'ddfa52ab8c585f3502004479d43b9cd0768284df', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '98eae832700569a7f2539aa51cee7c07ac2f3815', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '21ddd942ac5c9a7cfdf53e1c31788268b7932f03', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: 'd2582f956ec466d672bdf43494f96d1b2ee73485', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '3cfbaf5ef02b8964b1b497deef2b8e95b6ef94e0' })), h("button", { key: '6cc204b98252d19cdd79bdf2f9f1824c2f69d559', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '7bc36b5cdb865c759e0bb37362a820557e079be4', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: '15c0e811c33f4479e1889a510c3ec63bd36e1bc6', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: 'b960014b0fb670473bd159aaab7bfbf772e7bd15', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '032fd5f8b6ef9a507af18dc2e886f13e8d25bb5f', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'e29f63dd956a46981607b7c7d771d97803a7cc8e' })), h("button", { key: '66a60588ccd80220b7ec5f063c4ccb664185e5d8', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '90f9cd71eb2bdf8dec8d18e41113b00b3e647c4d', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

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?.getAttribute(\"name\").replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n zicon?.setAttribute(\"name\", strokeIcon);\n\n return;\n }\n\n zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\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?.getAttribute(\"name\").replace(\"-filled\", \"\");\n if (i !== this.selectedTab) {\n tab.setAttribute(\"aria-selected\", \"false\");\n tab.tabIndex = -1;\n zicon?.setAttribute(\"name\", strokeIcon);\n\n return;\n }\n\n zicon?.setAttribute(\"name\", `${strokeIcon}-filled`);\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 CHANGED Viewed

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bf9ead754226002371eb0669770d24c0230bcf92' }, this.contenticonname && (h("z-icon", { key: '322709ad12acd8a885214809012178649b172bd8', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'd68ea8f5984fee4d906a05f93f9cf3ef4dae932c', class: "content-container" }, h("div", { key: 'd67f12dcbcf7075cbc0e111db260dce207e3411a', class: "content-text" }, h("slot", { key: '6e23a5b287e328657e1848dc1944b3a1ddc065be' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '68da7a70a5dec9113c021c915594c2e8424c21be', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '342853024b8a9bfce814282471d8d8e9e9f6b522', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'ce20a4b279bc3cb3d4b0dd7bf4c61fe9b3837556', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: '9049f1eb5307b4371dfaf51b897b759446b77dcb' }, this.contenticonname && (h("z-icon", { key: '856de47150e83f5bb71b23fdcb0663e0552241b9', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '303136903e30c9186f2ada431ebf3edab07e29d3', class: "content-container" }, h("div", { key: 'a1a6baf6fb38c4f1c747a263d6fed54e5bfd4105', class: "content-text" }, h("slot", { key: '1d57dcb7b9d78291e35dcbb493ef40d98b2cf53b' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '40a864ef7bc4692fd55bee3c7a1e9408c3e6de6c', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'e4c7f9d2314d79efb318432005be578d0eec5748', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'b3cfd176d32e36e5c4dd2bd2788950cc80295d83', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '44382bb203dff02051742ab75321405ea88a40ce', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: 'a3e8b0892f68a7123535e7a15f56909e7e2fc971', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '5ccd9e46853a37b08f1ba3f6e8350037777eb9d2', role: "presentation", class: "canvas-content" }, h("slot", { key: '033b592b1d74f97fc46e7f93ae7e1a88e44f328d', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { key: '30719eb0832c6dd4f8d49bae817514414a64f794', class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'fcab905788db2b161b57069dcaea66f31b191a8c', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '235b3fde2fd77aadd45b580ddb6eb59d16f534a8', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '3bf75a309014335ef17029ff0612a1bf3007f88a', role: "presentation", class: "canvas-content" }, h("slot", { key: '332d04d2254dc91e4ef757c2e4c4d4af5a7080fd', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { key: 'd2bed4922a7a1512b046b037137c7dcba9daf7b6', class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }