@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

package/components/hy-key-highlight-group.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { K as KeyHighlightVariants } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$2 } from './hy-key-highlight2.js';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class HyKeyHighlightGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return hyKeyHighlightGroupCss; }
+}, [1, "hy-key-highlight-group", {
+    "variant": [1],
+    "dataItems": [1, "data-items"],
+    "headerstyle": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-key-highlight-group", "hy-key-highlight"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-key-highlight-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyKeyHighlightGroup$1);
+      }
+      break;
+    case "hy-key-highlight":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyKeyHighlightGroup = HyKeyHighlightGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyKeyHighlightGroup, defineCustomElement };

package/components/hy-key-highlight.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyKeyHighlight extends Components.HyKeyHighlight, HTMLElement {}
+export const HyKeyHighlight: {
+  prototype: HyKeyHighlight;
+  new (): HyKeyHighlight;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-key-highlight.js

@@ -0,0 +1,6 @@
+import { H as HyKeyHighlight$1, d as defineCustomElement$1 } from './hy-key-highlight2.js';
+
+const HyKeyHighlight = HyKeyHighlight$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyKeyHighlight, defineCustomElement };

package/components/hy-key-highlight2.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { K as KeyHighlightVariants } from './utils.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);-webkit-hyphens:auto;-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 = /*@__PURE__*/ proxyCustomElement(class HyKeyHighlight extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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)));
+  }
+  static get style() { return hyKeyHighlightCss; }
+}, [1, "hy-key-highlight", {
+    "variant": [1],
+    "heading": [1],
+    "description": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-key-highlight"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-key-highlight":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyKeyHighlight);
+      }
+      break;
+  } });
+}
+
+export { HyKeyHighlight as H, defineCustomElement as d };

package/components/hy-large-process-flow-phase.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLargeProcessFlowPhase extends Components.HyLargeProcessFlowPhase, HTMLElement {}
+export const HyLargeProcessFlowPhase: {
+  prototype: HyLargeProcessFlowPhase;
+  new (): HyLargeProcessFlowPhase;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-large-process-flow-phase.js

@@ -0,0 +1,6 @@
+import { H as HyLargeProcessFlowPhase$1, d as defineCustomElement$1 } from './hy-large-process-flow-phase2.js';
+
+const HyLargeProcessFlowPhase = HyLargeProcessFlowPhase$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLargeProcessFlowPhase, defineCustomElement };

package/components/hy-large-process-flow-phase2.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$2 } from './cta-link.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class HyLargeProcessFlowPhase extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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))),
+      ];
+    })));
+  }
+  static get style() { return hyLargeProcessFlowPhaseCss; }
+}, [1, "hy-large-process-flow-phase", {
+    "dataItems": [1, "data-items"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-large-process-flow-phase", "hy-cta-link", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-large-process-flow-phase":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyLargeProcessFlowPhase);
+      }
+      break;
+    case "hy-cta-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { HyLargeProcessFlowPhase as H, defineCustomElement as d };

package/components/hy-large-process-flow.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLargeProcessFlow extends Components.HyLargeProcessFlow, HTMLElement {}
+export const HyLargeProcessFlow: {
+  prototype: HyLargeProcessFlow;
+  new (): HyLargeProcessFlow;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-large-process-flow.js

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { H as HeadingVarians } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$5 } from './cta-link.js';
+import { d as defineCustomElement$4 } from './heading.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './hy-large-process-flow-phase2.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$1 = /*@__PURE__*/ proxyCustomElement(class HyLargeProcessFlow extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return hyLargeProcessFlowCss; }
+}, [1, "hy-large-process-flow", {
+    "headerstyle": [1],
+    "dataItems": [1, "data-items"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-large-process-flow", "hy-cta-link", "hy-heading", "hy-icon", "hy-large-process-flow-phase"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-large-process-flow":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyLargeProcessFlow$1);
+      }
+      break;
+    case "hy-cta-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "hy-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-large-process-flow-phase":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyLargeProcessFlow = HyLargeProcessFlow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLargeProcessFlow, defineCustomElement };

package/components/hy-link-box-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLinkBoxList extends Components.HyLinkBoxList, HTMLElement {}
+export const HyLinkBoxList: {
+  prototype: HyLinkBoxList;
+  new (): HyLinkBoxList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-link-box-list.js

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { r as LinkBoxVariants } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$4 } from './hy-box2.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './link-box.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class LinkBoxList extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return linkBoxListCss; }
+}, [0, "hy-link-box-list", {
+    "headerstyle": [1],
+    "variant": [1],
+    "readMoreLabel": [1, "read-more-label"],
+    "dataItems": [1, "data-items"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-link-box-list", "hy-box", "hy-icon", "hy-link-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-link-box-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LinkBoxList);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-link-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyLinkBoxList = LinkBoxList;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLinkBoxList, defineCustomElement };

package/components/hy-link-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLinkBox extends Components.HyLinkBox, HTMLElement {}
+export const HyLinkBox: {
+  prototype: HyLinkBox;
+  new (): HyLinkBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-link-box.js

@@ -0,0 +1,6 @@
+import { L as LinkBox, d as defineCustomElement$1 } from './link-box.js';
+
+const HyLinkBox = LinkBox;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLinkBox, defineCustomElement };

package/components/hy-link-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLinkList extends Components.HyLinkList, HTMLElement {}
+export const HyLinkList: {
+  prototype: HyLinkList;
+  new (): HyLinkList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-link-list.js

@@ -0,0 +1,77 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as CtaLinkVariants } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$3 } from './cta-link.js';
+import { d as defineCustomElement$2 } from './icon.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$1 = /*@__PURE__*/ proxyCustomElement(class HyLinkList extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return hyLinkListCss; }
+}, [0, "hy-link-list", {
+    "headerstyle": [1],
+    "dataItems": [1, "data-items"],
+    "listHeading": [1, "list-heading"],
+    "variation": [1],
+    "headingVariant": [1, "heading-variant"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-link-list", "hy-cta-link", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-link-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyLinkList$1);
+      }
+      break;
+    case "hy-cta-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyLinkList = HyLinkList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLinkList, defineCustomElement };

package/components/hy-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyLink extends Components.HyLink, HTMLElement {}
+export const HyLink: {
+  prototype: HyLink;
+  new (): HyLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-link.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { q as LinkVariants } from './utils.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 = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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)));
+  }
+  static get style() { return linkCss; }
+}, [0, "hy-link", {
+    "variant": [1],
+    "linkContent": [1, "link-content"],
+    "url": [1],
+    "scLabel": [1, "sc-label"],
+    "isExternal": [4, "is-external"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Link);
+      }
+      break;
+  } });
+}
+
+const HyLink = Link;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyLink, defineCustomElement };

package/components/hy-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyListItem extends Components.HyListItem, HTMLElement {}
+export const HyListItem: {
+  prototype: HyListItem;
+  new (): HyListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;