@ukic/web-components 3.0.0-alpha.11 → 3.0.0-alpha.13

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

@@ -11,22 +11,66 @@ 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`, default buttons will not be shown, but slotted dialog controls will still be displayed.
+         */
+        this.buttons = true;
+        /**
+         * 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 `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;
@@ -37,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);
@@ -46,37 +92,42 @@ 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 = () => {
-            const contentWrapper = this.el.shadowRoot.querySelector("#dialog-content");
-            this.contentArea = contentWrapper.querySelector("slot");
-            // Detect changes to slotted elements
-            this.contentArea.addEventListener("slotchange", this.getInteractiveElements);
-            this.contentAreaMutationObserver = new MutationObserver(() => {
-                this.getInteractiveElements();
-            });
-            // Detect changes to children of slotted elements
-            getSlotElements(contentWrapper).forEach((el) => {
-                this.contentAreaMutationObserver.observe(el, {
-                    childList: true,
-                    subtree: true,
+            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;
@@ -87,32 +138,16 @@ export class Dialog {
         };
         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;
                 }
             }
@@ -121,9 +156,10 @@ export class Dialog {
             this.open = false;
         };
         this.getInteractiveElements = () => {
-            this.interactiveElementList = Array.from(this.el.shadowRoot.querySelectorAll("ic-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-radio-group,
+          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) {
@@ -139,46 +175,66 @@ 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"));
+            let shouldSkipElement = false;
+            if (isHidden) {
+                shouldSkipElement = true;
             }
             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();
+                if (element.getAttribute("type") === "radio") {
+                    const radioEl = element.closest("ic-radio-option");
+                    if (radioEl && !radioEl.hasAttribute("selected")) {
+                        shouldSkipElement = true;
+                    }
                 }
-                else {
-                    nextFocusEl.focus();
+            }
+            return shouldSkipElement;
+        };
+        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 {
+                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;
             return (h("dialog", { class: {
                     ["dialog"]: true,
                     [`${size}`]: true,
-                    ["disable-height-constraint"]: this.disableHeightConstraint,
-                    ["disable-width-constraint"]: this.disableWidthConstraint,
+                    ["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,
@@ -186,20 +242,6 @@ export class Dialog {
                         [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"))))));
         };
-        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) {
@@ -211,10 +253,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);
@@ -245,7 +287,7 @@ export class Dialog {
         if (this.dialogRendered) {
             switch (ev.key) {
                 case "Tab":
-                    if (this.focusNextInteractiveElement(ev.shiftKey)) {
+                    if (this.onTabKeyPress(ev.shiftKey)) {
                         ev.preventDefault();
                     }
                     break;
@@ -259,9 +301,9 @@ export class Dialog {
         }
     }
     handleClick(ev) {
-        const dialogElement = this.el.shadowRoot.querySelector("dialog");
-        if (this.closeOnBackdropClick &&
-            ev.composedPath().indexOf(dialogElement) <= 0) {
+        if (this.dialogEl &&
+            this.closeOnBackdropClick &&
+            ev.composedPath().indexOf(this.dialogEl) <= 0) {
             const rect = this.dialogEl.getBoundingClientRect();
             const isInDialog = rect.top <= ev.clientY &&
                 ev.clientY <= rect.top + rect.height &&
@@ -301,10 +343,10 @@ export class Dialog {
         }
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'e686f8e849f9647ee4a812e4261b7a1576d9c179', class: {
                 ["ic-dialog-hidden"]: !this.dialogRendered,
                 ["ic-dialog-fade-in"]: this.fadeIn,
-                ["disable-height-constraint"]: this.disableHeightConstraint,
+                ["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())));
     }
@@ -327,7 +369,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -336,6 +378,8 @@ export class Dialog {
                     "tags": [],
                     "text": "If set to `false`, default buttons will not be shown, but slotted dialog controls will still be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "buttons",
                 "reflect": false,
                 "defaultValue": "true"
@@ -345,7 +389,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -354,6 +398,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"
@@ -363,7 +409,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -372,6 +418,8 @@ export class Dialog {
                     "tags": [],
                     "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"
@@ -381,7 +429,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -390,6 +438,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\""
@@ -399,7 +449,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -408,6 +458,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"
@@ -417,7 +469,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -426,6 +478,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"
@@ -435,7 +489,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -444,6 +498,8 @@ 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"
@@ -453,15 +509,17 @@ export class Dialog {
                 "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
             },
@@ -470,7 +528,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -479,6 +537,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
             },
@@ -487,25 +547,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,
@@ -514,6 +576,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\""
@@ -523,7 +587,7 @@ export class Dialog {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -538,6 +602,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\""