@ukic/web-components 2.6.0 → 2.8.0

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

@@ -458,6 +458,21 @@ video {
   transition: opacity var(--ic-easing-transition-slow);
 }
 
+:host(.disable-height-constraint) {
+  background: none;
+  justify-content: unset;
+  align-items: unset;
+}
+
+.dialog.disable-height-constraint {
+  max-height: none;
+  position: relative;
+}
+
+.dialog.disable-height-constraint .content-area {
+  overflow-y: visible;
+}
+
 :host(.fade-in) {
   opacity: 1;
   transition: opacity var(--ic-easing-transition-slow);
@@ -471,12 +486,13 @@ video {
   background-color: var(--ic-architectural-white);
   border: var(--ic-border-default);
   border-radius: var(--ic-border-radius);
-  padding: var(--ic-space-xs) var(--ic-space-md);
+  padding: var(--ic-space-xs) 0 var(--ic-space-md);
   transform: translateY(-3rem);
   transition: transform 1000s;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  overflow-x: visible;
 }
 
 :host(.fade-in) .dialog {
@@ -508,34 +524,23 @@ video {
 .heading-area {
   display: flex;
   margin-bottom: var(--ic-space-xs);
+  padding: 0 var(--ic-space-md);
 }
 
-.close-icon {
-  margin-left: auto;
+.heading {
+  overflow-wrap: break-word;
 }
 
-.close-icon-svg {
-  display: flex;
-  align-items: center;
+.close-icon {
+  margin-left: auto;
 }
 
 .content-area {
   -ms-overflow-style: none;
   scrollbar-width: none;
-  padding: 0 var(--ic-space-xs);
-  margin: 0 calc(-1 * var(--ic-space-xs));
-}
-
-:host([data-overflow="false"]) .content-area {
-  overflow-y: visible;
-}
-
-:host([data-overflow="true"]) .content-area {
-  overflow-y: scroll;
-}
-
-:host([data-overflow="false"]) .dialog {
-  overflow: visible;
+  padding: 0 var(--ic-space-md);
+  margin: 0;
+  overflow-y: auto;
 }
 
 .content-area::-webkit-scrollbar {
@@ -546,13 +551,21 @@ video {
   margin-bottom: var(--ic-space-sm);
 }
 
+#dialog-content ::slotted(ic-typography) {
+  overflow-wrap: break-word;
+}
+
+#dialog-content ::slotted(*) {
+  position: relative;
+}
+
 .status-alert {
   margin-bottom: var(--ic-space-xs);
 }
 
 .dialog-controls {
   margin-top: auto;
-  padding-top: var(--ic-space-xs);
+  padding: var(--ic-space-xs) var(--ic-space-md) 0;
   display: flex;
   justify-content: flex-end;
   gap: var(--ic-space-md);
@@ -563,6 +576,19 @@ video {
   width: fit-content;
 }
 
+.backdrop {
+  overflow-y: auto;
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(0 0 0 / 60%);
+  z-index: var(--ic-z-index-dialog);
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
 @media (min-width: 800px) {
   :host([size="large"]) .content-area {
     width: 75%;
@@ -578,6 +604,15 @@ video {
     max-height: none;
     box-sizing: border-box;
   }
+
+  .backdrop {
+    padding: 0;
+  }
+
+  .dialog.disable-height-constraint {
+    height: auto;
+    min-height: 100vh;
+  }
 }
 
 @media (max-width: 364px) {

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

@@ -9,7 +9,6 @@ import { isSlotUsed, checkResizeObserver, isPropDefined, } from "../../utils/hel
  */
 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";
@@ -18,13 +17,35 @@ export class Dialog {
     this.IC_TEXT_FIELD = "IC-TEXT-FIELD";
     this.IC_ACCORDION = "IC-ACCORDION";
     this.resizeObserver = null;
-    this.setContentOverflow = () => {
-      if (this.dialogEl.clientHeight < this.dialogEl.scrollHeight) {
-        this.el.setAttribute(this.DATA_OVERFLOW, "true");
+    this.dialogOpened = () => {
+      this.dialogRendered = true;
+      if (this.disableHeightConstraint) {
+        this.dialogEl.show();
       }
       else {
-        this.el.setAttribute(this.DATA_OVERFLOW, "false");
+        this.dialogEl.showModal();
       }
+      setTimeout(() => {
+        this.fadeIn = true;
+        /**
+         * This is required to set scroll back to top if:
+         * - dialog content goes below the fold
+         * - is closed using cancel or confirm and reopened.
+         *
+         * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.
+         */
+        if (this.disableHeightConstraint && this.backdropEl.scrollTop !== 0) {
+          this.backdropEl.scrollTop = 0;
+        }
+      }, 10);
+      setTimeout(() => {
+        this.setInitialFocus();
+        checkResizeObserver(this.runResizeObserver);
+      }, 75);
+      setTimeout(() => {
+        this.getFocusedElementIndex();
+        this.icDialogOpened.emit();
+      }, 80);
     };
     this.runResizeObserver = () => {
       this.resizeObserver = new ResizeObserver(() => {
@@ -35,11 +56,18 @@ export class Dialog {
     };
     this.resizeObserverCallback = () => {
       if (this.dialogEl.clientHeight !== this.dialogHeight) {
-        this.el.setAttribute(this.DATA_OVERFLOW, "false");
-        this.setContentOverflow();
         this.dialogHeight = this.dialogEl.clientHeight;
       }
     };
+    this.refreshInteractiveElementsOnSlotChange = () => {
+      this.contentArea = this.el.shadowRoot.querySelector("#dialog-content slot");
+      this.contentArea.addEventListener("slotchange", this.getInteractiveElements);
+    };
+    this.removeSlotChangeListener = () => {
+      if (this.contentArea) {
+        this.contentArea.removeEventListener("slotchange", this.getInteractiveElements);
+      }
+    };
     this.setInitialFocus = () => {
       this.sourceElement = document.activeElement;
       let focusedElement;
@@ -56,7 +84,9 @@ export class Dialog {
         focusedElement.setFocus();
       }
       else {
-        focusedElement.focus();
+        focusedElement.focus({
+          preventScroll: this.disableHeightConstraint ? true : false,
+        });
       }
     };
     this.getFocusedElementIndex = () => {
@@ -159,6 +189,25 @@ export class Dialog {
         }
       }
     };
+    this.renderDialog = () => {
+      const { alertHeading, alertMessage, buttons, buttonProps, size, heading, label, status, destructive, dismissLabel, hideCloseButton, } = this;
+      return (h("dialog", { class: {
+          ["dialog"]: true,
+          [`${size}`]: true,
+          ["disable-height-constraint"]: this.disableHeightConstraint,
+        }, "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)))), !hideCloseButton && (h("ic-button", { class: "close-icon", variant: "icon", innerHTML: closeIcon, "aria-label": dismissLabel, onClick: this.closeIconClick, "data-gets-focus": destructive || !buttons ? "" : null }))), h("div", { class: "content-area" }, isSlotUsed(this.el, "alert") ? (h("slot", { name: "alert" })) : (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));
+          }
+        }))))));
+    };
     this.dialogRendered = false;
     this.fadeIn = false;
     this.alertHeading = undefined;
@@ -167,6 +216,8 @@ export class Dialog {
     this.closeOnBackdropClick = true;
     this.destructive = false;
     this.dismissLabel = "Dismiss";
+    this.disableHeightConstraint = false;
+    this.hideCloseButton = false;
     this.heading = undefined;
     this.label = undefined;
     this.open = undefined;
@@ -182,19 +233,7 @@ export class Dialog {
   }
   watchOpenHandler() {
     if (this.open) {
-      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);
+      this.dialogOpened();
     }
     else {
       this.fadeIn = false;
@@ -206,7 +245,6 @@ export class Dialog {
         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);
@@ -215,12 +253,30 @@ export class Dialog {
   watchPropHandler() {
     this.setButtonOnClick();
   }
+  disconnectedCallback() {
+    this.removeSlotChangeListener();
+  }
   componentWillLoad() {
-    this.setButtonOnClick();
+    if (this.buttonProps.length) {
+      this.setButtonOnClick();
+    }
   }
   componentDidLoad() {
     this.getInteractiveElements();
     this.setAlertVariant();
+    this.refreshInteractiveElementsOnSlotChange();
+    if (this.open) {
+      this.dialogOpened();
+    }
+  }
+  componentDidRender() {
+    if (getComputedStyle(this.el).display !== "none" &&
+      this.disableHeightConstraint) {
+      document.body.style.overflow = "hidden";
+    }
+    else {
+      document.body.style.overflow = "auto";
+    }
   }
   handleKeyboard(ev) {
     if (this.dialogRendered) {
@@ -256,37 +312,13 @@ export class Dialog {
    * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
    */
   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);
+    this.open = true;
   }
   /**
    * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
    */
   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);
+    this.open = false;
   }
   /**
    * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.
@@ -317,21 +349,11 @@ export class Dialog {
     }
   }
   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" }, isSlotUsed(this.el, "alert") ? (h("slot", { name: "alert" })) : (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));
-        }
-      })))))));
+    return (h(Host, { class: {
+        ["hidden"]: !this.dialogRendered,
+        ["fade-in"]: this.fadeIn,
+        ["disable-height-constraint"]: this.disableHeightConstraint,
+      } }, this.disableHeightConstraint ? (h("div", { class: "backdrop", ref: (el) => (this.backdropEl = el) }, this.renderDialog())) : (this.renderDialog())));
   }
   static get is() { return "ic-dialog"; }
   static get encapsulation() { return "shadow"; }
@@ -459,6 +481,42 @@ export class Dialog {
         "reflect": false,
         "defaultValue": "\"Dismiss\""
       },
+      "disableHeightConstraint": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\nThis prop also prevents popover elements from being cut off within the content area."
+        },
+        "attribute": "disable-height-constraint",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hideCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the close button will not be displayed."
+        },
+        "attribute": "hide-close-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "heading": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-dialog.js","sourceRoot":"","sources":["../../../src/components/ic-dialog/ic-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Method,\n  Listen,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n  isSlotUsed,\n  checkResizeObserver,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n  tag: \"ic-dialog\",\n  styleUrl: \"ic-dialog.css\",\n  shadow: true,\n})\nexport class Dialog {\n  private DATA_OVERFLOW: string = \"data-overflow\";\n  private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n  private DATA_GETS_FOCUS_SELECTOR: string = \"[data-gets-focus]\";\n  private DIALOG_CONTROLS: string = \"dialog-controls\";\n  private dialogEl: HTMLDialogElement;\n  private dialogHeight: number = 0;\n  private focusedElementIndex = 0;\n  private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n  private IC_ACCORDION: string = \"IC-ACCORDION\";\n  private interactiveElementList: HTMLElement[];\n  private resizeObserver: ResizeObserver = null;\n  private resizeTimeout: number;\n  private sourceElement: HTMLElement;\n\n  /* eslint-disable */\n\n  private buttonOnclick0: Function;\n  private buttonOnclick1: Function;\n  private buttonOnclick2: Function;\n\n  /* eslint-enable */\n\n  @Element() el: HTMLIcDialogElement;\n\n  @State() dialogRendered: boolean = false;\n  @State() fadeIn: boolean = false;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.\n   */\n  @Prop() alertHeading?: string;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.\n   */\n  @Prop() alertMessage?: string;\n\n  /**\n   * If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls.\n   */\n  @Prop() buttons?: boolean = true;\n\n  /**\n   * If set to `true`, the dialog will not close when the backdrop is clicked.\n   */\n  @Prop() closeOnBackdropClick?: boolean = true;\n\n  /**\n   * 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.\n   */\n  @Prop() destructive?: boolean = false;\n\n  /**\n   * Sets the dismiss label tooltip and aria label.\n   */\n  @Prop() dismissLabel?: string = \"Dismiss\";\n\n  /**\n   * Sets the heading for the dialog.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Sets the optional label for the dialog which appears above the heading.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the dialog will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      this.dialogRendered = true;\n      this.dialogEl.showModal();\n      setTimeout(() => {\n        this.fadeIn = true;\n      }, 10);\n      setTimeout(() => {\n        this.setInitialFocus();\n        checkResizeObserver(this.runResizeObserver);\n      }, 75);\n      setTimeout(() => {\n        this.getFocusedElementIndex();\n        this.icDialogOpened.emit();\n      }, 80);\n    } else {\n      this.fadeIn = false;\n      if (this.resizeObserver !== null) {\n        this.resizeObserver.disconnect();\n      }\n      setTimeout(() => {\n        this.dialogRendered = false;\n        this.dialogEl.close();\n        this.sourceElement?.focus();\n        this.el.removeAttribute(this.DATA_OVERFLOW);\n        this.dialogHeight = 0;\n        this.icDialogClosed.emit();\n      }, 80);\n    }\n  }\n\n  /**\n   * Sets the maximum and minimum height and width for the dialog.\n   */\n  @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.\n   */\n  @Prop() status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\";\n\n  /**\n   * Sets the label and onclick functions for default buttons.\n   */\n  @Prop() buttonProps?: { label: string; onclick: string }[] = [\n    {\n      label: \"Cancel\",\n      onclick: \"this.cancelDialog();\",\n    },\n    { label: \"Confirm\", onclick: \"this.confirmDialog();\" },\n  ];\n\n  @Watch(\"buttonProps\")\n  watchPropHandler(): void {\n    this.setButtonOnClick();\n  }\n\n  /**\n   * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n   */\n  @Event() icDialogCancelled: EventEmitter<void>;\n\n  /**\n   * Emitted when dialog has closed.\n   */\n  @Event() icDialogClosed: EventEmitter<void>;\n\n  /**\n   * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n   */\n  @Event() icDialogConfirmed: EventEmitter<void>;\n\n  /**\n   * Emitted when dialog has opened.\n   */\n  @Event() icDialogOpened: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    this.setButtonOnClick();\n  }\n\n  componentDidLoad(): void {\n    this.getInteractiveElements();\n    this.setAlertVariant();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.dialogRendered) {\n      switch (ev.key) {\n        case \"Tab\":\n          ev.preventDefault();\n          this.focusNextInteractiveElement(ev.shiftKey);\n          break;\n        case \"Escape\":\n          if (!ev.repeat) {\n            this.open = false;\n          }\n          ev.stopImmediatePropagation();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\", {})\n  handleClick(ev: MouseEvent): void {\n    const dialogElement = this.el.shadowRoot.querySelector(\"dialog\");\n    if (\n      this.closeOnBackdropClick &&\n      ev.composedPath().indexOf(dialogElement) <= 0\n    ) {\n      const rect = this.dialogEl.getBoundingClientRect();\n      const isInDialog =\n        rect.top <= ev.clientY &&\n        ev.clientY <= rect.top + rect.height &&\n        rect.left <= ev.clientX &&\n        ev.clientX <= rect.left + rect.width;\n      if (!isInDialog) {\n        this.open = false;\n      }\n    }\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.\n   */\n  @Method()\n  async showDialog(): Promise<void> {\n    this.dialogRendered = true;\n    this.dialogEl.showModal();\n    setTimeout(() => {\n      this.fadeIn = true;\n    }, 10);\n    setTimeout(() => {\n      this.setInitialFocus();\n      checkResizeObserver(this.runResizeObserver);\n    }, 75);\n    setTimeout(() => {\n      this.getFocusedElementIndex();\n      this.icDialogOpened.emit();\n    }, 80);\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.\n   */\n  @Method()\n  async hideDialog(): Promise<void> {\n    this.fadeIn = false;\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n    setTimeout(() => {\n      this.dialogRendered = false;\n      this.dialogEl.close();\n      this.sourceElement?.focus();\n      this.el.removeAttribute(this.DATA_OVERFLOW);\n      this.dialogHeight = 0;\n      this.icDialogClosed.emit();\n    }, 80);\n  }\n\n  /**\n   * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n   */\n  @Method()\n  async cancelDialog(): Promise<void> {\n    this.icDialogCancelled.emit();\n    this.open = false;\n  }\n\n  /**\n   * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n   */\n  @Method()\n  async confirmDialog(): Promise<void> {\n    this.icDialogConfirmed.emit();\n  }\n\n  private setContentOverflow = (): void => {\n    if (this.dialogEl.clientHeight < this.dialogEl.scrollHeight) {\n      this.el.setAttribute(this.DATA_OVERFLOW, \"true\");\n    } else {\n      this.el.setAttribute(this.DATA_OVERFLOW, \"false\");\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeTimeout);\n      this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n    });\n    this.resizeObserver.observe(this.dialogEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.dialogEl.clientHeight !== this.dialogHeight) {\n      this.el.setAttribute(this.DATA_OVERFLOW, \"false\");\n      this.setContentOverflow();\n      this.dialogHeight = this.dialogEl.clientHeight;\n    }\n  };\n\n  private setInitialFocus = () => {\n    this.sourceElement = document.activeElement as HTMLElement;\n\n    let focusedElement;\n\n    if (this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR) !== null) {\n      focusedElement = this.el.querySelector(\n        this.DATA_GETS_FOCUS_SELECTOR\n      ) as HTMLElement;\n    } else {\n      focusedElement = this.el.shadowRoot.querySelector(\n        this.DATA_GETS_FOCUS_SELECTOR\n      ) as HTMLElement;\n    }\n    if (focusedElement.tagName === this.IC_TEXT_FIELD) {\n      (focusedElement as HTMLIcTextFieldElement).setFocus();\n    } else if (focusedElement.tagName === this.IC_ACCORDION) {\n      (focusedElement as HTMLIcAccordionElement).setFocus();\n    } else {\n      focusedElement.focus();\n    }\n  };\n\n  private getFocusedElementIndex = () => {\n    for (let i = 0; i < this.interactiveElementList.length; i++) {\n      if (\n        (this.interactiveElementList[i] as HTMLElement) ===\n        (this.el.shadowRoot.activeElement || document.activeElement)\n      ) {\n        this.focusedElementIndex = i;\n      }\n    }\n  };\n\n  private setAlertVariant = () => {\n    if (isPropDefined(this.status) && this.status !== null) {\n      const alert = this.el.shadowRoot.querySelector(\"ic-alert\");\n      alert.setAttribute(\"variant\", this.status);\n    }\n  };\n\n  private closeIconClick = () => {\n    this.open = false;\n  };\n\n  private getInteractiveElements = () => {\n    this.interactiveElementList = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"ic-button\")\n    );\n    const slottedInteractiveElements = Array.from(\n      this.el.querySelectorAll(\n        `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), \n          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, \n          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button, \n          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`\n      )\n    );\n    if (slottedInteractiveElements.length > 0) {\n      if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n        slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n      } else if (!this.destructive) {\n        slottedInteractiveElements[\n          slottedInteractiveElements.length - 1\n        ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n      }\n    }\n    for (let i = 0; i < slottedInteractiveElements.length; i++) {\n      this.interactiveElementList.splice(\n        1 + i,\n        0,\n        slottedInteractiveElements[i] as HTMLElement\n      );\n    }\n  };\n\n  private getNextFocusEl = (focusedElementIndex: number) =>\n    this.interactiveElementList[focusedElementIndex];\n\n  private focusNextInteractiveElement = (shiftKey: boolean) => {\n    this.getFocusedElementIndex();\n    this.setFocusIndexBasedOnShiftKey(shiftKey);\n    this.loopNextFocusIndexIfLastElement();\n\n    let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n\n    const isHidden = getComputedStyle(nextFocusEl).visibility === \"hidden\";\n\n    if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {\n      (nextFocusEl as HTMLIcTextFieldElement).setFocus();\n    } else {\n      if (isHidden) {\n        this.setFocusIndexBasedOnShiftKey(shiftKey);\n        this.loopNextFocusIndexIfLastElement();\n\n        nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n      }\n      if (nextFocusEl.tagName === this.IC_ACCORDION) {\n        (nextFocusEl as HTMLIcAccordionElement).setFocus();\n      } else {\n        (nextFocusEl as HTMLElement).focus();\n      }\n    }\n  };\n\n  private setButtonOnClick = () => {\n    if (this.buttons) {\n      this.buttonOnclick0 = new Function(this.buttonProps[0]?.onclick);\n      this.buttonOnclick1 = new Function(this.buttonProps[1]?.onclick);\n      this.buttonOnclick2 = new Function(this.buttonProps[2]?.onclick);\n    }\n  };\n\n  private getButtonOnclick = (index: number) => {\n    if (index === 0) {\n      return this.buttonOnclick0();\n    } else if (index === 1) {\n      return this.buttonOnclick1();\n    } else {\n      return this.buttonOnclick2();\n    }\n  };\n\n  private getButtonVariant = (index: number) => {\n    const mainVariant = this.destructive ? \"destructive\" : \"primary\";\n    if (this.buttonProps.length === 1) {\n      return mainVariant;\n    } else if (this.buttonProps.length === 2) {\n      if (index === 0) {\n        return \"tertiary\";\n      } else {\n        return mainVariant;\n      }\n    } else {\n      if (index === 2) {\n        return mainVariant;\n      } else {\n        return \"secondary\";\n      }\n    }\n  };\n\n  private loopNextFocusIndexIfLastElement() {\n    if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n      this.focusedElementIndex = 0;\n    else if (this.focusedElementIndex < 0) {\n      this.focusedElementIndex = this.interactiveElementList.length - 1;\n    }\n  }\n\n  private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n    if (shiftKey) {\n      this.focusedElementIndex -= 1;\n    } else {\n      this.focusedElementIndex += 1;\n    }\n  }\n\n  render() {\n    const {\n      alertHeading,\n      alertMessage,\n      buttons,\n      buttonProps,\n      size,\n      heading,\n      label,\n      status,\n      destructive,\n      dismissLabel,\n    } = this;\n\n    return (\n      <Host\n        class={{ [\"hidden\"]: !this.dialogRendered, [\"fade-in\"]: this.fadeIn }}\n      >\n        <dialog\n          class={{ [\"dialog\"]: true, [`${size}`]: true }}\n          aria-labelledby=\"dialog-label dialog-heading\"\n          aria-describedby=\"dialog-alert dialog-content\"\n          ref={(el) => (this.dialogEl = el)}\n        >\n          <div class=\"heading-area\">\n            <div class=\"heading-content\">\n              <div class=\"label\">\n                <slot name=\"label\">\n                  <ic-typography variant=\"label\" id=\"dialog-label\">\n                    {label}\n                  </ic-typography>\n                </slot>\n              </div>\n              <div class=\"heading\">\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\" id=\"dialog-heading\">\n                    {heading}\n                  </ic-typography>\n                </slot>\n              </div>\n            </div>\n            <ic-button\n              class=\"close-icon\"\n              variant=\"icon\"\n              aria-label={dismissLabel}\n              onClick={this.closeIconClick}\n              data-gets-focus={destructive || !buttons ? \"\" : null}\n            >\n              <span class=\"close-icon-svg\" innerHTML={closeIcon} />\n            </ic-button>\n          </div>\n          <div class=\"content-area\">\n            {isSlotUsed(this.el, \"alert\") ? (\n              <slot name=\"alert\"></slot>\n            ) : (\n              status && (\n                <ic-alert\n                  variant={status}\n                  heading={alertHeading}\n                  message={alertMessage}\n                  title-above\n                  class=\"status-alert\"\n                  id=\"dialog-alert\"\n                ></ic-alert>\n              )\n            )}\n            <div id=\"dialog-content\">\n              <slot></slot>\n            </div>\n          </div>\n          {(buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (\n            <div\n              class={{\n                [this.DIALOG_CONTROLS]: true,\n                [\"triple-button\"]: buttonProps.length === 3,\n              }}\n            >\n              <slot name={this.DIALOG_CONTROLS}>\n                {!isSlotUsed(this.el, this.DIALOG_CONTROLS) &&\n                  buttonProps.map((props, index) => {\n                    if (index > 2) {\n                      return;\n                    } else {\n                      return (\n                        <ic-button\n                          variant={this.getButtonVariant(index)}\n                          onClick={() => this.getButtonOnclick(index)}\n                          class=\"dialog-control-button\"\n                          full-width={buttonProps.length === 3}\n                          data-gets-focus={\n                            this.getButtonVariant(index) === \"primary\"\n                              ? \"\"\n                              : null\n                          }\n                        >\n                          {props.label}\n                        </ic-button>\n                      );\n                    }\n                  })}\n              </slot>\n            </div>\n          )}\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-dialog.js","sourceRoot":"","sources":["../../../src/components/ic-dialog/ic-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Method,\n  Listen,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport {\n  isSlotUsed,\n  checkResizeObserver,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot dialog-controls - Content will be place at the bottom of the dialog.\n * @slot heading - Content will be placed at the top of the dialog.\n * @slot label - Content will be placed above the dialog heading.\n * @slot alert - Content will be placed at the top of the content area of the dialog.\n */\n@Component({\n  tag: \"ic-dialog\",\n  styleUrl: \"ic-dialog.css\",\n  shadow: true,\n})\nexport class Dialog {\n  private backdropEl: HTMLDivElement;\n  private contentArea: HTMLSlotElement;\n  private DATA_GETS_FOCUS: string = \"data-gets-focus\";\n  private DATA_GETS_FOCUS_SELECTOR: string = \"[data-gets-focus]\";\n  private DIALOG_CONTROLS: string = \"dialog-controls\";\n  private dialogEl: HTMLDialogElement;\n  private dialogHeight: number = 0;\n  private focusedElementIndex = 0;\n  private IC_TEXT_FIELD: string = \"IC-TEXT-FIELD\";\n  private IC_ACCORDION: string = \"IC-ACCORDION\";\n  private interactiveElementList: HTMLElement[];\n  private resizeObserver: ResizeObserver = null;\n  private resizeTimeout: number;\n  private sourceElement: HTMLElement;\n\n  /* eslint-disable */\n\n  private buttonOnclick0: Function;\n  private buttonOnclick1: Function;\n  private buttonOnclick2: Function;\n\n  /* eslint-enable */\n\n  @Element() el: HTMLIcDialogElement;\n\n  @State() dialogRendered: boolean = false;\n  @State() fadeIn: boolean = false;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.\n   */\n  @Prop() alertHeading?: string;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.\n   */\n  @Prop() alertMessage?: string;\n\n  /**\n   * If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls.\n   */\n  @Prop() buttons?: boolean = true;\n\n  /**\n   * If set to `true`, the dialog will not close when the backdrop is clicked.\n   */\n  @Prop() closeOnBackdropClick?: boolean = true;\n\n  /**\n   * 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.\n   */\n  @Prop() destructive?: boolean = false;\n\n  /**\n   * Sets the dismiss label tooltip and aria label.\n   */\n  @Prop() dismissLabel?: string = \"Dismiss\";\n\n  /**\n   * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.\n   * This prop also prevents popover elements from being cut off within the content area.\n   */\n  @Prop() disableHeightConstraint?: boolean = false;\n\n  /**\n   * If `true`, the close button will not be displayed.\n   */\n  @Prop() hideCloseButton?: boolean = false;\n\n  /**\n   * Sets the heading for the dialog.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Sets the optional label for the dialog which appears above the heading.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the dialog will be displayed.\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n  @Watch(\"open\")\n  watchOpenHandler(): void {\n    if (this.open) {\n      this.dialogOpened();\n    } else {\n      this.fadeIn = false;\n      if (this.resizeObserver !== null) {\n        this.resizeObserver.disconnect();\n      }\n      setTimeout(() => {\n        this.dialogRendered = false;\n        this.dialogEl.close();\n        this.sourceElement?.focus();\n        this.dialogHeight = 0;\n        this.icDialogClosed.emit();\n      }, 80);\n    }\n  }\n\n  /**\n   * Sets the maximum and minimum height and width for the dialog.\n   */\n  @Prop() size?: \"small\" | \"medium\" | \"large\" = \"small\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.\n   */\n  @Prop() status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\";\n\n  /**\n   * Sets the label and onclick functions for default buttons.\n   */\n  @Prop() buttonProps?: { label: string; onclick: string }[] = [\n    {\n      label: \"Cancel\",\n      onclick: \"this.cancelDialog();\",\n    },\n    { label: \"Confirm\", onclick: \"this.confirmDialog();\" },\n  ];\n\n  @Watch(\"buttonProps\")\n  watchPropHandler(): void {\n    this.setButtonOnClick();\n  }\n\n  /**\n   * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.\n   */\n  @Event() icDialogCancelled: EventEmitter<void>;\n\n  /**\n   * Emitted when dialog has closed.\n   */\n  @Event() icDialogClosed: EventEmitter<void>;\n\n  /**\n   * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.\n   */\n  @Event() icDialogConfirmed: EventEmitter<void>;\n\n  /**\n   * Emitted when dialog has opened.\n   */\n  @Event() icDialogOpened: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.removeSlotChangeListener();\n  }\n\n  componentWillLoad(): void {\n    if (this.buttonProps.length) {\n      this.setButtonOnClick();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.getInteractiveElements();\n    this.setAlertVariant();\n\n    this.refreshInteractiveElementsOnSlotChange();\n\n    if (this.open) {\n      this.dialogOpened();\n    }\n  }\n\n  componentDidRender(): void {\n    if (\n      getComputedStyle(this.el).display !== \"none\" &&\n      this.disableHeightConstraint\n    ) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"auto\";\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.dialogRendered) {\n      switch (ev.key) {\n        case \"Tab\":\n          ev.preventDefault();\n          this.focusNextInteractiveElement(ev.shiftKey);\n          break;\n        case \"Escape\":\n          if (!ev.repeat) {\n            this.open = false;\n          }\n          ev.stopImmediatePropagation();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\", {})\n  handleClick(ev: MouseEvent): void {\n    const dialogElement = this.el.shadowRoot.querySelector(\"dialog\");\n    if (\n      this.closeOnBackdropClick &&\n      ev.composedPath().indexOf(dialogElement) <= 0\n    ) {\n      const rect = this.dialogEl.getBoundingClientRect();\n      const isInDialog =\n        rect.top <= ev.clientY &&\n        ev.clientY <= rect.top + rect.height &&\n        rect.left <= ev.clientX &&\n        ev.clientX <= rect.left + rect.width;\n      if (!isInDialog) {\n        this.open = false;\n      }\n    }\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.\n   */\n  @Method()\n  async showDialog(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.\n   */\n  @Method()\n  async hideDialog(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.\n   */\n  @Method()\n  async cancelDialog(): Promise<void> {\n    this.icDialogCancelled.emit();\n    this.open = false;\n  }\n\n  /**\n   * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.\n   */\n  @Method()\n  async confirmDialog(): Promise<void> {\n    this.icDialogConfirmed.emit();\n  }\n\n  private dialogOpened = () => {\n    this.dialogRendered = true;\n\n    if (this.disableHeightConstraint) {\n      this.dialogEl.show();\n    } else {\n      this.dialogEl.showModal();\n    }\n\n    setTimeout(() => {\n      this.fadeIn = true;\n\n      /**\n       * This is required to set scroll back to top if:\n       * - dialog content goes below the fold\n       * - is closed using cancel or confirm and reopened.\n       *\n       * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.\n       */\n      if (this.disableHeightConstraint && this.backdropEl.scrollTop !== 0) {\n        this.backdropEl.scrollTop = 0;\n      }\n    }, 10);\n\n    setTimeout(() => {\n      this.setInitialFocus();\n      checkResizeObserver(this.runResizeObserver);\n    }, 75);\n\n    setTimeout(() => {\n      this.getFocusedElementIndex();\n      this.icDialogOpened.emit();\n    }, 80);\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeTimeout);\n      this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);\n    });\n    this.resizeObserver.observe(this.dialogEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.dialogEl.clientHeight !== this.dialogHeight) {\n      this.dialogHeight = this.dialogEl.clientHeight;\n    }\n  };\n\n  private refreshInteractiveElementsOnSlotChange = () => {\n    this.contentArea = this.el.shadowRoot.querySelector(\"#dialog-content slot\");\n\n    this.contentArea.addEventListener(\n      \"slotchange\",\n      this.getInteractiveElements\n    );\n  };\n\n  private removeSlotChangeListener = () => {\n    if (this.contentArea) {\n      this.contentArea.removeEventListener(\n        \"slotchange\",\n        this.getInteractiveElements\n      );\n    }\n  };\n\n  private setInitialFocus = () => {\n    this.sourceElement = document.activeElement as HTMLElement;\n\n    let focusedElement;\n\n    if (this.el.querySelector(this.DATA_GETS_FOCUS_SELECTOR) !== null) {\n      focusedElement = this.el.querySelector(\n        this.DATA_GETS_FOCUS_SELECTOR\n      ) as HTMLElement;\n    } else {\n      focusedElement = this.el.shadowRoot.querySelector(\n        this.DATA_GETS_FOCUS_SELECTOR\n      ) as HTMLElement;\n    }\n    if (focusedElement.tagName === this.IC_TEXT_FIELD) {\n      (focusedElement as HTMLIcTextFieldElement).setFocus();\n    } else if (focusedElement.tagName === this.IC_ACCORDION) {\n      (focusedElement as HTMLIcAccordionElement).setFocus();\n    } else {\n      focusedElement.focus({\n        preventScroll: this.disableHeightConstraint ? true : false,\n      });\n    }\n  };\n\n  private getFocusedElementIndex = () => {\n    for (let i = 0; i < this.interactiveElementList.length; i++) {\n      if (\n        (this.interactiveElementList[i] as HTMLElement) ===\n        (this.el.shadowRoot.activeElement || document.activeElement)\n      ) {\n        this.focusedElementIndex = i;\n      }\n    }\n  };\n\n  private setAlertVariant = () => {\n    if (isPropDefined(this.status) && this.status !== null) {\n      const alert = this.el.shadowRoot.querySelector(\"ic-alert\");\n      alert.setAttribute(\"variant\", this.status);\n    }\n  };\n\n  private closeIconClick = () => {\n    this.open = false;\n  };\n\n  private getInteractiveElements = () => {\n    this.interactiveElementList = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"ic-button\")\n    );\n    const slottedInteractiveElements = Array.from(\n      this.el.querySelectorAll(\n        `a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), \n          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, \n          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible=\"true\"], ic-footer-link, ic-link, ic-navigation-button, \n          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`\n      )\n    );\n    if (slottedInteractiveElements.length > 0) {\n      if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {\n        slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, \"\");\n      } else if (!this.destructive) {\n        slottedInteractiveElements[\n          slottedInteractiveElements.length - 1\n        ].setAttribute(this.DATA_GETS_FOCUS, \"\");\n      }\n    }\n    for (let i = 0; i < slottedInteractiveElements.length; i++) {\n      this.interactiveElementList.splice(\n        1 + i,\n        0,\n        slottedInteractiveElements[i] as HTMLElement\n      );\n    }\n  };\n\n  private getNextFocusEl = (focusedElementIndex: number) =>\n    this.interactiveElementList[focusedElementIndex];\n\n  private focusNextInteractiveElement = (shiftKey: boolean) => {\n    this.getFocusedElementIndex();\n    this.setFocusIndexBasedOnShiftKey(shiftKey);\n    this.loopNextFocusIndexIfLastElement();\n\n    let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n\n    const isHidden = getComputedStyle(nextFocusEl).visibility === \"hidden\";\n\n    if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {\n      (nextFocusEl as HTMLIcTextFieldElement).setFocus();\n    } else {\n      if (isHidden) {\n        this.setFocusIndexBasedOnShiftKey(shiftKey);\n        this.loopNextFocusIndexIfLastElement();\n\n        nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);\n      }\n      if (nextFocusEl.tagName === this.IC_ACCORDION) {\n        (nextFocusEl as HTMLIcAccordionElement).setFocus();\n      } else {\n        (nextFocusEl as HTMLElement).focus();\n      }\n    }\n  };\n\n  private setButtonOnClick = () => {\n    if (this.buttons) {\n      this.buttonOnclick0 = new Function(this.buttonProps[0]?.onclick);\n      this.buttonOnclick1 = new Function(this.buttonProps[1]?.onclick);\n      this.buttonOnclick2 = new Function(this.buttonProps[2]?.onclick);\n    }\n  };\n\n  private getButtonOnclick = (index: number) => {\n    if (index === 0) {\n      return this.buttonOnclick0();\n    } else if (index === 1) {\n      return this.buttonOnclick1();\n    } else {\n      return this.buttonOnclick2();\n    }\n  };\n\n  private getButtonVariant = (index: number) => {\n    const mainVariant = this.destructive ? \"destructive\" : \"primary\";\n    if (this.buttonProps.length === 1) {\n      return mainVariant;\n    } else if (this.buttonProps.length === 2) {\n      if (index === 0) {\n        return \"tertiary\";\n      } else {\n        return mainVariant;\n      }\n    } else {\n      if (index === 2) {\n        return mainVariant;\n      } else {\n        return \"secondary\";\n      }\n    }\n  };\n\n  private loopNextFocusIndexIfLastElement() {\n    if (this.focusedElementIndex > this.interactiveElementList.length - 1)\n      this.focusedElementIndex = 0;\n    else if (this.focusedElementIndex < 0) {\n      this.focusedElementIndex = this.interactiveElementList.length - 1;\n    }\n  }\n\n  private setFocusIndexBasedOnShiftKey(shiftKey: boolean) {\n    if (shiftKey) {\n      this.focusedElementIndex -= 1;\n    } else {\n      this.focusedElementIndex += 1;\n    }\n  }\n\n  private renderDialog = () => {\n    const {\n      alertHeading,\n      alertMessage,\n      buttons,\n      buttonProps,\n      size,\n      heading,\n      label,\n      status,\n      destructive,\n      dismissLabel,\n      hideCloseButton,\n    } = this;\n\n    return (\n      <dialog\n        class={{\n          [\"dialog\"]: true,\n          [`${size}`]: true,\n          [\"disable-height-constraint\"]: this.disableHeightConstraint,\n        }}\n        aria-labelledby=\"dialog-label dialog-heading\"\n        aria-describedby=\"dialog-alert dialog-content\"\n        ref={(el) => (this.dialogEl = el)}\n      >\n        <div class=\"heading-area\">\n          <div class=\"heading-content\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography variant=\"label\" id=\"dialog-label\">\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography variant=\"h4\" id=\"dialog-heading\">\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n          </div>\n          {!hideCloseButton && (\n            <ic-button\n              class=\"close-icon\"\n              variant=\"icon\"\n              innerHTML={closeIcon}\n              aria-label={dismissLabel}\n              onClick={this.closeIconClick}\n              data-gets-focus={destructive || !buttons ? \"\" : null}\n            ></ic-button>\n          )}\n        </div>\n        <div class=\"content-area\">\n          {isSlotUsed(this.el, \"alert\") ? (\n            <slot name=\"alert\"></slot>\n          ) : (\n            status && (\n              <ic-alert\n                variant={status}\n                heading={alertHeading}\n                message={alertMessage}\n                title-above\n                class=\"status-alert\"\n                id=\"dialog-alert\"\n              ></ic-alert>\n            )\n          )}\n          <div id=\"dialog-content\">\n            <slot></slot>\n          </div>\n        </div>\n        {(buttons || isSlotUsed(this.el, this.DIALOG_CONTROLS)) && (\n          <div\n            class={{\n              [this.DIALOG_CONTROLS]: true,\n              [\"triple-button\"]: buttonProps.length === 3,\n            }}\n          >\n            <slot name={this.DIALOG_CONTROLS}>\n              {!isSlotUsed(this.el, this.DIALOG_CONTROLS) &&\n                buttonProps.map((props, index) => {\n                  if (index > 2) {\n                    return;\n                  } else {\n                    return (\n                      <ic-button\n                        variant={this.getButtonVariant(index)}\n                        onClick={() => this.getButtonOnclick(index)}\n                        class=\"dialog-control-button\"\n                        full-width={buttonProps.length === 3}\n                        data-gets-focus={\n                          this.getButtonVariant(index) === \"primary\" ? \"\" : null\n                        }\n                      >\n                        {props.label}\n                      </ic-button>\n                    );\n                  }\n                })}\n            </slot>\n          </div>\n        )}\n      </dialog>\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"hidden\"]: !this.dialogRendered,\n          [\"fade-in\"]: this.fadeIn,\n          [\"disable-height-constraint\"]: this.disableHeightConstraint,\n        }}\n      >\n        {this.disableHeightConstraint ? (\n          <div class=\"backdrop\" ref={(el) => (this.backdropEl = el)}>\n            {this.renderDialog()}\n          </div>\n        ) : (\n          this.renderDialog()\n        )}\n      </Host>\n    );\n  }\n}\n"]}