@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

package/lib/collection/components/duet-modal/duet-modal.js

@@ -10,6 +10,7 @@ import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { hasSlot } from "../../utils/slot-utils";
 import { Teleport } from "../../utils/teleport";
+import { postfixTheme } from "../../utils/token-utils";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
@@ -44,25 +45,84 @@ export class DuetModal {
                 }, 100);
             }
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.open = false;
+        /**
+         * The currently active language. This setting also changes the logo to match
+         * the chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Adds accessible label for the close icon that is only shown for screen
+         * readers. This property is always required to create an accessibly interface!
+         * Swedish translation for this property is “Stäng fönstret”.
+         * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
+         */
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        /**
+         * When modal used as a lodader, as an audible substitute for the spinner, we use this message
+         * @default {fi: "Odota, ole hyvä.", sv: "Vänligen vänta.", en: "Please wait.", }
+         */
         this.accessibleLoaderAnnouncement = getLocaleString(this.accessibleLoaderAnnouncementDefaults, this.language);
+        /**
+         * Size of the modal window.
+         */
         this.size = "medium";
-        this.accessibleDescribedBy = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleLabel = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Variation of the modal window. Slide-up variation has fixed height so it suits well for
+         * situations where the modal content height changes. Loader variation is used when the user
+         * initiates an action that takes time to complete - it can be used with addMessage() method to
+         * insert accessible message to the modal to inform the user about the progress.
+         */
         this.variation = "default";
+        /**
+         * Size of the modal window's padding.
+         */
         this.gutterSize = "medium";
+        /**
+         * Theme of the modal.
+         */
         this.theme = "";
+        /**
+         * Accessible heading displayed in the modal. The modal marks this as the
+         * label of the modal when used. This helps screen reader users which is
+         * why this is a required property.
+         */
         this.heading = "";
+        /**
+         * Accessible heading size
+         */
         this.headingLevel = "h3";
-        this.headingVisualLevel = undefined;
+        /**
+         * Icon to display above the heading (from Duet’s icons). Example:
+         * "form-location"
+         */
         this.icon = "";
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "primary".
+         */
         this.color = "";
+        /**
+         * Use this property when you need to have the modal dialog initially active.
+         */
         this.active = false;
