@itcenteratunihelsinki/huds-lib 0.8.41 → 0.8.42

package/dist/collection/components/hy-hero/hy-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-hero.js","sourceRoot":"","sources":["../../../src/components/hy-hero/hy-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\nlet timeout = null;\nlet delay = 250;\n\nimport {Component, Element, h, Host, Prop} from '@stencil/core';\nimport {jsonParserWorker} from '../../global/globalScript';\nimport {\n  CtaLinkButtonVariants,\n  HeroColorVariant,\n  HeroSizeVariant,\n  HeroGroupTypeVariant,\n  HeroTypeVariant,\n} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-hero',\n  styleUrl: 'hy-hero.scss',\n  shadow: false,\n})\nexport class HyHero {\n  @Element() el: HTMLElement;\n  @Prop() heroType: HeroTypeVariant = HeroTypeVariant.landing;\n  @Prop() heroGroupType: HeroGroupTypeVariant = HeroGroupTypeVariant.default;\n  @Prop() colorVariant: HeroColorVariant = HeroColorVariant.blue;\n  @Prop() sizeVariant: HeroSizeVariant = HeroSizeVariant.large;\n  @Prop() image: string;\n  @Prop() imageAltText: string = '';\n  @Prop() disableLazy: boolean = false;\n  @Prop() hasShortcuts: boolean = false;\n  @Prop() heading: string;\n  @Prop() description: string;\n  @Prop() url: string;\n  @Prop() urlTitle: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n\n  async componentWillLoad() {\n    this._sourceSet = await jsonParserWorker(this.sourceSet);\n  }\n\n  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {\n    const heroContentContainerElement = heroElement.getElementsByClassName(\n      'hy-hero__content-container'\n    )[0] as HTMLElement;\n\n    if (heroSizeVariant === 'small') {\n      if (heroContentContainerElement.offsetHeight >= 300) {\n        heroElement.classList.add('has-cover');\n      } else {\n        heroElement.classList.remove('has-cover');\n      }\n    }\n\n    if (heroSizeVariant === 'large') {\n      if (heroContentContainerElement.offsetHeight >= 344) {\n        heroElement.classList.add('has-cover');\n      } else {\n        heroElement.classList.remove('has-cover');\n      }\n    }\n  }\n\n  render() {\n    let variant = CtaLinkButtonVariants.heroWhite;\n    let colorVariantValue = this.colorVariant;\n    let heroTypeValue = this.heroType;\n\n    if (this.heroType === 'minor_landing') {\n      colorVariantValue = HeroColorVariant.white;\n      heroTypeValue = HeroTypeVariant.landing;\n    }\n\n    if (colorVariantValue === HeroColorVariant.blue) {\n      variant = CtaLinkButtonVariants.heroBlue;\n    }\n\n    if (colorVariantValue === HeroColorVariant.black) {\n      variant = CtaLinkButtonVariants.heroBlack;\n    }\n\n    if (!colorVariantValue || colorVariantValue === 'fp_white') {\n      colorVariantValue = HeroColorVariant.white;\n    }\n\n    const hyHeroClasses = [\n      'hy-hero',\n      `hy-hero--${heroTypeValue}`,\n      `hy-hero--${this.heroGroupType}`,\n      `hy-hero--${colorVariantValue}`,\n      `hy-hero--${this.sizeVariant}`,\n    ];\n\n    const heroTitleClasses = ['hy-hero__title', 'hy-heading__hero'].join(' ');\n\n    // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.\n    if (this.hasShortcuts) {\n      hyHeroClasses.push('has-shortcuts');\n    }\n\n    const aspectRatioWidth = 16;\n    const aspectRatioHeight = 10;\n    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;\n    const aspectRatio = {\n      '--aspectRatio': `${aspect}%` as 'aspectRatio',\n    };\n\n    window.onload = () => {\n      const heroElement = document.getElementsByClassName('hy-hero')[0] as HTMLElement;\n      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);\n      window.addEventListener('resize', () => {\n        clearTimeout(timeout);\n        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);\n      });\n    };\n\n    if (heroTypeValue === 'front_page') {\n      return (\n        <Host>\n          <div class={hyHeroClasses.join(' ')}>\n            <div class={`hy-hero__container`}>\n              <div class={`hy-hero__image-container`} style={aspectRatio}>\n                {this.image &&\n                  (this._sourceSet ? (\n                    <picture>\n                      {this._sourceSet.map((item) => (\n                        <source\n                          srcSet={item.src}\n                          media={item.media}\n                          type={item.type}\n                          sizes={item.sizes ? item.sizes : ''}\n                        />\n                      ))}\n                      <img\n                        loading={this.disableLazy ? 'eager' : 'lazy'}\n                        alt={this.imageAltText}\n                        class={`hy-image__image`}\n                        src={this.image}\n                      />\n                    </picture>\n                  ) : (\n                    <img\n                      loading={this.disableLazy ? 'eager' : 'lazy'}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                    />\n                  ))}\n              </div>\n              <div class={`hy-hero__spacer-box`}></div>\n              <div class={`hy-hero__content-container`}>\n                <div class={`hy-hero__content`}>\n                  <div class={`hy-hero__title-container`}>\n                    <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                  </div>\n                  {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                  {this.url && (\n                    <div class={`hy-hero__actions`}>\n                      <hy-cta-button\n                        link-content={this.urlTitle}\n                        sc-label={this.scLabel}\n                        url={this.url}\n                        is-external={this.isExternal}\n                        variant={variant}\n                      />\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n          <hy-box mb=\"2, 2, 1, 1\" />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class={hyHeroClasses.join(' ')}>\n          <div class={`hy-hero__container`}>\n            <div class={`hy-hero__image-container`} style={aspectRatio}>\n              {this.image &&\n                (this._sourceSet ? (\n                  <picture>\n                    {this._sourceSet.map((item) => (\n                      <source\n                        srcSet={item.src}\n                        media={item.media}\n                        type={item.type}\n                        sizes={item.sizes ? item.sizes : ''}\n                      />\n                    ))}\n                    <img\n                      loading={this.disableLazy ? 'eager' : 'lazy'}\n                      alt={this.imageAltText}\n                      class={`hy-image__image`}\n                      src={this.image}\n                    />\n                  </picture>\n                ) : (\n                  <img\n                    loading={this.disableLazy ? 'eager' : 'lazy'}\n                    alt={this.imageAltText}\n                    class={`hy-image__image`}\n                    src={this.image}\n                  />\n                ))}\n            </div>\n            <div class={`hy-hero__content-container`}>\n              <div class={`hy-hero__content`}>\n                <div class={`hy-hero__title-container`}>\n                  <h2 innerHTML={this.heading} class={heroTitleClasses}></h2>\n                </div>\n                {this.description && <p class={`hy-hero__description`}>{this.description}</p>}\n                {this.url && (\n                  <div class={`hy-hero__actions`}>\n                    <hy-cta-button\n                      link-content={this.urlTitle}\n                      sc-label={this.scLabel}\n                      url={this.url}\n                      is-external={this.isExternal}\n                      variant={variant}\n                    />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <hy-box mb=\"2, 2, 1, 1\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/hy-introduction/hy-introduction.js

