@duetds/components 6.2.4 → 6.2.5

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
@@ -39,81 +39,26 @@ 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();
-    /**
-     * Defaults for accessibleCloseLabel
-     * @default {fi: "Sulje ikkuna", sv: "Stäng fönstret", en: "Close the dialog", }
-     */
     this.accessibleCloseLabelDefaults = {
       fi: "Sulje ikkuna",
       sv: "Stäng fönstret",
       en: "Close the dialog",
     };
-    /**
-     * 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);
-    /**
-     * Size of the modal window.
-     */
     this.size = "medium";
-    /**
-     * Details of the component
-     */
+    this.accessibleDescribedBy = undefined;
+    this.accessibleLabelledBy = undefined;
     this.accessibleDetails = undefined;
-    /**
-     * Aria description the button
-     */
     this.accessibleDescription = undefined;
-    /**
-     * Size of the modal window.
-     */
     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";
-    /**
-     * 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() {
@@ -224,485 +169,486 @@ export class DuetModal {
         "duet-modal-overlay": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-modal-active": this.open,
-      } },
-      h(FocusGuard, { moveFocusTo: this.buttonEl }),
-      h("div", { class: {
-          "duet-modal-inner": true,
-          "duet-modal-large": this.size === "large",
-        }, role: "document", onClick: e => {
-          if (this.closeOnBlur) {
-            this.closeModal(e);
-          }
-        } },
-        h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
-            if (this.closeOnBlur) {
-              e.stopPropagation();
-            }
-          } },
-          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-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", { 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 })));
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { class: {
+        "duet-modal-inner": true,
+        "duet-modal-large": this.size === "large",
+      }, role: "document", onClick: e => {
+        if (this.closeOnBlur) {
+          this.closeModal(e);
+        }
+      } }, h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
+        if (this.closeOnBlur) {
+          e.stopPropagation();
+        }
+      } }, 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-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", { 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"
+  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"
+            }
           }
-        }
-      },
-      "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": false,
-      "defaultValue": "getLanguage()"
-    },
-    "accessibleCloseLabelDefaults": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLangObject | string",
-        "resolved": "DuetLangObject | string",
-        "references": {
-          "DuetLangObject": {
-            "location": "import",
-            "path": "../../utils/language-utils"
+        },
+        "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": false,
+        "defaultValue": "getLanguage()"
+      },
+      "accessibleCloseLabelDefaults": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject | string",
+          "resolved": "DuetLangObject | string",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
           }
-        }
-      },
-      "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": false,
-      "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(this.accessibleCloseLabelDefaults, this.language)"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetModalSize",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "DuetModalSize": {
-            "location": "local"
+        },
+        "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": false,
+        "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(this.accessibleCloseLabelDefaults, this.language)"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetModalSize",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "DuetModalSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "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
-    },
-    "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",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "DuetModalSize": {
-            "location": "local"
+        },
+        "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
+      },
+      "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",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "DuetModalSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Size of the modal window."
-      },
-      "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"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the modal window."
+        },
+        "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"
+            }
           }
-        }
-      },
-      "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"
+        },
+        "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"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Accessible heading size"
-      },
-      "attribute": "heading-level",
-      "reflect": false,
-      "defaultValue": "\"h3\""
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible heading size"
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "\"h3\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "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"
+        },
+        "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"
+            }
           }
-        }
-      },
-      "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": {}
+        },
+        "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"
       }
-    }, {
-      "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"
-          }
+    };
+  }
+  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": {}
         }
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "duetClose",
+        "name": "duetClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the modal is closed."
         },
-        "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"
+        "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"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "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": []
+        }
       },
-      "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": []
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "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 watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openChanged"
+      }, {
+        "propName": "active",
+        "methodName": "activeChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keyup",
+        "method": "handleKeyUp",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }