@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

package/dist/esm/hy-key-figure_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-key-figure.hy-key-figure-group.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-key-figure/hy-key-figure.scss?tag=hy-key-figure&encapsulation=shadow","./src/components/hy-key-figure/hy-key-figure.tsx","./src/components/hy-key-figure-group/hy-key-figure-group.scss?tag=hy-key-figure-group","./src/components/hy-key-figure-group/hy-key-figure-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-key-figure {\n  display: block;\n  margin-bottom: 32px;\n  text-align: center;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n  @include breakpoint($wide) {\n    text-align: left;\n  }\n\n  &__title {\n    @include font-size(40px, 60px);\n    @include font-weight($bold);\n    box-decoration-break: clone;\n    color: var(--brand-main-light);\n    display: inline;\n    font-family: var(--main-font-family);\n    letter-spacing: -2px;\n    position: relative;\n    z-index: 1;\n\n    @include breakpoint($narrow) {\n      @include font-size(40px, 30px);\n    }\n\n    @include breakpoint($extrawide) {\n      @include font-size(80px, 70px);\n    }\n  }\n\n  &__description {\n    color: var(--grayscale-dark);\n    font-family: var(--main-font-family);\n    @include font-size(14px, 20px);\n    letter-spacing: 0;\n    line-height: 20px;\n    margin-top: 8px;\n\n    @include breakpoint($extrawide) {\n      @include font-size(20px, 20px);\n    }\n  }\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\nimport {KeyHighlightVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-key-figure\",\n  styleUrl: \"hy-key-figure.scss\",\n  shadow: true,\n})\nexport class HyKeyFigure implements ComponentInterface {\n  @Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;\n  @Prop() heading: string;\n  @Prop() description: string;\n\n  render() {\n    const classVariant = [this.variant, \"hy-key-figure\"].join(\" \");\n\n    return (\n      <div class={classVariant}>\n        <div class=\"hy-key-figure__title\">{this.heading}</div>\n        <div class=\"hy-key-figure__description\">{this.description}</div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-key-figure-group-container {\n  margin: 20px 0 28px 0;\n\n  @include breakpoint($wide) {\n    margin: 24px 0 32px 0;\n  }\n  @include breakpoint($xlarge) {\n    margin: 40px 0;\n  }\n\n  &__large {\n    @include breakpoint($extrawide) {\n      margin: 40px 0;\n    }\n  }\n}\n\n.hy-key-figure-group {\n  display: block;\n  justify-content: center;\n  max-width: 30rem;\n  margin-right: auto;\n  margin-left: auto;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    display: flex;\n    flex-wrap: wrap;\n    max-width: 100%;\n  }\n\n  @include breakpoint($wide) {\n    justify-content: left;\n  }\n\n  &.hy-key-figure-group-centered {\n    @include breakpoint($wide) {\n      justify-content: center;\n    }\n  }\n\n  .box-2,\n  .box-3 {\n    @include breakpoint($narrow) {\n      flex-grow: 1;\n      max-width: 33%;\n      width: 33%;\n    }\n  }\n\n  .box-4 {\n    @include breakpoint($narrow) {\n      flex-grow: 1;\n      max-width: 49%;\n      width: 49%;\n    }\n    @include breakpoint($wide) {\n      max-width: 25%;\n      width: 25%;\n    }\n  }\n}\n","export interface KeyFigureValue {\n  heading: string;\n  description: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {KeyHighlightVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-key-figure-group\",\n  styleUrl: \"hy-key-figure-group.scss\",\n  shadow: false,\n})\nexport class HyKeyFigureGroup implements ComponentInterface {\n  @Element() el: HTMLElement;\n  private _dataItems: KeyFigureValue[];\n  @Prop() dataItems: KeyFigureValue[] | string;\n  @Prop() headerstyle: string = \"common\";\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\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  getBoxClassName(count) {\n    let className = \"box\";\n\n    if (count % 3 == 0) {\n      className = \"box-3\";\n    } else if (count % 4 == 0) {\n      className = \"box-4\";\n    } else if (count % 5 == 0) {\n      className = \"box-5\";\n    }\n\n    return className;\n  }\n\n  render() {\n    /*\n    - Logic:\n    - 3 items: big\n    - 4 items: small\n    - 5 items: big\n    - 6 items: big\n    * */\n    const keyFiguresVariant = this._dataItems.length == 4 ? KeyHighlightVariants.small : KeyHighlightVariants.default;\n\n    const classAttributes = [\n      keyFiguresVariant,\n      \"hy-key-figure-group-container\",\n      `hy-key-figure-group-container__${this.headerstyle}`,\n    ].join(\" \");\n    const classRowAttributes = [\"hy-key-figure-group\"].join(\" \");\n    const classRowCenteredAttributes = [\"hy-key-figure-group\", \"hy-key-figure-group-centered\"].join(\" \");\n\n    if (this._dataItems.length % 5 == 0) {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class={classRowAttributes}>\n              {this._dataItems.map((x, index) => {\n                if (index < 3) {\n                  return (\n                    <hy-key-figure\n                      class=\"box-3\"\n                      variant={keyFiguresVariant}\n                      heading={x.heading}\n                      description={x.description}\n                    />\n                  );\n                }\n              })}\n            </div>\n            <div class={classRowCenteredAttributes}>\n              {this._dataItems.map((x, index) => {\n                if (index >= 3) {\n                  return (\n                    <hy-key-figure\n                      class=\"box-2\"\n                      variant={keyFiguresVariant}\n                      heading={x.heading}\n                      description={x.description}\n                    />\n                  );\n                }\n              })}\n            </div>\n          </div>\n          <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n        </Host>\n      );\n    } else {\n      return (\n        <Host>\n          <div class={classAttributes}>\n            <div class={classRowAttributes}>\n              {this._dataItems.map((x) => {\n                return (\n                  <hy-key-figure\n                    class={this.getBoxClassName(this._dataItems.length)}\n                    variant={keyFiguresVariant}\n                    heading={x.heading}\n                    description={x.description}\n                  />\n                );\n              })}\n            </div>\n          </div>\n          <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n        </Host>\n      );\n    }\n  }\n}\n"],"version":3}

package/dist/esm/hy-key-highlight_2.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { K as KeyHighlightVariants } from './utils-7438924c.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const hyKeyHighlightCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-key-highlight{display:block;margin-bottom:20px;width:100%}@media (min-width: 30rem){.hy-key-highlight{width:100%}}.hy-key-highlight__title__container{display:inline-block;position:relative;text-align:center;margin-bottom:1rem}@media (min-width: 30rem){.hy-key-highlight__title__container{text-align:left}}.hy-key-highlight__title__container::after{clear:both}.hy-key-highlight__title{font-weight:700;background-color:var(--brand-main-light);-webkit-box-shadow:-5px 0px 0 0px var(--brand-main-light), 5px 0px 0 0px var(--brand-main-light), 0 0 0 0px var(--brand-main-light);box-shadow:-5px 0px 0 0px var(--brand-main-light), 5px 0px 0 0px var(--brand-main-light), 0 0 0 0px var(--brand-main-light);-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--grayscale-white);display:inline;font-family:var(--main-font-family);-ms-hyphens:auto;hyphens:auto;letter-spacing:-0.75px;padding:0 5px;position:relative;text-transform:uppercase;word-break:break-word}.hy-key-highlight__description{color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:0;margin-top:8px;text-align:center}@media (min-width: 30rem){.hy-key-highlight__description{text-align:left}}.hy-key-highlight.small .hy-key-highlight__title__container{font-size:1.5rem;line-height:29px}.hy-key-highlight.small .hy-key-highlight__description{font-size:0.875rem;line-height:19px}.hy-key-highlight.big .hy-key-highlight__title__container{font-size:1.5rem;line-height:29px}@media (min-width: 30rem){.hy-key-highlight.big .hy-key-highlight__title__container{font-size:2.5rem;line-height:45px}}.hy-key-highlight.big .hy-key-highlight__description{font-size:0.875rem;line-height:20px}@media (min-width: 30rem){.hy-key-highlight.big .hy-key-highlight__description{font-size:1.25rem;line-height:20px}}";
+
+const HyKeyHighlight = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = KeyHighlightVariants.default;
+    this.heading = undefined;
+    this.description = undefined;
+  }
+  render() {
+    const classVariant = [this.variant, "hy-key-highlight"].join(" ");
+    return (h("div", { class: classVariant }, h("div", { class: "hy-key-highlight__title__container" }, h("div", { class: "hy-key-highlight__title", innerHTML: this.heading })), h("div", { class: "hy-key-highlight__description" }, this.description)));
+  }
+};
+HyKeyHighlight.style = hyKeyHighlightCss;
+
+const hyKeyHighlightGroupCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-key-highlight-group-container{overflow:hidden}.hy-key-highlight-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width: 30rem){.hy-key-highlight-group{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 calc(-1 * var(--gutter-medium))}}@media (min-width: 60rem){.hy-key-highlight-group{margin:0 calc(-1 * var(--gutter-wide))}}.hy-key-highlight-group .box,.hy-key-highlight-group .box-4{padding:0 50px 0 20px}@media (min-width: 30rem){.hy-key-highlight-group .box,.hy-key-highlight-group .box-4{padding:0 var(--gutter-medium)}}@media (min-width: 60rem){.hy-key-highlight-group .box,.hy-key-highlight-group .box-4{padding:0 var(--gutter-wide)}}.hy-key-highlight-group .box{width:100%}@media (min-width: 30rem){.hy-key-highlight-group .box{width:33.33%;max-width:33.33%}}.hy-key-highlight-group .box-4{width:100%}@media (min-width: 30rem){.hy-key-highlight-group .box-4{width:50%;max-width:50%}}@media (min-width: 60rem){.hy-key-highlight-group .box-4{width:25%}}";
+
+const HyKeyHighlightGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = KeyHighlightVariants.default;
+    this.dataItems = undefined;
+    this.headerstyle = "common";
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = [
+      this.variant,
+      "hy-key-highlight-group",
+      `hy-key-highlight-group__${this.headerstyle}`,
+    ].join(" ");
+    const dataItemCount = this._dataItems.length;
+    const classItem = dataItemCount % 4 == 0 ? "box-4" : "box";
+    return (h(Host, null, h("div", { class: classAttributes }, this._dataItems.map((x) => {
+      return (h("hy-key-highlight", { class: classItem, variant: this.variant, heading: x.heading, description: x.description }));
+    }))));
+  }
+  get el() { return getElement(this); }
+};
+HyKeyHighlightGroup.style = hyKeyHighlightGroupCss;
+
+export { HyKeyHighlight as hy_key_highlight, HyKeyHighlightGroup as hy_key_highlight_group };
+
+//# sourceMappingURL=hy-key-highlight_2.entry.js.map