@@ -1,14 +1,20 @@
-import { Component, Element, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { HeadingVarians, HeadingSectionVariants } from '../../utils/utils';
 export class HyIntroduction {
   constructor() {
     this.variant = null;
     this.reversed = false;
     this.limitContentWidth = false;
+    this.textTitle = undefined;
     this.textDescription = null;
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.urlTitle = undefined;
+    this.imageUrl = undefined;
     this.imageAlt = '';
     this.isExternal = false;
     this.headerstyle = 'common';
+    this.sourceSet = undefined;
   }
   componentDidLoad() {
     let hyMainDiv = this.el.closest('.hy-main');
@@ -37,270 +43,262 @@ export class HyIntroduction {
       this.limitContentWidth ? 'hy-introduction__content--limit-width' : '',
     ].join(' ');
     const target = this.isExternal ? '_blank' : '_self';
-    return (h(Host, null,
-      h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }),
-      h("div", { class: classAttributes },
-        h("hy-main-content-wrapper", null,
-          h("div", { class: "hy-introduction__outer-content" },
-            h("div", { class: contentWrapperClasses },
-              h("hy-heading", { class: classTitle, heading: HeadingVarians.h2, section: HeadingSectionVariants.introduction }, this.textTitle),
-              h("p", { class: classDescription }, this.textDescription),
-              this.url && (h("div", { class: "hy-introduction__link__container" },
-                h("a", { class: "hy-introduction__link", href: this.url, "aria-label": this.scLabel, target: target },
-                  this.urlTitle,
-                  h("span", { class: "hy-introduction__link__icon" },
-                    h("hy-icon", { icon: 'hy-icon-arrow-right', size: 24 })))))),
-            this.imageUrl &&
-              (this.sourceSet ? (h("div", { class: "hy-introduction__image" },
-                h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))) : (h("div", { class: "hy-introduction__image" },
-                h("hy-image", { "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))))))),
-      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+    return (h(Host, null, h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), h("div", { class: classAttributes }, h("hy-main-content-wrapper", null, h("div", { class: "hy-introduction__outer-content" }, h("div", { class: contentWrapperClasses }, h("hy-heading", { class: classTitle, heading: HeadingVarians.h2, section: HeadingSectionVariants.introduction }, this.textTitle), h("p", { class: classDescription }, this.textDescription), this.url && (h("div", { class: "hy-introduction__link__container" }, h("a", { class: "hy-introduction__link", href: this.url, "aria-label": this.scLabel, target: target }, this.urlTitle, h("span", { class: "hy-introduction__link__icon" }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 24 })))))), this.imageUrl &&
+      (this.sourceSet ? (h("div", { class: "hy-introduction__image" }, h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))) : (h("div", { class: "hy-introduction__image" }, h("hy-image", { "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
   }
   static get is() { return "hy-introduction"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-introduction.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["hy-introduction.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "IntroductionBgColors",
-        "resolved": "\"white\"",
-        "references": {
-          "IntroductionBgColors": {
-            "location": "import",
-            "path": "../../utils/utils"
+  static get originalStyleUrls() {
+    return {
+      "$": ["hy-introduction.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["hy-introduction.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IntroductionBgColors",
+          "resolved": "\"white\"",
+          "references": {
+            "IntroductionBgColors": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "reversed": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "reversed",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "limitContentWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "limit-content-width",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "textTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "text-title",
-      "reflect": false
-    },
-    "textDescription": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "reversed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "reversed",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "text-description",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "limitContentWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "limit-content-width",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "textTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-title",
+        "reflect": false
       },
-      "attribute": "url",
-      "reflect": false
-    },
-    "scLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "textDescription": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-description",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
       },
-      "attribute": "sc-label",
-      "reflect": false
-    },
-    "urlTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "scLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sc-label",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "urlTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url-title",
+        "reflect": false
       },
-      "attribute": "url-title",
-      "reflect": false
-    },
-    "imageUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "imageUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-url",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "imageAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "image-alt",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "image-url",
-      "reflect": false
-    },
-    "imageAlt": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "isExternal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-external",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "headerstyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "headerstyle",
+        "reflect": false,
+        "defaultValue": "'common'"
       },
-      "attribute": "image-alt",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "isExternal": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-external",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "headerstyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'common'"
-    },
-    "sourceSet": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ImageSrcSet[] | string",
-        "resolved": "ImageSrcSet[] | string",
-        "references": {
-          "ImageSrcSet": {
-            "location": "local"
+      "sourceSet": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ImageSrcSet[] | string",
+          "resolved": "ImageSrcSet[] | string",
+          "references": {
+            "ImageSrcSet": {
+              "location": "local",
+              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-introduction/hy-introduction.tsx"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "source-set",
-      "reflect": false
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "source-set",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=hy-introduction.js.map

package/dist/collection/components/hy-introduction/hy-introduction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hy-introduction.js","sourceRoot":"","sources":["../../../src/components/hy-introduction/hy-introduction.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\n\nimport {Component, Element, Host, h, Prop} from '@stencil/core';\nimport {IntroductionBgColors, HeadingVarians, HeadingSectionVariants} from '../../utils/utils';\n\n@Component({\n  tag: 'hy-introduction',\n  styleUrl: 'hy-introduction.scss',\n  shadow: false,\n})\nexport class HyIntroduction {\n  @Prop() variant: IntroductionBgColors = null;\n  @Prop() reversed: boolean = false;\n  @Prop() limitContentWidth: boolean = false;\n  @Prop() textTitle?: string;\n  @Prop() textDescription: string = null;\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() urlTitle?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAlt: string = '';\n  @Prop() isExternal: boolean = false;\n  @Prop() headerstyle: string = 'common';\n  @Prop() sourceSet: ImageSrcSet[] | string;\n  @Element() el: HTMLElement;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest('.hy-main');\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains('with-sidebar')) {\n        this.headerstyle = 'large';\n      }\n    }\n  }\n\n  render() {\n    const classAttributes = [\n      'hy-introduction',\n      `hy-introduction__${this.headerstyle}`,\n      this.headerstyle,\n      this.reversed ? 'hy-introduction--reversed' : '',\n      this.variant\n        ? `hy-introduction--with-bg hy-introduction--with-bg__${this.variant}`\n        : 'hy-introduction--without-bg',\n    ].join(' ');\n\n    const classTitle = ['hy-introduction__title', `hy-introduction__title__${this.headerstyle}`].join(' ');\n    const classDescription = ['hy-introduction__description', `hy-introduction__description__${this.headerstyle}`].join(\n      ' '\n    );\n\n    const contentWrapperClasses = [\n      'hy-introduction__content',\n      this.reversed ? 'hy-introduction__content--reversed' : '',\n      this.imageUrl ? 'hy-introduction__content--with-image' : 'hy-introduction__content--without-image',\n      this.limitContentWidth ? 'hy-introduction__content--limit-width' : '',\n    ].join(' ');\n\n    const target = this.isExternal ? '_blank' : '_self';\n\n    return (\n      <Host>\n        <hy-box pt=\"1.25, 1.25, 1.5, 2.5\" />\n        <div class={classAttributes}>\n          <hy-main-content-wrapper>\n            <div class=\"hy-introduction__outer-content\">\n              <div class={contentWrapperClasses}>\n                <hy-heading\n                  class={classTitle}\n                  heading={HeadingVarians.h2}\n                  section={HeadingSectionVariants.introduction}\n                >\n                  {this.textTitle}\n                </hy-heading>\n                <p class={classDescription}>{this.textDescription}</p>\n                {this.url && (\n                  <div class=\"hy-introduction__link__container\">\n                    <a class=\"hy-introduction__link\" href={this.url} aria-label={this.scLabel} target={target}>\n                      {this.urlTitle}\n                      <span class=\"hy-introduction__link__icon\">\n                        <hy-icon icon={'hy-icon-arrow-right'} size={24} />\n                      </span>\n                    </a>\n                  </div>\n                )}\n              </div>\n              {this.imageUrl &&\n                (this.sourceSet ? (\n                  <div class=\"hy-introduction__image\">\n                    <hy-image\n                      source-set={this.sourceSet}\n                      image-url={this.imageUrl}\n                      aspectRatioWidth={16}\n                      aspectRatioHeight={10}\n                      image-alt={this.imageAlt}\n                    />\n                  </div>\n                ) : (\n                  <div class=\"hy-introduction__image\">\n                    <hy-image\n                      image-url={this.imageUrl}\n                      aspectRatioWidth={16}\n                      aspectRatioHeight={10}\n                      image-alt={this.imageAlt}\n                    />\n                  </div>\n                ))}\n            </div>\n          </hy-main-content-wrapper>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"]}