@itcenteratunihelsinki/huds-lib 0.8.57 → 0.8.59

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

@@ -0,0 +1 @@
+{"file":"hy-quote.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+2FAA+2F;;MCOr3F,OAAO;;;;uBAEY,QAAQ;;EAGtC,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,UAAU,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7F,QACE,WAAK,KAAK,EAAE,UAAU,IACpB,YAAM,KAAK,EAAC,wBAAwB,IAClC,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAS,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,EAAE,GAAI,CACxC,CACD,EACP,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,EACL,IAAI,CAAC,cAAc,IAAI,WAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,cAAc,CAAO,CAChF,CACF,EACN;GACH;;;;;;;","names":[],"sources":["./src/components/hy-quote/hy-quote.scss?tag=hy-quote&encapsulation=shadow","./src/components/hy-quote/hy-quote.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-quote {\n  display: flex;\n  flex-direction: row;\n  padding: 0 8px;\n\n  @include breakpoint($narrow) {\n    flex-direction: column;\n    padding: 0;\n  }\n\n  @include breakpoint($wide) {\n    flex-direction: row;\n  }\n\n  &__icon-wrapper {\n    margin-right: 20px;\n\n    @include breakpoint($narrow) {\n      margin-right: 0;\n    }\n\n    @include breakpoint($wide) {\n      margin-right: 24px;\n    }\n\n    @include breakpoint($xlarge) {\n      margin-right: 32px;\n    }\n  }\n\n  &__icon {\n    svg {\n      fill: var(--brand-main-light);\n      height: 32px;\n      width: 32px;\n\n      @include breakpoint($wide) {\n        height: 40px;\n        width: 40px;\n      }\n      @include breakpoint($xlarge) {\n        height: 48px;\n        width: 48px;\n      }\n    }\n  }\n\n  &__text {\n    @include font-size(16px, 24px);\n\n    color: var(--grayscale-black);\n    font-family: var(--main-font-family);\n    font-weight: 600;\n    letter-spacing: -0.1px;\n    padding-bottom: 16px;\n    padding-top: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(18px, 28px);\n      padding-top: 16px;\n    }\n\n    @include breakpoint($extrawide) {\n      @include font-size(20px, 32px);\n      padding-top: 0;\n    }\n  }\n\n  &__signature:before {\n    @include font-size(14px, 20px);\n    display: inline-block;\n    color: var(--grayscale-dark);\n    content: \"-\";\n    font-family: var(--main-font-family);\n    letter-spacing: 0;\n    padding-right: 3px;\n  }\n\n  &__signature {\n    @include font-size(14px, 20px);\n    color: var(--grayscale-dark);\n    font-family: var(--main-font-family);\n    letter-spacing: 0;\n\n    @include breakpoint($narrow) {\n      @include font-size(16px, 24px);\n    }\n  }\n}\n","import {Component, Element, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-quote\",\n  styleUrl: \"hy-quote.scss\",\n  shadow: true,\n})\nexport class HyQuote {\n  @Prop() quoteSignature?: string;\n  @Prop() headerstyle: string = \"common\";\n  @Element() el: HTMLElement;\n\n  componentDidLoad() {\n    let hyMainDiv = this.el.closest(\".hy-main\");\n    if (hyMainDiv) {\n      if (!hyMainDiv.classList.contains(\"with-sidebar\")) {\n        this.headerstyle = \"large\";\n      }\n    }\n  }\n\n  render() {\n    const quoteClass = [\"hy-quote\", this.headerstyle, `hy-quote__${this.headerstyle}`].join(\" \");\n    return (\n      <div class={quoteClass}>\n        <span class=\"hy-quote__icon-wrapper\">\n          <div class=\"hy-quote__icon\">\n            <hy-icon icon={\"hy-icon-quote\"} size={48} />\n          </div>\n        </span>\n        <div class=\"hy-quote-text-wrapper\">\n          <div class=\"hy-quote__text\">\n            <slot></slot>\n          </div>\n          {this.quoteSignature && <div class=\"hy-quote__signature\">{this.quoteSignature}</div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+import { c as css } from './emotion.esm-e0a633a4.js';
+
+const rowCss = "div.hy-row{display:block}";
+
+const createCss = (justify, align, margin) => {
+  return css `
+    display: flex;
+    justify-content: ${justify};
+    align-items: ${align};
+    > * + * {
+      margin-left: ${margin}rem;
+    }
+  `;
+};
+const Row = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.justify = "stretch";
+    this.align = "center";
+    this.margin = 1;
+  }
+  render() {
+    return (h("div", { class: createCss(this.justify, this.align, this.margin) }, h("slot", null)));
+  }
+};
+Row.style = rowCss;
+
+export { Row as hy_row };
+
+//# sourceMappingURL=hy-row.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"hy-row.entry.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,2BAA2B;;ACG1C,MAAM,SAAS,GAAG,CAAC,OAAe,EAAE,KAAa,EAAE,MAAc;EAC/D,OAAO,GAAG,CAAA;;uBAEW,OAAO;mBACX,KAAK;;qBAEH,MAAM;;GAExB,CAAC;AACJ,CAAC,CAAC;MAOW,GAAG;;;mBAIY,SAAS;iBAIX,QAAQ;kBAIP,CAAC;;EAC1B,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAC1D,eAAa,CACT,EACN;GACH;;;;;;","names":[],"sources":["./src/components/hy-row/row.css?tag=hy-row","./src/components/hy-row/row.tsx"],"sourcesContent":["div.hy-row {\n  display: block;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\nimport {css} from \"emotion\";\n\nconst createCss = (justify: string, align: string, margin: number) => {\n  return css`\n    display: flex;\n    justify-content: ${justify};\n    align-items: ${align};\n    > * + * {\n      margin-left: ${margin}rem;\n    }\n  `;\n};\n\n@Component({\n  tag: \"hy-row\",\n  styleUrl: \"row.css\",\n  shadow: false,\n})\nexport class Row {\n  /**\n   * justify-content property.\n   */\n  @Prop() justify: string = \"stretch\";\n  /**\n   * justify-content property.\n   */\n  @Prop() align: string = \"center\";\n  /**\n   * Left margin to be added to adjacent items.\n   */\n  @Prop() margin: number = 1;\n  render() {\n    return (\n      <div class={createCss(this.justify, this.align, this.margin)}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-section-container.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h } from './index-f84f2a7d.js';
+
+const sectionContainerCss = ":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-section--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-section--container{width:100%}}@media only screen and (min-width: 60rem){.hy-section--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-section--container{width:100%;max-width:75rem}}";
+
+const SectionContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: "hy-section--container" }, h("slot", null)));
+  }
+};
+SectionContainer.style = sectionContainerCss;
+
+export { SectionContainer as hy_section_container };
+
+//# sourceMappingURL=hy-section-container.entry.js.map