package/dist/esm/hy-key-highlight_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-key-highlight.hy-key-highlight-group.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,m6FAAm6F;;MCQh7F,cAAc;;;mBACe,oBAAoB,CAAC,OAAO;;;;EAIpE,MAAM;IACJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElE,QACE,WAAK,KAAK,EAAE,YAAY,IACtB,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WAAK,KAAK,EAAC,yBAAyB,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,GAAQ,CAChE,EACN,WAAK,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,WAAW,CAAO,CAC/D,EACN;GACH;;;;ACxBH,MAAM,sBAAsB,GAAG,o1EAAo1E;;MCct2E,mBAAmB;;;mBAEU,oBAAoB,CAAC,OAAO;;uBAGtC,QAAQ;;EAEtC,MAAM,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1D;EAED,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAG;MACtB,IAAI,CAAC,OAAO;MACZ,wBAAwB;MACxB,2BAA2B,IAAI,CAAC,WAAW,EAAE;KAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;IAC7C,MAAM,SAAS,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,KAAK,CAAC;IAE3D,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACxB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;MACrB,QACE,wBACE,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,CAAC,CAAC,OAAO,EAClB,WAAW,EAAE,CAAC,CAAC,WAAW,GAC1B,EACF;KACH,CAAC,CACE,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/hy-key-highlight/hy-key-highlight.scss?tag=hy-key-highlight&encapsulation=shadow","./src/components/hy-key-highlight/hy-key-highlight.tsx","./src/components/hy-key-highlight-group/hy-key-highlight-group.scss?tag=hy-key-highlight-group&encapsulation=shadow","./src/components/hy-key-highlight-group/hy-key-highlight-group.tsx"],"sourcesContent":[":host {\n}\n\n.hy-key-highlight {\n  display: block;\n  margin-bottom: 20px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    width: 100%;\n  }\n\n  &__title__container {\n    display: inline-block;\n    position: relative;\n    text-align: center;\n    margin-bottom: 1rem;\n\n    @include breakpoint($narrow) {\n      text-align: left;\n    }\n  }\n  &__title__container::after {\n    clear: both;\n  }\n\n  &__title {\n    @include font-weight($bold);\n    background-color: var(--brand-main-light);\n    box-shadow: -5px 0px 0 0px var(--brand-main-light), 5px 0px 0 0px var(--brand-main-light),\n      0 0 0 0px var(--brand-main-light);\n    box-decoration-break: clone;\n    color: var(--grayscale-white);\n    display: inline;\n    font-family: var(--main-font-family);\n    hyphens: auto;\n    letter-spacing: -0.75px;\n    padding: 0 5px;\n    position: relative;\n    text-transform: uppercase;\n    word-break: break-word;\n  }\n\n  &__description {\n    color: var(--grayscale-dark);\n    font-family: var(--main-font-family);\n    letter-spacing: 0;\n    margin-top: 8px;\n    text-align: center;\n\n    @include breakpoint($narrow) {\n      text-align: left;\n    }\n  }\n\n  &.small {\n    .hy-key-highlight__title__container {\n      @include font-size(24px, 29px);\n    }\n    .hy-key-highlight__description {\n      @include font-size(14px, 19px);\n    }\n  }\n\n  &.big {\n    .hy-key-highlight__title__container {\n      @include font-size(24px, 29px);\n\n      @include breakpoint($narrow) {\n        @include font-size(40px, 45px);\n      }\n    }\n\n    .hy-key-highlight__description {\n      @include font-size(14px, 20px);\n\n      @include breakpoint($narrow) {\n        @include font-size(20px, 20px);\n      }\n    }\n  }\n}\n","import {Component, ComponentInterface, Prop, h} from \"@stencil/core\";\nimport {KeyHighlightVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-key-highlight\",\n  styleUrl: \"hy-key-highlight.scss\",\n  shadow: true,\n})\nexport class HyKeyHighlight implements ComponentInterface {\n  @Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;\n  @Prop() heading: string;\n  @Prop() description: string;\n\n  render() {\n    const classVariant = [this.variant, \"hy-key-highlight\"].join(\" \");\n\n    return (\n      <div class={classVariant}>\n        <div class=\"hy-key-highlight__title__container\">\n          <div class=\"hy-key-highlight__title\" innerHTML={this.heading}></div>\n        </div>\n        <div class=\"hy-key-highlight__description\">{this.description}</div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-key-highlight-group-container {\n  overflow: hidden;\n}\n\n.hy-key-highlight-group {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n\n  @include breakpoint($narrow) {\n    flex-direction: row;\n    margin: 0 calc(-1 * var(--gutter-medium));\n  }\n\n  @include breakpoint($wide) {\n    margin: 0 calc(-1 * var(--gutter-wide));\n  }\n\n  .box,\n  .box-4 {\n    padding: 0 50px 0 20px;\n\n    @include breakpoint($narrow) {\n      padding: 0 var(--gutter-medium);\n    }\n    @include breakpoint($wide) {\n      padding: 0 var(--gutter-wide);\n    }\n  }\n\n  // 3 key highlights in a row\n  .box {\n    width: 100%;\n    @include breakpoint($narrow) {\n      width: 33.33%;\n      max-width: 33.33%;\n    }\n  }\n\n  // 4 key highlights in a row\n  .box-4 {\n    width: 100%;\n    @include breakpoint($narrow) {\n      width: 50%;\n      max-width: 50%;\n    }\n    @include breakpoint($wide) {\n      width: 25%;\n    }\n  }\n}\n","export interface KeyHighlightValue {\n  heading: string;\n  description: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {KeyHighlightVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-key-highlight-group\",\n  styleUrl: \"hy-key-highlight-group.scss\",\n  shadow: true,\n})\nexport class HyKeyHighlightGroup implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() variant: KeyHighlightVariants = KeyHighlightVariants.default;\n  private _dataItems: KeyHighlightValue[];\n  @Prop() dataItems: KeyHighlightValue[] | string;\n  @Prop() headerstyle: string = \"common\";\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\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      this.variant,\n      \"hy-key-highlight-group\",\n      `hy-key-highlight-group__${this.headerstyle}`,\n    ].join(\" \");\n\n    const dataItemCount = this._dataItems.length;\n    const classItem = dataItemCount % 4 == 0 ? \"box-4\" : \"box\";\n\n    return (\n      <Host>\n        <div class={classAttributes}>\n          {this._dataItems.map((x) => {\n            return (\n              <hy-key-highlight\n                class={classItem}\n                variant={this.variant}\n                heading={x.heading}\n                description={x.description}\n              />\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-large-process-flow_2.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { f as HeadingVarians } from './utils-7438924c.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const hyLargeProcessFlowCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-large-process-flow{max-width:100%;padding-top:8px;width:100%}@media (min-width: 30rem){.hy-large-process-flow{max-width:calc(87.5% + var(--gutter-narrow));padding-top:0}}@media (min-width: 60rem){.hy-large-process-flow{max-width:calc(66.6666666667% + var(--gutter-wide))}}@media (min-width: 75.0625rem){.hy-large-process-flow{max-width:calc(66.6666666667% + var(--gutter-extrawide))}}.hy-large-process-flow h3.hy-heading{font-size:20px}@media (min-width: 30rem){.hy-large-process-flow h3.hy-heading{font-size:32px}}.hy-large-process-flow__first-phase h3.hy-heading{margin-bottom:8px;padding:24px 0 !important}@media (min-width: 30rem){.hy-large-process-flow__first-phase h3.hy-heading{margin-bottom:24px;margin-top:16px}}.hy-large-process-flow__multi-phase-title{position:relative}.hy-large-process-flow__multi-phase-title:after{background-color:var(--grayscale-background-arrow);bottom:0;content:\" \";display:inline-block;height:100%;left:26.5px;position:absolute;width:8px;z-index:-1}@media (min-width: 30rem){.hy-large-process-flow__multi-phase-title:after{left:calc(12.5% + var(--gutter-narrow) + 26.5px)}}@media (min-width: 60rem){.hy-large-process-flow__multi-phase-title:after{left:calc(8.3333333333% + var(--gutter-wide) + 26.5px)}}@media (min-width: 75.0625rem){.hy-large-process-flow__multi-phase-title:after{left:calc(8.3333333333% + var(--gutter-extrawide) + 26.5px)}}.hy-large-process-flow__multi-phase-title h3.hy-heading{background-color:var(--grayscale-white);margin:1.5rem 0 1.5rem;padding:8px 0 !important}@media (min-width: 30rem){.hy-large-process-flow__multi-phase-title h3.hy-heading{margin:48px 0;padding:16px 0 !important}}";
+
+const HyLargeProcessFlow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headerstyle = "common";
+    this.dataItems = undefined;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = ["hy-large-process-flow", `hy-large-process-flow__${this.headerstyle}`].join(" ");
+    return [
+      h("div", { class: classAttributes }, this._dataItems.map((x, index) => {
+        let phases = JSON.stringify(x.boxes);
+        const headingClasses = index !== 0 ? "hy-large-process-flow__multi-phase-title" : "hy-large-process-flow__first-phase";
+        return [
+          h("hy-heading", { class: headingClasses, heading: HeadingVarians.h3 }, x.phaseTitle),
+          h("hy-large-process-flow-phase", { "data-items": phases }),
+        ];
+      })),
+    ];
+  }
+  get el() { return getElement(this); }
+};
+HyLargeProcessFlow.style = hyLargeProcessFlowCss;
+
+const hyLargeProcessFlowPhaseCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-large-process-flow__phase-container{padding-left:0;position:relative;max-width:100%;width:100%}@media (min-width: 30rem){.hy-large-process-flow__phase-container{padding-left:calc(12.5% + var(--gutter-narrow))}}@media (min-width: 60rem){.hy-large-process-flow__phase-container{padding-left:calc(8.3333333333% + var(--gutter-wide))}}@media (min-width: 75.0625rem){.hy-large-process-flow__phase-container{padding-left:calc(8.3333333333% + var(--gutter-extrawide))}}.hy-large-process-flow__phase-container__phase{position:relative}.hy-large-process-flow__phase-container__phase:after{background-color:var(--grayscale-background-arrow);bottom:0;content:\" \";display:inline-block;height:24px;left:26.5px;position:absolute;width:8px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase:after{display:inline-block;height:100%}}.hy-large-process-flow__phase-container__phase:last-child:after{display:none}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase:last-child:after{display:inline-block}}.hy-large-process-flow__phase-container__phase:last-child .hy-large-process-flow__phase-container__phase__content{top:0;margin-top:-24px}.hy-large-process-flow__phase-container__phase__number{display:grid;place-items:center;position:relative;width:64px;z-index:2}.hy-large-process-flow__phase-container__phase__number__number{background-color:var(--brand-main-light);color:var(--grayscale-white);display:grid;font-family:var(--main-font-family);font-size:2rem;line-height:36px;font-weight:700;height:48px;letter-spacing:0;margin:0;padding:0;place-items:center;position:relative;width:48px}.hy-large-process-flow__phase-container__phase__number__number::after{content:\"\";height:48px;left:-6px;position:absolute;width:48px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__number__number{font-size:2.25rem;line-height:40px;height:64px;width:64px}.hy-large-process-flow__phase-container__phase__number__number::after{content:\"\";height:64px;left:-6px;position:absolute;width:64px}}.hy-large-process-flow__phase-container__phase__content{background-color:var(--grayscale-background-box);margin:0 -56px;padding:48px 0 24px 0;position:relative;top:-24px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content{margin:0 0 -8px 32px;padding:32px 0;top:-32px}}.hy-large-process-flow__phase-container__phase__content__heading{color:var(--brand-main-nearly-black);font-family:var(--main-font-family);font-size:1.25rem;line-height:30px;font-weight:600;letter-spacing:-0.5px;margin-bottom:24px;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__heading{font-size:1.625rem;line-height:30px;font-weight:700;letter-spacing:-0.65px;padding:0 44px}}.hy-large-process-flow__phase-container__phase__content__description{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:1rem;line-height:24px;letter-spacing:0;margin-bottom:24px;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__description{padding:0 44px}}.hy-large-process-flow__phase-container__phase__content__links{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-right:0;padding:0 56px}@media (min-width: 30rem){.hy-large-process-flow__phase-container__phase__content__links{margin-right:-6px;padding:0}}.hy-large-process-flow__phase-container__phase__content__links .phase-link{margin-bottom:8px}.hy-large-process-flow__phase-container__phase__content__links .phase-link.last{margin-bottom:0}";
+
+const HyLargeProcessFlowPhase = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dataItems = undefined;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  render() {
+    const classAttributes = ["hy-large-process-flow__phase-container"].join(" ");
+    return (h("div", { class: classAttributes }, this._dataItems.map((x, index) => {
+      var items;
+      if (x.links && x.links.length > 0) {
+        let linkItems = x.links;
+        let linkItemsCount = x.links.length;
+        items = linkItems.map((item, index) => {
+          let classLinks = index == linkItemsCount - 1 ? "phase-link last" : "phase-link";
+          return item ? (h("hy-cta-link", { class: classLinks, "link-content": item.label, "sc-label": item.ariaLabel, "is-external": item.isExternal, url: item.url })) : null;
+        });
+      }
+      return [
+        h("div", { class: "hy-large-process-flow__phase-container__phase" }, h("div", { class: "hy-large-process-flow__phase-container__phase__number" }, h("h2", { class: "hy-large-process-flow__phase-container__phase__number__number" }, h("div", { class: "hy-large-process-flow__phase-container__phase__number__title" }, index + 1))), h("div", { class: "hy-large-process-flow__phase-container__phase__content" }, h("div", { class: "hy-large-process-flow__phase-container__phase__content__heading" }, x.heading), h("div", { class: "hy-large-process-flow__phase-container__phase__content__description", innerHTML: x.description }), h("div", { class: "hy-large-process-flow__phase-container__phase__content__links" }, items))),
+      ];
+    })));
+  }
+};
+HyLargeProcessFlowPhase.style = hyLargeProcessFlowPhaseCss;
+
+export { HyLargeProcessFlow as hy_large_process_flow, HyLargeProcessFlowPhase as hy_large_process_flow_phase };
+
+//# sourceMappingURL=hy-large-process-flow_2.entry.js.map

