@duetds/components 8.0.6 → 8.1.0

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

@@ -17,703 +17,703 @@ const TRANSITION_MS = 600;
  * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
  */
 export class DuetModal {
-  constructor() {
-    var _a, _b;
-    /**
-     * Own Properties.
-     */
-    this.modalId = createID("DuetModal");
-    this.slotDefaultId = createID("DuetModal-default-slot");
-    this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
-    this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
-    this.handleAndroidResizeEvents = () => {
-      if (document.activeElement.tagName == "INPUT") {
-        window.setTimeout(function () {
-          var _a;
-          try {
-            //@ts-ignore
-            (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.scrollIntoViewIfNeeded(true);
-          }
-          catch (e) {
-            //dev-null any errors here
-          }
-        }, 100);
-      }
-    };
-    this.open = false;
-    this.language = getLanguage();
-    this.accessibleCloseLabelDefaults = {
-      fi: "Sulje ikkuna",
-      sv: "Stäng fönstret",
-      en: "Close the dialog",
-    };
-    this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
-    this.size = "medium";
-    this.accessibleDescribedBy = undefined;
-    this.accessibleLabelledBy = undefined;
-    this.accessibleLabel = undefined;
-    this.accessibleDetails = undefined;
-    this.accessibleDescription = undefined;
-    this.gutterSize = "medium";
-    this.theme = "";
-    this.heading = "";
-    this.headingLevel = "h3";
-    this.headingVisualLevel = undefined;
-    this.icon = "";
-    this.color = "";
-    this.active = false;
-    this.closeOnBlur = false;
-  }
-  openChanged() {
-    if (this.open) {
-      if (this.modalEl && this.modalEl.scrollTop) {
-        this.modalEl.scrollTop = 0;
-      }
-      this.focusedElBeforeOpen = document.activeElement;
-      disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
-      this.teleport.go(true);
-      setTimeout(() => {
-        this.buttonEl.setFocus();
-      }, TRANSITION_MS);
-      setTimeout(() => {
-        this.modalEl.classList.add("duet-disable-transitions");
-      }, TRANSITION_MS + 200);
-      // fix for android devices where scrolling and softKeyboards MAY be
-      // acting weird when the modal contains an input field
-      if (this.isAndroidDevice) {
-        window.addEventListener("resize", this.handleAndroidResizeEvents);
-      }
-      this.duetOpen.emit();
+    constructor() {
+        var _a, _b;
+        /**
+         * Own Properties.
+         */
+        this.modalId = createID("DuetModal");
+        this.slotDefaultId = createID("DuetModal-default-slot");
+        this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
+        this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
+        this.handleAndroidResizeEvents = () => {
+            if (document.activeElement.tagName == "INPUT") {
+                window.setTimeout(function () {
+                    var _a;
+                    try {
+                        //@ts-ignore
+                        (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.scrollIntoViewIfNeeded(true);
+                    }
+                    catch (e) {
+                        //dev-null any errors here
+                    }
+                }, 100);
+            }
+        };
+        this.open = false;
+        this.language = getLanguage();
+        this.accessibleCloseLabelDefaults = {
+            fi: "Sulje ikkuna",
+            sv: "Stäng fönstret",
+            en: "Close the dialog",
+        };
+        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        this.size = "medium";
+        this.accessibleDescribedBy = undefined;
+        this.accessibleLabelledBy = undefined;
+        this.accessibleLabel = undefined;
+        this.accessibleDetails = undefined;
+        this.accessibleDescription = undefined;
+        this.gutterSize = "medium";
+        this.theme = "";
+        this.heading = "";
+        this.headingLevel = "h3";
+        this.headingVisualLevel = undefined;
+        this.icon = "";
+        this.color = "";
+        this.active = false;
+        this.closeOnBlur = false;
     }
-    else {
-      this.modalEl.classList.remove("duet-disable-transitions");
-      enableBodyScroll(this.modalEl);
-      this.duetClose.emit();
-      this.teleport.resume(TRANSITION_MS);
-      setTimeout(() => {
-        focusElement(this.focusedElBeforeOpen);
-      }, TRANSITION_MS);
-      if (this.isAndroidDevice) {
-        window.removeEventListener("resize", this.handleAndroidResizeEvents);
-      }
+    openChanged() {
+        if (this.open) {
+            if (this.modalEl && this.modalEl.scrollTop) {
+                this.modalEl.scrollTop = 0;
+            }
+            this.focusedElBeforeOpen = document.activeElement;
+            disableBodyScroll(this.modalEl, { reserveScrollBarGap: true });
+            this.teleport.go(true);
+            setTimeout(() => {
+                this.buttonEl.setFocus();
+            }, TRANSITION_MS);
+            setTimeout(() => {
+                this.modalEl.classList.add("duet-disable-transitions");
+            }, TRANSITION_MS + 200);
+            // fix for android devices where scrolling and softKeyboards MAY be
+            // acting weird when the modal contains an input field
+            if (this.isAndroidDevice) {
+                window.addEventListener("resize", this.handleAndroidResizeEvents);
+            }
+            this.duetOpen.emit();
+        }
+        else {
+            this.modalEl.classList.remove("duet-disable-transitions");
+            enableBodyScroll(this.modalEl);
+            this.duetClose.emit();
+            this.teleport.resume(TRANSITION_MS);
+            setTimeout(() => {
+                focusElement(this.focusedElBeforeOpen);
+            }, TRANSITION_MS);
+            if (this.isAndroidDevice) {
+                window.removeEventListener("resize", this.handleAndroidResizeEvents);
+            }
+        }
     }
-  }
-  activeChanged() {
-    this.open = this.active;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  componentDidLoad() {
-    this.teleport = new Teleport(this.element);
-    if (this.active) {
-      // This specific line below can’t be moved to componentWillLoad()
-      // as it breaks body scroll enabling.
-      this.open = true;
-      this.modalEl.classList.add("duet-disable-transitions");
+    activeChanged() {
+        this.open = this.active;
     }
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-    enableBodyScroll(this.modalEl);
-  }
-  /**
-   * Component event handling.
-   */
-  handleKeyUp(ev) {
-    if (this.open) {
-      // When Esc is pressed the modal should be closed
-      if (isEscapeKey(ev)) {
-        this.closeModal(ev);
-      }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
     }
-  }
-  /**
-   * Shows the modal dialog. Additionally saves the element that triggered
-   * the modal so that focus can be moved back to this specific element when
-   * the modal dialog is closed.
-   */
-  async show() {
-    this.open = true;
-  }
-  /**
-   * Hides the modal dialog and puts focus back to the original element
-   * that triggered the modal (if we’re still in the same view).
-   */
-  async hide() {
-    this.open = false;
-  }
-  /**
-   * Local methods.
-   */
-  closeModal(ev) {
-    this.duetBeforeClose.emit({
-      originalEvent: ev,
-      component: "duet-modal",
-    });
-    // Make sure the event wasn’t prevented previously
-    if (!ev.defaultPrevented) {
-      setTimeout(() => {
-        this.hide();
-      }, 1);
+    componentDidLoad() {
+        this.teleport = new Teleport(this.element);
+        if (this.active) {
+            // This specific line below can’t be moved to componentWillLoad()
+            // as it breaks body scroll enabling.
+            this.open = true;
+            this.modalEl.classList.add("duet-disable-transitions");
+        }
     }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    var _a;
-    let iconColor = "primary";
-    let closeColor = "secondary";
-    if (this.theme === "turva") {
-      iconColor = "primary-turva";
-      closeColor = "secondary-turva";
+    connectedCallback() {
+        connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
     }
-    return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
-        "duet-modal-overlay": true,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-modal-active": this.open,
-      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
-        "duet-modal-inner": true,
-        "duet-modal-large": this.size === "large",
-      }, onClick: e => {
-        if (this.closeOnBlur) {
-          const source = e.target || e.srcElement;
-          if (source === this.modalInnerEl) {
-            this.closeModal(e);
-          }
-        }
-      } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, this.gutterSize !== "none" && h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { 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 })), h("div", { 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", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
-  }
-  static get is() { return "duet-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-modal.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "language": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
-            }, {
-              "name": "default",
-              "text": "\"fi\""
-            }],
-          "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
-        },
-        "attribute": "language",
-        "reflect": true,
-        "defaultValue": "getLanguage()"
-      },
-      "accessibleCloseLabelDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
-            }],
-          "text": "Defaults for accessibleCloseLabel"
-        },
-        "attribute": "accessible-close-label-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"Sulje ikkuna\",\n    sv: \"St\u00E4ng f\u00F6nstret\",\n    en: \"Close the dialog\",\n  }"
-      },
-      "accessibleCloseLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
-            }],
-          "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is \u201CSt\u00E4ng f\u00F6nstret\u201D."
-        },
-        "attribute": "accessible-close-label",
-        "reflect": false,
-        "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetModalSize",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "DuetModalSize": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
-              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the modal window."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"medium\""
-      },
-      "accessibleDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
-        },
-        "attribute": "accessible-described-by",
-        "reflect": false
-      },
-      "accessibleLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id or a string of space seperated ids of a component(s) that labels the input."
-        },
-        "attribute": "accessible-labelled-by",
-        "reflect": false
-      },
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "By default the heading is used as target for aria-labelledby, and it overrides this label.\nIf you wish to skip the heading, you must set this label."
-        },
-        "attribute": "accessible-label",
-        "reflect": false
-      },
-      "accessibleDetails": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Details of the component"
-        },
-        "attribute": "accessible-details",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleDescription": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria description the button"
-        },
-        "attribute": "accessible-description",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "gutterSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetModalSize | \"none\"",
-          "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
-          "references": {
-            "DuetModalSize": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
-              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the modal window's padding."
-        },
-        "attribute": "gutter-size",
-        "reflect": false,
-        "defaultValue": "\"medium\""
-      },
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the modal."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Accessible heading displayed in the modal. The modal marks this as the\nlabel of the modal when used. This helps screen reader users which is\nwhy this is a required property."
-        },
-        "attribute": "heading",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "headingLevel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetHeadingLevel",
-          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-          "references": {
-            "DuetHeadingLevel": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetHeadingLevel"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Accessible heading size"
-        },
-        "attribute": "heading-level",
-        "reflect": false,
-        "defaultValue": "\"h3\""
-      },
-      "headingVisualLevel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetVisualHeadingLevel | undefined",
-          "resolved": "\"h0\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-          "references": {
-            "DuetVisualHeadingLevel": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetVisualHeadingLevel"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the visual style mimic a specific heading level. This option allows\nyou to make e.g. h1 visually look like h3, but still keep it h1 in the\nmarkup."
-        },
-        "attribute": "heading-visual-level",
-        "reflect": false
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetIconName",
-          "resolved": "string",
-          "references": {
-            "DuetIconName": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetIconName"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon to display above the heading (from Duet\u2019s icons). Example:\n\"form-location\""
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetColor",
-          "resolved": "string",
-          "references": {
-            "DuetColor": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetColor"
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+        enableBodyScroll(this.modalEl);
+    }
+    /**
+     * Component event handling.
+     */
+    handleKeyUp(ev) {
+        if (this.open) {
+            // When Esc is pressed the modal should be closed
+            if (isEscapeKey(ev)) {
+                this.closeModal(ev);
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"primary\"."
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this property when you need to have the modal dialog initially active."
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "closeOnBlur": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this property when you want the modal to close when clicked outside of modal."
-        },
-        "attribute": "close-on-blur",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetOpen",
-        "name": "duetOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the modal is opened."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
         }
-      }, {
-        "method": "duetClose",
-        "name": "duetClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the modal is closed."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    }
+    /**
+     * Shows the modal dialog. Additionally saves the element that triggered
+     * the modal so that focus can be moved back to this specific element when
+     * the modal dialog is closed.
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Hides the modal dialog and puts focus back to the original element
+     * that triggered the modal (if we’re still in the same view).
+     */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * Local methods.
+     */
+    closeModal(ev) {
+        this.duetBeforeClose.emit({
+            originalEvent: ev,
+            component: "duet-modal",
+        });
+        // Make sure the event wasn’t prevented previously
+        if (!ev.defaultPrevented) {
+            setTimeout(() => {
+                this.hide();
+            }, 1);
         }
-      }, {
-        "method": "duetBeforeClose",
-        "name": "duetBeforeClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault()."
-        },
-        "complexType": {
-          "original": "DuetModalCloseEvent",
-          "resolved": "{ originalEvent: Event; component: \"duet-modal\"; }",
-          "references": {
-            "DuetModalCloseEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx",
-              "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
-            }
-          }
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        var _a;
+        let iconColor = "primary";
+        let closeColor = "secondary";
+        if (this.theme === "turva") {
+            iconColor = "primary-turva";
+            closeColor = "secondary-turva";
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+                "duet-modal-overlay": true,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-modal-active": this.open,
+            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
+                "duet-modal-inner": true,
+                "duet-modal-large": this.size === "large",
+            }, onClick: e => {
+                if (this.closeOnBlur) {
+                    const source = e.target || e.srcElement;
+                    if (source === this.modalInnerEl) {
+                        this.closeModal(e);
+                    }
+                }
+            } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, this.gutterSize !== "none" && h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { 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 })), h("div", { 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", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+    }
+    static get is() { return "duet-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+                        }, {
+                            "name": "default",
+                            "text": "\"fi\""
+                        }],
+                    "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "getLanguage()"
+            },
+            "accessibleCloseLabelDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
+                        }],
+                    "text": "Defaults for accessibleCloseLabel"
+                },
+                "attribute": "accessible-close-label-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Sulje ikkuna\",\n    sv: \"St\u00E4ng f\u00F6nstret\",\n    en: \"Close the dialog\",\n  }"
+            },
+            "accessibleCloseLabel": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Sulje ikkuna\", sv: \"St\u00E4ng f\u00F6nstret\", en: \"Close the dialog\", }"
+                        }],
+                    "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!\nSwedish translation for this property is \u201CSt\u00E4ng f\u00F6nstret\u201D."
+                },
+                "attribute": "accessible-close-label",
+                "reflect": false,
+                "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefaults,\n    this.language\n  )"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetModalSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DuetModalSize": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the modal window."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
+                },
+                "attribute": "accessible-described-by",
+                "reflect": false
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id or a string of space seperated ids of a component(s) that labels the input."
+                },
+                "attribute": "accessible-labelled-by",
+                "reflect": false
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "By default the heading is used as target for aria-labelledby, and it overrides this label.\nIf you wish to skip the heading, you must set this label."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "accessibleDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Details of the component"
+                },
+                "attribute": "accessible-details",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria description the button"
+                },
+                "attribute": "accessible-description",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "gutterSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetModalSize | \"none\"",
+                    "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
+                    "references": {
+                        "DuetModalSize": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "id": "src/components/duet-modal/duet-modal.tsx::DuetModalSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the modal window's padding."
+                },
+                "attribute": "gutter-size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the modal."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible heading displayed in the modal. The modal marks this as the\nlabel of the modal when used. This helps screen reader users which is\nwhy this is a required property."
+                },
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetHeadingLevel",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "DuetHeadingLevel": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible heading size"
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "\"h3\""
+            },
+            "headingVisualLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetVisualHeadingLevel | undefined",
+                    "resolved": "\"h0\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "DuetVisualHeadingLevel": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetVisualHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the visual style mimic a specific heading level. This option allows\nyou to make e.g. h1 visually look like h3, but still keep it h1 in the\nmarkup."
+                },
+                "attribute": "heading-visual-level",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display above the heading (from Duet\u2019s icons). Example:\n\"form-location\""
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color to be used for the icon, as a design token entered in camelCase\nor kebab-case. Example: \"primary\"."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property when you need to have the modal dialog initially active."
+                },
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "closeOnBlur": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property when you want the modal to close when clicked outside of modal."
+                },
+                "attribute": "close-on-blur",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the modal dialog. Additionally saves the element that triggered\nthe modal so that focus can be moved back to this specific element when\nthe modal dialog is closed.",
-          "tags": []
-        }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetOpen",
+                "name": "duetOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal is opened."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "duetClose",
+                "name": "duetClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal is closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "duetBeforeClose",
+                "name": "duetBeforeClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted before the modal is closed. To prevent the modal from actually closing, use ev.detail.originalEvent.preventDefault()."
+                },
+                "complexType": {
+                    "original": "DuetModalCloseEvent",
+                    "resolved": "{ originalEvent: Event; component: \"duet-modal\"; }",
+                    "references": {
+                        "DuetModalCloseEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "id": "src/components/duet-modal/duet-modal.tsx::DuetModalCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the modal dialog. Additionally saves the element that triggered\nthe modal so that focus can be moved back to this specific element when\nthe modal dialog is closed.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the modal dialog and puts focus back to the original element\nthat triggered the modal (if we\u2019re still in the same view).",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the modal dialog and puts focus back to the original element\nthat triggered the modal (if we\u2019re still in the same view).",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "openChanged"
-      }, {
-        "propName": "active",
-        "methodName": "activeChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keyup",
-        "method": "handleKeyUp",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }, {
+                "propName": "active",
+                "methodName": "activeChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyUp",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }