@zanichelli/albe-web-components 12.1.2 → 12.1.4-rc

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

@@ -1,351 +0,0 @@
-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

@@ -1,251 +0,0 @@
-: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;
-  }
-}