@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

@@ -1,6 +1,6 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h, Fragment, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
-import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, getSlotElements, } 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.
@@ -9,23 +9,68 @@ import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } fr
  */
 export class Dialog {
     constructor() {
+        this.contentAreaMutationObserver = null;
         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.IC_ACCORDION = "IC-ACCORDION";
         this.IC_ACCORDION_GROUP = "IC-ACCORDION-GROUP";
+        this.IC_CHECKBOX = "IC-CHECKBOX";
+        this.IC_SEARCH_BAR = "IC-SEARCH-BAR";
         this.resizeObserver = null;
+        this.dialogRendered = false;
+        this.fadeIn = false;
+        /**
+         * If set to `false`, the dialog will not close when the backdrop is clicked.
+         */
+        this.closeOnBackdropClick = true;
+        /**
+         * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
+         */
+        this.destructive = false;
+        /**
+         * Sets the dismiss label tooltip and aria label.
+         */
+        this.dismissLabel = "Dismiss";
+        /**
+         * If set to `true`, the content area max height and overflow properties are removed allowing the dialog to stretch below the fold.
+         * This prop also prevents popover elements from being cut off within the content area.
+         */
+        this.disableHeightConstraint = false;
+        /**
+         * If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant.
+         */
+        this.disableWidthConstraint = false;
+        /**
+         * If `true`, the close button will not be displayed.
+         */
+        this.hideCloseButton = false;
+        /**
+         * If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed.
+         */
+        this.hideDefaultControls = false;
+        /**
+         * If `true`, the dialog will be displayed.
+         */
+        this.open = false;
+        /**
+         * Sets the maximum and minimum height and width for the dialog.
+         */
+        this.size = "small";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         this.dialogOpened = () => {
-            var _a;
+            var _a, _b;
             this.dialogRendered = true;
             if (this.disableHeightConstraint) {
-                this.dialogEl.show();
+                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.show();
             }
             else {
-                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
+                (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.showModal();
             }
             setTimeout(() => {
                 this.fadeIn = true;
@@ -36,7 +81,9 @@ export class Dialog {
                  *
                  * Without this, the scroll bar will start from the dialog's last scroll-x coordinate.
                  */
-                if (this.disableHeightConstraint && this.backdropEl.scrollTop !== 0) {
+                if (this.backdropEl &&
+                    this.disableHeightConstraint &&
+                    this.backdropEl.scrollTop !== 0) {
                     this.backdropEl.scrollTop = 0;
                 }
             }, 10);
@@ -45,59 +92,62 @@ export class Dialog {
                 checkResizeObserver(this.runResizeObserver);
             }, 75);
             setTimeout(() => {
-                this.getFocusedElementIndex();
                 this.icDialogOpened.emit();
             }, 80);
         };
         this.runResizeObserver = () => {
-            this.resizeObserver = new ResizeObserver(() => {
-                clearTimeout(this.resizeTimeout);
-                this.resizeTimeout = window.setTimeout(this.resizeObserverCallback, 80);
-            });
-            this.resizeObserver.observe(this.dialogEl);
+            if (this.dialogEl) {
+                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) {
+            if (this.dialogEl && this.dialogEl.clientHeight !== this.dialogHeight) {
                 this.dialogHeight = this.dialogEl.clientHeight;
             }
         };
         this.refreshInteractiveElementsOnSlotChange = () => {
-            this.contentArea = this.el.shadowRoot.querySelector("#dialog-content slot");
-            this.contentArea.addEventListener("slotchange", this.getInteractiveElements);
+            var _a, _b, _c;
+            const contentWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#dialog-content");
+            if (contentWrapper) {
+                this.contentArea = contentWrapper.querySelector("slot");
+                // Detect changes to slotted elements
+                (_b = this.contentArea) === null || _b === void 0 ? void 0 : _b.addEventListener("slotchange", this.getInteractiveElements);
+                this.contentAreaMutationObserver = new MutationObserver(() => {
+                    this.getInteractiveElements();
+                });
+                // Detect changes to children of slotted elements
+                (_c = getSlotElements(contentWrapper)) === null || _c === void 0 ? void 0 : _c.forEach((el) => {
+                    var _a;
+                    (_a = this.contentAreaMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
+                        childList: true,
+                        subtree: true,
+                    });
+                });
+            }
         };
         this.removeSlotChangeListener = () => {
+            var _a;
             if (this.contentArea) {
                 this.contentArea.removeEventListener("slotchange", this.getInteractiveElements);
+                (_a = this.contentAreaMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             }
         };
         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 if (focusedElement.tagName === this.IC_ACCORDION_GROUP) {
-                focusedElement.setFocus();
-            }
-            else if (focusedElement.tagName === this.IC_ACCORDION) {
-                focusedElement.setFocus();
-            }
-            else {
-                focusedElement.focus({
-                    preventScroll: this.disableHeightConstraint ? true : false,
-                });
-            }
+            this.focusedElementIndex = this.interactiveElementList
+                ? this.interactiveElementList.findIndex((element) => element.hasAttribute(this.DATA_GETS_FOCUS))
+                : 0;
+            this.focusElement(this.interactiveElementList[this.focusedElementIndex]);
         };
         this.getFocusedElementIndex = () => {
+            var _a;
             for (let i = 0; i < this.interactiveElementList.length; i++) {
                 if (this.interactiveElementList[i] ===
-                    (this.el.shadowRoot.activeElement || document.activeElement)) {
+                    (((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) || document.activeElement)) {
                     this.focusedElementIndex = i;
                 }
             }
@@ -106,10 +156,11 @@ export class Dialog {
             this.open = false;
         };
         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, 
+            var _a;
+            this.interactiveElementList = Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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-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, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`));
             if (slottedInteractiveElements.length > 0) {
                 if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {
@@ -124,67 +175,65 @@ export class Dialog {
             }
         };
         this.getNextFocusEl = (focusedElementIndex) => this.interactiveElementList[focusedElementIndex];
-        this.focusNextInteractiveElement = (shiftKey) => {
+        this.onTabKeyPress = (shiftKey) => {
             this.getFocusedElementIndex();
             if (this.interactiveElementList[this.focusedElementIndex].tagName ===
-                "IC-SEARCH-BAR") {
+                this.IC_SEARCH_BAR) {
                 return false;
             }
             this.setFocusIndexBasedOnShiftKey(shiftKey);
             this.loopNextFocusIndexIfLastElement();
-            let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);
-            const isHidden = getComputedStyle(nextFocusEl).visibility === "hidden" ||
-                (nextFocusEl.tagName === this.IC_ACCORDION_GROUP &&
-                    nextFocusEl.hasAttribute("single-expansion"));
-            if (nextFocusEl.tagName === this.IC_TEXT_FIELD) {
-                nextFocusEl.setFocus();
+            this.focusElement(this.getNextFocusEl(this.focusedElementIndex), shiftKey);
+            return true;
+        };
+        this.shouldSkipElement = (element) => {
+            const isHidden = getComputedStyle(element).visibility === "hidden" ||
+                element.offsetHeight === 0 ||
+                element.hasAttribute("disabled") ||
+                (element.tagName === this.IC_ACCORDION_GROUP &&
+                    element.hasAttribute("single-expansion"));
+            const radioEl = element.closest("ic-radio-option");
+            return (isHidden ||
+                (element.getAttribute("type") === "radio" &&
+                    !!radioEl &&
+                    !radioEl.hasAttribute("selected")));
+        };
+        this.focusElement = (element, shiftKey = false) => {
+            let nextFocusEl = element;
+            if (this.shouldSkipElement(element)) {
+                this.setFocusIndexBasedOnShiftKey(shiftKey);
+                this.loopNextFocusIndexIfLastElement();
+                nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);
+                this.focusElement(nextFocusEl, shiftKey);
             }
             else {
-                if (isHidden) {
-                    this.setFocusIndexBasedOnShiftKey(shiftKey);
-                    this.loopNextFocusIndexIfLastElement();
-                    nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);
-                }
-                if (nextFocusEl.tagName === this.IC_ACCORDION_GROUP) {
-                    nextFocusEl.setFocus();
-                }
-                else if (nextFocusEl.tagName === this.IC_ACCORDION) {
-                    nextFocusEl.setFocus();
-                }
-                else {
-                    nextFocusEl.focus();
+                switch (element.tagName) {
+                    case this.IC_ACCORDION_GROUP:
+                    case this.IC_ACCORDION:
+                    case this.IC_SEARCH_BAR:
+                    case this.IC_TEXT_FIELD:
+                    case this.IC_CHECKBOX:
+                        element.setFocus();
+                        break;
+                    default:
+                        element.focus();
                 }
             }
-            return true;
         };
         this.renderDialog = () => {
-            const { buttons, size, heading, label, destructive, dismissLabel, hideCloseButton, } = this;
+            const { hideDefaultControls, size, heading, label, destructive, dismissLabel, hideCloseButton, disableHeightConstraint, disableWidthConstraint, closeIconClick, DIALOG_CONTROLS, } = this;
+            const controlsSlotUsed = isSlotUsed(this.el, DIALOG_CONTROLS);
             return (h("dialog", { class: {
-                    ["dialog"]: true,
+                    dialog: true,
                     [`${size}`]: true,
-                    ["disable-height-constraint"]: this.disableHeightConstraint,
-                    ["disable-width-constraint"]: this.disableWidthConstraint,
-                }, "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" }), h("div", { id: "dialog-content" }, h("slot", null))), buttons &&
-                (isSlotUsed(this.el, this.DIALOG_CONTROLS) ? (h("div", { class: {
-                        [this.DIALOG_CONTROLS]: true,
-                    } }, h("slot", { name: this.DIALOG_CONTROLS }))) : (h("div", { class: {
-                        [this.DIALOG_CONTROLS]: true,
-                    } }, h("ic-button", { variant: "tertiary", onClick: () => this.cancelDialog(), class: "dialog-control-button", "data-gets-focus": null }, "Cancel"), h("ic-button", { variant: this.destructive ? "destructive" : "primary", onClick: () => this.confirmDialog(), class: "dialog-control-button", "data-gets-focus": "" }, "Confirm"))))));
+                    "disable-height-constraint": !!disableHeightConstraint,
+                    "disable-width-constraint": !!disableWidthConstraint,
+                }, "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: closeIconClick, "data-gets-focus": destructive || (hideDefaultControls && !controlsSlotUsed)
+                    ? ""
+                    : null }))), h("div", { class: "content-area" }, isSlotUsed(this.el, "alert") && h("slot", { name: "alert" }), h("div", { id: "dialog-content" }, h("slot", null))), (controlsSlotUsed || !hideDefaultControls) && (h("div", { class: {
+                    [DIALOG_CONTROLS]: true,
+                } }, controlsSlotUsed ? (h("slot", { name: DIALOG_CONTROLS })) : (h(Fragment, null, h("ic-button", { variant: "tertiary", onClick: () => this.cancelDialog(), class: "dialog-control-button", "data-gets-focus": null }, "Cancel"), h("ic-button", { variant: destructive ? "destructive" : "primary", onClick: () => this.confirmDialog(), class: "dialog-control-button", "data-gets-focus": "" }, "Confirm")))))));
         };
-        this.dialogRendered = false;
-        this.fadeIn = false;
-        this.buttons = true;
-        this.closeOnBackdropClick = true;
-        this.destructive = false;
-        this.dismissLabel = "Dismiss";
-        this.disableHeightConstraint = false;
-        this.disableWidthConstraint = false;
-        this.hideCloseButton = false;
-        this.heading = undefined;
-        this.label = undefined;
-        this.open = undefined;
-        this.size = "small";
-        this.theme = "inherit";
     }
     watchOpenHandler() {
         if (this.open) {
@@ -196,10 +245,10 @@ export class Dialog {
                 this.resizeObserver.disconnect();
             }
             setTimeout(() => {
-                var _a;
+                var _a, _b;
                 this.dialogRendered = false;
-                this.dialogEl.close();
-                (_a = this.sourceElement) === null || _a === void 0 ? void 0 : _a.focus();
+                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.close();
+                (_b = this.sourceElement) === null || _b === void 0 ? void 0 : _b.focus();
                 this.dialogHeight = 0;
                 this.icDialogClosed.emit();
             }, 80);
@@ -218,19 +267,17 @@ export class Dialog {
             onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Dialog");
     }
     componentDidRender() {
-        if (getComputedStyle(this.el).display !== "none" &&
-            this.disableHeightConstraint) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "auto";
-        }
+        document.body.style.overflow =
+            getComputedStyle(this.el).display !== "none" &&
+                this.disableHeightConstraint
+                ? "hidden"
+                : "auto";
     }
     handleKeyboard(ev) {
         if (this.dialogRendered) {
             switch (ev.key) {
                 case "Tab":
-                    if (this.focusNextInteractiveElement(ev.shiftKey)) {
+                    if (this.onTabKeyPress(ev.shiftKey)) {
                         ev.preventDefault();
                     }
                     break;
@@ -244,14 +291,14 @@ export class Dialog {
         }
     }
     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 (this.dialogEl &&
+            this.closeOnBackdropClick &&
+            ev.composedPath().indexOf(this.dialogEl) <= 0) {
+            const { top, height, left, width } = this.dialogEl.getBoundingClientRect();
+            const isInDialog = top <= ev.clientY &&
+                ev.clientY <= top + height &&
+                left <= ev.clientX &&
+                ev.clientX <= left + width;
             if (!isInDialog) {
                 this.open = false;
             }
@@ -286,12 +333,13 @@ export class Dialog {
         }
     }
     render() {
-        return (h(Host, { class: {
-                ["ic-dialog-hidden"]: !this.dialogRendered,
-                ["ic-dialog-fade-in"]: this.fadeIn,
-                ["disable-height-constraint"]: this.disableHeightConstraint,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, this.disableHeightConstraint ? (h("div", { class: "backdrop", ref: (el) => (this.backdropEl = el) }, this.renderDialog())) : (this.renderDialog())));
+        const { dialogRendered, disableHeightConstraint, fadeIn, theme } = this;
+        return (h(Host, { key: '2920aac3b3891cae0e6575c735e507c4c76752f9', class: {
+                "ic-dialog-hidden": !dialogRendered,
+                "ic-dialog-fade-in": fadeIn,
+                "disable-height-constraint": !!disableHeightConstraint,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, 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"; }
@@ -307,30 +355,12 @@ export class Dialog {
     }
     static get properties() {
         return {
-            "buttons": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If set to `false`, default buttons or slotted dialog controls will not be displayed."
-                },
-                "attribute": "buttons",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "closeOnBackdropClick": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -339,6 +369,8 @@ export class Dialog {
                     "tags": [],
                     "text": "If set to `false`, the dialog will not close when the backdrop is clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "close-on-backdrop-click",
                 "reflect": false,
                 "defaultValue": "true"
@@ -348,15 +380,17 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "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."
+                    "text": "If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "destructive",
                 "reflect": false,
                 "defaultValue": "false"
@@ -366,7 +400,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -375,6 +409,8 @@ export class Dialog {
                     "tags": [],
                     "text": "Sets the dismiss label tooltip and aria label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dismiss-label",
                 "reflect": false,
                 "defaultValue": "\"Dismiss\""
@@ -384,7 +420,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -393,6 +429,8 @@ export class Dialog {
                     "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-height-constraint",
                 "reflect": false,
                 "defaultValue": "false"
@@ -402,7 +440,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -411,6 +449,8 @@ export class Dialog {
                     "tags": [],
                     "text": "If set to `true`, the content area width property is removed, allowing content to take the full width of the dialog when using the large variant."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-width-constraint",
                 "reflect": false,
                 "defaultValue": "false"
@@ -420,7 +460,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -429,24 +469,48 @@ export class Dialog {
                     "tags": [],
                     "text": "If `true`, the close button will not be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-close-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "hideDefaultControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-default-controls",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "heading": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets the heading for the dialog."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false
             },
@@ -455,7 +519,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -464,6 +528,8 @@ export class Dialog {
                     "tags": [],
                     "text": "Sets the optional label for the dialog which appears above the heading."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -472,25 +538,27 @@ export class Dialog {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the dialog will be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
-                "defaultValue": "undefined"
+                "defaultValue": "false"
             },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -499,6 +567,8 @@ export class Dialog {
                     "tags": [],
                     "text": "Sets the maximum and minimum height and width for the dialog."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"small\""
@@ -508,7 +578,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -523,6 +593,8 @@ export class Dialog {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""