@duetds/components 6.2.4 → 6.2.6

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
-import { Component, Element, Event, h, Prop, State, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
@@ -18,119 +18,44 @@ import { parsePossibleJSON } from "../../utils/string-utils";
 export class DuetHero {
   constructor() {
     /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
+     * Component event handling.
      */
+    this.handleClick = (ev, data) => {
+      if (data && data.analytics) {
+        this.duetAnalytics.emit({
+          component: "duet-hero",
+          analyticsId: data.analytics,
+        });
+      }
+      this.emitChange(ev, data);
+    };
     this.processedListItems = null;
     this.processedActions = null;
     this.processedBack = null;
-    /**
-     * Theme of the hero area.
-     */
     this.theme = "";
-    /**
-     * @deprecated please use heading slot instead.
-     * The heading of the hero area, rendered in an H1 tag. P.S. you can control
-     * the level of the HTML heading by using “level” prop. If empty, heading
-     * will be hidden.
-     */
     this.heading = "";
-    /**
-     * The headline shown before heading.
-     */
     this.preHeading = "";
-    /**
-     * The level of the heading.
-     */
     this.level = "h1";
-    /**
-     * The description of the hero area, rendered in a P tag. If empty, description
-     * will be hidden.
-     */
     this.description = "";
-    /**
-     * Icon to display to the left of the button content. If empty, icon will be hidden.
-     */
     this.icon = "";
-    /**
-     * Icon size for the button.
-     */
     this.iconSize = "medium";
-    /**
-     * Show icon on the right side of the button content.
-     */
     this.iconRight = false;
-    /**
-     * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
-     */
     this.categoryIcon = "";
-    /**
-     * Icon color to use for the category icon that can be used in gray hero area variation.
-     */
     this.categoryIconColor = "category-pet";
-    /**
-     * Text label shown inside the button. If empty, button will be hidden.
-     */
     this.buttonLabel = "";
-    /**
-     * The currently active language. This setting changes the accessible labels 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 accessibleLabelExternal
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    /**
-     * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
-     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
-     */
     this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    /**
-     * URL that the button links to.
-     */
     this.buttonUrl = "#";
-    /**
-     * ID for the button.
-     */
     this.buttonId = "";
-    /**
-     * Centers the text in hero area.
-     */
+    this.buttonData = undefined;
     this.textCenter = false;
-    /**
-     * Forces all items in the header to be leftAligned
-     * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
-     * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
-     * this nullifies textCenter prop
-     */
     this.leftAlign = false;
-    /**
-     * URL of the image shown inside the hero area. The width of the displayed image
-     * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
-     * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
-     * property is left empty, image will be hidden.
-     */
     this.image = "";
-    /**
-     * Style variation of the hero area.
-     */
     this.variation = "default";
-    /**
-     * Component event handling.
-     */
-    this.handleClick = (ev, data) => {
-      if (data && data.analytics) {
-        this.duetAnalytics.emit({
-          component: "duet-hero",
-          analyticsId: data.analytics,
-        });
-      }
-      this.emitChange(ev, data);
-    };
+    this.back = undefined;
+    this.listItems = undefined;
+    this.actions = undefined;
   }
   /**
    * Component lifecycle events.
@@ -202,594 +127,577 @@ export class DuetHero {
         "duet-hero-gray-with-back": !!this.processedBack,
         "duet-hero-text-center": this.textCenter && !this.leftAlign,
         "duet-hero-left-align": this.leftAlign,
-      }, part: "duet-hero" },
-      h("div", { class: "duet-hero-wrapper" },
-        this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" },
-          h("div", { class: "duet-hero-image-wrapper" },
-            h("div", { class: "duet-hero-image", style: styles })))),
-        (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-          this.processedBack && (h("div", { class: "duet-hero-back" },
-          h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
-              label: this.processedBack.label,
-              href: this.processedBack.href,
-              id: this.processedBack.id,
-              analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))),
-        (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })),
-        h("div", { class: "duet-hero-text", part: "duet-hero-text" },
-          this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)),
-          h("slot", { name: "badge" }),
-          (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : h("slot", { name: "heading" }))),
-          this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)),
-          (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null,
-            h("span", { slot: "label" }, item.label),
-            h("span", { slot: "value" }, item.value)))))),
-          this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)),
-          h("span", { class: "duet-hero-slot-unnamed" },
-            h("slot", null))),
-        (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) },
-          h("div", { class: "duet-hero-action-icon" },
-            h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })),
-          h("span", null, item.label),
-          item.external && h("duet-visually-hidden", null,
-            ", ",
-            this.accessibleLabelExternal),
-          item.external && (h("div", { class: "duet-hero-action-arrow" },
-            h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))),
-        this.image && this.variation !== "image" && h("div", { class: "duet-hero-image", style: styles }),
-        h("slot", { name: "bottom" }))));
+      }, part: "duet-hero" }, h("div", { class: "duet-hero-wrapper" }, this.image && this.variation === "image" && (h("div", { class: "duet-hero-image-mask" }, h("div", { class: "duet-hero-image-wrapper" }, h("div", { class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+      this.processedBack && (h("div", { class: "duet-hero-back" }, h("duet-button", { style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+        label: this.processedBack.label,
+        href: this.processedBack.href,
+        id: this.processedBack.id,
+        analyticsId: this.processedBack.analyticsId,
+      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: "duet-hero-text", part: "duet-hero-text" }, this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : h("slot", { name: "heading" }))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image && this.variation !== "image" && h("div", { class: "duet-hero-image", style: styles }), h("slot", { name: "bottom" }))));
   }
   static get is() { return "duet-hero"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-hero.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-hero.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-hero.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-hero.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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 hero area."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "please use heading slot instead.\nThe heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading\nwill be hidden."
-          }],
-        "text": ""
-      },
-      "attribute": "heading",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "preHeading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The headline shown before heading."
-      },
-      "attribute": "pre-heading",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "level": {
-      "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 hero area."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "please use heading slot instead.\nThe heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading\nwill be hidden."
+            }],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "preHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The headline shown before heading."
+        },
+        "attribute": "pre-heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "level": {
+        "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": "The level of the heading."
-      },
-      "attribute": "level",
-      "reflect": false,
-      "defaultValue": "\"h1\""
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The description of the hero area, rendered in a P tag. If empty, description\nwill be hidden."
-      },
-      "attribute": "description",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The level of the heading."
+        },
+        "attribute": "level",
+        "reflect": false,
+        "defaultValue": "\"h1\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The description of the hero area, rendered in a P tag. If empty, description\nwill be hidden."
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "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 to the left of the button content. If empty, icon will be hidden."
-      },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "iconSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetHeroIconSize",
-        "resolved": "\"large\" | \"medium\"",
-        "references": {
-          "DuetHeroIconSize": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display to the left of the button content. If empty, icon will be hidden."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "iconSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetHeroIconSize",
+          "resolved": "\"large\" | \"medium\"",
+          "references": {
+            "DuetHeroIconSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon size for the button."
-      },
-      "attribute": "icon-size",
-      "reflect": false,
-      "defaultValue": "\"medium\""
-    },
-    "iconRight": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Show icon on the right side of the button content."
-      },
-      "attribute": "icon-right",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "categoryIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetIconName",
-        "resolved": "string",
-        "references": {
-          "DuetIconName": {
-            "location": "import",
-            "path": "../../common-types"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon size for the button."
+        },
+        "attribute": "icon-size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      },
+      "iconRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show icon on the right side of the button content."
+        },
+        "attribute": "icon-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "categoryIcon": {
+        "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 to the left of the heading in gray hero area variation. If empty, icon will be hidden."
-      },
-      "attribute": "category-icon",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "categoryIconColor": {
-      "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 to the left of the heading in gray hero area variation. If empty, icon will be hidden."
+        },
+        "attribute": "category-icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "categoryIconColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon color to use for the category icon that can be used in gray hero area variation."
-      },
-      "attribute": "category-icon-color",
-      "reflect": false,
-      "defaultValue": "\"category-pet\""
-    },
-    "buttonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text label shown inside the button. If empty, button will be hidden."
-      },
-      "attribute": "button-label",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "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": [],
+          "text": "Icon color to use for the category icon that can be used in gray hero area variation."
+        },
+        "attribute": "category-icon-color",
+        "reflect": false,
+        "defaultValue": "\"category-pet\""
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text label shown inside the button. If empty, button will be hidden."
+        },
+        "attribute": "button-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "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 changes the accessible labels to match the\nchosen language."
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "getLanguage()"
-    },
-    "accessibleLabelExternalDefaults": {
-      "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 changes the accessible labels to match the\nchosen language."
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "getLanguage()"
+      },
+      "accessibleLabelExternalDefaults": {
+        "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: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-          }],
-        "text": "Defaults for accessibleLabelExternal"
-      },
-      "attribute": "accessible-label-external-default",
-      "reflect": false,
-      "defaultValue": "DuetStringsExternalDefaults"
-    },
-    "accessibleLabelExternal": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-          }],
-        "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
-      },
-      "attribute": "accessible-label-external",
-      "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
-    },
-    "buttonUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "URL that the button links to."
-      },
-      "attribute": "button-url",
-      "reflect": false,
-      "defaultValue": "\"#\""
-    },
-    "buttonId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "ID for the button."
-      },
-      "attribute": "button-id",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "buttonData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetHeroButtonData",
-        "resolved": "{ [key: string]: any; analyticsId?: string; }",
-        "references": {
-          "DuetHeroButtonData": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+            }],
+          "text": "Defaults for accessibleLabelExternal"
+        },
+        "attribute": "accessible-label-external-default",
+        "reflect": false,
+        "defaultValue": "DuetStringsExternalDefaults"
+      },
+      "accessibleLabelExternal": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+            }],
+          "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+        },
+        "attribute": "accessible-label-external",
+        "reflect": false,
+        "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+      },
+      "buttonUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL that the button links to."
+        },
+        "attribute": "button-url",
+        "reflect": false,
+        "defaultValue": "\"#\""
+      },
+      "buttonId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the button."
+        },
+        "attribute": "button-id",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "buttonData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetHeroButtonData",
+          "resolved": "{ [key: string]: any; analyticsId?: string; }",
+          "references": {
+            "DuetHeroButtonData": {
+              "location": "local"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An object that includes any data you want to pass to the button. This data\nwill be emitted when the button is clicked. If property analyticsId is present,\nthen a separate duetAnalytics event will be emitted."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An object that includes any data you want to pass to the button. This data\nwill be emitted when the button is clicked. If property analyticsId is present,\nthen a separate duetAnalytics event will be emitted."
-      }
-    },
-    "textCenter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Centers the text in hero area."
-      },
-      "attribute": "text-center",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "leftAlign": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Forces all items in the header to be leftAligned\nThis can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices\nor allways leftAligned (you must manually switch this parameter if you need special breakpoints)\nthis nullifies textCenter prop"
-      },
-      "attribute": "left-align",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "image": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "URL of the image shown inside the hero area. The width of the displayed image\nshould be 800px. Optimal aspect ratio is 3:2. When using \u201Cimage\u201D variation of\nHero Area the required image size is 1200x1200px (1:1 ratio). If this\nproperty is left empty, image will be hidden."
-      },
-      "attribute": "image",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "variation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetHeroVariation",
-        "resolved": "\"default\" | \"gray\" | \"image\" | \"light\" | \"minimal\"",
-        "references": {
-          "DuetHeroVariation": {
-            "location": "local"
+      "textCenter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Centers the text in hero area."
+        },
+        "attribute": "text-center",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "leftAlign": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Forces all items in the header to be leftAligned\nThis can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices\nor allways leftAligned (you must manually switch this parameter if you need special breakpoints)\nthis nullifies textCenter prop"
+        },
+        "attribute": "left-align",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL of the image shown inside the hero area. The width of the displayed image\nshould be 800px. Optimal aspect ratio is 3:2. When using \u201Cimage\u201D variation of\nHero Area the required image size is 1200x1200px (1:1 ratio). If this\nproperty is left empty, image will be hidden."
+        },
+        "attribute": "image",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetHeroVariation",
+          "resolved": "\"default\" | \"gray\" | \"image\" | \"light\" | \"minimal\"",
+          "references": {
+            "DuetHeroVariation": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Style variation of the hero area."
-      },
-      "attribute": "variation",
-      "reflect": false,
-      "defaultValue": "\"default\""
-    },
-    "back": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An object that includes mandatory \"label\" and \"href\" fields for the back link.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for the\nelement. If nothing is passed, back link won\u2019t be shown. **NOTE: The back link\ncan be ONLY used in combination with \"gray\" style variation.**"
-      },
-      "attribute": "back",
-      "reflect": false
-    },
-    "listItems": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of items for the definition list inside hero. Items have to\ninclude mandatory \"label\" and \"value\" fields to work."
-      },
-      "attribute": "list-items",
-      "reflect": false
-    },
-    "actions": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of items for the main actions. Items have to include mandatory\n\"label\", \"href\" and \"icon\" fields to work. Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
-      },
-      "attribute": "actions",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "processedListItems": {},
-    "processedActions": {},
-    "processedBack": {}
-  }; }
-  static get events() { return [{
-      "method": "duetClick",
-      "name": "duetClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Callback for when an user clicks the hero area's action button. You can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
-      },
-      "complexType": {
-        "original": "DuetHeroClickEvent",
-        "resolved": "{ originalEvent: Event; component: \"duet-hero\"; data: any; }",
-        "references": {
-          "DuetHeroClickEvent": {
-            "location": "local"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the hero area."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "back": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An object that includes mandatory \"label\" and \"href\" fields for the back link.\nAdditionally, you can pass an \"id\" that is added as an HTML identifier for the\nelement. If nothing is passed, back link won\u2019t be shown. **NOTE: The back link\ncan be ONLY used in combination with \"gray\" style variation.**"
+        },
+        "attribute": "back",
+        "reflect": false
+      },
+      "listItems": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An array of items for the definition list inside hero. Items have to\ninclude mandatory \"label\" and \"value\" fields to work."
+        },
+        "attribute": "list-items",
+        "reflect": false
+      },
+      "actions": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An array of items for the main actions. Items have to include mandatory\n\"label\", \"href\" and \"icon\" fields to work. Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+        },
+        "attribute": "actions",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "processedListItems": {},
+      "processedActions": {},
+      "processedBack": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetClick",
+        "name": "duetClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Callback for when an user clicks the hero area's action button. You can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
+        },
+        "complexType": {
+          "original": "DuetHeroClickEvent",
+          "resolved": "{ originalEvent: Event; component: \"duet-hero\"; data: any; }",
+          "references": {
+            "DuetHeroClickEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "duetAnalytics",
-      "name": "duetAnalytics",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event raised when an items with an associated analytics ID is clicked. Analytics ID can be\naccessed via **event.detail.analyticsId**"
-      },
-      "complexType": {
-        "original": "DuetHeroAnalyticsEvent",
-        "resolved": "{ analyticsId: string; component: \"duet-hero\"; }",
-        "references": {
-          "DuetHeroAnalyticsEvent": {
-            "location": "local"
+      }, {
+        "method": "duetAnalytics",
+        "name": "duetAnalytics",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event raised when an items with an associated analytics ID is clicked. Analytics ID can be\naccessed via **event.detail.analyticsId**"
+        },
+        "complexType": {
+          "original": "DuetHeroAnalyticsEvent",
+          "resolved": "{ analyticsId: string; component: \"duet-hero\"; }",
+          "references": {
+            "DuetHeroAnalyticsEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "back",
-      "methodName": "refresh"
-    }, {
-      "propName": "listItems",
-      "methodName": "refresh"
-    }, {
-      "propName": "actions",
-      "methodName": "refresh"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "back",
+        "methodName": "refresh"
+      }, {
+        "propName": "listItems",
+        "methodName": "refresh"
+      }, {
+        "propName": "actions",
+        "methodName": "refresh"
+      }];
+  }
 }