@duetds/components 8.0.6 → 8.1.0

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

@@ -18,830 +18,830 @@ import { parsePossibleJSON } from "../../utils/string-utils";
  * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations.
  */
 export class DuetHero {
-  constructor() {
+    constructor() {
+        /**
+         * 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;
+        this.theme = "";
+        this.heading = "";
+        this.preHeading = "";
+        this.level = "h1";
+        this.subHeadingLevel = "h2";
+        this.description = "";
+        this.icon = "";
+        this.iconSize = "medium";
+        this.iconRight = false;
+        this.categoryIcon = "";
+        this.categoryIconColor = "category-pet";
+        this.buttonLabel = "";
+        this.language = getLanguage();
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        this.buttonUrl = "#";
+        this.buttonId = "";
+        this.buttonData = undefined;
+        this.textCenter = false;
+        this.leftAlign = false;
+        this.image = "";
+        this.imageSize = "auto";
+        this.imagePosition = "auto";
+        this.variation = "default";
+        this.back = undefined;
+        this.listItems = undefined;
+        this.actions = undefined;
+        this.layout = "narrow";
+    }
     /**
-     * Component event handling.
+     * Component lifecycle events.
      */
-    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;
-    this.theme = "";
-    this.heading = "";
-    this.preHeading = "";
-    this.level = "h1";
-    this.subHeadingLevel = "h2";
-    this.description = "";
-    this.icon = "";
-    this.iconSize = "medium";
-    this.iconRight = false;
-    this.categoryIcon = "";
-    this.categoryIconColor = "category-pet";
-    this.buttonLabel = "";
-    this.language = getLanguage();
-    this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-    this.buttonUrl = "#";
-    this.buttonId = "";
-    this.buttonData = undefined;
-    this.textCenter = false;
-    this.leftAlign = false;
-    this.image = "";
-    this.imageSize = "auto";
-    this.imagePosition = "auto";
-    this.variation = "default";
-    this.back = undefined;
-    this.listItems = undefined;
-    this.actions = undefined;
-    this.layout = "narrow";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
-    this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
-    this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
-    this.refresh();
-  }
-  connectedCallback() {
-    connectLanguageChangeObserver(this, {
-      prop: "accessibleLabelExternal",
-      defaults: "accessibleLabelExternalDefaults",
-    });
-  }
-  disconnectedCallback() {
-    disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * Local methods.
-   */
-  async refresh() {
-    this.processedListItems = parsePossibleJSON(this.listItems);
-    this.processedActions = parsePossibleJSON(this.actions);
-    this.processedBack = parsePossibleJSON(this.back);
-  }
-  emitChange(ev, data) {
-    if (!data) {
-      data = {};
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
+        this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
+        this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
+        this.refresh();
     }
-    if (this.buttonLabel) {
-      data.label = this.buttonLabel;
-      data.href = this.buttonUrl;
-      data.id = this.buttonId || "No ID defined via buttonId prop";
-    }
-    this.duetClick.emit({
-      originalEvent: ev,
-      data: data,
-      component: "duet-hero",
-    });
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const campaignOrSection = this.variation === "campaign" || this.variation === "section";
-    const imageSizeIsCover = this.imageSize === "cover";
-    const imagePositionIsCenter = this.imagePosition === "center";
-    const styles = {
-      backgroundImage: `url(${this.image})`,
-      backgroundSize: imageSizeIsCover ? "cover" : null,
-      backgroundPosition: imagePositionIsCenter ? "center" : null,
-    };
-    const buttonStyles = {
-      transform: "translateX(-8px)",
-    };
-    let headingVisualLevel = this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1";
-    if (campaignOrSection) {
-      headingVisualLevel = "h0";
+    connectedCallback() {
+        connectLanguageChangeObserver(this, {
+            prop: "accessibleLabelExternal",
+            defaults: "accessibleLabelExternalDefaults",
+        });
     }
-    else if (this.variation === "product") {
-      headingVisualLevel = "h1";
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
     }
-    let headingColor = this.variation === "default" ? "gray-lightest" : "";
-    if (campaignOrSection) {
-      headingColor = "color-gray-lightest";
-      if (this.theme === "turva") {
-        headingColor = "color-gray-lightest-turva";
-      }
+    /**
+     * Local methods.
+     */
+    async refresh() {
+        this.processedListItems = parsePossibleJSON(this.listItems);
+        this.processedActions = parsePossibleJSON(this.actions);
+        this.processedBack = parsePossibleJSON(this.back);
     }
-    let buttonVariation = this.theme === "turva" ? "negative" : "primary";
-    let outlineColor = "primary-blue";
-    let textColor = "gray-lightest";
-    let buttonColor = "primary";
-    if (this.variation === "light" ||
-      this.variation === "image" ||
-      this.variation === "gray" ||
-      this.variation === "minimal" ||
-      campaignOrSection ||
-      this.variation === "product" ||
-      this.variation === "content") {
-      textColor = "secondary";
-      if (this.theme === "turva") {
-        textColor = "secondary-turva";
-        buttonVariation = "primary";
-        buttonColor = "color-primary-turva";
-        outlineColor = "color-primary-turva";
-      }
+    emitChange(ev, data) {
+        if (!data) {
+            data = {};
+        }
+        if (this.buttonLabel) {
+            data.label = this.buttonLabel;
+            data.href = this.buttonUrl;
+            data.id = this.buttonId || "No ID defined via buttonId prop";
+        }
+        this.duetClick.emit({
+            originalEvent: ev,
+            data: data,
+            component: "duet-hero",
+        });
     }
-    return (h("div", { role: "region", class: {
-        "duet-hero": true,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-has-category-icon": !!this.categoryIcon,
-        "duet-hero-light": this.variation === "light",
-        "duet-hero-gray": this.variation === "gray" || this.variation === "minimal",
-        "duet-hero-minimal": this.variation === "minimal",
-        "duet-hero-with-image": this.variation === "image",
-        "duet-hero-has-image": !!this.image,
-        "duet-hero-campaign": this.variation === "campaign",
-        "duet-hero-section": this.variation === "section",
-        "duet-hero-product": this.variation === "product",
-        "duet-hero-content": this.variation === "content",
-        "duet-hero-gray-with-actions": !!this.processedActions,
-        "duet-hero-gray-with-back": !!this.processedBack,
-        "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
-        "duet-hero-left-align": this.leftAlign && !campaignOrSection,
-        "duet-hero-narrow": this.layout === "narrow",
-      }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { "background-area": true, [this.layout]: true } }, h("div", { class: { "background-container": true, [this.layout]: true } }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, 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": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? this.preHeading : h("slot", { name: "pre-heading" }))), 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: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { name: "subheading" }))), 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" &&
-      !campaignOrSection &&
-      this.variation !== "product" &&
-      this.variation !== "content" && 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",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "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",
-              "id": "src/common-types.d.ts::DuetHeadingLevel"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The level of the heading."
-        },
-        "attribute": "level",
-        "reflect": false,
-        "defaultValue": "\"h1\""
-      },
-      "subHeadingLevel": {
-        "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": "The level of the heading. Only usable with campaign, section variations."
-        },
-        "attribute": "sub-heading-level",
-        "reflect": false,
-        "defaultValue": "\"h2\""
-      },
-      "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",
-              "id": "src/common-types.d.ts::DuetIconName"
-            }
-          }
-        },
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
-              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
-            }
-          }
-        },
-        "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",
-              "id": "src/common-types.d.ts::DuetIconName"
-            }
-          }
-        },
-        "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",
-              "id": "src/common-types.d.ts::DuetColor"
-            }
-          }
-        },
-        "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",
-              "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 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",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "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": true,
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
-              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
-            }
-          }
-        },
-        "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."
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const campaignOrSection = this.variation === "campaign" || this.variation === "section";
+        const imageSizeIsCover = this.imageSize === "cover";
+        const imagePositionIsCenter = this.imagePosition === "center";
+        const styles = {
+            backgroundImage: `url(${this.image})`,
+            backgroundSize: imageSizeIsCover ? "cover" : null,
+            backgroundPosition: imagePositionIsCenter ? "center" : null,
+        };
+        const buttonStyles = {
+            transform: "translateX(-8px)",
+        };
+        let headingVisualLevel = this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1";
+        if (campaignOrSection) {
+            headingVisualLevel = "h0";
         }
