@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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

@@ -0,0 +1,357 @@
+import { h } from "@stencil/core";
+import dialogPolyfill from "dialog-polyfill";
+import { KeyboardCode } from "../../beans";
+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
+ * @slot modalContent - set the content of the modal
+ */
+export class ZModal {
+    constructor() {
+        this.modalid = undefined;
+        this.modaltitle = undefined;
+        this.modalsubtitle = undefined;
+        this.closeButtonLabel = "chiudi modale";
+        this.alertdialog = false;
+        this.closable = true;
+        this.scrollInside = true;
+    }
+    emitModalClose() {
+        if (this.closable) {
+            this.modalClose.emit({ modalid: this.modalid });
+        }
+    }
+    emitModalHeaderActive() {
+        this.modalHeaderActive.emit({ modalid: this.modalid });
+    }
+    emitBackgroundClick() {
+        if (this.closable) {
+            this.modalBackgroundClick.emit({ modalid: this.modalid });
+        }
+    }
+    componentDidLoad() {
+        if (typeof window.HTMLDialogElement !== "function") {
+            /* workaround to fix `registerDialog` in test environment:
+            stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,
+            which is used by `registerDialog` to recognize the element as dialog */
+            if (!this.dialog.localName) {
+                Object.defineProperty(this.dialog, "localName", { value: "dialog" });
+            }
+            dialogPolyfill.registerDialog(this.dialog);
+            this.dialog.setAttribute("open", "true");
+        }
+        else {
+            this.open();
+        }
+    }
+    /** open modal */
+    async open() {
+        var _a;
+        (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
+    }
+    /** close modal */
+    async close() {
+        var _a;
+        if (this.closable) {
+            (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.close();
+        }
+    }
+    /**
+     * Get a list of focusable elements in the dialog.
+     * Remove elements with `display: none` from the list, because they're not focusable.
+     *
+     * N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.
+     * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.
+     */
+    get focusableElements() {
+        return [
+            ...Array.from(this.host.shadowRoot.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
+            ...Array.from(this.host.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR)),
+        ].filter((element) => getComputedStyle(element).display !== "none");
+    }
+    handleKeyDown(e) {
+        if (e.code !== KeyboardCode.TAB) {
+            return;
+        }
+        const focusableElements = this.focusableElements;
+        const shadowActiveElement = this.host.shadowRoot.activeElement;
+        const activeElement = this.host.ownerDocument.activeElement;
+        const firstFocusableElement = focusableElements[0];
+        const lastFocusableElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey && (shadowActiveElement == firstFocusableElement || activeElement == firstFocusableElement)) {
+            // shift + tab was pressed and current active element is the first focusable element
+            e.preventDefault();
+            lastFocusableElement.focus();
+        }
+        else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement || activeElement == lastFocusableElement)) {
+            // shift + tab was pressed and current active element is the first focusable element
+            e.preventDefault();
+            firstFocusableElement.focus();
+        }
+    }
+    closeButtonSlot() {
+        if (this.closable) {
+            return (h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: () => this.close() }, h("z-icon", { name: "multiply-circle-filled" }))));
+        }
+    }
+    handleEscape(e) {
+        if (this.closable) {
+            return;
+        }
+        e.preventDefault();
+    }
+    render() {
+        return (h("dialog", { key: '502c0fd42f37a498ef3ec2b2b174ac4950287883', 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: '0dd9496ca11660307bcb8d751e8793659aa30741', class: {
+                "modal-container": true,
+                "modal-container-scroll-inside": this.scrollInside,
+                "modal-container-scroll-outside": !this.scrollInside,
+            }, id: this.modalid }, h("header", { key: '6952365a4a1d64e1ce23a9454f11cd4ae76e37ca', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'fe219a40167ad9984255885bb189d9a9a0509cd5' }, this.modaltitle && h("h1", { key: '2991d4e6c254160dfe33e3558dc5db4d4dbf0abf', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '5a612bc3eb027b488a37918794c4f24e1991a38d', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '34008ade3d0f05c701b4d94df647086a8de3cd27', class: {
+                "modal-content-scroll-inside": this.scrollInside,
+                "modal-content-scroll-outside": !this.scrollInside,
+            }, id: "modal-content" }, h("slot", { key: '7ce631a687090f9b69bafa8de5dbe76d21d2c554', name: "modalContent" }))), h("div", { key: '8fc40e271bec8219fbbbf208bbba900a74ebdec8', class: {
+                "modal-background": true,
+                "modal-background-scroll-outside": !this.scrollInside,
+            }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {
+                this.emitBackgroundClick();
+                this.close();
+            } })));
+    }
+    static get is() { return "z-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "unique id"
+                },
+                "attribute": "modalid",
+                "reflect": false
+            },
+            "modaltitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "title text (optional)"
+                },
+                "attribute": "modaltitle",
+                "reflect": false
+            },
+            "modalsubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "subtitle (optional)"
+                },
+                "attribute": "modalsubtitle",
+                "reflect": false
+            },
+            "closeButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label for close button (optional)"
+                },
+                "attribute": "close-button-label",
+                "reflect": false,
+                "defaultValue": "\"chiudi modale\""
+            },
+            "alertdialog": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "add role \"alertdialog\" to dialog (optional, default is false)"
+                },
+                "attribute": "alertdialog",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "if true, the modal is closable (optional, default is true)"
+                },
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "scrollInside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "if true, the modal can scroll inside, if false the viewport can scroll"
+                },
+                "attribute": "scroll-inside",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "modalClose",
+                "name": "modalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emitted on close button click, returns modalid"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "modalHeaderActive",
+                "name": "modalHeaderActive",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emitted on modal header click, returns modalid"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "modalBackgroundClick",
+                "name": "modalBackgroundClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emitted on background click, returns modalid"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "open modal",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "close modal",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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\";\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 */\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  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\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.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.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAE/B,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,qBAAqB;SAC5B,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,oHAAoH;SAC3H,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,yIAAyI;SAChJ,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BjC,CAAC,CAAC;IACD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,0IAA0I;SACjJ,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BjC,CAAC,CAAC;IACD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,+EAA+E;SACtF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,4IAA4I;SACnJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\nimport {ZModal} from \"./index\";\n\ndescribe(\"Suite test ZModal\", () => {\n  it(\"Test render empty ZModal\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal></z-modal>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-modal>\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\">\n            <header>\n              <div>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\"></div>\n        </dialog>\n        </mock:shadow-root>\n      </z-modal>\n    `);\n  });\n\n  it(\"Test render ZModal with props\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\"></z-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\">\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\" id=\"modal\">\n            <header>\n              <div>\n                <h1 id=\"modal-title\">title</h1>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n              <div class=\"subtitle\" id=\"modal-subtitle\">subtitle</div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\" data-modal=\"modal\"></div>\n        </dialog>\n        </mock:shadow-root>\n      </z-modal>\n    `);\n  });\n\n  it(\"Test render ZModal with prop scrollable set to true\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"true\"></z-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"true\">\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\" id=\"modal\">\n            <header>\n              <div>\n                <h1 id=\"modal-title\">title</h1>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n               <div class=\"subtitle\" id=\"modal-subtitle\">subtitle</div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\" data-modal=\"modal\"></div>\n        </div>\n      </div>\n    </dialog>\n  </mock:shadow-root>\n</z-modal>\n`);\n  });\n\n  it(\"Test render ZModal with prop scrollable set to false\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"false\"></z-modal>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-modal modalid=\"modal\" modaltitle=\"title\" modalsubtitle=\"subtitle\" close-button-label=\"chiudi modale\" scroll-inside=\"false\">\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" class=\"modal-dialog\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-outside\" id=\"modal\">\n            <header>\n              <div>\n                <h1 id=\"modal-title\">title</h1>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n               <div class=\"subtitle\" id=\"modal-subtitle\">subtitle</div>\n            </header>\n            <div class=\"modal-content-scroll-outside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n              <div class=\"modal-background modal-background-scroll-outside\" data-action=\"modalBackground\" data-modal=\"modal\"></div>\n        </div>\n      </div>\n    </dialog>\n  </mock:shadow-root>\n</z-modal>\n`);\n  });\n\n  it(\"Test render ZModal with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal><div slot=\"modalContent\">Contenuto dello <b>slot</b></div></z-modal>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-modal>\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\">\n            <header>\n              <div>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\"></div>\n        </dialog>\n        </mock:shadow-root>\n        <div slot=\"modalContent\">Contenuto dello <b>slot</b></div>\n      </z-modal>\n    `);\n  });\n  it(\"Test render ZModal with slotted content and close button\", async () => {\n    const page = await newSpecPage({\n      components: [ZModal],\n      html: `<z-modal><div slot=\"modalContent\">Contenuto dello <b>slot</b></div><button slot=\"modalCloseButton\" aria-label=\"close\">X</button></z-modal>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-modal>\n        <mock:shadow-root>\n        <dialog role=\"dialog\" aria-describedby=\"modal-content\" aria-labelledby=\"modal-title\" open=\"true\">\n          <div class=\"modal-container modal-container-scroll-inside\">\n            <header>\n              <div>\n                <slot name=\"modalCloseButton\">\n                  <button aria-label=\"chiudi modale\">\n                    <z-icon name=\"multiply-circle-filled\"></z-icon>\n                  </button>\n                </slot>\n              </div>\n            </header>\n            <div class=\"modal-content-scroll-inside\" id=\"modal-content\">\n              <slot name=\"modalContent\"></slot>\n            </div>\n          </div>\n          <div class=\"modal-background\" data-action=\"modalBackground\"></div>\n        </dialog>\n        </mock:shadow-root>\n        <div slot=\"modalContent\">Contenuto dello <b>slot</b></div>\n        <button aria-label=\"close\" slot=\"modalCloseButton\">X</button>\n      </z-modal>\n    `);\n  });\n});\n"]}

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

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