@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.4

package/dist/collection/components/ic-dialog/ic-dialog.js

@@ -1,649 +0,0 @@
-import { Host, h, } from "@stencil/core";
-import closeIcon from "../../assets/close-icon.svg";
-import { isSlotUsed, checkResizeObserver } from "../../utils/helpers";
-/**
- * @slot dialog-controls - Content will be place at the bottom of the dialog.
- * @slot heading - Content will be placed at the top of the dialog.
- * @slot label - Content will be placed above the dialog heading.
- */
-export class Dialog {
-  constructor() {
-    this.DATA_OVERFLOW = "data-overflow";
-    this.DATA_GETS_FOCUS = "data-gets-focus";
-    this.DATA_GETS_FOCUS_SELECTOR = "[data-gets-focus]";
-    this.DIALOG_CONTROLS = "dialog-controls";
-    this.dialogHeight = 0;
-    this.focusedElementIndex = 0;
-    this.IC_TEXT_FIELD = "IC-TEXT-FIELD";
-    this.resizeObserver = null;
-    this.setContentOverflow = () => {
-      if (this.dialogEl.clientHeight < this.dialogEl.scrollHeight) {
-        this.el.setAttribute(this.DATA_OVERFLOW, "true");
-      }
-      else {
-        this.el.setAttribute(this.DATA_OVERFLOW, "false");
-      }
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);
-      });
-      this.resizeObserver.observe(this.dialogEl);
-    };
-    this.resizeObserverCallback = () => {
-      if (this.dialogEl.clientHeight !== this.dialogHeight) {
-        this.el.setAttribute(this.DATA_OVERFLOW, "false");
-        this.setContentOverflow();
-        this.dialogHeight = this.dialogEl.clientHeight;
-      }
-    };
-    this.setInitialFocus = () => {
-      this.sourceElement = document.activeElement;
-      let focusedElement;
-      if (this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR) !== null) {
-        focusedElement = this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR);
-      }
-      else {
-        focusedElement = this.el.shadowRoot.querySelector(this.DATA_GETS_FOCUS_SELECTOR);
-      }
-      if (focusedElement.tagName === this.IC_TEXT_FIELD) {
-        focusedElement.setFocus();
-      }
-      else {
-        focusedElement.focus();
-      }
-    };
-    this.getFocusedElementIndex = () => {
-      for (let i = 0; i < this.interactiveElementList.length; i++) {
-        if (this.interactiveElementList[i] ===
-          (this.el.shadowRoot.activeElement || document.activeElement)) {
-          this.focusedElementIndex = i;
-        }
-      }
-    };
-    this.setAlertVariant = () => {
-      if (this.status !== undefined && this.status !== null) {
-        const alert = this.el.shadowRoot.querySelector("ic-alert");
-        alert.setAttribute("variant", this.status);
-      }
-    };
-    this.closeIconClick = () => {
-      this.hideDialog();
-    };
-    this.getInteractiveElements = () => {
-      this.interactiveElementList = Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));
-      const slottedInteractiveElements = Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]), 
-          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, 
-          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button, 
-          ic-navigation-item, ic-switch, ic-text-field`));
-      if (slottedInteractiveElements.length > 0) {
-        if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {
-          slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, "");
-        }
-        else if (!this.destructive) {
-          slottedInteractiveElements[slottedInteractiveElements.length - 1].setAttribute(this.DATA_GETS_FOCUS, "");
-        }
-      }
-      for (let i = 0; i < slottedInteractiveElements.length; i++) {
-        this.interactiveElementList.splice(1 + i, 0, slottedInteractiveElements[i]);
-      }
-    };
-    this.focusNextInteractiveElement = (shiftKey) => {
-      this.getFocusedElementIndex();
-      if (shiftKey) {
-        this.focusedElementIndex -= 1;
-      }
-      else {
-        this.focusedElementIndex += 1;
-      }
-      if (this.focusedElementIndex > this.interactiveElementList.length - 1)
-        this.focusedElementIndex = 0;
-      else if (this.focusedElementIndex < 0) {
-        this.focusedElementIndex = this.interactiveElementList.length - 1;
-      }
-      const nextFocusEl = this.interactiveElementList[this.focusedElementIndex];
-      if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {
-        nextFocusEl.setFocus();
-      }
-      else {
-        nextFocusEl.focus();
-      }
-    };
-    this.setButtonOnClick = () => {
-      var _a, _b, _c;
-      if (this.buttons) {
-        this.buttonOnclick0 = new Function((_a = this.buttonProps[0]) === null || _a === void 0 ? void 0 : _a.onclick);
-        this.buttonOnclick1 = new Function((_b = this.buttonProps[1]) === null || _b === void 0 ? void 0 : _b.onclick);
-        this.buttonOnclick2 = new Function((_c = this.buttonProps[2]) === null || _c === void 0 ? void 0 : _c.onclick);
-      }
-    };
-    this.getButtonOnclick = (index) => {
-      if (index === 0) {
-        return this.buttonOnclick0();
-      }
-      else if (index === 1) {
-        return this.buttonOnclick1();
-      }
-      else {
-        return this.buttonOnclick2();
-      }
-    };
-    this.getButtonVariant = (index) => {
-      const mainVariant = this.destructive ? "destructive" : "primary";
-      if (this.buttonProps.length === 1) {
-        return mainVariant;
-      }
-      else if (this.buttonProps.length === 2) {
-        if (index === 0) {
-          return "tertiary";
-        }
-        else {
-          return mainVariant;
-        }
-      }
-      else {
-        if (index === 2) {
-          return mainVariant;
-        }
-        else {
-          return "secondary";
-        }
-      }
-    };
-    this.dialogRendered = false;
-    this.fadeIn = false;
-    this.alertHeading = undefined;
-    this.alertMessage = undefined;
-    this.buttons = true;
-    this.closeOnBackdropClick = true;
-    this.destructive = false;
-    this.dismissLabel = "Dismiss";
-    this.heading = undefined;
-    this.label = undefined;
-    this.size = "small";
-    this.status = undefined;
-    this.buttonProps = [
-      {
-        label: "Cancel",
-        onclick: "this.cancelDialog();",
-      },
-      { label: "Confirm", onclick: "this.confirmDialog();" },
-    ];
-  }
-  watchPropHandler() {
-    this.setButtonOnClick();
-  }
-  componentWillLoad() {
-    this.setButtonOnClick();
-  }
-  componentDidLoad() {
-    this.getInteractiveElements();
-    this.setAlertVariant();
-  }
-  handleKeyboard(ev) {
-    if (this.dialogRendered) {
-      switch (ev.key) {
-        case "Tab":
-          ev.preventDefault();
-          this.focusNextInteractiveElement(ev.shiftKey);
-          break;
-        case "Escape":
-          !ev.repeat && this.hideDialog();
-          ev.stopImmediatePropagation();
-          break;
-      }
-    }
-  }
-  handleClick(ev) {
-    const dialogElement = this.el.shadowRoot.querySelector("dialog");
-    if (this.closeOnBackdropClick &&
-      ev.composedPath().indexOf(dialogElement) <= 0) {
-      const rect = this.dialogEl.getBoundingClientRect();
-      const isInDialog = rect.top <= ev.clientY &&
-        ev.clientY <= rect.top + rect.height &&
-        rect.left <= ev.clientX &&
-        ev.clientX <= rect.left + rect.width;
-      if (!isInDialog) {
-        this.hideDialog();
-      }
-    }
-  }
-  /**
-   * Use to show the dialog.
-   */
-  async showDialog() {
-    this.dialogRendered = true;
-    this.dialogEl.showModal();
-    setTimeout(() => {
-      this.fadeIn = true;
-    }, 10);
-    setTimeout(() => {
-      this.setInitialFocus();
-      checkResizeObserver(this.runResizeObserver);
-    }, 75);
-    setTimeout(() => {
-      this.getFocusedElementIndex();
-      this.icDialogOpened.emit();
-    }, 80);
-  }
-  /**
-   * Use to hide the dialog.
-   */
-  async hideDialog() {
-    this.fadeIn = false;
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-    setTimeout(() => {
-      var _a;
-      this.dialogRendered = false;
-      this.dialogEl.close();
-      (_a = this.sourceElement) === null || _a === void 0 ? void 0 : _a.focus();
-      this.el.removeAttribute(this.DATA_OVERFLOW);
-      this.dialogHeight = 0;
-      this.icDialogClosed.emit();
-    }, 80);
-  }
-  /**
-   * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.
-   */
-  async cancelDialog() {
-    this.icDialogCancelled.emit();
-    this.hideDialog();
-  }
-  /**
-   * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.
-   */
-  async confirmDialog() {
-    this.icDialogConfirmed.emit();
-  }
-  render() {
-    const { alertHeading, alertMessage, buttons, buttonProps, size, heading, label, status, destructive, dismissLabel, } = this;
-    return (h(Host, { class: { ["hidden"]: !this.dialogRendered, ["fade-in"]: this.fadeIn } }, h("dialog", { class: { ["dialog"]: true, [`${size}`]: true }, "aria-labelledby": "dialog-label dialog-heading", "aria-describedby": "dialog-alert dialog-content", ref: (el) => (this.dialogEl = el) }, h("div", { class: "heading-area" }, h("div", { class: "heading-content" }, h("div", { class: "label" }, h("slot", { name: "label" }, h("ic-typography", { variant: "label", id: "dialog-label" }, label))), h("div", { class: "heading" }, h("slot", { name: "heading" }, h("ic-typography", { variant: "h4", id: "dialog-heading" }, heading)))), h("ic-button", { class: "close-icon", variant: "icon", "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }, h("span", { class: "close-icon-svg", innerHTML: closeIcon }))), h("div", { class: "content-area" }, status && (h("ic-alert", { variant: status, heading: alertHeading, message: alertMessage, "title-above": true, class: "status-alert", id: "dialog-alert" })), h("div", { id: "dialog-content" }, h("slot", null))), (buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (h("div", { class: {
-        [this.DIALOG_CONTROLS]: true,
-        ["triple-button"]: buttonProps.length === 3,
-      } }, h("slot", { name: this.DIALOG_CONTROLS }, !isSlotUsed(this.el, this.DIALOG_CONTROLS) &&
-      buttonProps.map((props, index) => {
-        if (index > 2) {
-          return;
-        }
-        else {
-          return (h("ic-button", { variant: this.getButtonVariant(index), onClick: () => this.getButtonOnclick(index), class: "dialog-control-button", "full-width": buttonProps.length === 3, "data-gets-focus": this.getButtonVariant(index) === "primary"
-              ? ""
-              : null }, props.label));
-        }
-      })))))));
-  }
-  static get is() { return "ic-dialog"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-dialog.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-dialog.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "alertHeading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If a status is set, sets the heading for the displayed alert."
-        },
-        "attribute": "alert-heading",
-        "reflect": false
-      },
-      "alertMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If a status is set, sets the message for the displayed alert."
-        },
-        "attribute": "alert-message",
-        "reflect": false
-      },
-      "buttons": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls."
-        },
-        "attribute": "buttons",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "closeOnBackdropClick": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set to `true`, the dialog will not close when the backdrop is clicked."
-        },
-        "attribute": "close-on-backdrop-click",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "destructive": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
-        },
-        "attribute": "destructive",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "dismissLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the dismiss label tooltip and aria label."
-        },
-        "attribute": "dismiss-label",
-        "reflect": false,
-        "defaultValue": "\"Dismiss\""
-      },
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the heading for the dialog."
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the optional label for the dialog which appears above the heading."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"small\" | \"medium\" | \"large\"",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the maximum and minimum height and width for the dialog."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"small\""
-      },
-      "status": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"",
-          "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set, displays an alert of the corresponding variant below the heading."
-        },
-        "attribute": "status",
-        "reflect": false
-      },
-      "buttonProps": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ label: string; onclick: string }[]",
-          "resolved": "{ label: string; onclick: string; }[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the label and onclick functions for default buttons."
-        },
-        "defaultValue": "[\n    {\n      label: \"Cancel\",\n      onclick: \"this.cancelDialog();\",\n    },\n    { label: \"Confirm\", onclick: \"this.confirmDialog();\" },\n  ]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "dialogRendered": {},
-      "fadeIn": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "icDialogCancelled",
-        "name": "icDialogCancelled",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "icDialogClosed",
-        "name": "icDialogClosed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when dialog has closed."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "icDialogConfirmed",
-        "name": "icDialogConfirmed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "icDialogOpened",
-        "name": "icDialogOpened",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when dialog has opened."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "showDialog": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Use to show the dialog.",
-          "tags": []
-        }
-      },
-      "hideDialog": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Use to hide the dialog.",
-          "tags": []
-        }
-      },
-      "cancelDialog": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.",
-          "tags": []
-        }
-      },
-      "confirmDialog": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "buttonProps",
-        "methodName": "watchPropHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyboard",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=ic-dialog.js.map