package/dist/esm/hy-large-process-flow_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-large-process-flow.hy-large-process-flow-phase.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-large-process-flow/hy-large-process-flow.scss?tag=hy-large-process-flow&encapsulation=shadow","./src/components/hy-large-process-flow/hy-large-process-flow.tsx","./src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss?tag=hy-large-process-flow-phase&encapsulation=shadow","./src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-large-process-flow {\n  max-width: 100%;\n  padding-top: 8px;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8\n    padding-top: 0;\n  }\n  @include breakpoint($wide) {\n    max-width: calc(100% / 12 * 8 + var(--gutter-wide)); // 8 columns out of 12\n  }\n  @include breakpoint($extrawide) {\n    max-width: calc(100% / 12 * 8 + var(--gutter-extrawide)); // 8 columns out of 12\n  }\n\n  h3.hy-heading {\n    font-size: 20px;\n    @include breakpoint($narrow) {\n      font-size: 32px;\n    }\n  }\n\n  &__first-phase {\n    h3.hy-heading {\n      margin-bottom: 8px;\n      padding: 24px 0 !important; //48 32\n\n      @include breakpoint($narrow) {\n        margin-bottom: 24px;\n        margin-top: 16px; //64 48\n      }\n    }\n  }\n\n  &__multi-phase-title {\n    position: relative;\n\n    &:after {\n      background-color: var(--grayscale-background-arrow);\n      bottom: 0;\n      content: \" \";\n      display: inline-block;\n      height: 100%;\n      left: 26.5px;\n      position: absolute;\n      width: 8px;\n      z-index: -1;\n\n      @include breakpoint($narrow) {\n        left: calc(100% / 8 + var(--gutter-narrow) + 26.5px);\n      }\n\n      @include breakpoint($wide) {\n        left: calc(100% / 12 + var(--gutter-wide) + 26.5px);\n      }\n\n      @include breakpoint($extrawide) {\n        left: calc(100% / 12 + var(--gutter-extrawide) + 26.5px);\n      }\n    }\n\n    h3.hy-heading {\n      background-color: var(--grayscale-white);\n      margin: 1.5rem 0 1.5rem;\n      padding: 8px 0 !important;\n\n      @include breakpoint($narrow) {\n        margin: 48px 0;\n        padding: 16px 0 !important;\n      }\n    }\n  }\n}\n","export interface ProcessFlowValue {\n  phaseTitle: string;\n  boxes: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Prop} from \"@stencil/core\";\nimport {HeadingVarians} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-large-process-flow\",\n  styleUrl: \"hy-large-process-flow.scss\",\n  shadow: true,\n})\nexport class HyLargeProcessFlow implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n\n  private _dataItems: ProcessFlowValue[];\n  @Prop() dataItems: ProcessFlowValue[] | string;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\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 = [\"hy-large-process-flow\", `hy-large-process-flow__${this.headerstyle}`].join(\" \");\n\n    return [\n      <div class={classAttributes}>\n        {this._dataItems.map((x, index) => {\n          let phases = JSON.stringify(x.boxes);\n          const headingClasses =\n            index !== 0 ? \"hy-large-process-flow__multi-phase-title\" : \"hy-large-process-flow__first-phase\";\n\n          return [\n            <hy-heading class={headingClasses} heading={HeadingVarians.h3}>\n              {x.phaseTitle}\n            </hy-heading>,\n            <hy-large-process-flow-phase data-items={phases} />,\n          ];\n        })}\n      </div>,\n    ];\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-large-process-flow__phase-container {\n  padding-left: 0;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n\n  @include breakpoint($narrow) {\n    //tablet\n    padding-left: calc(100% / 8 + var(--gutter-narrow)); // 1 column padding\n  }\n  @include breakpoint($wide) {\n    //mid desktop\n    padding-left: calc(100% / 12 + var(--gutter-wide)); // 1 column padding\n  }\n  @include breakpoint($extrawide) {\n    //large desktop\n    padding-left: calc(100% / 12 + var(--gutter-extrawide)); // 1 column padding\n  }\n\n  &__phase {\n    position: relative;\n\n    &:after {\n      background-color: var(--grayscale-background-arrow);\n      bottom: 0;\n      content: \" \";\n      display: inline-block;\n      height: 24px;\n      left: 26.5px;\n      position: absolute;\n      width: 8px;\n\n      @include breakpoint($narrow) {\n        display: inline-block;\n        height: 100%;\n      }\n    }\n\n    &:last-child:after {\n      display: none;\n\n      @include breakpoint($narrow) {\n        display: inline-block;\n      }\n    }\n\n    &:last-child &__content {\n      top: 0;\n      margin-top: -24px;\n    }\n\n    &__number {\n      display: grid;\n      place-items: center;\n      position: relative;\n      width: 64px;\n      z-index: 2;\n\n      &__number {\n        background-color: var(--brand-main-light);\n        color: var(--grayscale-white);\n        display: grid;\n        font-family: var(--main-font-family);\n        @include font-size(32px, 36px);\n        @include font-weight(700);\n        height: 48px;\n        letter-spacing: 0;\n        margin: 0;\n        padding: 0;\n        place-items: center;\n        position: relative;\n        width: 48px;\n\n        &::after {\n          content: \"\";\n          height: 48px;\n          left: -6px;\n          position: absolute;\n          width: 48px;\n        }\n\n        @include breakpoint($narrow) {\n          @include font-size(36px, 40px);\n          height: 64px;\n          width: 64px;\n\n          &::after {\n            content: \"\";\n            height: 64px;\n            left: -6px;\n            position: absolute;\n            width: 64px;\n          }\n        }\n      }\n    }\n\n    &__content {\n      background-color: var(--grayscale-background-box);\n      margin: 0 -56px;\n      padding: 48px 0 24px 0;\n      position: relative;\n      top: -24px;\n\n      @include breakpoint($narrow) {\n        //margin-bottom: -8px;\n        //margin-left: 32px;\n        margin: 0 0 -8px 32px;\n        padding: 32px 0;\n        top: -32px;\n      }\n\n      &__heading {\n        color: var(--brand-main-nearly-black);\n        font-family: var(--main-font-family);\n\n        @include font-size(20px, 30px);\n        @include font-weight(600);\n        letter-spacing: -0.5px;\n        margin-bottom: 24px;\n        //padding: 0 16px;\n        padding: 0 56px;\n\n        @include breakpoint($narrow) {\n          @include font-size(26px, 30px);\n          @include font-weight(700);\n          letter-spacing: -0.65px;\n          padding: 0 44px;\n        }\n      }\n\n      &__description {\n        color: var(--grayscale-dark);\n        font-family: var(--main-font-family);\n\n        @include font-size(16px, 24px);\n        letter-spacing: 0;\n        margin-bottom: 24px;\n        //padding: 0 16px;\n        padding: 0 56px;\n\n        @include breakpoint($narrow) {\n          padding: 0 44px;\n        }\n      }\n\n      &__links {\n        align-items: flex-end;\n        display: flex;\n        flex-direction: column;\n        margin-right: 0;\n        padding: 0 56px;\n\n        @include breakpoint($narrow) {\n          margin-right: -6px;\n          padding: 0;\n        }\n\n        .phase-link {\n          margin-bottom: 8px;\n        }\n        .phase-link.last {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n}\n","export interface PhaseValue {\n  heading: string;\n  description: string;\n  links: ProcessBoxLinkValue[];\n}\n\nexport interface ProcessBoxLinkValue {\n  label: string;\n  url: string;\n  isExternal: boolean;\n  ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, h, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-large-process-flow-phase\",\n  styleUrl: \"hy-large-process-flow-phase.scss\",\n  shadow: true,\n})\nexport class HyLargeProcessFlowPhase implements ComponentInterface {\n  private _dataItems: PhaseValue[];\n  @Prop() dataItems: PhaseValue[] | string;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\n\n  render() {\n    const classAttributes = [\"hy-large-process-flow__phase-container\"].join(\" \");\n\n    return (\n      <div class={classAttributes}>\n        {this._dataItems.map((x, index) => {\n          var items;\n          if (x.links && x.links.length > 0) {\n            let linkItems = x.links;\n            let linkItemsCount = x.links.length;\n            items = linkItems.map((item, index) => {\n              let classLinks = index == linkItemsCount - 1 ? \"phase-link last\" : \"phase-link\";\n              return item ? (\n                <hy-cta-link\n                  class={classLinks}\n                  link-content={item.label}\n                  sc-label={item.ariaLabel}\n                  is-external={item.isExternal}\n                  url={item.url}\n                />\n              ) : null;\n            });\n          }\n\n          return [\n            <div class=\"hy-large-process-flow__phase-container__phase\">\n              <div class=\"hy-large-process-flow__phase-container__phase__number\">\n                <h2 class=\"hy-large-process-flow__phase-container__phase__number__number\">\n                  <div class=\"hy-large-process-flow__phase-container__phase__number__title\">{index + 1}</div>\n                </h2>\n              </div>\n              <div class=\"hy-large-process-flow__phase-container__phase__content\">\n                <div class=\"hy-large-process-flow__phase-container__phase__content__heading\">{x.heading}</div>\n                <div\n                  class=\"hy-large-process-flow__phase-container__phase__content__description\"\n                  innerHTML={x.description}\n                ></div>\n                <div class=\"hy-large-process-flow__phase-container__phase__content__links\">{items}</div>\n              </div>\n            </div>,\n          ];\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-link-box_2.entry.js

@@ -0,0 +1,130 @@
+import { r as registerInstance, h, g as getElement, H as Host } from './index-f84f2a7d.js';
+import { l as LinkBoxVariants } from './utils-7438924c.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const linkBoxCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{height:100%}.hy-link-box-container{background:var(--grayscale-background-box);width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;position:relative}.hy-link-box-container:focus-within{outline:auto}.hy-link-box-container:hover{cursor:pointer}.hy-link-box-container:hover .hy-link-box__text-container__title{color:var(--brand-main);text-decoration:underline}.hy-link-box-container:hover .hy-cta-link{text-decoration:underline}.hy-link-box-container:hover .hy-cta-link .hy-cta-link__icon{background-color:var(--brand-main)}.hy-link-box__image-container{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;min-height:10rem;position:relative}.hy-link-box__image-container:before{content:\"\";display:block;padding-top:62.5%;width:100%}.hy-link-box__image-container img{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.hy-link-box__image-container.is-image-missing svg{position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);left:50%;width:85px;height:auto;fill:#d2d2d2}.hy-link-box__text-container{padding:16px}.hy-link-box__text-container__title{font-size:1.3125rem;line-height:28px;font-weight:700;color:var(--brand-main-nearly-black);font-family:var(--main-font-family);letter-spacing:-0.42px;-ms-hyphens:auto;hyphens:auto;word-break:break-word;margin:0 0 16px}@media screen and (min-width: 1024px){.hy-link-box__text-container__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.hy-link-box__text-container__description{font-size:0.9375rem;line-height:22px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0}@media screen and (min-width: 1024px){.hy-link-box__text-container__description{font-size:1.0625rem;line-height:26px}}.hy-cta-link{font-weight:600;font-size:1rem;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);display:inline-grid;font-family:var(--main-font-family);gap:16px;grid-auto-flow:column;letter-spacing:-0.5px;overflow:hidden;text-decoration:none;margin:0 -8px 24px 0;align-self:flex-end}.hy-cta-link span[aria-hidden=true]{position:absolute;inset:0}.hy-cta-link:focus{outline:none}.hy-cta-link__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.hy-cta-link__icon svg{fill:var(--grayscale-white)}.hy-cta-link__icon--external svg{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}";
+
+const LinkBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = LinkBoxVariants.default;
+    this.imageUrl = null;
+    this.imageAlt = null;
+    this.disableLazy = false;
+    this.useSlot = false;
+    this.showLogo = false;
+    this.textTitle = undefined;
+    this.textDescription = null;
+    this.url = undefined;
+    this.isExternal = false;
+    this.scLabel = undefined;
+    this.readMoreLabel = undefined;
+    this.headerstyle = "common";
+    this.sourceSet = undefined;
+  }
+  srcSetWatcher(data) {
+    this._sourceSet = typeof data === "string" ? JSON.parse(data) : data;
+  }
+  componentWillLoad() {
+    this.srcSetWatcher(this.sourceSet);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classContainerAttributes = ["hy-link-box-container"].join(" ");
+    const classAttributes = [
+      "hy-link-box",
+      this.variant,
+      `hy-link-box__${this.variant}`,
+      this.headerstyle,
+      `hy-link-box__${this.headerstyle}`,
+      this.imageUrl ? "hy-link-box--with-image" : null,
+    ].join(" ");
+    const classTextContainer = ["hy-link-box__text-container", this.imageUrl ? "hy-link-box--with-image" : null].join(" ");
+    const classTitle = [
+      "hy-link-box__text-container__title",
+      `hy-link-box__text-container__title__${this.variant}`,
+      `hy-link-box__text-container__title__${this.headerstyle}`,
+      this.imageUrl ? "hy-link-box__text-container__title__image" : "",
+      this.imageUrl ? "image" : "",
+    ].join(" ");
+    const classDescription = [
+      "hy-link-box__text-container__description",
+      `hy-link-box__text-container__description__${this.variant}`,
+      `hy-link-box__text-container__description__${this.headerstyle}`,
+    ].join(" ");
+    const target = this.isExternal ? "_blank" : "_self";
+    const aspectRatioWidth = 16;
+    const aspectRatioHeight = 10;
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    const aspectRatio = {
+      "--aspectRatio": `${aspect}%`,
+    };
+    return [
+      h("article", { class: classContainerAttributes }, h("div", { class: classAttributes }, this.imageUrl &&
+        (this._sourceSet ? (h("figure", { class: "hy-link-box__image-container", style: aspectRatio }, h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))) : (h("figure", { class: "hy-link-box__image-container", style: aspectRatio }, h("img", { loading: this.disableLazy ? "eager" : "lazy", "aria-hidden": "true", src: this.imageUrl, alt: this.imageAlt })))), !this.imageUrl && this.showLogo && (h("div", { "aria-hidden": "true", class: "hy-link-box__image-container is-image-missing" }, h("hy-icon", { class: { "hy-site-logo__icon": true }, icon: "hy-icon-hy-logo" }))), h("div", { class: classTextContainer }, h("h3", { class: classTitle }, this.textTitle), this.textDescription && (h("p", { class: classDescription }, this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + "..." : this.textDescription)))), h("a", { "aria-label": this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, title: this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`, href: this.url, target: target, class: `hy-cta-link hy-cta-link--default` }, h("span", { "aria-hidden": "true" }), h("span", null, this.readMoreLabel), h("span", { class: `hy-cta-link__icon ${this.isExternal ? "hy-cta-link__icon--external" : ""}` }, h("hy-icon", { icon: "hy-icon-arrow-to-right", size: 24 })))),
+    ];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "sourceSet": ["srcSetWatcher"]
+  }; }
+};
+LinkBox.style = linkBoxCss;
+
+const linkBoxListCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-link-box-list{padding:0;margin:0;list-style:none;display:grid;gap:32px 0}@media screen and (min-width: 768px){.hy-link-box-list{grid-template-columns:repeat(2, 1fr);gap:32px 24px}}@media screen and (min-width: 1024px){.hy-link-box-list{grid-template-columns:repeat(3, 1fr)}}@media screen and (min-width: 1920px){.hy-link-box-list{gap:32px}}";
+
+const LinkBoxList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headerstyle = "common";
+    this.variant = LinkBoxVariants.default;
+    this.readMoreLabel = undefined;
+    this.dataItems = undefined;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = [
+      "hy-link-box-list",
+      this.variant,
+      `hy-link-box-list__${this.variant}`,
+      `hy-link-box-list__${this.headerstyle}`,
+    ].join(" ");
+    /*
+    - Logic:
+    - 3 items: big
+    - 4 items: small
+    - 5 items: big
+    - 6 items: big
+    - 7 items: small
+    - 8 items: small
+    - 9 items: big
+    * */
+    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(" ");
+    return (h(Host, null, h("ul", { class: classAttributes }, this._dataItems.map((x) => {
+      return (h("li", null, h("hy-link-box", { class: classItemAttributes, variant: this.variant, "source-set": x.imageSets, "image-url": x.imageUrl, "image-alt": x.imageAlt, "text-title": x.heading, "text-description": x.description, "show-logo": x.showLogo, url: x.boxUrl, "is-external": x.isExternal, "sc-label": x.ariaLabel, "read-more-label": this.readMoreLabel })));
+    })), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  get el() { return getElement(this); }
+};
+LinkBoxList.style = linkBoxListCss;
+
+export { LinkBox as hy_link_box, LinkBoxList as hy_link_box_list };
+
+//# sourceMappingURL=hy-link-box_2.entry.js.map

package/dist/esm/hy-link-box_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-link-box.hy-link-box-list.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-link-box/link-box.scss?tag=hy-link-box","./src/components/hy-link-box/link-box.tsx","./src/components/hy-link-box-list/link-box-list.scss?tag=hy-link-box-list","./src/components/hy-link-box-list/link-box-list.tsx"],"sourcesContent":[":host {\n  height: 100%;\n}\n\n.hy-link-box-container {\n  background: var(--grayscale-background-box);\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  height: 100%;\n  position: relative;\n\n  &:focus-within {\n    outline: auto;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    .hy-link-box__text-container__title {\n      color: var(--brand-main);\n      text-decoration: underline;\n    }\n\n    .hy-cta-link {\n      text-decoration: underline;\n\n      .hy-cta-link__icon {\n        background-color: var(--brand-main);\n      }\n    }\n  }\n}\n\n.hy-link-box__image-container {\n  margin: 0;\n  display: flex;\n  justify-content: stretch;\n  min-height: 10rem;\n  position: relative;\n\n  &:before {\n    content: \"\";\n    display: block;\n    padding-top: calc(10 / 16) * 100%;\n    width: 100%;\n  }\n\n  img {\n    bottom: 0;\n    height: 100%;\n    left: 0;\n    object-fit: cover;\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 100%;\n  }\n\n  &.is-image-missing {\n    svg {\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      width: 85px;\n      height: auto;\n      fill: #d2d2d2;\n    }\n  }\n}\n\n.hy-link-box__text-container {\n  padding: 16px;\n}\n\n.hy-link-box__text-container__title {\n  @include font-size(21px, 28px);\n  @include font-weight($bold);\n  color: var(--brand-main-nearly-black);\n  font-family: var(--main-font-family);\n  letter-spacing: -0.42px;\n  hyphens: auto;\n  word-break: break-word;\n  margin: 0 0 16px;\n\n  @media screen and (min-width: 1024px) {\n    @include font-size(25px, 32px);\n    letter-spacing: -0.5px;\n  }\n}\n\n.hy-link-box__text-container__description {\n  @include font-size(15px, 22px);\n  color: var(--grayscale-black);\n  font-family: var(--main-font-family);\n  margin: 0;\n\n  @media screen and (min-width: 1024px) {\n    @include font-size(17px, 26px);\n  }\n}\n\n.hy-cta-link {\n  @include font-weight($semibold);\n  @include font-size(16px, 24px);\n  align-items: center;\n  color: var(--brand-main);\n  display: inline-grid;\n  font-family: var(--main-font-family);\n  gap: 16px;\n  grid-auto-flow: column;\n  letter-spacing: -0.5px;\n  overflow: hidden;\n  text-decoration: none;\n  margin: 0 -8px 24px 0;\n  align-self: flex-end;\n\n  span[aria-hidden=\"true\"] {\n    position: absolute;\n    inset: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.hy-cta-link__icon {\n  align-items: center;\n  background-color: var(--brand-main-light);\n  display: inline-flex;\n  height: 40px;\n  justify-content: center;\n  width: 40px;\n\n  svg {\n    fill: var(--grayscale-white);\n  }\n\n  &--external {\n    svg {\n      transform: rotate(-45deg);\n    }\n  }\n}\n","export interface ImageSrcSet {\n  src: any;\n  media: string;\n  type: string;\n  sizes: string | null;\n}\n\nimport {Component, ComponentInterface, Element, Prop, h, Watch} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-link-box\",\n  styleUrl: \"link-box.scss\",\n  shadow: false,\n})\nexport class LinkBox implements ComponentInterface {\n  @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n  @Prop() imageUrl: string = null;\n  @Prop() imageAlt: string = null;\n  @Prop() disableLazy: boolean = false;\n  @Prop() useSlot: boolean = false;\n  @Prop() showLogo: boolean = false;\n  @Prop() textTitle?: string;\n  @Prop() textDescription: string = null;\n  @Prop() url?: string;\n  @Prop() isExternal: boolean = false;\n  @Prop() scLabel?: string;\n  @Prop() readMoreLabel: string;\n  @Prop() headerstyle: string = \"common\";\n  private _sourceSet: ImageSrcSet[];\n  @Prop() sourceSet: ImageSrcSet[] | string;\n  @Element() el: HTMLElement;\n\n  @Watch(\"sourceSet\") srcSetWatcher(data: ImageSrcSet[] | string) {\n    this._sourceSet = typeof data === \"string\" ? JSON.parse(data) : data;\n  }\n\n  componentWillLoad() {\n    this.srcSetWatcher(this.sourceSet);\n  }\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 classContainerAttributes = [\"hy-link-box-container\"].join(\" \");\n    const classAttributes = [\n      \"hy-link-box\",\n      this.variant,\n      `hy-link-box__${this.variant}`,\n      this.headerstyle,\n      `hy-link-box__${this.headerstyle}`,\n      this.imageUrl ? \"hy-link-box--with-image\" : null,\n    ].join(\" \");\n\n    const classTextContainer = [\"hy-link-box__text-container\", this.imageUrl ? \"hy-link-box--with-image\" : null].join(\n      \" \"\n    );\n\n    const classTitle = [\n      \"hy-link-box__text-container__title\",\n      `hy-link-box__text-container__title__${this.variant}`,\n      `hy-link-box__text-container__title__${this.headerstyle}`,\n      this.imageUrl ? \"hy-link-box__text-container__title__image\" : \"\",\n      this.imageUrl ? \"image\" : \"\",\n    ].join(\" \");\n\n    const classDescription = [\n      \"hy-link-box__text-container__description\",\n      `hy-link-box__text-container__description__${this.variant}`,\n      `hy-link-box__text-container__description__${this.headerstyle}`,\n    ].join(\" \");\n\n    const target = this.isExternal ? \"_blank\" : \"_self\";\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    return [\n      <article class={classContainerAttributes}>\n        <div class={classAttributes}>\n          {this.imageUrl &&\n            (this._sourceSet ? (\n              <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\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                    aria-hidden=\"true\"\n                    src={this.imageUrl}\n                    alt={this.imageAlt}\n                  />\n                </picture>\n              </figure>\n            ) : (\n              <figure class=\"hy-link-box__image-container\" style={aspectRatio}>\n                <img\n                  loading={this.disableLazy ? \"eager\" : \"lazy\"}\n                  aria-hidden=\"true\"\n                  src={this.imageUrl}\n                  alt={this.imageAlt}\n                />\n              </figure>\n            ))}\n          {!this.imageUrl && this.showLogo && (\n            <div aria-hidden=\"true\" class=\"hy-link-box__image-container is-image-missing\">\n              <hy-icon class={{\"hy-site-logo__icon\": true}} icon={\"hy-icon-hy-logo\"} />\n            </div>\n          )}\n          <div class={classTextContainer}>\n            <h3 class={classTitle}>{this.textTitle}</h3>\n            {this.textDescription && (\n              <p class={classDescription}>\n                {this.textDescription.length >= 141 ? this.textDescription.slice(0, 140) + \"...\" : this.textDescription}\n              </p>\n            )}\n          </div>\n        </div>\n        <a\n          aria-label={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n          title={this.scLabel || `${this.readMoreLabel} - ${this.textTitle}`}\n          href={this.url}\n          target={target}\n          class={`hy-cta-link hy-cta-link--default`}\n        >\n          <span aria-hidden=\"true\"></span>\n          <span>{this.readMoreLabel}</span>\n          <span class={`hy-cta-link__icon ${this.isExternal ? \"hy-cta-link__icon--external\" : \"\"}`}>\n            <hy-icon icon={\"hy-icon-arrow-to-right\"} size={24} />\n          </span>\n        </a>\n      </article>,\n    ];\n  }\n}\n",":host {\n  display: block;\n}\n\n.hy-link-box-list {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: grid;\n  gap: 32px 0;\n\n  @media screen and (min-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 32px 24px;\n  }\n\n  @media screen and (min-width: 1024px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n\n  @media screen and (min-width: 1920px) {\n    gap: 32px;\n  }\n}\n","export interface LinkBox {\n  heading: string;\n  description: string;\n  imageSets: string | null;\n  imageUrl: string;\n  imageAlt: string;\n  boxUrl: string;\n  isExternal: boolean;\n  showLogo: boolean;\n  ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Prop, h, Host, Element} from \"@stencil/core\";\nimport {LinkBoxVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-link-box-list\",\n  styleUrl: \"link-box-list.scss\",\n  shadow: false,\n})\nexport class LinkBoxList implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n  @Prop() variant: LinkBoxVariants = LinkBoxVariants.default;\n  @Prop() readMoreLabel: string;\n\n  private _dataItems: LinkBox[];\n  @Prop() dataItems: LinkBox[] | string;\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\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-link-box-list\",\n      this.variant,\n      `hy-link-box-list__${this.variant}`,\n      `hy-link-box-list__${this.headerstyle}`,\n    ].join(\" \");\n\n    /*\n    - Logic:\n    - 3 items: big\n    - 4 items: small\n    - 5 items: big\n    - 6 items: big\n    - 7 items: small\n    - 8 items: small\n    - 9 items: big\n    * */\n    const classItemAttributes = [this.variant, `hy-link-box__${this.variant}`].join(\" \");\n    return (\n      <Host>\n        <ul class={classAttributes}>\n          {this._dataItems.map((x) => {\n            return (\n              <li>\n                <hy-link-box\n                  class={classItemAttributes}\n                  variant={this.variant}\n                  source-set={x.imageSets}\n                  image-url={x.imageUrl}\n                  image-alt={x.imageAlt}\n                  text-title={x.heading}\n                  text-description={x.description}\n                  show-logo={x.showLogo}\n                  url={x.boxUrl}\n                  is-external={x.isExternal}\n                  sc-label={x.ariaLabel}\n                  read-more-label={this.readMoreLabel}\n                />\n              </li>\n            );\n          })}\n        </ul>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-link-list.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+import { h as CtaLinkVariants } from './utils-7438924c.js';
+import { j as jsonParserWorker } from './globalScript-5a4b7abf.js';
+
+const hyLinkListCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-link-list{margin-bottom:32px}.hy-link-list__links{display:grid;gap:16px;list-style:none;margin:0;padding:0}@media (min-width: 30rem){.hy-link-list__links--grid{gap:16px 24px;grid-template-columns:repeat(2, 1fr)}}@media (min-width: 60rem){.without-sidebar .hy-link-list__links--grid.col-3{gap:16px 24px;grid-template-columns:repeat(3, 1fr)}}@media (min-width: 75.0625rem){.without-sidebar .hy-link-list__links--grid.col-3{gap:16px 32px}}@media (min-width: 60rem){.without-sidebar .hy-link-list__links--grid.col-4{gap:16px 24px;grid-template-columns:repeat(4, 1fr)}}@media (min-width: 75.0625rem){.without-sidebar .hy-link-list__links--grid.col-4{gap:16px 32px}}@media (min-width: 75.0625rem){.with-sidebar .hy-link-list__links--grid.col-3{gap:16px 24px;grid-template-columns:repeat(3, 1fr)}}@media (min-width: 1601px){.with-sidebar .hy-link-list__links--grid.col-3{gap:16px 32px}}@media (min-width: 75.0625rem){.with-sidebar .hy-link-list__links--grid.col-4{gap:16px 24px;grid-template-columns:repeat(4, 1fr)}}@media (min-width: 1601px){.with-sidebar .hy-link-list__links--grid.col-4{gap:16px 32px}}.hy-link-list__title{font-weight:700;font-family:var(--main-font-family);margin:0 0 32px;color:var(--brand-main-nearly-black)}.is-content-page h2.hy-link-list__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.82px}@media (min-width: 30rem){.is-content-page h2.hy-link-list__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-content-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-content-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.is-front-page h2.hy-link-list__title,.is-landing-page h2.hy-link-list__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;text-transform:uppercase}@media (min-width: 30rem){.is-front-page h2.hy-link-list__title,.is-landing-page h2.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h2.hy-link-list__title,.without-sidebar .is-landing-page h2.hy-link-list__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}@media (min-width: 1601px){.with-sidebar .is-front-page h2.hy-link-list__title,.with-sidebar .is-landing-page h2.hy-link-list__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}.hy-two-columns h2.hy-link-list__title{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;margin-bottom:16px;text-transform:none}@media (min-width: 75.0625rem){.without-sidebar .hy-two-columns h2.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.with-sidebar .hy-two-columns h2.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}.is-content-page h3.hy-link-list__title{font-size:1.3125rem;line-height:28px;letter-spacing:-0.42px}@media (min-width: 30rem){.is-content-page h3.hy-link-list__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.is-front-page h3.hy-link-list__title,.is-landing-page h3.hy-link-list__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.52px}@media (min-width: 30rem){.is-front-page h3.hy-link-list__title,.is-landing-page h3.hy-link-list__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h3.hy-link-list__title,.without-sidebar .is-landing-page h3.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-front-page h3.hy-link-list__title,.with-sidebar .is-landing-page h3.hy-link-list__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-two-columns h3.hy-link-list__title{font-size:1.125rem;line-height:22px;letter-spacing:-0.45px;margin-bottom:16px;text-transform:none}@media (min-width: 75.0625rem){.without-sidebar .hy-two-columns h3.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 1601px){.with-sidebar .hy-two-columns h3.hy-link-list__title{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}";
+
+const HyLinkList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headerstyle = "default";
+    this.dataItems = undefined;
+    this.listHeading = "";
+    this.variation = undefined;
+    this.headingVariant = "h2";
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const linkVariant = CtaLinkVariants.linkList;
+    const HeadingVariant = this.headingVariant.toLowerCase();
+    let columnType = "col-3";
+    if (this._dataItems.length === 7 || this._dataItems.length % 4 === 0) {
+      columnType = "col-4";
+    }
+    return [
+      h("section", { class: `hy-link-list hy-link-list__${this.headerstyle}` }, this.listHeading.length > 0 && (h(HeadingVariant, { class: "hy-link-list__title" }, this.listHeading)), h("ul", { class: `hy-link-list__links hy-link-list__links--${this.variation} ${this.variation === "grid" ? columnType : ""}` }, this._dataItems.map(({ heading, ariaLabel, url, isExternal }) => (h("li", { class: "hy-link-list__links-item" }, h("hy-cta-link", { variant: linkVariant, "link-content": heading, "sc-label": ariaLabel, url: url, "is-external": isExternal })))))),
+    ];
+  }
+  get el() { return getElement(this); }
+};
+HyLinkList.style = hyLinkListCss;
+
+export { HyLinkList as hy_link_list };
+
+//# sourceMappingURL=hy-link-list.entry.js.map

package/dist/esm/hy-link-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-link-list.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,ozKAAozK;;MCiB7zK,UAAU;;;uBAES,SAAS;;uBAGT,EAAE;;0BAEC,IAAI;;EAErC,MAAM,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1D;EAED,gBAAgB;IACd,IAAI,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5C,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;QACjD,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;OAC5B;KACF;GACF;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC;IAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC;IACzD,IAAI,UAAU,GAAG,OAAO,CAAC;IAEzB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,EAAE;MACpE,UAAU,GAAG,OAAO,CAAC;KACtB;IAED,OAAO;MACL,eAAS,KAAK,EAAE,8BAA8B,IAAI,CAAC,WAAW,EAAE,IAC7D,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1B,EAAC,cAAc,IAAC,KAAK,EAAE,qBAAqB,IAAG,IAAI,CAAC,WAAW,CAAkB,CAClF,EACD,UACE,KAAK,EAAE,4CAA4C,IAAI,CAAC,SAAS,IAC/D,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,UAAU,GAAG,EAC3C,EAAE,IAED,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAC,MACzD,UAAI,KAAK,EAAC,0BAA0B,IAClC,mBACE,OAAO,EAAE,WAAW,kBACN,OAAO,cACX,SAAS,EACnB,GAAG,EAAE,GAAG,iBACK,UAAU,GACvB,CACC,CACN,CAAC,CACC,CACG;KACX,CAAC;GACH;;;;;;;","names":[],"sources":["./src/components/hy-link-list/hy-link-list.scss?tag=hy-link-list","./src/components/hy-link-list/hy-link-list.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-link-list {\n  margin-bottom: 32px;\n}\n\n.hy-link-list__links {\n  display: grid;\n  gap: 16px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  &--grid {\n    @include breakpoint($narrow) {\n      gap: 16px 24px;\n      grid-template-columns: repeat(2, 1fr);\n    }\n\n    .without-sidebar & {\n      &.col-3 {\n        @include breakpoint($wide) {\n          gap: 16px 24px;\n          grid-template-columns: repeat(3, 1fr);\n        }\n\n        @include breakpoint($extrawide) {\n          gap: 16px 32px;\n        }\n      }\n\n      &.col-4 {\n        @include breakpoint($wide) {\n          gap: 16px 24px;\n          grid-template-columns: repeat(4, 1fr);\n        }\n\n        @include breakpoint($extrawide) {\n          gap: 16px 32px;\n        }\n      }\n    }\n\n    .with-sidebar & {\n      &.col-3 {\n        @include breakpoint($extrawide) {\n          gap: 16px 24px;\n          grid-template-columns: repeat(3, 1fr);\n        }\n\n        @include breakpoint($xlarge) {\n          gap: 16px 32px;\n        }\n      }\n\n      &.col-4 {\n        @include breakpoint($extrawide) {\n          gap: 16px 24px;\n          grid-template-columns: repeat(4, 1fr);\n        }\n\n        @include breakpoint($xlarge) {\n          gap: 16px 32px;\n        }\n      }\n    }\n  }\n}\n\n.hy-link-list__title {\n  font-weight: $bold;\n  font-family: var(--main-font-family);\n  margin: 0 0 32px;\n  color: var(--brand-main-nearly-black);\n}\n\nh2.hy-link-list__title {\n  .is-content-page & {\n    @include font-size(26px, 32px);\n    letter-spacing: -0.82px;\n\n    @include breakpoint($narrow) {\n      @include font-size(30px, 36px);\n      letter-spacing: -0.6px;\n    }\n\n    .without-sidebar & {\n      @include breakpoint($extrawide) {\n        @include font-size(34px, 40px);\n        letter-spacing: -0.68px;\n      }\n    }\n\n    .with-sidebar & {\n      @include breakpoint($xlarge) {\n        @include font-size(34px, 40px);\n        letter-spacing: -0.68px;\n      }\n    }\n  }\n\n  .is-front-page &,\n  .is-landing-page & {\n    @include font-size(28px, 32px);\n    letter-spacing: -0.7px;\n    text-transform: uppercase;\n\n    @include breakpoint($narrow) {\n      @include font-size(34px, 40px);\n      letter-spacing: -0.85px;\n    }\n\n    .without-sidebar & {\n      @include breakpoint($extrawide) {\n        @include font-size(42px, 48px);\n        letter-spacing: -1.05px;\n      }\n    }\n\n    .with-sidebar & {\n      @include breakpoint($xlarge) {\n        @include font-size(42px, 48px);\n        letter-spacing: -1.05px;\n      }\n    }\n  }\n\n  .hy-two-columns & {\n    @include font-size(18px, 22px);\n    letter-spacing: -0.45px;\n    margin-bottom: 16px;\n    text-transform: none;\n\n    .without-sidebar & {\n      @include breakpoint($extrawide) {\n        @include font-size(20px, 24px);\n        letter-spacing: -0.5px;\n      }\n    }\n\n    .with-sidebar & {\n      @include breakpoint($xlarge) {\n        @include font-size(20px, 24px);\n        letter-spacing: -0.5px;\n      }\n    }\n  }\n}\n\nh3.hy-link-list__title {\n  .is-content-page & {\n    @include font-size(21px, 28px);\n    letter-spacing: -0.42px;\n\n    @include breakpoint($narrow) {\n      @include font-size(25px, 32px);\n      letter-spacing: -0.5px;\n    }\n  }\n\n  .is-front-page &,\n  .is-landing-page & {\n    @include font-size(26px, 32px);\n    letter-spacing: -0.52px;\n\n    @include breakpoint($narrow) {\n      @include font-size(30px, 36px);\n      letter-spacing: -0.6px;\n    }\n\n    .without-sidebar & {\n      @include breakpoint($extrawide) {\n        @include font-size(34px, 40px);\n        letter-spacing: -0.68px;\n      }\n    }\n\n    .with-sidebar & {\n      @include breakpoint($xlarge) {\n        @include font-size(34px, 40px);\n        letter-spacing: -0.68px;\n      }\n    }\n  }\n\n  .hy-two-columns & {\n    @include font-size(18px, 22px);\n    letter-spacing: -0.45px;\n    margin-bottom: 16px;\n    text-transform: none;\n\n    .without-sidebar & {\n      @include breakpoint($extrawide) {\n        @include font-size(20px, 24px);\n        letter-spacing: -0.5px;\n      }\n    }\n\n    .with-sidebar & {\n      @include breakpoint($xlarge) {\n        @include font-size(20px, 24px);\n        letter-spacing: -0.5px;\n      }\n    }\n  }\n}\n","export interface CtaLinkValue {\n  heading: string;\n  variation: string;\n  ariaLabel: string;\n  url: string;\n  isExternal: boolean;\n}\n\nimport {Component, ComponentInterface, Element, h, Prop} from \"@stencil/core\";\nimport {CtaLinkVariants} from \"../../utils/utils\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\n\n@Component({\n  tag: \"hy-link-list\",\n  styleUrl: \"hy-link-list.scss\",\n  shadow: false,\n})\nexport class HyLinkList implements ComponentInterface {\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"default\";\n  private _dataItems: CtaLinkValue[];\n  @Prop() dataItems: CtaLinkValue[] | string;\n  @Prop() listHeading: string = \"\";\n  @Prop() variation: string;\n  @Prop() headingVariant: string = \"h2\";\n\n  async componentWillLoad() {\n    this._dataItems = await jsonParserWorker(this.dataItems);\n  }\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 linkVariant = CtaLinkVariants.linkList;\n    const HeadingVariant = this.headingVariant.toLowerCase();\n    let columnType = \"col-3\";\n\n    if (this._dataItems.length === 7 || this._dataItems.length % 4 === 0) {\n      columnType = \"col-4\";\n    }\n\n    return [\n      <section class={`hy-link-list hy-link-list__${this.headerstyle}`}>\n        {this.listHeading.length > 0 && (\n          <HeadingVariant class={\"hy-link-list__title\"}>{this.listHeading}</HeadingVariant>\n        )}\n        <ul\n          class={`hy-link-list__links hy-link-list__links--${this.variation} ${\n            this.variation === \"grid\" ? columnType : \"\"\n          }`}\n        >\n          {this._dataItems.map(({heading, ariaLabel, url, isExternal}) => (\n            <li class=\"hy-link-list__links-item\">\n              <hy-cta-link\n                variant={linkVariant}\n                link-content={heading}\n                sc-label={ariaLabel}\n                url={url}\n                is-external={isExternal}\n              />\n            </li>\n          ))}\n        </ul>\n      </section>,\n    ];\n  }\n}\n"],"version":3}

package/dist/esm/hy-link.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+import { i as LinkVariants } from './utils-7438924c.js';
+
+const linkCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-link{color:var(--brand-main);font-family:var(--main-font-family);font-weight:600;font-size:14px;letter-spacing:-0.47px;margin:theme(\"spacing.8\");line-height:16px;text-decoration:none}.hy-link.within-paragraph{color:var(--brand-main);font-family:var(--main-font-family);font-weight:400;font-size:14px;line-height:20px;text-decoration:underline}";
+
+const Link = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = LinkVariants.default;
+    this.linkContent = "";
+    this.url = undefined;
+    this.scLabel = undefined;
+    this.isExternal = false;
+  }
+  render() {
+    const classAttributes = ["hy-link", this.variant];
+    const target = this.isExternal ? "_blank" : "_self";
+    return (h(Host, null, h("a", { "aria-label": this.scLabel, class: classAttributes.join(" "), href: this.url, target: target }, this.linkContent)));
+  }
+};
+Link.style = linkCss;
+
+export { Link as hy_link };
+
+//# sourceMappingURL=hy-link.entry.js.map

package/dist/esm/hy-link.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-link.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,khDAAkhD;;MCQrhD,IAAI;;;mBACiB,YAAY,CAAC,OAAO;uBACtB,EAAE;;;sBAGF,KAAK;;EAEnC,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpD,QACE,EAAC,IAAI,QACH,uBAAe,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IAC1F,IAAI,CAAC,WAAW,CACf,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-link/link.scss?tag=hy-link","./src/components/hy-link/link.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-link {\n  color: var(--brand-main);\n  font-family: var(--main-font-family);\n  font-weight: 600;\n  font-size: 14px;\n  letter-spacing: -0.47px;\n  margin: theme(\"spacing.8\");\n  line-height: 16px;\n  text-decoration: none;\n\n  &.within-paragraph {\n    color: var(--brand-main);\n    font-family: var(--main-font-family);\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n    text-decoration: underline;\n  }\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {LinkVariants} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-link\",\n  styleUrl: \"link.scss\",\n  shadow: false,\n})\nexport class Link {\n  @Prop() variant: LinkVariants = LinkVariants.default;\n  @Prop() linkContent: string = \"\";\n  @Prop() url?: string;\n  @Prop() scLabel?: string;\n  @Prop() isExternal: boolean = false;\n\n  render() {\n    const classAttributes = [\"hy-link\", this.variant];\n    const target = this.isExternal ? \"_blank\" : \"_self\";\n\n    return (\n      <Host>\n        <a aria-label={this.scLabel} class={classAttributes.join(\" \")} href={this.url} target={target}>\n          {this.linkContent}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}