+        /**
+         * Use this property when you want the modal to close when clicked outside of modal.
+         */
         this.closeOnBlur = false;
     }
     openChanged() {
@@ -110,9 +170,30 @@ export class DuetModal {
             enableBodyScroll(this.variation === "slide-up" ? this.modalContentEl : this.modalEl);
             this.duetClose.emit();
             this.teleport.removeInertFromSiblings();
-            setTimeout(() => {
-                focusElement(this.focusedElBeforeOpen);
-            }, TRANSITION_MS);
+            if (this.focusElementOnClose !== "") {
+                setTimeout(async () => {
+                    let focusEl = this.focusedElBeforeOpen;
+                    if (typeof this.focusElementOnClose === "string") {
+                        focusEl = document.getElementById(this.focusElementOnClose) || focusEl;
+                    }
+                    else {
+                        focusEl = this.focusElementOnClose || focusEl;
+                    }
+                    if (focusEl.tagName.toLowerCase() === "duet-popup-menu-item") {
+                        const menu = focusEl.closest("duet-popup-menu");
+                        const isOpen = await menu.isOpen();
+                        if (!isOpen && menu.controller) {
+                            if (typeof menu.controller === "string") {
+                                focusEl = document.getElementById(menu.controller);
+                            }
+                            else {
+                                focusEl = menu.controller;
+                            }
+                        }
+                    }
+                    focusElement(focusEl);
+                }, TRANSITION_MS);
+            }
             if (this.isAndroidDevice) {
                 window.removeEventListener("resize", this.handleAndroidResizeEvents);
             }
@@ -146,9 +227,11 @@ export class DuetModal {
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
         connectLanguageChangeObserver(this, [
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
             { prop: "accessibleLoaderAnnouncement", defaults: "accessibleLoaderAnnouncementDefaults" },
@@ -186,6 +269,12 @@ export class DuetModal {
     async hide() {
         this.open = false;
     }
+    /**
+     * Set focus on the close button of the modal.
+     */
+    async focusCloseButton() {
+        this.buttonEl.setFocus();
+    }
     /**
      * Scolls the top of the modal's content into view
      *
@@ -247,20 +336,16 @@ export class DuetModal {
      */
     render() {
         var _a, _b;
-        let iconColor = "primary";
-        let closeColor = "secondary";
-        const closingButton = (h("div", { key: 'e3680a1a39e49c693a42fc7fb9759bc668d40db6', class: "duet-modal-close" }, h("duet-button", { key: 'f83e0f5cb99b5a95989e6c142c12dd4abdccd4c5', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
-        if (this.theme === "turva") {
-            iconColor = "primary-turva";
-            closeColor = "secondary-turva";
-        }
-        return (h("div", { key: '958d3dcd432c8954835f6cb522b2fe09bccafaa4', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
+        const iconColor = postfixTheme("primary", this.theme);
+        const closeColor = postfixTheme("secondary", this.theme);
+        const closingButton = (h("div", { key: 'c025f6cdd3a46f67dabf96a33953cf975a4b7d23', class: "duet-modal-close" }, h("duet-button", { key: '07adb7bd15b71826eea2c5fe8fdd9675c34b10a2', ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
+        return (h("div", { key: '34d84de0dff1153e1fa04d8b2d568edd06ed92a1', ref: modal => (this.modalEl = modal), "aria-label": (_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.heading, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: this.variation === "loader" ? "alert" : "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", class: {
                 "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h("duet-overlay", { key: 'fbc2fc13d50311db1c8a0a4f2cc2803129eafe58', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: '8a07986bcfc3448a09fef42541dbe3cfada8bdcb', ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h("duet-overlay", { key: '94c016b5e1d57159562e7b7bc75203976d56c133', "z-index": "-1", visible: this.open, variation: this.variation === "loader" ? "white" : "default" }), h("div", { key: 'fb081fde606dbe819fbd9f4dd85928e06b73fc4b', ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -271,18 +356,22 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { key: 'a0b9f37bf6628afa8f99e12a917d57eaeec54583', ref: modalContentEl => (this.modalContentEl = modalContentEl), class: {
+            } }, h("div", { key: '35ff01594b4d85fae78d7ad2dda042d4b6fe3f18', ref: modalContentEl => (this.modalContentEl = modalContentEl), "aria-live": this.accessibleAnnounceChanges === "all" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "all" ? "true" : null, class: {
                 "duet-modal": true,
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
                 [this.size]: true,
                 [this.variation]: true,
-            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '9168f67fd2f8ede394df502d619287153224558e' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '9f08ea38b797e2f08e90b844af00bc7520f74524', class: {
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", { key: '79e1b71a87689e6b8509b859836f039c9fef0a76' }), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { key: '86c37c55bd8a7738e4a859815f24ee06fefcb53d', class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { key: '46de5037af55d3b54aea4f8a133aa3ed573c0599', class: "duet-modal-header" }, h("span", { key: 'ce17770a8dd4f97629729ab7823f9f7da02e5234', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'b347be9693d36ac02bd0bbfb004c84fbe2a27b2f', name: "top" })), this.icon && h("duet-icon", { key: '4e60fc0b0a51d95dcc67841be4e780c5e71538e0', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '3749e6adf5b669773e1ecf50e989b8dceac017bd', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: 'ec5d5a5d428cc6cd4cb86c1c7ba9e34f0725a4c0', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'c4459171ed652867da2bcc125dcab78ba11aca07', size: "large", color: "primary" }))), h("div", { key: '4aa8b636aca91d1178fc3749a905d467c102461e', class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el), "aria-live": this.variation === "loader" ? "assertive" : "off" }, h("slot", { key: '47bb63f76e7bb4ae0a4c765bc4fbd4f26a8b47f9' })))))));
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: 'eddd353009b508fe5ecd04aa866f076a064626de', class: "duet-modal-header" }, h("span", { key: '696ad960d20a5e5bf68dc9ec9da5d59773accf10', class: "duet-modal-inner-slot-top" }, h("slot", { key: '28f0677621250a3da6899f055ba374dd78a17a35', name: "top" })), this.icon && h("duet-icon", { key: '7b9e797b9f5296effdfc0beaac29be90e0310436', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: 'ba31f51f36989421ecb8f741b285d7d2638f2f7a', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '2bae6fedd2f1ab7b40264c2d6c3b4f69f9627d2c', class: "duet-modal-spinner" }, h("duet-spinner", { key: 'd5f27b579909233f930b09251b7faa6fd7d35a78', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '80dc7b4389d406fc348351678e2c234f17c22259', "aria-live": this.variation === "loader"
+                ? "assertive"
+                : this.accessibleAnnounceChanges === "body"
+                    ? "polite"
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'fc0270b2ceb540d2e2015ba9131dcd46f01c702e' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -300,6 +389,7 @@ export class DuetModal {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -326,12 +416,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleCloseLabel": {
                 "type": "string",
+                "attribute": "accessible-close-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -349,12 +439,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
             },
             "accessibleLoaderAnnouncement": {
                 "type": "string",
+                "attribute": "accessible-loader-announcement",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -372,12 +462,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-loader-announcement",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLoaderAnnouncementDefaults,\n    this.language\n  )"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalSize",
@@ -398,12 +488,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -418,11 +508,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -437,11 +527,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -456,11 +546,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -475,12 +565,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -495,12 +585,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalVariation",
@@ -521,12 +611,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "gutterSize": {
                 "type": "string",
+                "attribute": "gutter-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetModalSize | \"none\"",
@@ -547,12 +637,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gutter-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -573,12 +663,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -593,12 +683,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -619,12 +709,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h3\""
             },
             "headingVisualLevel": {
                 "type": "string",
+                "attribute": "heading-visual-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetVisualHeadingLevel | undefined",
@@ -645,11 +735,11 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-visual-level",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -670,12 +760,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -696,12 +786,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -716,12 +806,12 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "closeOnBlur": {
                 "type": "boolean",
+                "attribute": "close-on-blur",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -736,9 +826,56 @@ export class DuetModal {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-on-blur",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "focusElementOnClose": {
+                "type": "string",
+                "attribute": "focus-element-on-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "FocusableComponent | HTMLElement | string",
+                    "resolved": "FocusableComponent | HTMLElement | string",
+                    "references": {
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the\nelement as a string. Use empty string to disable focus moving on close - do this if after closing there is\nanother element that automatically gets the focus or you handle focusing manually."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleAnnounceChanges": {
+                "type": "string",
+                "attribute": "accessible-announce-changes",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"all\" | \"heading\" | \"body\"",
+                    "resolved": "\"all\" | \"body\" | \"heading\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes either the entire modal (\"all\"), headign and body content (\"heading\"), or just its body content (\"body\")\nan aria-live region, so that changes are announced by the screen readers. Do not use with loader variation,\nas it handles aria-live separately."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -852,6 +989,23 @@ export class DuetModal {
                     "tags": []
                 }
             },
+            "focusCloseButton": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus on the close button of the modal.",
+                    "tags": []
+                }
+            },
             "scrollToTop": {
                 "complexType": {
                     "signature": "(smooth?: boolean) => Promise<void>",