-      },
-      "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. For normal hero areas 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": "\"\""
-      },
-      "imageSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"auto\" | \"cover\"",
-          "resolved": "\"auto\" | \"cover\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Image sizing."
-        },
-        "attribute": "image-size",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "imagePosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"auto\" | \"center\"",
-          "resolved": "\"auto\" | \"center\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Image position."
-        },
-        "attribute": "image-position",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "variation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetHeroVariation",
-          "resolved": "\"campaign\" | \"content\" | \"default\" | \"gray\" | \"image\" | \"light\" | \"minimal\" | \"product\" | \"section\"",
-          "references": {
-            "DuetHeroVariation": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
-              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
-            }
-          }
-        },
-        "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
-      },
-      "layout": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "\"narrow\" | \"fluid\"",
-          "resolved": "\"fluid\" | \"narrow\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Layout."
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "\"narrow\""
-      }
-    };
-  }
-  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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
-              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
+        else if (this.variation === "product") {
+            headingVisualLevel = "h1";
+        }
+        let headingColor = this.variation === "default" ? "gray-lightest" : "";
+        if (campaignOrSection) {
+            headingColor = "color-gray-lightest";
+            if (this.theme === "turva") {
+                headingColor = "color-gray-lightest-turva";
             }
-          }
         }
-      }, {
-        "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",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-hero/duet-hero.tsx",
-              "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
+        let buttonVariation = this.theme === "turva" ? "negative" : "primary";
+        let outlineColor = "primary-blue";
+        let textColor = "gray-lightest";
+        let buttonColor = "primary";
+        if (this.variation === "light" ||
+            this.variation === "image" ||
+            this.variation === "gray" ||
+            this.variation === "minimal" ||
+            campaignOrSection ||
+            this.variation === "product" ||
+            this.variation === "content") {
+            textColor = "secondary";
+            if (this.theme === "turva") {
+                textColor = "secondary-turva";
+                buttonVariation = "primary";
+                buttonColor = "color-primary-turva";
+                outlineColor = "color-primary-turva";
             }
-          }
         }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "back",
