@itcenteratunihelsinki/huds-lib 0.5.43 → 0.5.46

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

@@ -1,41 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-083c8c8a.js';
-import { j as jsonParserWorker } from './globalScript-92c6b812.js';
-
-const hyAnchorLinkListCss = ":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:#f9a21a;--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}:host(.hy-anchor-link-list){border:1px solid var(--brand-main);width:100%}@media (min-width: 30rem){:host(.hy-anchor-link-list){margin-bottom:1.75rem}}@media (min-width: 48rem){:host(.hy-anchor-link-list){margin-bottom:1.75rem}}@media (min-width: 60rem){:host(.hy-anchor-link-list){margin-bottom:2rem}}@media (min-width: 1601px){:host(.hy-anchor-link-list){margin-bottom:2.5rem}}:host(.hy-anchor-link-list).is-open{border:1px solid var(--grayscale-dark)}.hy-anchor-link-list__button{border:none;background:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px 20px;width:100%}@media (min-width: 48rem){.hy-anchor-link-list__button{padding:18px 20px}}.hy-anchor-link-list__button:hover{cursor:pointer}.hy-anchor-link-list__button.is-open .label-close-icon svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hy-anchor-link-list__button--title{font-size:1.0625rem;line-height:20px;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brand-main);font-family:var(--main-font-family);letter-spacing:-0.32px}.hy-anchor-link-list__button--title svg{margin-right:12px}.hy-anchor-link-list__button--label{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);letter-spacing:-0.3px;text-align:right}.hy-anchor-link-list__button--label svg{margin-left:7px}.hy-anchor-link-list__container{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:18px 0;margin:0 20px}.hy-anchor-link-list__container.is-open{display:-webkit-box;display:-ms-flexbox;display:flex;border-top:1px solid var(--grayscale-dark)}.hy-anchor-link-list__item{font-size:1rem;line-height:20px;font-weight:600;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);font-family:var(--main-font-family);font-size:16px;font-weight:600;letter-spacing:-0.5px;line-height:20px;margin-bottom:16px;text-decoration:none}.hy-anchor-link-list__item:hover{cursor:pointer;text-decoration:underline}.hy-anchor-link-list__item svg{margin-right:12px}";
-
-const HyAnchorLinkList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isOpen = false;
-  }
-  async componentWillLoad() {
-    this._anchorItems = await jsonParserWorker(this.anchorItems);
-  }
-  handleLinkClick(e) {
-    const targetId = e.target.getAttribute('href');
-    if (targetId) {
-      const targetElement = document.getElementById(targetId.substring(1));
-      const targetRect = targetElement.getBoundingClientRect();
-      window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: 'smooth' });
-    }
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  render() {
-    const classAttributes = ['hy-anchor-link-list'].join(' ');
-    const buttonClasses = {
-      'hy-anchor-link-list__button': true,
-      'is-open': this.isOpen,
-    };
-    const containerClasses = {
-      'hy-anchor-link-list__container': true,
-      'is-open': this.isOpen,
-    };
-    const items = this._anchorItems;
-    return (h(Host, { class: classAttributes }, h("button", { "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, h("span", { class: "hy-anchor-link-list__button--title" }, h("hy-icon", { icon: 'hy-icon-bullet-list', size: 18, fill: 'var(--brand-main)' }), this.listTitle), h("span", { class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, h("hy-icon", { class: "label-close-icon", icon: 'hy-icon-caret-down', size: 16, fill: 'var(--brand-main)' }))), h("div", { "aria-hidden": this.isOpen ? 'false' : 'true', class: containerClasses }, items &&
-      items.map((item) => (h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, h("hy-icon", { icon: 'hy-icon-arrow-down', size: 12, fill: 'var(--brand-main)' }), item.title))))));
-  }
-};
-HyAnchorLinkList.style = hyAnchorLinkListCss;
-
-export { HyAnchorLinkList as hy_anchor_link_list };

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