package/dist/esm/hy-section-container.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-section-container.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,ohDAAohD;;MCOniD,gBAAgB;;;;EAC3B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,uBAAuB,IAChC,eAAQ,CACJ,EACN;GACH;;;;;;","names":[],"sources":["./src/components/hy-section-container/section-container.scss?tag=hy-section-container","./src/components/hy-section-container/section-container.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-section--container {\n  display: block;\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media only screen and (min-width: $narrow) {\n    width: 100%;\n  }\n\n  @media only screen and (min-width: $wide) {\n    width: 100%;\n    max-width: 60rem;\n  }\n\n  @media only screen and (min-width: $extrawide) {\n    width: 100%;\n    max-width: 75rem;\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-section-container\",\n  styleUrl: \"section-container.scss\",\n  shadow: false,\n})\nexport class SectionContainer {\n  render() {\n    return (\n      <div class=\"hy-section--container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,59 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f84f2a7d.js';
+import { f as HeadingVarians } from './utils-7438924c.js';
+
+const hyShortcutsCss = ":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-shortcuts{overflow:hidden}.hy-shortcuts .shortcut-link-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 calc(var(--gutter-mobile)* -1)}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container{margin:0 calc(var(--gutter-narrow)* -1)}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container{margin:0 calc(var(--gutter-wide)* -1)}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper{min-height:62px;padding:0 var(--gutter-mobile)}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper{min-height:70px;padding:0 var(--gutter-narrow)}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper{min-height:82px;padding:0 var(--gutter-wide)}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3{width:100%}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3{width:33.33%}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4{width:50%}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4{width:25%}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3.first a.shortcut-link,.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4.first a.shortcut-link{border-top:2.5px solid var(--brand-main-nearly-black)}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3.first a.shortcut-link,.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4.first a.shortcut-link{border-top:3px solid var(--brand-main-nearly-black)}}.hy-shortcuts .shortcut-link-container a.shortcut-link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-bottom:2.5px solid var(--brand-main-nearly-black);color:var(--brand-main-nearly-black);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);font-size:14px;font-weight:600;-ms-hyphens:auto;hyphens:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;letter-spacing:-0.44px;line-height:18px;min-height:70px;position:relative;text-decoration:none;word-break:break-word}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container a.shortcut-link{border-bottom:3px solid var(--brand-main-nearly-black);border-top:3px solid var(--brand-main-nearly-black);font-size:16px;letter-spacing:-0.5px;line-height:18px;min-height:70px}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container a.shortcut-link{font-size:16px;letter-spacing:-0.5px;line-height:22px;min-height:82px}}.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon{padding:0 0 0 8px}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon{padding:0 0 0 12px}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon{padding:0 4px 0 22px}}.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon svg{height:20px;fill:var(--brand-main-light);width:20px}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon svg{height:24px;width:24px}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon svg{height:28px;width:28px}}.hy-shortcuts .shortcut-link-container a.shortcut-link:hover{color:var(--brand-main)}.hy-shortcuts .shortcut-link-container a.shortcut-link:hover svg{fill:var(--brand-main)}";
+
+const HyShortcuts = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dataItems = undefined;
+    this.listHeading = "";
+    this.headerstyle = "default";
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._dataItems = JSON.parse(newValue);
+    }
+    else {
+      this._dataItems = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(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-shortcuts", `hy-shortcuts__${this.headerstyle}`].join(" ");
+    const textClassAttributes = ["text"].join(" ");
+    const iconClassAttributes = ["link-icon"].join(" ");
+    let classItem = ["shortcut-link-wrapper", this._dataItems.length % 4 == 0 ? "box-4" : "box-3"].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, this.listHeading.length > 0 && (h("hy-heading", { class: "list-title", heading: HeadingVarians.h2 }, this.listHeading)), h("div", { class: "shortcut-link-container" }, this._dataItems.map((x, index) => {
+      let isFirstLine = "";
+      if (this._dataItems.length % 4 == 0) {
+        isFirstLine = index == 0 || index == 1 ? "first" : "";
+      }
+      else {
+        isFirstLine = index == 0 ? "first" : "";
+      }
+      let classLinkWrapper = classItem.concat(" ", isFirstLine);
+      let target = x.isExternal ? "_blank" : "_self";
+      return (h("div", { class: classLinkWrapper }, h("a", { "aria-label": x.ariaLabel, class: "shortcut-link", href: x.url, target: target }, h("span", { class: textClassAttributes }, x.heading), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 28 })))));
+    }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "dataItems": ["arrayDataWatcher"]
+  }; }
+};
+HyShortcuts.style = hyShortcutsCss;
+
+export { HyShortcuts as hy_shortcuts };
+
+//# sourceMappingURL=hy-shortcuts.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"hy-shortcuts.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,onJAAonJ;;MCe9nJ,WAAW;;;;uBAIQ,EAAE;uBACF,SAAS;;EAGvC,gBAAgB,CAAC,QAAsC;IACrD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACxC;SAAM;MACL,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;KAC5B;GACF;EACD,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;GACvC;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,CAAC,cAAc,EAAE,iBAAiB,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxF,MAAM,mBAAmB,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,mBAAmB,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,IAAI,SAAS,GAAG,CAAC,uBAAuB,EAAE,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzG,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACxB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1B,kBAAY,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,cAAc,CAAC,EAAE,IACtD,IAAI,CAAC,WAAW,CACN,CACd,EACD,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK;MAC5B,IAAI,WAAW,GAAG,EAAE,CAAC;MACrB,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,EAAE;QACnC,WAAW,GAAG,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,OAAO,GAAG,EAAE,CAAC;OACvD;WAAM;QACL,WAAW,GAAG,KAAK,IAAI,CAAC,GAAG,OAAO,GAAG,EAAE,CAAC;OACzC;MACD,IAAI,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;MAC1D,IAAI,MAAM,GAAG,CAAC,CAAC,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;MAE/C,QACE,WAAK,KAAK,EAAE,gBAAgB,IAC1B,uBAAe,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,IAC3E,YAAM,KAAK,EAAE,mBAAmB,IAAG,CAAC,CAAC,OAAO,CAAQ,EACpD,YAAM,KAAK,EAAE,mBAAmB,IAC9B,eAAS,IAAI,EAAE,qBAAqB,EAAE,IAAI,EAAE,EAAE,GAAI,CAC7C,CACL,CACA,EACN;KACH,CAAC,CACE,CACF,EACN,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;;;;;","names":[],"sources":["./src/components/hy-shortcuts/hy-shortcuts.scss?tag=hy-shortcuts","./src/components/hy-shortcuts/hy-shortcuts.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-shortcuts {\n  overflow: hidden;\n\n  .shortcut-link-container {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0 calc(#{var(--gutter-mobile)}* -1);\n\n    @include breakpoint($narrow) {\n      margin: 0 calc(#{var(--gutter-narrow)}* -1);\n    }\n    @include breakpoint($wide) {\n      margin: 0 calc(#{var(--gutter-wide)}* -1);\n    }\n\n    .shortcut-link-wrapper {\n      min-height: 62px;\n      padding: 0 var(--gutter-mobile);\n\n      @include breakpoint($narrow) {\n        min-height: 70px;\n        padding: 0 var(--gutter-narrow);\n      }\n      @include breakpoint($wide) {\n        min-height: 82px;\n        padding: 0 var(--gutter-wide);\n      }\n    }\n\n    .shortcut-link-wrapper.box-3 {\n      width: 100%;\n\n      @include breakpoint($narrow) {\n        width: 33.33%;\n      }\n    }\n\n    .shortcut-link-wrapper.box-4 {\n      width: 50%;\n\n      @include breakpoint($narrow) {\n        width: 25%;\n      }\n    }\n\n    .shortcut-link-wrapper.box-3.first a.shortcut-link,\n    .shortcut-link-wrapper.box-4.first a.shortcut-link {\n      // mobile\n      border-top: 2.5px solid var(--brand-main-nearly-black);\n\n      @include breakpoint($narrow) {\n        // tablet\n        border-top: 3px solid var(--brand-main-nearly-black);\n      }\n    }\n\n    a.shortcut-link {\n      align-items: center;\n      background-color: transparent;\n      // mobile\n      border-bottom: 2.5px solid var(--brand-main-nearly-black);\n      color: var(--brand-main-nearly-black);\n      cursor: pointer;\n      display: flex;\n      font-family: var(--main-font-family);\n      font-size: 14px;\n      font-weight: 600;\n      hyphens: auto;\n      justify-content: space-between;\n      height: 100%;\n      letter-spacing: -0.44px;\n      line-height: 18px;\n      min-height: 70px;\n      position: relative;\n      text-decoration: none;\n      word-break: break-word;\n\n      @include breakpoint($narrow) {\n        // tablet\n        border-bottom: 3px solid var(--brand-main-nearly-black);\n        border-top: 3px solid var(--brand-main-nearly-black);\n        font-size: 16px;\n        letter-spacing: -0.5px;\n        line-height: 18px;\n        min-height: 70px;\n      }\n      @include breakpoint($wide) {\n        font-size: 16px;\n        letter-spacing: -0.5px;\n        line-height: 22px;\n        min-height: 82px;\n      }\n\n      .link-icon {\n        padding: 0 0 0 8px;\n        @include breakpoint($narrow) {\n          padding: 0 0 0 12px;\n        }\n        @include breakpoint($wide) {\n          padding: 0 4px 0 22px;\n        }\n\n        svg {\n          height: 20px;\n          fill: var(--brand-main-light);\n          width: 20px;\n          @include breakpoint($narrow) {\n            height: 24px;\n            width: 24px;\n          }\n          @include breakpoint($wide) {\n            height: 28px;\n            width: 28px;\n          }\n        }\n      }\n\n      &:hover {\n        color: var(--brand-main);\n        svg {\n          fill: var(--brand-main);\n        }\n      }\n    }\n  }\n}\n","export interface ShortcutLinkValue {\n  heading: string;\n  url: string;\n  isExternal: boolean;\n  ariaLabel: string;\n}\n\nimport {Component, ComponentInterface, Element, h, Host, Prop, Watch} from \"@stencil/core\";\nimport {HeadingVarians} from \"../../utils/utils\";\n\n@Component({\n  tag: \"hy-shortcuts\",\n  styleUrl: \"hy-shortcuts.scss\",\n  shadow: false,\n})\nexport class HyShortcuts implements ComponentInterface {\n  @Element() el: HTMLElement;\n  private _dataItems: ShortcutLinkValue[];\n  @Prop() dataItems: ShortcutLinkValue[] | string;\n  @Prop() listHeading: string = \"\";\n  @Prop() headerstyle: string = \"default\";\n\n  @Watch(\"dataItems\")\n  arrayDataWatcher(newValue: ShortcutLinkValue[] | string) {\n    if (typeof newValue === \"string\") {\n      this._dataItems = JSON.parse(newValue);\n    } else {\n      this._dataItems = newValue;\n    }\n  }\n  componentWillLoad() {\n    this.arrayDataWatcher(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-shortcuts\", `hy-shortcuts__${this.headerstyle}`].join(\" \");\n    const textClassAttributes = [\"text\"].join(\" \");\n    const iconClassAttributes = [\"link-icon\"].join(\" \");\n\n    let classItem = [\"shortcut-link-wrapper\", this._dataItems.length % 4 == 0 ? \"box-4\" : \"box-3\"].join(\" \");\n\n    return (\n      <Host>\n        <div class={classAttributes}>\n          {this.listHeading.length > 0 && (\n            <hy-heading class=\"list-title\" heading={HeadingVarians.h2}>\n              {this.listHeading}\n            </hy-heading>\n          )}\n          <div class=\"shortcut-link-container\">\n            {this._dataItems.map((x, index) => {\n              let isFirstLine = \"\";\n              if (this._dataItems.length % 4 == 0) {\n                isFirstLine = index == 0 || index == 1 ? \"first\" : \"\";\n              } else {\n                isFirstLine = index == 0 ? \"first\" : \"\";\n              }\n              let classLinkWrapper = classItem.concat(\" \", isFirstLine);\n              let target = x.isExternal ? \"_blank\" : \"_self\";\n\n              return (\n                <div class={classLinkWrapper}>\n                  <a aria-label={x.ariaLabel} class=\"shortcut-link\" href={x.url} target={target}>\n                    <span class={textClassAttributes}>{x.heading}</span>\n                    <span class={iconClassAttributes}>\n                      <hy-icon icon={\"hy-icon-arrow-right\"} size={28} />\n                    </span>\n                  </a>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hy-table-container.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+
+const hyTableContainerCss = ":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-table-container{font-size:0.875rem;line-height:18px;display:block;position:relative;overflow:scroll;white-space:nowrap}@media (min-width: 30rem){.hy-table-container{font-size:1rem;line-height:20px}}.hy-table-container table{border-collapse:collapse;border:1px solid var(--grayscale-dark);text-indent:initial;width:100%}.hy-table-container thead{border-bottom:1px solid var(--grayscale-dark);border-left:1px solid var(--grayscale-dark);border-right:1px solid var(--grayscale-dark)}.hy-table-container thead th{font-size:0.875rem;line-height:20px;border-left:1px solid black;background-color:var(--grayscale-light);text-transform:uppercase}@media (min-width: 30rem){.hy-table-container thead th{font-size:1rem;line-height:20px}}.hy-table-container td,.hy-table-container th{border:1px solid var(--grayscale-dark);background-clip:padding-box;color:var(--grayscale-dark);font-family:var(--main-font-family);letter-spacing:-0.5px;padding:0.7em 0.9em;text-align:left;vertical-align:top;word-wrap:break-word}.hy-table-container td a,.hy-table-container th a{text-decoration:none}.hy-table-container td a:hover,.hy-table-container th a:hover{cursor:pointer;text-decoration:underline}.hy-table-container td p,.hy-table-container th p{font-size:inherit}.hy-table-container td:first-child,.hy-table-container th:first-child{font-weight:700;border-collapse:separate;border-right:none;left:0;max-width:180px;min-width:180px;position:sticky;white-space:normal;width:180px;z-index:2}@media (min-width: 60rem){.hy-table-container td:first-child,.hy-table-container th:first-child{border-right:1px solid var(--grayscale-dark)}}.hy-table-container td:first-child::after,.hy-table-container th:first-child::after{content:\"\";display:block;position:absolute;right:-10px;bottom:0;width:10px;top:0;height:100%;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%)}@media (min-width: 60rem){.hy-table-container td:first-child::after,.hy-table-container th:first-child::after{display:none}}.hy-table-container td:first-child::before,.hy-table-container th:first-child::before{border-left:1px solid black;content:\"\";display:block;position:absolute;left:-1px;bottom:0;width:1px;top:0;height:100%}@media (min-width: 60rem){.hy-table-container td:first-child::before,.hy-table-container th:first-child::before{display:none}}@media (min-width: 30rem){.hy-table-container td:first-child,.hy-table-container th:first-child{max-width:220px;min-width:220px;width:220px}}@media (min-width: 48rem){.hy-table-container td:first-child,.hy-table-container th:first-child{max-width:300px;min-width:300px;width:300px}}@media (min-width: 60rem){.hy-table-container td:first-child,.hy-table-container th:first-child{max-width:40%;min-width:40%;width:40%}}.hy-table-container td:first-child:only-child,.hy-table-container th:first-child:only-child{border:1px solid var(--grayscale-dark)}.hy-table-container td:first-child:only-child::after,.hy-table-container td:first-child:only-child::before,.hy-table-container th:first-child:only-child::after,.hy-table-container th:first-child:only-child::before{display:none}.hy-table-container td{background-color:var(--grayscale-white);word-wrap:break-word;white-space:normal}.hy-table-container caption{margin-bottom:1rem}";
+
+const HyTableContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-table-container"].join(" ");
+    return (h(Host, { class: classAttributes }, h("slot", null), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+};
+HyTableContainer.style = hyTableContainerCss;
+
+export { HyTableContainer as hy_table_container };
+
+//# sourceMappingURL=hy-table-container.entry.js.map

package/dist/esm/hy-table-container.entry.js.map

@@ -0,0 +1 @@
+{"file":"hy-table-container.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,g8IAAg8I;;MCO/8I,gBAAgB;;;;EAC3B,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzD,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,IAC1B,eAAa,EACb,cAAQ,EAAE,EAAC,oBAAoB,GAAG,CAC7B,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-table-container/hy-table-container.scss?tag=hy-table-container","./src/components/hy-table-container/hy-table-container.tsx"],"sourcesContent":[".hy-table-container {\n  @include font-size(14px, 18px);\n  display: block;\n  position: relative;\n  overflow: scroll;\n  white-space: nowrap;\n\n  @include breakpoint($narrow) {\n    @include font-size(16px, 20px);\n  }\n\n  table {\n    border-collapse: collapse;\n    border: 1px solid var(--grayscale-dark);\n    text-indent: initial;\n    width: 100%;\n  }\n\n  thead {\n    border-bottom: 1px solid var(--grayscale-dark);\n    border-left: 1px solid var(--grayscale-dark);\n    border-right: 1px solid var(--grayscale-dark);\n\n    th {\n      @include font-size(14px, 20px);\n      border-left: 1px solid black;\n      background-color: var(--grayscale-light);\n      text-transform: uppercase;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 20px);\n      }\n    }\n  }\n\n  td,\n  th {\n    border: 1px solid var(--grayscale-dark);\n    background-clip: padding-box;\n    color: var(--grayscale-dark);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.5px;\n    padding: 0.7em 0.9em;\n    text-align: left;\n    vertical-align: top;\n    word-wrap: break-word;\n\n    a {\n      text-decoration: none;\n\n      &:hover {\n        cursor: pointer;\n        text-decoration: underline;\n      }\n    }\n\n    p {\n      font-size: inherit;\n    }\n\n    &:first-child {\n      @include font-weight($bold);\n      border-collapse: separate;\n      border-right: none;\n      //border-left: none;\n      left: 0;\n      max-width: 180px;\n      min-width: 180px;\n      position: sticky;\n      white-space: normal;\n      width: 180px;\n      z-index: 2;\n\n      @include breakpoint($wide) {\n        border-right: 1px solid var(--grayscale-dark);\n      }\n\n      &::after {\n        content: \"\";\n        display: block;\n        position: absolute;\n        right: -10px;\n        bottom: 0;\n        width: 10px;\n        top: 0;\n        height: 100%;\n        background: linear-gradient(90deg, rgba(000, 000, 000, 0.2) 0%, rgba(0, 0, 0, 0) 100%);\n\n        @include breakpoint($wide) {\n          display: none;\n        }\n      }\n\n      &::before {\n        border-left: 1px solid black;\n        content: \"\";\n        display: block;\n        position: absolute;\n        left: -1px;\n        bottom: 0;\n        width: 1px;\n        top: 0;\n        height: 100%;\n\n        @include breakpoint($wide) {\n          display: none;\n        }\n      }\n\n      @include breakpoint($narrow) {\n        max-width: 220px;\n        min-width: 220px;\n        width: 220px;\n      }\n\n      @include breakpoint($medium) {\n        max-width: 300px;\n        min-width: 300px;\n        width: 300px;\n      }\n\n      @include breakpoint($wide) {\n        max-width: 40%;\n        min-width: 40%;\n        width: 40%;\n      }\n\n      &:only-child {\n        border: 1px solid var(--grayscale-dark);\n        &::after,\n        &::before {\n          display: none;\n        }\n      }\n    }\n  }\n\n  td {\n    background-color: var(--grayscale-white);\n    word-wrap: break-word;\n    white-space: normal;\n  }\n\n  caption {\n    margin-bottom: 1rem;\n  }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-table-container\",\n  styleUrl: \"hy-table-container.scss\",\n  shadow: false,\n})\nexport class HyTableContainer {\n  render() {\n    const classAttributes = [\"hy-table-container\"].join(\" \");\n\n    return (\n      <Host class={classAttributes}>\n        <slot></slot>\n        <hy-box mb=\"1.75, 1.75, 2, 2.5\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,327 @@
+import { r as registerInstance, h, g as getElement } from './index-f84f2a7d.js';
+
+const hyTabsCss = ":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-tabs__container .hy-tablist-container{border-bottom:1px solid var(--grayscale-tabs-border);position:relative}.hy-tabs__container .hy-tab-scroll{background-color:rgba(255, 255, 255, 0.8);border:0;height:100%;margin:0;padding:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:4}.hy-tabs__container .hy-tab-scroll.is-hidden{display:none;visibility:hidden}.hy-tabs__container .hy-tab-scroll.is-disabled{background-color:var(--grayscale-medium)}.hy-tabs__container .hy-tab-scroll.is-disabled:hover{cursor:none}.hy-tabs__container .hy-tab-scroll:focus,.hy-tabs__container .hy-tab-scroll:hover{outline:none;cursor:pointer}.hy-tabs__container .hy-tab-scroll span{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-black);border-radius:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px}.hy-tabs__container .hy-tab-scroll span svg{fill:var(--grayscale-white);height:16px;width:16px}.hy-tabs__container .hy-tab-scroll__left{left:0;padding-right:8px}.hy-tabs__container .hy-tab-scroll__left svg{-webkit-transform:translateX(-1px);transform:translateX(-1px)}.hy-tabs__container .hy-tab-scroll__right{padding-left:8px;right:0}.hy-tabs__container .hy-tab-scroll__right svg{-webkit-transform:translateX(1px);transform:translateX(1px)}.hy-tabs__container [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 0 -0.1em;overflow:scroll;position:relative;scrollbar-width:none;white-space:nowrap}.hy-tabs__container [role=tablist]::-webkit-scrollbar{display:none}.hy-tabs__container [role=tablist] a{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:47.56%;text-decoration:none;-ms-flex-negative:0;flex-shrink:0}.hy-tabs__container [role=tablist] a:not(:first-of-type){margin-left:6px}@media (min-width: 30rem){.hy-tabs__container [role=tablist] a{max-width:35.37%}}@media (min-width: 60rem){.hy-tabs__container [role=tablist] a{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tablist] a{max-width:23.03%}}.hy-tabs__container [role=tab]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:6px;padding:0}.hy-tabs__container [role=tab]>span{font-size:0.875rem;line-height:14px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border:0;color:var(--link-blue);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-hyphens:auto;hyphens:auto;letter-spacing:-0.5px;padding:8px 8px 7px;pointer-events:none;position:relative;text-align:left;white-space:normal;word-break:break-word;overflow-wrap:break-word;overflow-wrap:break-word}@media (min-width: 30rem){.hy-tabs__container [role=tab]>span{font-size:1rem;line-height:18px;padding:16px 12px 10px}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab]>span{font-size:1.125rem;line-height:20px;letter-spacing:-0.6px;padding:16px 16px 14px}}@supports (overflow-wrap: anywhere){.hy-tabs__container [role=tab]>span{overflow-wrap:anywhere}}@supports (overflow-wrap: anywhere){.hy-tabs__container [role=tab]>span{overflow-wrap:anywhere}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab].large{margin:0 12px 0 0}}.hy-tabs__container [role=tab][aria-selected=true]{border-bottom-width:0;border:1px solid var(--grayscale-dark);margin-bottom:0;z-index:3}.hy-tabs__container [role=tab][aria-selected=true]>span{background-color:var(--grayscale-white);color:var(--grayscale-black);padding-bottom:13px}@media (min-width: 30rem){.hy-tabs__container [role=tab][aria-selected=true]>span{padding-bottom:16px}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab][aria-selected=true]>span{padding-bottom:20px}}.hy-tabs__container [role=tab][aria-selected=true]>span:before{background-color:var(--grayscale-white);bottom:0;content:\"\";height:4px;left:0;position:absolute;right:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.hy-tabs__container [role=tab][aria-selected=true]>span:after{background-color:var(--grayscale-black);bottom:0;content:\"\";height:4px;left:8px;position:absolute;right:8px}.hy-tabs__container [role=tab]:hover{border-radius:0;color:inherit;cursor:pointer;text-decoration:none}.hy-tabs__container [role=tab]:hover span{background-color:var(--hover-gray);color:var(--brand-main-active)}.hy-tabs__container [role=tabpanel]{border:1px solid var(--grayscale-dark);padding:28px 12px;position:relative;z-index:2}@media (min-width: 30rem){.hy-tabs__container [role=tabpanel]{padding:38px 15px}}@media (min-width: 60rem){.hy-tabs__container [role=tabpanel]{padding:40px 20px}}.hy-tabs__container [role=tabpanel]:focus{outline:1px solid var(--brand-main-active)}";
+
+// For easy reference
+let keys = {
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  delete: 46,
+};
+// Add or substract depending on key pressed
+let direction = {
+  37: -1,
+  38: -1,
+  39: 1,
+  40: 1,
+};
+let checkTimeout;
+let focusTimeout;
+let scrollTimeout;
+const HyTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabId = undefined;
+    this.tabListLabel = "";
+    this.focusTimeoutCleared = true;
+    this.tabButtonTitles = undefined;
+    this.tabPanelsState = undefined;
+    this.tabButtons = undefined;
+    this.tabList = undefined;
+    this.headerstyle = "common";
+  }
+  componentWillLoad() {
+    const tabItems = this.el.querySelectorAll("hy-tabs-item");
+    if (tabItems) {
+      this.tabButtonTitles = Array.from(tabItems).map((panel) => {
+        return {
+          title: panel.getAttribute("tab-title"),
+          id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
+        };
+      });
+    }
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+    const tabContainer = this.el.querySelector(".hy-tabs__container");
+    if (tabContainer) {
+      this.generateArrays(tabContainer);
+      const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+      const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+      const tabList = this.tabList;
+      this.checkScrollHidden(tabList, leftButton, rightButton);
+      tabList.addEventListener("scroll", () => {
+        scrollTimeout = setTimeout(() => {
+          window.clearTimeout(scrollTimeout);
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+        }, 250);
+      }, false);
+      if (tabList.offSetWidth <= document.body.scrollWidth) {
+        leftButton.classList.add("is-hidden");
+        rightButton.classList.add("is-hidden");
+      }
+      const oneTabWidth = 250;
+      rightButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        rightButton.classList.add("is-disabled");
+        tabList.scrollBy({
+          top: 0,
+          left: +oneTabWidth,
+          behavior: "smooth",
+        });
+        checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+          rightButton.classList.remove("is-disabled");
+        }, 250);
+      });
+      leftButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        leftButton.classList.add("is-disabled");
+        tabList.scrollBy({
+          top: 0,
+          left: -oneTabWidth,
+          behavior: "smooth",
+        });
+        checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+          leftButton.classList.remove("is-disabled");
+        }, 250);
+      });
+    }
+  }
+  generateArrays(tc) {
+    this.tabList = tc.querySelectorAll('[role="tablist"]')[0];
+    this.tabButtons = tc.querySelectorAll('[role="tab"]');
+    this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')];
+    if (this.tabButtons.length > 0) {
+      this.addListeners(this.tabButtons, 1);
+      this.activateTab(this.tabButtons[0], true);
+    }
+  }
+  addListeners(tabs, index) {
+    if (tabs.length > 1) {
+      for (let i = 0; i < tabs.length; ++i) {
+        tabs[index].addEventListener("click", this.clickEventListener);
+        tabs[index].addEventListener("keydown", this.keydownEventListener);
+        //tabs[index].addEventListener('keyup', this.keyupEventListener);
+        tabs[index].index = index;
+      }
+    }
+  }
+  checkScrollHidden(tablist, leftButton, rightButton) {
+    if (tablist.scrollLeft === 0) {
+      leftButton.classList.add("is-hidden");
+    }
+    else {
+      leftButton.classList.remove("is-hidden");
+    }
+    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
+      rightButton.classList.add("is-hidden");
+    }
+    else {
+      rightButton.classList.remove("is-hidden");
+    }
+  }
+  // When a tab is clicked, activateTab is fired to activate it
+  clickEventListener(event) {
+    if (event) {
+      const target = event.target;
+      const tabs = this.tabButtonTitles;
+      if (tabs) {
+        tabs.forEach((tab) => {
+          const id = Object.values(tab)[1];
+          if (id === target.id) {
+            this.activateTab(target, true);
+          }
+        });
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
+    }
+  }
+  keydownEventListener(event) {
+    const key = event.keyCode;
+    const tabs = this.tabButtonTitles;
+    switch (key) {
+      case keys.end:
+        event.preventDefault();
+        // Activate last tab
+        this.activateTab(tabs[tabs.length - 1], true);
+        break;
+      case keys.home:
+        event.preventDefault();
+        // Activate first tab
+        this.activateTab(tabs[0], true);
+        break;
+      // Up and down are in keydown
+      // because we need to prevent page scroll >:)
+      case keys.up:
+      case keys.down:
+        if (this.focusTimeoutCleared) {
+          this.determineOrientation(event);
+        }
+        break;
+    }
+  }
+  keyupEventListener(event) {
+    const key = event.keyCode;
+    switch (key) {
+      case keys.left:
+      case keys.right:
+        if (event.target.role === "tab") {
+          event.preventDefault();
+          if (this.focusTimeoutCleared) {
+            this.determineOrientation(event);
+          }
+        }
+        break;
+    }
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+  }
+  determineOrientation(event) {
+    const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+    const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+    const tabList = this.tabList;
+    this.checkScrollHidden(tabList, leftButton, rightButton);
+    const key = event.keyCode;
+    const vertical = tabList.getAttribute("aria-orientation") == "vertical";
+    let proceed = false;
+    if (vertical) {
+      if (key === keys.up || key === keys.down) {
+        event.preventDefault();
+        proceed = true;
+      }
+    }
+    else {
+      if (key === keys.left || key === keys.right) {
+        proceed = true;
+      }
+    }
+    if (proceed) {
+      this.switchTabOnArrowPress(event);
+    }
+  }
+  switchTabOnArrowPress(event) {
+    const pressed = event.keyCode;
+    if (direction[pressed]) {
+      const target = event.target;
+      const tabs = this.tabButtons;
+      for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i].id === target.id) {
+          if (i > 0) {
+            if (direction[pressed] === -1) {
+              tabs[i - 1].focus();
+              this.focusEventHandler(tabs[i - 1]);
+              break;
+            }
+          }
+          if (i < tabs.length - 1) {
+            if (direction[pressed] === 1) {
+              tabs[i + 1].focus();
+              this.focusEventHandler(tabs[i + 1]);
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+  // Activates any given tab panel
+  activateTab(tab, setFocus) {
+    setFocus = setFocus || true;
+    // Deactivate all other tabs
+    this.deactivateTabs(this.tabButtons);
+    // Remove tabindex attribute
+    tab.removeAttribute("tabindex");
+    tab.setAttribute("aria-selected", "true");
+    const controls = tab.getAttribute("aria-controls");
+    this.el.querySelector(`#${controls}`).removeAttribute("hidden");
+    if (setFocus) {
+      tab.focus();
+    }
+  }
+  // Deactivate all tabs and tab panels
+  deactivateTabs(tabs) {
+    for (let t = 0; t < tabs.length; t++) {
+      tabs[t].setAttribute("tabindex", "-1");
+      tabs[t].setAttribute("aria-selected", "false");
+      tabs[t].removeEventListener("focus", this.focusEventHandler);
+    }
+    const panels = this.tabPanelsState[0];
+    for (let p = 0; p < panels.length; p++) {
+      panels[p].setAttribute("hidden", "hidden");
+    }
+  }
+  focusEventHandler(tab) {
+    const target = tab;
+    this.focusTimeoutCleared = false;
+    focusTimeout = window.setTimeout(() => {
+      window.clearTimeout(focusTimeout);
+      this.focusTimeoutCleared = true;
+      const focused = document.activeElement;
+      if (target === focused) {
+        this.activateTab(target, false);
+      }
+    }, 250);
+  }
+  render() {
+    const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
+    const id = this.tabId.toLowerCase().replace(/\W/g, "-");
+    if (window.location.hash) {
+      const tabHash = window.location.hash.substring(1);
+      const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
+      if (isUrlHashed) {
+        const hashElement = document.getElementById(tabHash);
+        if (hashElement) {
+          this.activateTab(hashElement, true);
+          const hashElementRect = hashElement.getBoundingClientRect();
+          window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
+        }
+      }
+    }
+    return [
+      h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }),
+      h("div", { id: id, class: classComponentAttributes }, h("div", { class: "hy-tablist-container" }, h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-left", size: 16 }))), h("div", { role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
+        this.tabButtonTitles.map((item) => {
+          const title = Object.values(item)[0];
+          const id = title.toLowerCase().replace(/\W/g, "-");
+          const titleAsId = title.toLowerCase().replace(/\W/g, "-");
+          const tabItemHref = "#" + titleAsId;
+          return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
+        })), h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))), h("slot", null)),
+      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
+    ];
+  }
+  get el() { return getElement(this); }
+};
+HyTabs.style = hyTabsCss;
+
+const hyTabsItemCss = ":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}";
+
+const HyTabsItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabTitle = undefined;
+  }
+  render() {
+    const id = this.tabTitle.toLowerCase().replace(/\W/g, "-");
+    return (h("div", { tabindex: "0", role: "tabpanel", id: `${id}-tab`, "aria-labelledby": id, hidden: true }, h("slot", null)));
+  }
+};
+HyTabsItem.style = hyTabsItemCss;
+
+export { HyTabs as hy_tabs, HyTabsItem as hy_tabs_item };
+
+//# sourceMappingURL=hy-tabs_2.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"hy-tabs.hy-tabs-item.entry.js","mappings":"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","names":[],"sources":["./src/components/hy-tabs/hy-tabs.scss?tag=hy-tabs","./src/components/hy-tabs/hy-tabs.tsx","./src/components/hy-tabs-item/hy-tabs-item.scss?tag=hy-tabs-item","./src/components/hy-tabs-item/hy-tabs-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-tabs__container {\n  .hy-tablist-container {\n    border-bottom: 1px solid var(--grayscale-tabs-border);\n    position: relative;\n  }\n\n  .hy-tab-scroll {\n    background-color: rgba(255, 255, 255, 0.8);\n    border: 0;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 4;\n\n    &.is-hidden {\n      display: none;\n      visibility: hidden;\n    }\n\n    &.is-disabled {\n      background-color: var(--grayscale-medium);\n\n      &:hover {\n        cursor: none;\n      }\n    }\n\n    &:focus,\n    &:hover {\n      outline: none;\n      cursor: pointer;\n    }\n\n    span {\n      align-items: center;\n      background-color: var(--grayscale-black);\n      border-radius: 100%;\n      display: inline-flex;\n      height: 32px;\n      justify-content: center;\n      width: 32px;\n\n      svg {\n        fill: var(--grayscale-white);\n        height: 16px;\n        width: 16px;\n      }\n    }\n\n    &__left {\n      left: 0;\n      padding-right: 8px;\n\n      svg {\n        transform: translateX(-1px);\n      }\n    }\n\n    &__right {\n      padding-left: 8px;\n      right: 0;\n\n      svg {\n        transform: translateX(1px);\n      }\n    }\n  }\n\n  [role=\"tablist\"] {\n    display: flex;\n    flex-direction: row;\n    margin: 0 0 -0.1em;\n    overflow: scroll;\n    position: relative;\n    scrollbar-width: none;\n    white-space: nowrap;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  [role=\"tablist\"] a {\n    display: flex;\n    max-width: 47.56%;\n    text-decoration: none;\n    flex-shrink: 0;\n\n    &:not(:first-of-type) {\n      margin-left: 6px;\n    }\n\n    @include breakpoint($narrow) {\n      max-width: 35.37%;\n    }\n\n    @include breakpoint($wide) {\n      max-width: 23.13%;\n    }\n\n    @include breakpoint($extrawide) {\n      max-width: 23.03%;\n    }\n  }\n\n  [role=\"tab\"] {\n    align-items: stretch;\n    background-color: transparent;\n    border: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    margin-bottom: 6px;\n    padding: 0;\n\n    > span {\n      @include font-size(14px, 14px);\n      @include font-weight($bold);\n      align-items: center;\n      background-color: var(--grayscale-background-box);\n      border: 0;\n      color: var(--link-blue);\n      display: flex;\n      font-family: var(--main-font-family);\n      hyphens: auto;\n      letter-spacing: -0.5px;\n      padding: 8px 8px 7px;\n      pointer-events: none;\n      position: relative;\n      text-align: left;\n      white-space: normal;\n      word-break: break-word;\n\n      @include breakpoint($narrow) {\n        @include font-size(16px, 18px);\n        padding: 16px 12px 10px;\n      }\n\n      @include breakpoint($extrawide) {\n        @include font-size(18px, 20px);\n        letter-spacing: -0.6px;\n        padding: 16px 16px 14px;\n      }\n\n      @supports (overflow-wrap: anywhere) {\n        overflow-wrap: anywhere;\n      }\n\n      overflow-wrap: break-word;\n\n      @supports (overflow-wrap: anywhere) {\n        overflow-wrap: anywhere;\n      }\n\n      overflow-wrap: break-word;\n    }\n  }\n\n  // No sidebar\n  [role=\"tab\"].large {\n    @include breakpoint($extrawide) {\n      margin: 0 12px 0 0;\n    }\n  }\n\n  [role=\"tab\"][aria-selected=\"true\"] {\n    border-bottom-width: 0;\n    border: 1px solid var(--grayscale-dark);\n    margin-bottom: 0;\n    z-index: 3;\n\n    > span {\n      background-color: var(--grayscale-white);\n      color: var(--grayscale-black);\n      padding-bottom: 13px;\n\n      @include breakpoint($narrow) {\n        padding-bottom: 16px;\n      }\n\n      @include breakpoint($extrawide) {\n        padding-bottom: 20px;\n      }\n\n      &:before {\n        background-color: var(--grayscale-white);\n        bottom: 0;\n        content: \"\";\n        height: 4px;\n        left: 0;\n        position: absolute;\n        right: 0;\n        transform: translateY(50%);\n      }\n\n      &:after {\n        background-color: var(--grayscale-black);\n        bottom: 0;\n        content: \"\";\n        height: 4px;\n        left: 8px;\n        position: absolute;\n        right: 8px;\n      }\n    }\n  }\n\n  [role=\"tab\"]:hover {\n    border-radius: 0;\n    color: inherit;\n    cursor: pointer;\n    text-decoration: none;\n\n    span {\n      background-color: var(--hover-gray);\n      color: var(--brand-main-active);\n    }\n  }\n\n  [role=\"tabpanel\"] {\n    border: 1px solid var(--grayscale-dark);\n    padding: 28px 12px;\n    position: relative;\n    z-index: 2;\n\n    @include breakpoint($narrow) {\n      padding: 38px 15px;\n    }\n\n    @include breakpoint($wide) {\n      padding: 40px 20px;\n    }\n  }\n\n  [role=\"tabpanel\"]:focus {\n    outline: 1px solid var(--brand-main-active);\n  }\n}\n","import {Component, ComponentInterface, h, Prop, State, Listen, Element} from \"@stencil/core\";\n// For easy reference\nlet keys = {\n  end: 35,\n  home: 36,\n  left: 37,\n  up: 38,\n  right: 39,\n  down: 40,\n  delete: 46,\n};\n\n// Add or substract depending on key pressed\nlet direction = {\n  37: -1,\n  38: -1,\n  39: 1,\n  40: 1,\n};\nlet checkTimeout;\nlet focusTimeout;\nlet scrollTimeout;\n\n@Component({\n  tag: \"hy-tabs\",\n  styleUrl: \"hy-tabs.scss\",\n  shadow: false,\n})\nexport class HyTabs implements ComponentInterface {\n  @Prop() tabId?: string;\n  @Prop() tabListLabel: string = \"\";\n  @State() focusTimeoutCleared: boolean = true;\n  @State() tabButtonTitles: object[];\n  @State() tabPanelsState: NodeListOf<Element>[];\n  @State() tabButtons: NodeListOf<Element>[];\n  @State() tabList: NodeListOf<Element>[];\n  @Element() el: HTMLElement;\n  @Prop() headerstyle: string = \"common\";\n\n  componentWillLoad() {\n    const tabItems = this.el.querySelectorAll(\"hy-tabs-item\");\n    if (tabItems) {\n      this.tabButtonTitles = Array.from(tabItems).map((panel) => {\n        return {\n          title: panel.getAttribute(\"tab-title\"),\n          id: panel.getAttribute(\"tab-title\").toLowerCase().replace(/\\W/g, \"-\"),\n        };\n      });\n    }\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    const tabContainer = this.el.querySelector(\".hy-tabs__container\") as any;\n\n    if (tabContainer) {\n      this.generateArrays(tabContainer);\n\n      const leftButton = this.el.querySelectorAll(\".hy-tab-scroll__left\")[0];\n      const rightButton = this.el.querySelectorAll(\".hy-tab-scroll__right\")[0];\n      const tabList = this.tabList as any;\n\n      this.checkScrollHidden(tabList, leftButton, rightButton);\n\n      tabList.addEventListener(\n        \"scroll\",\n        () => {\n          scrollTimeout = setTimeout(() => {\n            window.clearTimeout(scrollTimeout);\n            this.checkScrollHidden(tabList, leftButton, rightButton);\n          }, 250);\n        },\n        false\n      );\n\n      if (tabList.offSetWidth <= document.body.scrollWidth) {\n        leftButton.classList.add(\"is-hidden\");\n        rightButton.classList.add(\"is-hidden\");\n      }\n\n      const oneTabWidth = 250;\n      rightButton.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        rightButton.classList.add(\"is-disabled\");\n        tabList.scrollBy({\n          top: 0,\n          left: +oneTabWidth,\n          behavior: \"smooth\",\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          this.checkScrollHidden(tabList, leftButton, rightButton);\n          rightButton.classList.remove(\"is-disabled\");\n        }, 250);\n      });\n\n      leftButton.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        leftButton.classList.add(\"is-disabled\");\n        tabList.scrollBy({\n          top: 0,\n          left: -oneTabWidth,\n          behavior: \"smooth\",\n        });\n        checkTimeout = window.setTimeout(() => {\n          window.clearTimeout(checkTimeout);\n          this.checkScrollHidden(tabList, leftButton, rightButton);\n          leftButton.classList.remove(\"is-disabled\");\n        }, 250);\n      });\n    }\n  }\n\n  generateArrays(tc) {\n    this.tabList = tc.querySelectorAll('[role=\"tablist\"]')[0] as any;\n    this.tabButtons = tc.querySelectorAll('[role=\"tab\"]') as any;\n    this.tabPanelsState = [tc.querySelectorAll('[role=\"tabpanel\"]')] as any;\n\n    if (this.tabButtons.length > 0) {\n      this.addListeners(this.tabButtons, 1);\n      this.activateTab(this.tabButtons[0], true);\n    }\n  }\n\n  addListeners(tabs, index) {\n    if (tabs.length > 1) {\n      for (let i = 0; i < tabs.length; ++i) {\n        tabs[index].addEventListener(\"click\", this.clickEventListener);\n        tabs[index].addEventListener(\"keydown\", this.keydownEventListener);\n        //tabs[index].addEventListener('keyup', this.keyupEventListener);\n        tabs[index].index = index;\n      }\n    }\n  }\n\n  checkScrollHidden(tablist, leftButton, rightButton) {\n    if (tablist.scrollLeft === 0) {\n      leftButton.classList.add(\"is-hidden\");\n    } else {\n      leftButton.classList.remove(\"is-hidden\");\n    }\n    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {\n      rightButton.classList.add(\"is-hidden\");\n    } else {\n      rightButton.classList.remove(\"is-hidden\");\n    }\n  }\n\n  // When a tab is clicked, activateTab is fired to activate it\n  @Listen(\"click\")\n  clickEventListener(event) {\n    if (event) {\n      const target = event.target;\n      const tabs = this.tabButtonTitles;\n      if (tabs) {\n        tabs.forEach((tab) => {\n          const id = Object.values(tab)[1];\n          if (id === target.id) {\n            this.activateTab(target, true);\n          }\n        });\n        event.stopPropagation();\n        event.stopImmediatePropagation();\n      }\n    }\n  }\n\n  @Listen(\"keydown\")\n  keydownEventListener(event) {\n    const key = event.keyCode;\n    const tabs = this.tabButtonTitles as any;\n    switch (key) {\n      case keys.end:\n        event.preventDefault();\n        // Activate last tab\n        this.activateTab(tabs[tabs.length - 1], true);\n        break;\n      case keys.home:\n        event.preventDefault();\n        // Activate first tab\n        this.activateTab(tabs[0], true);\n        break;\n\n      // Up and down are in keydown\n      // because we need to prevent page scroll >:)\n      case keys.up:\n      case keys.down:\n        if (this.focusTimeoutCleared) {\n          this.determineOrientation(event);\n        }\n        break;\n    }\n  }\n\n  @Listen(\"keydown\")\n  keyupEventListener(event) {\n    const key = event.keyCode;\n\n    switch (key) {\n      case keys.left:\n      case keys.right:\n        if (event.target.role === \"tab\") {\n          event.preventDefault();\n          if (this.focusTimeoutCleared) {\n            this.determineOrientation(event);\n          }\n        }\n        break;\n    }\n    event.stopPropagation();\n    event.stopImmediatePropagation();\n  }\n\n  determineOrientation(event) {\n    const leftButton = this.el.querySelectorAll(\".hy-tab-scroll__left\")[0];\n    const rightButton = this.el.querySelectorAll(\".hy-tab-scroll__right\")[0];\n    const tabList = this.tabList as any;\n\n    this.checkScrollHidden(tabList, leftButton, rightButton);\n    const key = event.keyCode;\n    const vertical = tabList.getAttribute(\"aria-orientation\") == \"vertical\";\n    let proceed = false;\n    if (vertical) {\n      if (key === keys.up || key === keys.down) {\n        event.preventDefault();\n        proceed = true;\n      }\n    } else {\n      if (key === keys.left || key === keys.right) {\n        proceed = true;\n      }\n    }\n\n    if (proceed) {\n      this.switchTabOnArrowPress(event);\n    }\n  }\n\n  switchTabOnArrowPress(event) {\n    const pressed = event.keyCode;\n\n    if (direction[pressed]) {\n      const target = event.target;\n      const tabs = this.tabButtons as any;\n\n      for (let i = 0; i < tabs.length; i++) {\n        if (tabs[i].id === target.id) {\n          if (i > 0) {\n            if (direction[pressed] === -1) {\n              tabs[i - 1].focus();\n              this.focusEventHandler(tabs[i - 1]);\n              break;\n            }\n          }\n          if (i < tabs.length - 1) {\n            if (direction[pressed] === 1) {\n              tabs[i + 1].focus();\n              this.focusEventHandler(tabs[i + 1]);\n              break;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Activates any given tab panel\n  activateTab(tab, setFocus) {\n    setFocus = setFocus || true;\n    // Deactivate all other tabs\n    this.deactivateTabs(this.tabButtons);\n    // Remove tabindex attribute\n    tab.removeAttribute(\"tabindex\");\n    tab.setAttribute(\"aria-selected\", \"true\");\n    const controls = tab.getAttribute(\"aria-controls\");\n    this.el.querySelector(`#${controls}`).removeAttribute(\"hidden\");\n    if (setFocus) {\n      tab.focus();\n    }\n  }\n\n  // Deactivate all tabs and tab panels\n  deactivateTabs(tabs) {\n    for (let t = 0; t < tabs.length; t++) {\n      tabs[t].setAttribute(\"tabindex\", \"-1\");\n      tabs[t].setAttribute(\"aria-selected\", \"false\");\n      tabs[t].removeEventListener(\"focus\", this.focusEventHandler);\n    }\n    const panels = this.tabPanelsState[0];\n    for (let p = 0; p < panels.length; p++) {\n      panels[p].setAttribute(\"hidden\", \"hidden\");\n    }\n  }\n\n  @Listen(\"focus\")\n  focusEventHandler(tab) {\n    const target = tab;\n    this.focusTimeoutCleared = false;\n    focusTimeout = window.setTimeout(() => {\n      window.clearTimeout(focusTimeout);\n      this.focusTimeoutCleared = true;\n      const focused = document.activeElement;\n      if (target === focused) {\n        this.activateTab(target, false);\n      }\n    }, 250);\n  }\n\n  render() {\n    const classComponentAttributes = [\"hy-tabs__container\", `hy-tabs__container__${this.headerstyle}`].join(\" \");\n    const id = this.tabId.toLowerCase().replace(/\\W/g, \"-\");\n\n    if (window.location.hash) {\n      const tabHash = window.location.hash.substring(1);\n      const isUrlHashed = this.tabButtonTitles.some((tab) => tab[\"id\"] === tabHash);\n\n      if (isUrlHashed) {\n        const hashElement = document.getElementById(tabHash);\n\n        if (hashElement) {\n          this.activateTab(hashElement, true);\n          const hashElementRect = hashElement.getBoundingClientRect();\n          window.scrollTo({top: window.scrollY + hashElementRect.top - 200, behavior: \"smooth\"});\n        }\n      }\n    }\n\n    return [\n      <hy-box pt=\"1.25, 1.25, 1.5, 2.5\" />,\n      <div id={id} class={classComponentAttributes}>\n        <div class=\"hy-tablist-container\">\n          <button tabindex=\"-1\" class=\"hy-tab-scroll hy-tab-scroll__left is-hidden\" aria-hidden=\"true\">\n            <span>\n              <hy-icon icon={\"hy-icon-caret-left\"} size={16} />\n            </span>\n          </button>\n          <div role=\"tablist\" aria-label={this.tabListLabel}>\n            {this.tabButtonTitles &&\n              this.tabButtonTitles.map((item) => {\n                const title = Object.values(item)[0];\n                const id = title.toLowerCase().replace(/\\W/g, \"-\");\n\n                const titleAsId = title.toLowerCase().replace(/\\W/g, \"-\");\n                const tabItemHref = \"#\" + titleAsId;\n\n                return (\n                  <a href={tabItemHref} tabindex=\"-1\">\n                    <button\n                      aria-selected=\"false\"\n                      aria-controls={`${id}-tab`}\n                      class={this.headerstyle}\n                      role=\"tab\"\n                      id={id}\n                    >\n                      <span>{title}</span>\n                    </button>\n                  </a>\n                );\n              })}\n          </div>\n          <button tabindex=\"-1\" class=\"hy-tab-scroll hy-tab-scroll__right\" aria-hidden=\"true\">\n            <span>\n              <hy-icon icon={\"hy-icon-caret-right\"} size={16} />\n            </span>\n          </button>\n        </div>\n        <slot></slot>\n      </div>,\n      <hy-box mb=\"1.75, 1.75, 2, 2.5\" />,\n    ];\n  }\n}\n",":host {\n  display: block;\n}\n","import {Component, h, Prop} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-tabs-item\",\n  styleUrl: \"hy-tabs-item.scss\",\n  shadow: false,\n})\nexport class HyTabsItem {\n  @Prop() tabTitle?: string;\n\n  render() {\n    const id = this.tabTitle.toLowerCase().replace(/\\W/g, \"-\");\n\n    return (\n      <div tabindex=\"0\" role=\"tabpanel\" id={`${id}-tab`} aria-labelledby={id} hidden>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-f84f2a7d.js';
+
+const hyTagCss = ":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-tag{margin:0 4px 4px 0}.hy-tag span{font-size:0.75rem;line-height:16px;font-weight:700;background-color:var(--grayscale-dark);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.07px;padding:4px 8px;text-transform:uppercase}";
+
+const HyTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-tag"].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, h("span", null, h("slot", null)))));
+  }
+};
+HyTag.style = hyTagCss;
+
+export { HyTag as hy_tag };
+
+//# sourceMappingURL=hy-tag.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"hy-tag.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,w7CAAw7C;;MCO57C,KAAK;;;;EAChB,MAAM;IACJ,MAAM,eAAe,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE7C,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,IACzB,gBACE,eAAa,CACR,CACH,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/hy-tag/hy-tag.scss?tag=hy-tag&encapsulation=shadow","./src/components/hy-tag/hy-tag.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hy-tag {\n  margin: 0 4px 4px 0;\n\n  span {\n    @include font-size(12px, 16px);\n    @include font-weight($bold);\n\n    background-color: var(--grayscale-dark);\n    color: var(--grayscale-white);\n    font-family: var(--main-font-family);\n    letter-spacing: -0.07px;\n    padding: 4px 8px;\n    text-transform: uppercase;\n  }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"hy-tag\",\n  styleUrl: \"hy-tag.scss\",\n  shadow: true,\n})\nexport class HyTag {\n  render() {\n    const classAttributes = [\"hy-tag\"].join(\" \");\n\n    return (\n      <Host>\n        <div class={classAttributes}>\n          <span>\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}