-        "methodName": "refresh"
-      }, {
-        "propName": "listItems",
-        "methodName": "refresh"
-      }, {
-        "propName": "actions",
-        "methodName": "refresh"
-      }];
-  }
+        return (h("div", { role: "region", class: {
+                "duet-hero": true,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-has-category-icon": !!this.categoryIcon,
+                "duet-hero-light": this.variation === "light",
+                "duet-hero-gray": this.variation === "gray" || this.variation === "minimal",
+                "duet-hero-minimal": this.variation === "minimal",
+                "duet-hero-with-image": this.variation === "image",
+                "duet-hero-has-image": !!this.image,
+                "duet-hero-campaign": this.variation === "campaign",
+                "duet-hero-section": this.variation === "section",
+                "duet-hero-product": this.variation === "product",
+                "duet-hero-content": this.variation === "content",
+                "duet-hero-gray-with-actions": !!this.processedActions,
+                "duet-hero-gray-with-back": !!this.processedBack,
+                "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
+                "duet-hero-left-align": this.leftAlign && !campaignOrSection,
+                "duet-hero-narrow": this.layout === "narrow",
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { class: "background-area" }, h("div", { class: "background-container" }, h("div", { class: "background" }, h("img", { class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { class: { "background-area": true, [this.layout]: true } }, h("div", { class: { "background-container": true, [this.layout]: true } }, h("div", { class: { background: true, [this.layout]: true } }, h("div", { class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { class: { "brand-shape": true, [this.layout]: true } }), h("div", { class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { class: "background-area" }, h("div", { class: "background" }, h("div", { class: "background-mask" }), this.theme !== "turva" && h("div", { class: "brand-shape" }), h("div", { class: "brand-shaped-image" }, h("div", { class: "brand-shaped-image-wrapper" }, h("div", { class: "brand-shaped-image-bg", style: styles })))))), h("div", { class: { "duet-hero-wrapper": true, [this.layout]: true } }, 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": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("div", null, h("slot", { name: "pre-heading" }))))), 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: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("div", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("div", null, h("slot", { name: "subheading" })))), 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" &&
+            !campaignOrSection &&
+            this.variation !== "product" &&
+            this.variation !== "content" && 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",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/common-types.d.ts::DuetHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The level of the heading."
+                },
+                "attribute": "level",
+                "reflect": false,
+                "defaultValue": "\"h1\""
+            },
+            "subHeadingLevel": {
+                "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": "The level of the heading. Only usable with campaign, section variations."
+                },
+                "attribute": "sub-heading-level",
+                "reflect": false,
+                "defaultValue": "\"h2\""
+            },
+            "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",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroIconSize"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "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",
+                            "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 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",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "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": true,
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroButtonData"
+                        }
+                    }
+                },
+                "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. For normal hero areas 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": "\"\""
+            },
+            "imageSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"cover\"",
+                    "resolved": "\"auto\" | \"cover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image sizing."
+                },
+                "attribute": "image-size",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "imagePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"center\"",
+                    "resolved": "\"auto\" | \"center\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image position."
+                },
+                "attribute": "image-position",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetHeroVariation",
+                    "resolved": "\"campaign\" | \"content\" | \"default\" | \"gray\" | \"image\" | \"light\" | \"minimal\" | \"product\" | \"section\"",
+                    "references": {
+                        "DuetHeroVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroVariation"
+                        }
+                    }
+                },
+                "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
+            },
+            "layout": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"narrow\" | \"fluid\"",
+                    "resolved": "\"fluid\" | \"narrow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout."
+                },
+                "attribute": "layout",
+                "reflect": false,
+                "defaultValue": "\"narrow\""
+            }
+        };
+    }
+    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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-hero/duet-hero.tsx",
+                            "id": "src/components/duet-hero/duet-hero.tsx::DuetHeroAnalyticsEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "back",
+                "methodName": "refresh"
+            }, {
+                "propName": "listItems",
+                "methodName": "refresh"
+            }, {
+                "propName": "actions",
+                "methodName": "refresh"
+            }];
+    }
 }