@zanichelli/albe-web-components 12.1.3-rc → 12.1.3

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

@@ -0,0 +1,351 @@
+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() {
+    /** aria-label for close button (optional) */
+    this.closeButtonLabel = "chiudi modale";
+    /** add role "alertdialog" to dialog (optional, default is false) */
+    this.alertdialog = false;
+    /** if true, the modal is closable (optional, default is true) */
+    this.closable = true;
+    /** if true, the modal can scroll inside, if false the viewport can scroll */
+    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 HTMLDialogElement !== "function") {
+      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", { 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(),
+      // @ts-ignore
+      onCancel: (e) => this.handleEscape(e) }, h("div", { class: {
+        "modal-container": true,
+        "modal-container-scroll-inside": this.scrollInside,
+        "modal-container-scroll-outside": !this.scrollInside,
+      }, id: this.modalid }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", { id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && h("h2", { id: "modal-subtitle" }, this.modalsubtitle)), h("div", { class: {
+        "modal-content-scroll-inside": this.scrollInside,
+        "modal-content-scroll-outside": !this.scrollInside,
+      }, id: "modal-content" }, h("slot", { name: "modalContent" }))), h("div", { 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"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "open modal",
+          "tags": []
+        }
+      },
+      "close": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "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
+      }];
+  }
+}

package/dist/collection/components/modal/z-modal/styles.css

@@ -0,0 +1,251 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > dialog {
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+/* stylelint-disable selector-pseudo-class-no-unknown */
+:host > dialog:modal {
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+:host > dialog::backdrop {
+  display: none;
+}
+
+/* polyfill style  */
+:host > dialog + .backdrop {
+  display: none;
+}
+
+:host > dialog:not([open]) {
+  display: none;
+}
+
+:host > dialog[open] {
+  display: block;
+}
+
+.modal-container {
+  z-index: 1010;
+  display: flex;
+  overflow: -moz-scrollbars-none;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.modal-container > .modal-content-scroll-outside {
+  overflow: auto;
+  background: var(--color-surface01);
+}
+
+.modal-container > header {
+  padding: calc(var(--space-unit) * 2 - 2px) calc(var(--space-unit) * 2);
+  background: var(--color-surface02);
+}
+
+.modal-container > header button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  margin-left: auto;
+  background: transparent;
+  cursor: pointer;
+}
+
+.modal-container > header z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2.5);
+  --z-icon-height: calc(var(--space-unit) * 2.5);
+
+  display: flex;
+  fill: var(--color-icon01);
+}
+
+.modal-container > header > div {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.modal-container > header h1,
+.modal-container > header h2 {
+  padding: 0;
+  margin: 0;
+  color: var(--color-text01);
+  font-weight: var(--font-rg);
+}
+
+.modal-container > header h1 {
+  font-size: var(--font-size-5);
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+.modal-container > header h2 {
+  font-size: var(--font-size-3);
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+
+.modal-container > header > div > h1 *:empty {
+  display: none;
+}
+
+.modal-container > header h1 + h2 {
+  margin-top: calc(var(--space-unit) * 0.5);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside {
+  overflow: hidden auto;
+  flex: 1 auto;
+  background: var(--color-surface01);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar,
+.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb,
+.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+}
+
+.modal-container-scroll-inside > .modal-content-scroll-inside::-webkit-scrollbar-thumb:hover,
+.modal-container-scroll-outside > .modal-content-scroll-outside::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+/* Firefox */
+.modal-container-scroll-inside .modal-content-scroll-inside,
+.modal-container-scroll-outside .modal-content-scroll-outside {
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+/* Tablet / Desktop */
+@media only screen and (min-width: 768px) {
+  .modal-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--gray900);
+    opacity: 0.7;
+  }
+
+  .modal-background.modal-background-scroll-outside {
+    position: sticky;
+  }
+
+  .modal-container-scroll-inside {
+    position: fixed;
+    top: calc(var(--space-unit) * 6);
+    left: 50%;
+    overflow: hidden;
+    width: auto;
+    min-width: calc(var(--space-unit) * 40);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
+    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));
+    border-radius: var(--border-radius);
+    transform: translateX(-50%);
+  }
+
+  .modal-container-scroll-outside {
+    position: absolute;
+    top: calc(var(--space-unit) * 6);
+    left: 50%;
+    display: block;
+    overflow: initial;
+    width: auto;
+    min-width: calc(var(--space-unit) * 40);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
+    max-height: calc(100vh - calc(var(--space-unit) * 6 * 2));
+    transform: translateX(-50%);
+  }
+
+  .modal-container > .modal-content-scroll-outside {
+    overflow: initial;
+  }
+
+  .modal-container-scroll-outside > header,
+  .modal-container-scroll-inside > header {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .modal-container-scroll-outside::after {
+    display: block;
+    height: calc(var(--space-unit) * 6);
+    content: " ";
+  }
+
+  .modal-dialog {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .modal-content-scroll-outside {
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
+
+  .modal-dialog::-webkit-scrollbar {
+    display: none;
+  }
+
+  .modal-container > header z-icon {
+    --z-icon-width: calc(var(--space-unit) * 3);
+    --z-icon-height: calc(var(--space-unit) * 3);
+  }
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) and (max-width: 1151px) {
+  .modal-container > header {
+    padding: calc(var(--space-unit) * 3 - 2px) calc(var(--space-unit) * 3);
+  }
+}
+
+/* Desktop */
+@media only screen and (min-width: 1152px) {
+  .modal-container > header {
+    padding: calc(var(--space-unit) * 4 - 4px) calc(var(--space-unit) * 4);
+  }
+
+  .modal-container > header h1 {
+    font-size: var(--font-size-6);
+    letter-spacing: 0;
+    line-height: 1.33;
+  }
+
+  .modal-container > header h2 {
+    font-size: var(--font-size-4);
+    letter-spacing: 0;
+    line-height: 1.5;
+  }
+
+  .modal-container > header h1 + h2 {
+    margin-top: 0;
+  }
+}