@@ -1,17 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-083c8c8a.js';
-
-const hyBadgeCss = ":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:#f9a21a;--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}span.hy-badge{border-radius:15px;padding:0.25rem 1rem;text-align:center;color:black;font-weight:bold;font-family:var(--main-font-family);font-size:0.6rem}span.hy-badge.primary{background-color:var(--brand-main-light);color:white}span.hy-badge.warn{background-color:var(--additional-red-dark);color:white}span.hy-badge.success{background-color:var(--additional-green-dark);color:white}span.hy-badge.disabled{background-color:var(--grayscale-medium-dark);color:black}";
-
-const HyBadge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = 'primary';
-  }
-  render() {
-    const classAttributes = ['hy-badge', this.variant];
-    return (h(Host, null, h("span", { class: classAttributes.join(' ') }, h("slot", null))));
-  }
-};
-HyBadge.style = hyBadgeCss;
-
-export { HyBadge as hy_badge };

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

@@ -1,41 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-083c8c8a.js';
-import { b as CtaLinkButtonVariants } from './utils-708bbefe.js';
-
-const hyBannerCss = ":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:#f9a21a;--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-banner{background-color:var(--brand-main-light);padding:28px 0 24px 0}@media (min-width: 30rem){.hy-banner{padding:40px 0 32px 0}}@media (min-width: 60rem){.hy-banner{padding:48px 0 40px 0;margin-left:8px;margin-right:8px}}@media (min-width: 75.0625rem){.hy-banner{margin-left:0;margin-right:0}}@media (min-width: 1601px){.hy-banner{padding:64px 32px 48px 32px;margin-left:-20px;margin-right:-20px}}@media (min-width: 1664px){.hy-banner{margin-left:0;margin-right:0}}@media (min-width: 75.0625rem){.hy-banner__large{padding:64px 0 48px 0;margin-left:-20px;margin-right:-20px}}@media (min-width: 1344px){.hy-banner__large{margin-left:0;margin-right:0}}@media (min-width: 60rem){.hy-banner__info-container{margin-left:-8px;margin-right:-8px}}@media (min-width: 1601px){.hy-banner__info-container{margin-left:0;margin-right:0}}.hy-banner__info-container__title{font-size:1.5rem;line-height:24px;color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.8px;margin-bottom:16px;text-transform:uppercase}@media (min-width: 30rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title{font-size:2rem;line-height:32px;letter-spacing:-1.07px;margin-bottom:24px;max-width:92%}}@media (min-width: 1601px){.hy-banner__info-container__title{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__title__large{font-size:2.25rem;line-height:36px;letter-spacing:-1.2px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__title__large{font-size:2.5rem;line-height:40px;letter-spacing:-1.33px;margin-bottom:32px}}.hy-banner__info-container__description{color:var(--grayscale-white);font-family:var(--main-font-family);font-weight:500;font-size:14px;letter-spacing:-0.7px;line-height:20px;margin-bottom:24px}@media (min-width: 30rem){.hy-banner__info-container__description{font-size:1rem;line-height:24px;letter-spacing:-0.08px;margin-bottom:28px;max-width:92%}}@media (min-width: 60rem){.hy-banner__info-container__description{margin-bottom:32px}}@media (min-width: 1601px){.hy-banner__info-container__description{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 75.0625rem){.hy-banner__info-container__description__large{font-size:1.125rem;line-height:24px;letter-spacing:-0.09px;margin-bottom:36px;max-width:83%}}@media (min-width: 1601px){.hy-banner__info-container__description__large{margin-bottom:44px}}";
-
-const HyBanner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.textDescription = null;
-    this.headerstyle = 'common';
-    this.isExternal = false;
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
-      }
-    }
-  }
-  render() {
-    const hyBannerClass = ['hy-banner', `hy-banner__${this.headerstyle}`, this.headerstyle].join(' ');
-    const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
-    const hyBannerTitle = [
-      'hy-banner__info-container__title',
-      `hy-banner__info-container__title__${this.headerstyle}`,
-      this.headerstyle,
-    ].join(' ');
-    const hyBannerDescription = [
-      'hy-banner__info-container__description',
-      `hy-banner__info-container__description__${this.headerstyle}`,
-      this.headerstyle,
-    ].join(' ');
-    const variant = CtaLinkButtonVariants.onBlueBkgd;
-    return (h(Host, null, h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), h("div", { class: hyBannerClass }, h("hy-main-content-wrapper", null, h("div", { class: hyBannerWrapperClass }, h("div", { class: hyBannerTitle }, this.textTitle), h("div", { class: hyBannerDescription }, this.textDescription), this.url && (h("div", { class: "hy-banner__info-container__link" }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant })))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
-  }
-  get el() { return getElement(this); }
-};
-HyBanner.style = hyBannerCss;
-
-export { HyBanner as hy_banner };

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

@@ -1,28 +0,0 @@
-import { r as registerInstance, h } from './index-083c8c8a.js';
-import { c as css } from './emotion.esm-87895ee1.js';
-
-const baselineCss = "div.hy-baseline{display:block}";
-
-const createCss = (value) => {
-  return css `
-    > * + * {
-      margin-top: ${value}rem;
-      display: block;
-    }
-  `;
-};
-const Baseline = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Top margin to be added to all but first element. Amount of rem:s
-     */
-    this.margin = 1;
-  }
-  render() {
-    return (h("div", { class: createCss(this.margin) }, h("slot", null)));
-  }
-};
-Baseline.style = baselineCss;
-
-export { Baseline as hy_baseline };

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

@@ -1,29 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-083c8c8a.js';
-import { c as css } from './emotion.esm-87895ee1.js';
-
-const hyBoxContainerCss = ":host{display:block}";
-
-const HyBoxContainer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Should the items wrap to new rows.
-     */
-    this.wrap = true;
-    /**
-     * Should the container have a max width of 90rems
-     */
-    this.maxWidth = true;
-  }
-  render() {
-    return (h(Host, { style: { width: '100%', display: 'flex', flex: '1', justifyContent: 'center' } }, h("div", { class: css `
-            display: flex;
-            width: 100%;
-            flex-wrap: ${this.wrap ? 'wrap' : 'no-wrap'};
-            max-width: ${this.maxWidth ? '90rem' : '100%'};
-          ` }, h("slot", null))));
-  }
-};
-HyBoxContainer.style = hyBoxContainerCss;
-
-export { HyBoxContainer as hy_box_container };

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

@@ -1,161 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-083c8c8a.js';
-import { c as css } from './emotion.esm-87895ee1.js';
-
-const hyBoxCss = ":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:#f9a21a;--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}";
-
-/*
-Example of using hy-box:
-<hy-box mb="1.75, 1.75, 2, 2.5" />
-Where mb = margin-bottom,
-mobile up to 30rem: 1.75rem (mb[0])
-tablet, 30rem - 60rem: 1.75rem (mb[1])
-wide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])
-xlarge, > 100.0625: 2.5rem (mb[3])
-* */
-const toRemValue = (val) => {
-  return typeof val === 'number' ? `${val}rem` : undefined;
-};
-const breakpoints = ['30rem', '60rem', '75.0625rem', '100.0625rem'];
-/*
-Default - mobile
-mq[0] - tablet
-mq[1] - wide, >960px
-mq[2] - extrawide, > 1200px
-mq[3] - xlarge, >1600px
-* */
-const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
-const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align }) => {
-  const last = width[width.length - 1];
-  return css `
-    padding-top: ${toRemValue(pt[0])};
-    padding-right: ${toRemValue(pr[0])};
-    padding-bottom: ${toRemValue(pb[0])};
-    padding-left: ${toRemValue(pl[0])};
-    margin-top: ${toRemValue(mt[0])};
-    margin-right: ${toRemValue(mr[0])};
-    margin-bottom: ${toRemValue(mb[0])};
-    margin-left: ${toRemValue(ml[0])};
-    height: ${toRemValue(h)};
-    background-color: ${!!bg ? `var(--${bg})` : 'transparent'};
-    width: ${width[0]};
-    display: flex;
-    justify-content: ${justify || 'flex-start'};
-    align-items: ${align || 'flex-start'};
-
-    ${mq[0]} {
-      width: ${width[1]};
-
-      padding-top: ${toRemValue(pt[1])};
-      padding-right: ${toRemValue(pr[1])};
-      padding-bottom: ${toRemValue(pb[1])};
-      padding-left: ${toRemValue(pl[1])};
-
-      margin-top: ${toRemValue(mt[1])};
-      margin-right: ${toRemValue(mr[1])};
-      margin-bottom: ${toRemValue(mb[1])};
-      margin-left: ${toRemValue(ml[1])};
-    }
-    ${mq[1]} {
-      width: ${width[2] || last};
-
-      padding-top: ${toRemValue(pt[2])};
-      padding-right: ${toRemValue(pr[2])};
-      padding-bottom: ${toRemValue(pb[2])};
-      padding-left: ${toRemValue(pl[2])};
-
-      margin-top: ${toRemValue(mt[2])};
-      margin-right: ${toRemValue(mr[2])};
-      margin-bottom: ${toRemValue(mb[2])};
-      margin-left: ${toRemValue(ml[2])};
-    }
-    ${mq[2]} {
-      width: ${width[3] || last};
-
-      padding-top: ${hasSidebar ? `${toRemValue(pt[2])}` : `${toRemValue(pt[3])}`};
-      padding-right: ${hasSidebar ? `${toRemValue(pr[2])}` : `${toRemValue(pr[3])}`};
-      padding-bottom: ${hasSidebar ? `${toRemValue(pb[2])}` : `${toRemValue(pb[3])}`};
-      padding-left: ${hasSidebar ? `${toRemValue(pl[2])}` : `${toRemValue(pl[3])}`};
-
-      margin-top: ${hasSidebar ? `${toRemValue(mt[2])}` : `${toRemValue(mt[3])}`};
-      margin-right: ${hasSidebar ? `${toRemValue(mr[2])}` : `${toRemValue(mr[3])}`};
-      margin-bottom: ${hasSidebar ? `${toRemValue(mb[2])}` : `${toRemValue(mb[3])}`};
-      margin-left: ${hasSidebar ? `${toRemValue(ml[2])}` : `${toRemValue(ml[3])}`};
-    }
-    ${mq[3]} {
-      width: ${width[4] || last};
-
-      padding-top: ${toRemValue(pt[3])};
-      padding-right: ${toRemValue(pr[3])};
-      padding-bottom: ${toRemValue(pb[3])};
-      padding-left: ${toRemValue(pl[3])};
-
-      margin-top: ${toRemValue(mt[3])};
-      margin-right: ${toRemValue(mr[3])};
-      margin-bottom: ${toRemValue(mb[3])};
-      margin-left: ${toRemValue(ml[3])};
-    }
-  `;
-};
-const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(',').map((v) => `${v.trim()}`).map((v) => parseFloat(v));
-const HyBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.headerstyle = 'common';
-    /**
-     * Value for horisontal alignment (justify-content)
-     */
-    this.justify = 'flex-start';
-    /**
-     * value for vertical alignment (align-items)
-     */
-    this.align = 'baseline';
-    /**
-     * background color. Must use one of css variable names from color tokens
-     */
-    this.bg = 'transparent';
-    /**
-     * Responsive width. Must be a comma separated string of percentage values for breakpoints. First item is the default value.
-     */
-    this.width = '100';
-  }
-  componentWillLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
-      }
-    }
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    const pt = (_b = (_a = toNumArray(this.pt)) !== null && _a !== void 0 ? _a : toNumArray(this.p)) !== null && _b !== void 0 ? _b : [0];
-    const pb = (_d = (_c = toNumArray(this.pb)) !== null && _c !== void 0 ? _c : toNumArray(this.p)) !== null && _d !== void 0 ? _d : [0];
-    const pr = (_f = (_e = toNumArray(this.pr)) !== null && _e !== void 0 ? _e : toNumArray(this.p)) !== null && _f !== void 0 ? _f : [0];
-    const pl = (_h = (_g = toNumArray(this.pl)) !== null && _g !== void 0 ? _g : toNumArray(this.p)) !== null && _h !== void 0 ? _h : [0];
-    const mt = (_k = (_j = toNumArray(this.mt)) !== null && _j !== void 0 ? _j : toNumArray(this.m)) !== null && _k !== void 0 ? _k : [0];
-    const mb = (_m = (_l = toNumArray(this.mb)) !== null && _l !== void 0 ? _l : toNumArray(this.m)) !== null && _m !== void 0 ? _m : [0];
-    const mr = (_p = (_o = toNumArray(this.mr)) !== null && _o !== void 0 ? _o : toNumArray(this.m)) !== null && _p !== void 0 ? _p : [0];
-    const ml = (_r = (_q = toNumArray(this.ml)) !== null && _q !== void 0 ? _q : toNumArray(this.m)) !== null && _r !== void 0 ? _r : [0];
-    const hasSidebar = this.headerstyle == 'common';
-    return (h(Host, { class: createCssClass({
-        hasSidebar,
-        pt,
-        pl,
-        pr,
-        pb,
-        mt,
-        ml,
-        mr,
-        mb,
-        h: this.h,
-        bg: this.bg,
-        width: this.width.split(',').map((v) => `${v.trim()}%`),
-        justify: this.justify,
-        align: this.align,
-      }) }, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-HyBox.style = hyBoxCss;
-
-export { HyBox as hy_box };

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

@@ -1,227 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-083c8c8a.js';
-import { B as BreadcrumbVariants } from './utils-708bbefe.js';
-import { j as jsonParserWorker } from './globalScript-92c6b812.js';
-
-const hyBreadcrumbsCss = ":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:#f9a21a;--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-breadcrumbs{display:inline-block;position:relative;width:auto}.hy-breadcrumbs.is-condensed{width:100%}.hy-breadcrumbs ol{margin:0;padding:0}.hy-breadcrumbs .breadcrumb-container{color:var(--grayscale-dark);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:var(--main-font-family);list-style-type:none;margin:0;padding:20px 0 16px}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-container{padding:24px 0 20px}}@media (min-width: 75.0625rem){.hy-breadcrumbs .breadcrumb-container{padding:32px 0 24px}}.hy-breadcrumbs .breadcrumb-item{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-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.hy-breadcrumbs .breadcrumb-item a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--link-blue);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;height:44px;padding-left:6px;padding-right:6px;position:relative;text-decoration:none}.hy-breadcrumbs .breadcrumb-item a.default{font-size:0.875rem;line-height:18px;font-weight:600;letter-spacing:-0.5px}@media (min-width: 75.0625rem){.hy-breadcrumbs .breadcrumb-item a.default{font-size:1rem;line-height:20px}}.hy-breadcrumbs .breadcrumb-item:hover a{color:var(--brand-main);text-decoration:underline}.hy-breadcrumbs .breadcrumb-item:focus{outline:auto}.hy-breadcrumbs .breadcrumb-item.hidden{display:none}.hy-breadcrumbs .breadcrumb-item.home hy-icon.default{margin-bottom:4px}.hy-breadcrumbs .breadcrumb-item.home hy-icon.default svg{fill:var(--brand-main-light);stroke:var(--brand-main-light)}.hy-breadcrumbs .breadcrumb-item.home:hover svg{fill:var(--brand-main) !important;stroke:var(--brand-main) !important}.hy-breadcrumbs .breadcrumb-item.main{min-width:0}.hy-breadcrumbs .breadcrumb-item.main a{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-breadcrumbs .breadcrumb-item__more{display:none;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-breadcrumbs .breadcrumb-item__more.visible{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-breadcrumbs .breadcrumb-item__more .breadcrumb-item-caret:hover{cursor:default}.hy-breadcrumbs .breadcrumb-item-caret svg{fill:var(--grayscale-dark)}.hy-breadcrumbs .breadcrumb-item-dropdown-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;margin:0;padding-left:6px;padding-right:6px;cursor:pointer}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-white);border-radius:3px;border:2px solid var(--brand-main-light);color:var(--brand-main-light);display:-webkit-box;display:-ms-flexbox;display:flex;height:20px;padding:0 6px;pointer-events:none}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content>span{position:relative;width:20px;height:10px}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content>span:after{background-color:var(--grayscale-black);border-radius:50%;-webkit-box-shadow:0 0 0 1px var(--grayscale-black), -6px 0 0 1px var(--grayscale-black), 6px 0 0 1px var(--grayscale-black);box-shadow:0 0 0 1px var(--grayscale-black), -6px 0 0 1px var(--grayscale-black), 6px 0 0 1px var(--grayscale-black);content:\"\";height:2px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:2px}.hy-breadcrumbs .breadcrumb-item-dropdown-button .breadcrumb-item-dropdown-button__content hy-icon svg{fill:var(--brand-main-light);margin-left:3px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.hy-breadcrumbs .breadcrumb-item-dropdown-button.is-open .breadcrumb-item-dropdown-button__content{background-color:var(--brand-main-light);color:var(--grayscale-white)}.hy-breadcrumbs .breadcrumb-item-dropdown-button.is-open .breadcrumb-item-dropdown-button__content>span:after{background-color:var(--grayscale-white);-webkit-box-shadow:0 0 0 1px var(--grayscale-white), -6px 0 0 1px var(--grayscale-white), 6px 0 0 1px var(--grayscale-white);box-shadow:0 0 0 1px var(--grayscale-white), -6px 0 0 1px var(--grayscale-white), 6px 0 0 1px var(--grayscale-white);width:2px}.hy-breadcrumbs .breadcrumb-item-dropdown-button.is-open hy-icon svg{fill:var(--grayscale-white);-webkit-transform:rotate(270deg);transform:rotate(270deg)}.hy-breadcrumbs .breadcrumb-hidden-items{display:none;list-style:none;visibility:hidden}.hy-breadcrumbs .breadcrumb-hidden-items__is-open{background:var(--grayscale-white);-webkit-box-shadow:0 0 10px 0 rgba(14, 104, 139, 0.2);box-shadow:0 0 10px 0 rgba(14, 104, 139, 0.2);display:block;left:0;padding:16px 0 20px;position:absolute;right:0;top:calc(100% - 11px);visibility:visible;z-index:5}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-hidden-items__is-open{left:12px;right:auto}}.hy-breadcrumbs .breadcrumb-hidden-items__is-open a.default{display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;margin:0;width:100%;padding:0 16px}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-hidden-items__is-open a.default{padding:0 64px 0 32px}}.hy-breadcrumbs .breadcrumb-item__current{-webkit-box-flex:0;-ms-flex:0 2 auto;flex:0 2 auto;min-width:0}.hy-breadcrumbs .breadcrumb-item__current:hover a{cursor:default;color:var(--grayscale-dark) !important;text-decoration:none !important}.hy-breadcrumbs .breadcrumb-item__current a{color:var(--grayscale-dark);font-family:var(--main-font-family);text-decoration:none;display:block;white-space:nowrap;overflow:hidden;min-height:auto}.hy-breadcrumbs .intermediate{display:-webkit-box;display:-ms-flexbox;display:flex}.hy-breadcrumbs .intermediate.hidden{display:none;visibility:hidden}.hy-breadcrumbs .breadcrumb-item.breadcrumb-item__current a{min-height:0}.hy-breadcrumbs #more,.hy-breadcrumbs .more{display:none;visibility:hidden}.hy-breadcrumbs #more.visible,.hy-breadcrumbs .more.visible{display:-webkit-box;display:-ms-flexbox;display:flex;visibility:visible}.hy-breadcrumbs.large.with-sidebar{display:block;visibility:visible}.hy-breadcrumbs.large.with-sidebar a.large{font-size:1.25rem;line-height:26px;color:var(--grayscale-black);font-weight:700;letter-spacing:-0.6px}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar a.large{font-size:1.625rem;line-height:26px;letter-spacing:-0.8px;font-weight:700}}.hy-breadcrumbs.large.with-sidebar .breadcrumb-item__divider{font-size:1.25rem;line-height:26px}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar .breadcrumb-item__divider{font-size:1.625rem;line-height:26px}}.hy-breadcrumbs.large.with-sidebar .breadcrumb-item-caret svg{fill:var(--grayscale-black)}.hy-breadcrumbs.large.with-sidebar .breadcrumb-container{color:var(--grayscale-black);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:var(--main-font-family);list-style-type:none;margin:0;min-height:64px;overflow:hidden;padding:0}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar .breadcrumb-container{min-height:84px}}.hy-breadcrumbs.large.with-sidebar .breadcrumb-container .breadcrumb-item.home svg{fill:var(--grayscale-black);height:18px;margin-bottom:4px;stroke:var(--grayscale-black);width:18px}@media (min-width: 30rem){.hy-breadcrumbs.large.with-sidebar .breadcrumb-container .breadcrumb-item.home svg{height:24px;margin-bottom:2px;width:24px}}@media (min-width: 75.0625rem){.hy-breadcrumbs.large.with-sidebar{display:none;visibility:hidden}}";
-
-let breadcrumbsWidth = null;
-const HyBreadcrumbs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = BreadcrumbVariants.default;
-    this.headerstyle = 'with-sidebar';
-    this.menuOpen = false;
-  }
-  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 = 'without-sidebar';
-      }
-    }
-    // Set breadcumbs width + paddings.
-    breadcrumbsWidth = this.el.offsetWidth + 64;
-    const layoutContentElement = document.getElementsByClassName('layout-content')[0];
-    const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
-    if (layoutContentElement) {
-      if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
-        moreButton.setAttribute('aria-hidden', 'false');
-        this.adjustBreadcrumbsMenuVisibility();
-      }
-    }
-  }
-  adjustBreadcrumbsMenuVisibility(showMenu = true) {
-    // Show ... and Hide intermediate links
-    if (!showMenu) {
-      this.closeMoreMenu();
-    }
-    const crumbContainer = document.querySelectorAll('.hy-breadcrumbs')[0];
-    const moreDotsItem = document.querySelectorAll('#more')[0];
-    const moreDotsItemWrapper = document.querySelectorAll('.breadcrumb-item__more')[0];
-    if (moreDotsItem) {
-      if (showMenu) {
-        crumbContainer.classList.add('is-condensed');
-        moreDotsItem.classList.add('visible');
-        moreDotsItemWrapper.classList.add('visible');
-      }
-      else {
-        crumbContainer.classList.remove('is-condensed');
-        moreDotsItem.classList.remove('visible');
-        moreDotsItemWrapper.classList.remove('visible');
-      }
-    }
-    const intermediateItems = document.querySelectorAll('.intermediate');
-    if (intermediateItems) {
-      for (let i = 0; i < intermediateItems.length; i++) {
-        if (showMenu) {
-          intermediateItems[i].classList.add('hidden');
-        }
-        else {
-          intermediateItems[i].classList.remove('hidden');
-        }
-      }
-    }
-  }
-  HomeItem(url) {
-    const homeItemClass = ['hy-icon-wrapper', this.variant].join(' ');
-    return (h("li", { class: "breadcrumb-item home" }, h("a", { href: url, class: homeItemClass }, h("hy-icon", { icon: 'hy-icon-home', class: `${this.variant}`, size: 16 })), h("span", { class: "breadcrumb-item__divider" }, "/")));
-  }
-  BreadcrumbItem(label, url, className = '', withCaret = true) {
-    const breadcrumbClass = ['breadcrumb-item', className].join(' ');
-    if (url) {
-      if (withCaret) {
-        return (h("li", { class: breadcrumbClass }, h("a", { href: url, class: `${this.variant}` }, label), h("span", { class: "breadcrumb-item__divider" }, "/")));
-      }
-      else {
-        return (h("li", { class: breadcrumbClass }, h("a", { href: url, class: `${this.variant}` }, label)));
-      }
-    }
-    else {
-      return (h("li", { class: `${breadcrumbClass} breadcrumb-item__current` }, h("a", { "aria-current": "page", href: url, class: `${this.variant}` }, label.length > 20 ? `${label.substring(0, 19)}...` : label)));
-    }
-  }
-  BreadcrumbTextItem(label, className = '') {
-    const breadcrumbClass = ['breadcrumb-item', className].join(' ');
-    return h("li", { class: breadcrumbClass }, label);
-  }
-  DropdownMenuItem(items) {
-    return (h("li", { class: "breadcrumb-item__more" }, h("button", { type: "button", "aria-hidden": "true", "aria-expanded": "false", id: "more", key: "more", class: "breadcrumb-item-dropdown-button", "aria-label": "Open breadcrumb navigation" }, h("span", { class: "breadcrumb-item-dropdown-button__content" }, h("span", null), h("hy-icon", { icon: 'hy-icon-caret-right', class: 'breadcrumb-item-caret__drop breadcrumb-item__more__icon', size: 10 }))), h("ol", { class: "breadcrumb-hidden-items", "aria-hidden": "true" }, items), h("span", { class: "breadcrumb-item__divider" }, "/")));
-  }
-  adjustHiddenMenuWidth() {
-    // set width to the menu area equal to the widest link + paddings
-    const moreMenu = document.querySelectorAll('.breadcrumb-hidden-items')[0];
-    if (moreMenu) {
-      if (document.body.scrollWidth < 480) {
-        moreMenu.style.width = '100%';
-      }
-      else {
-        //maxIntermediateLinkWidth
-        var maxIntermediateLinkWidth = 0;
-        const moreMenuLinks = document.querySelectorAll('.breadcrumb-hidden-items .breadcrumb-item a');
-        if (moreMenuLinks) {
-          for (let i = 0; i < moreMenuLinks.length; i++) {
-            if (maxIntermediateLinkWidth < moreMenuLinks[i].offsetWidth) {
-              maxIntermediateLinkWidth = moreMenuLinks[i].offsetWidth;
-            }
-          }
-          maxIntermediateLinkWidth = maxIntermediateLinkWidth + 32 + 64;
-        }
-        moreMenu.style.width = maxIntermediateLinkWidth.toString().concat('px');
-      }
-    }
-  }
-  closeMoreMenu() {
-    const moreMenu = document.querySelectorAll('.breadcrumb-hidden-items')[0];
-    if (moreMenu) {
-      moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
-      this.menuOpen = false;
-    }
-    const moreBreadcrumb = document.querySelectorAll('#more')[0];
-    if (moreBreadcrumb) {
-      moreBreadcrumb.classList.remove('is-open');
-    }
-  }
-  // When a ... is clicked, show/hide the Menu with hidden breadcrumbs
-  clickEventListener(event) {
-    if (!event)
-      return;
-    const target = event.target;
-    const moreMenu = document.querySelectorAll('.breadcrumb-hidden-items')[0];
-    const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
-    // Trigger if target is button or svg icon
-    // TODO: Make this if prettier
-    if (target &&
-      (target.id === 'more' ||
-        ((target.tagName == 'svg' || 'path') &&
-          target.closest('hy-icon').classList.contains('breadcrumb-item__more__icon')))) {
-      //@todo Show the menu on the right place of the screen
-      if (moreMenu) {
-        if (this.menuOpen) {
-          moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
-          moreMenu.setAttribute('aria-hidden', 'true');
-          moreButton.classList.remove('is-open');
-          moreButton.setAttribute('aria-expanded', 'false');
-        }
-        else {
-          moreMenu.classList.add('breadcrumb-hidden-items__is-open');
-          moreButton.classList.add('is-open');
-          moreMenu.setAttribute('aria-hidden', 'false');
-          moreButton.setAttribute('aria-expanded', 'true');
-        }
-        this.menuOpen = !this.menuOpen;
-      }
-    }
-    else {
-      this.closeMoreMenu();
-    }
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-  }
-  resizeEventListener(event) {
-    if (!event)
-      return;
-    const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
-    const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
-    if (breadcrumbsElement) {
-      if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
-        moreButton.setAttribute('aria-hidden', 'false');
-        this.adjustBreadcrumbsMenuVisibility();
-      }
-      else {
-        moreButton.setAttribute('aria-hidden', 'true');
-        this.adjustBreadcrumbsMenuVisibility(false);
-      }
-    }
-  }
-  render() {
-    //@todo Accesibility
-    const TOTAL_ITEMS = this._dataItems.length;
-    const MAX_ITEMS_TO_SHOW = 3;
-    let isMenuNeeded = TOTAL_ITEMS > MAX_ITEMS_TO_SHOW;
-    let itemsBreadcrumbs = [];
-    let itemsToShowInMenu = [];
-    if (this.variant == BreadcrumbVariants.landingLarge) {
-      // Landing pages, Large variant
-      this._dataItems.map((x, index) => {
-        if (index < 2) {
-          if (index == 0) {
-            itemsBreadcrumbs.push(this.HomeItem(x.url));
-          }
-          else {
-            itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, '', 'main'));
-          }
-        }
-      });
-    }
-    else {
-      // Landing and Content pages, Standard variant
-      this._dataItems.map((x, index) => {
-        let breadcrumbEl = this.BreadcrumbItem(x.text, x.url, '', false);
-        if (isMenuNeeded && index > 0 && index < TOTAL_ITEMS - 1) {
-          itemsToShowInMenu.push(h("li", null, breadcrumbEl));
-          itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'intermediate'));
-          return;
-        }
-        else {
-          if (index == 0) {
-            itemsBreadcrumbs.push(this.HomeItem(x.url));
-          }
-          else {
-            itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'main'));
-          }
-        }
-      });
-    }
-    // Add items to show in breadcrumb popup in correct DOM position.
-    itemsBreadcrumbs.splice(1, 0, this.DropdownMenuItem(itemsToShowInMenu));
-    const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
-    return (h("nav", { "aria-label": "Breadcrumb", role: "navigation", "aria-labelledby": "system-breadcrumb", class: breadcrumbsClass }, h("ol", { class: "breadcrumb-container" }, itemsBreadcrumbs)));
-  }
-  get el() { return getElement(this); }
-};
-HyBreadcrumbs.style = hyBreadcrumbsCss;
-
-export { HyBreadcrumbs as hy_breadcrumbs };