@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/{p-c418c5d3.js.map → p-15ee297d.js.map}

@@ -1 +1 @@
-{"file":"p-c418c5d3.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,s+BAAs+B,CAAC;AAC5/B,wBAAe,YAAY;;MCWd,SAAS;IALtB;;;;QAUU,oBAAe,GAAG;YACxB,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB,CAAC;QAEM,SAAI,GAAG;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;YAEtE,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;gBAErD,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,OAAO;iBACiC,CAAC,CAAC;aACnD,CAAC,CAAC;SACJ,CAAC;KA+BH;IA7BC,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;SACnB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/CMS/stzh-print/stzh-print.scss?tag=stzh-print&encapsulation=shadow","src/components/CMS/stzh-print/stzh-print.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-print {\n  display: contents;\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-print\",\n  styleUrl: \"stzh-print.scss\",\n  shadow: true,\n})\nexport class StzhPrint {\n  @Element() element: HTMLStzhPrintElement;\n\n  private observer: MutationObserver;\n\n  private handleLinkClick = () => {\n    window.print();\n  };\n\n  private init = () => {\n    const links = this.element.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach(link => {\n      link.addEventListener(\"click\", this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"print\",\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-print\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-15ee297d.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,s+BAAs+B,CAAC;AAC5/B,wBAAe,YAAY;;MCWd,SAAS;IALtB;;;;QAUU,oBAAe,GAAG;YACxB,MAAM,CAAC,KAAK,EAAE,CAAC;SAChB,CAAC;QAEM,SAAI,GAAG;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;YAEtE,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;gBAErD,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,OAAO;iBACiC,CAAC,CAAC;aACnD,CAAC,CAAC;SACJ,CAAC;KA+BH;IA7BC,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;SACnB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/CMS/stzh-print/stzh-print.scss?tag=stzh-print&encapsulation=shadow","src/components/CMS/stzh-print/stzh-print.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-print {\n  display: contents;\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-print\",\n  styleUrl: \"stzh-print.scss\",\n  shadow: true,\n})\nexport class StzhPrint {\n  @Element() element: HTMLStzhPrintElement;\n\n  private observer: MutationObserver;\n\n  private handleLinkClick = () => {\n    window.print();\n  };\n\n  private init = () => {\n    const links = this.element.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach(link => {\n      link.addEventListener(\"click\", this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"print\",\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-print\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-9be51edc.js → p-1816eeeb.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$4 } from './p-17efbc57.js';
-import { d as defineCustomElement$3 } from './p-b9a50363.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-0ac64574.js';
+import { d as defineCustomElement$4 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$3 } from './p-c5a240bd.js';
+import { d as defineCustomElement$2 } from './p-7c4e756c.js';
+import { d as defineCustomElement$1 } from './p-111f7e01.js';
 
 const stzhTagCss = ".sc-stzh-tag-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tag-h,[stzh-hidden].sc-stzh-tag-h{display:none}.sc-stzh-tag-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tag-h *.sc-stzh-tag,.sc-stzh-tag-h *.sc-stzh-tag::before,.sc-stzh-tag-h *.sc-stzh-tag::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tag-h .has-focus.sc-stzh-tag{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag{outline-style:none !important}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag::-moz-focus-inner{border:0 !important}.sc-stzh-tag-h{--color:var(--stzh-tag-color, var(--stzh-color-secondary60));--height:1.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--background-color:var(--stzh-tag-background-color, var(--stzh-color-grey20));--hover-color:var(--stzh-tag-hover-color, var(--stzh-color-secondary60));--hover-background-color:var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );display:inline-flex}[size=large].sc-stzh-tag-h{--height:2rem}[size=default][type=secondary].sc-stzh-tag-h{--background-color:var(\n    --stzh-tag-secondary-background-color,\n    var(--stzh-color-secondary60)\n  )}[type=secondary].sc-stzh-tag-h{--color:var(--stzh-tag-secondary-color, var(--stzh-color-white));--background-color:var(\n    --stzh-tag-secondary-background-color,\n    var(--stzh-color-secondary60)\n  );--hover-color:var(--stzh-tag-secondary-hover-color, var(--stzh-color-white));--hover-background-color:var(\n    --stzh-tag-secondary-hover-background-color,\n    var(--background-color)\n  )}[non-interactive].sc-stzh-tag-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-tag-h:not([disabled=false]){--color:var(--stzh-tag-disabled-color, var(--stzh-color-grey70));--background-color:var(\n    --stzh-tag-disabled-background-color,\n    var(--stzh-color-grey20)\n  );--hover-color:var(--color);--hover-background-color:var(--background-color)}.stzh-tag.sc-stzh-tag{position:relative}.stzh-tag__button.sc-stzh-tag{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);font-family:inherit;height:var(--height);display:flex;flex-direction:row;align-items:center;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);appearance:none;border:none;background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-tag__button.is-button.sc-stzh-tag,.stzh-tag__button.is-link.sc-stzh-tag{cursor:pointer}.stzh-tag__label.sc-stzh-tag{text-align:left}.stzh-tag__button.sc-stzh-tag:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-tag--size-large.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-tag--is-disabled.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{cursor:not-allowed}";
 const StzhTagStyle0 = stzhTagCss;
@@ -85,7 +85,7 @@ const StzhTag = /*@__PURE__*/ proxyCustomElement(class StzhTag extends H {
             [`stzh-tag--${this.type}`]: !!this.type,
         };
         const Tag = this.nonInteractive ? "div" : this.href ? "a" : "button";
-        return (h(Host, { key: 'c6f24fb12cffb20436394e55a414dd39d2968453', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '6cf7947df7e7d2b2a6a3b46ba2505458ae6c1a25', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
+        return (h(Host, { key: '8aad47231d864ffd86a6c4cb9fcf97133fb35e92', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: 'f847abadf73486e73a24fb50b694c20679dba9d9', class: classes }, this.href ? (h(Tag, { ref: el => (this.tag = el), class: {
                 "stzh-tag__button": true,
                 "is-button": !this.nonInteractive && !this.href,
                 "is-link": !this.nonInteractive && !!this.href,
@@ -147,4 +147,4 @@ function defineCustomElement() {
 
 export { StzhTag as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-9be51edc.js.map
+//# sourceMappingURL=p-1816eeeb.js.map

package/dist/components/{p-9be51edc.js.map → p-1816eeeb.js.map}

@@ -1 +1 @@
-{"file":"p-9be51edc.js","mappings":"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","names":[],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary60});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[size=\"default\"][type=\"secondary\"] {\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-tag-secondary-hover-background-color,\n      var(--background-color)\n    );\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-tag-disabled-background-color,\n      #{$colorGrey20}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize(\"nano\");\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true,\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type,\n    };\n\n    const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ? (\n            <Tag\n              ref={el => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          ) : (\n            <Tag\n              ref={el => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-1816eeeb.js","mappings":"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","names":[],"sources":["src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary60});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(\n    --stzh-tag-hover-background-color,\n    var(--background-color)\n  );\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[size=\"default\"][type=\"secondary\"] {\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-tag-secondary-background-color,\n      #{$colorSecondary60}\n    );\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-tag-secondary-hover-background-color,\n      var(--background-color)\n    );\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(\n      --stzh-tag-disabled-background-color,\n      #{$colorGrey20}\n    );\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize(\"nano\");\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font(\"heavy\");\n    @include fontSize(\"milli\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Fragment } from \"@stencil/core\";\n\nimport { StzhTagType, StzhTagSize, StzhTagClickEvent, StzhTagFocusEvent, StzhTagBlurEvent } from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true,\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp lines={1} class=\"stzh-tag__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type,\n    };\n\n    const Tag = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ? (\n            <Tag\n              ref={el => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          ) : (\n            <Tag\n              ref={el => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-59b494a3.js → p-18196788.js}

@@ -25,7 +25,7 @@ const StzhHeading = /*@__PURE__*/ proxyCustomElement(class StzhHeading extends H
             [`stzh-heading--level-${this.level}`]: !!this.level,
             [`stzh-heading--curve-${this.curve}`]: !!this.curve,
         };
-        return (h(Host, { key: 'fca6d73082919c6ad6f6e201c61aa159d5b2ff4a' }, h(Heading, { key: '0ea7d5921cf76c4443052549f8daf58e607fc260', class: classes }, h("slot", { key: '044fa486536a3d35ab82db3f4df84fc68903e8cf' }), this._htmlContent && h("div", { key: '3c3761d41964413d3bfe701bff3686199353adaf', innerHTML: this._htmlContent }))));
+        return (h(Host, { key: '7850c2e046b73d6e7ee3ed2c8048f58a485af317' }, h(Heading, { key: '7836f1db08e5225fc642f2686dac72517d7b7ef1', class: classes }, h("slot", { key: '49885f0caa735d42df6e4c6d8b309ba9dbe6fafe' }), this._htmlContent && h("div", { key: '0ddb65ff2fda13ed230ed45ec5a93474bcbc07e4', innerHTML: this._htmlContent }))));
     }
     static get watchers() { return {
         "htmlContent": ["htmlContentWatcher"]
@@ -54,4 +54,4 @@ function defineCustomElement() {
 
 export { StzhHeading as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-59b494a3.js.map
+//# sourceMappingURL=p-18196788.js.map

package/dist/components/{p-59b494a3.js.map → p-18196788.js.map}

@@ -1 +1 @@
-{"file":"p-59b494a3.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kqxBAAkqxB,CAAC;AAC1rxB,0BAAe,cAAc;;MCWhB,WAAW;;;;QASd,iBAAY,GAAW,EAAE,CAAC;qBAPsB,GAAG;qBAGJ,MAAM;;;IAO7D,kBAAkB,CAAC,QAAgB;QACjC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACjC,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;YACnD,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SACpD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,EAAC,OAAO,qDAAC,KAAK,EAAE,OAAO,IACrB,8DAAa,EACZ,IAAI,CAAC,YAAY,IAAI,4DAAK,SAAS,EAAE,IAAI,CAAC,YAAY,GAAQ,CACvD,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-heading/stzh-heading.scss?tag=stzh-heading&encapsulation=scoped","src/components/stzh-heading/stzh-heading.tsx"],"sourcesContent":["/**\n * @prop --color: Color of heading\n *\n * @prop --stzh-heading-color: **Global**: Color of heading\n */\n\n:host {\n  width: 100%;\n\n  --color: #{$headingColor};\n  color: var(--color);\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n}\n\n.stzh-heading {\n  @include font(\"title\");\n  @include fontCurve(\"h2\", \"heading\"); // default\n  color: var(--color);\n  margin: 0;\n\n  @for $i from 1 through 4 {\n    &--level-#{$i} {\n      @include fontCurve(\"h\" + $i, \"heading\");\n    }\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName, \"heading\");\n    }\n  }\n}\n","import { Component, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Text content\n */\n@Component({\n  tag: \"stzh-heading\",\n  styleUrl: \"stzh-heading.scss\",\n  scoped: true,\n})\nexport class StzhHeading {\n  /** Heading level */\n  @Prop({ reflect: true }) level: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves | \"auto\" = \"auto\";\n\n  /* HTML content (since innerHTML won't work when it's being changed after initial render) */\n  @Prop() htmlContent: string;\n  private _htmlContent: string = \"\";\n\n  @Watch(\"htmlContent\")\n  htmlContentWatcher(newValue: string) {\n    this._htmlContent = newValue;\n  }\n\n  componentWillLoad() {\n    this.htmlContentWatcher(this.htmlContent);\n  }\n\n  render() {\n    const Heading = `h${this.level}`;\n    const classes = {\n      \"stzh-heading\": true,\n      [`stzh-heading--level-${this.level}`]: !!this.level,\n      [`stzh-heading--curve-${this.curve}`]: !!this.curve,\n    };\n\n    return (\n      <Host>\n        <Heading class={classes}>\n          <slot></slot>\n          {this._htmlContent && <div innerHTML={this._htmlContent}></div>}\n        </Heading>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-18196788.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kqxBAAkqxB,CAAC;AAC1rxB,0BAAe,cAAc;;MCWhB,WAAW;;;;QASd,iBAAY,GAAW,EAAE,CAAC;qBAPsB,GAAG;qBAGJ,MAAM;;;IAO7D,kBAAkB,CAAC,QAAgB;QACjC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACjC,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;YACnD,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SACpD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,EAAC,OAAO,qDAAC,KAAK,EAAE,OAAO,IACrB,8DAAa,EACZ,IAAI,CAAC,YAAY,IAAI,4DAAK,SAAS,EAAE,IAAI,CAAC,YAAY,GAAQ,CACvD,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-heading/stzh-heading.scss?tag=stzh-heading&encapsulation=scoped","src/components/stzh-heading/stzh-heading.tsx"],"sourcesContent":["/**\n * @prop --color: Color of heading\n *\n * @prop --stzh-heading-color: **Global**: Color of heading\n */\n\n:host {\n  width: 100%;\n\n  --color: #{$headingColor};\n  color: var(--color);\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n}\n\n.stzh-heading {\n  @include font(\"title\");\n  @include fontCurve(\"h2\", \"heading\"); // default\n  color: var(--color);\n  margin: 0;\n\n  @for $i from 1 through 4 {\n    &--level-#{$i} {\n      @include fontCurve(\"h\" + $i, \"heading\");\n    }\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName, \"heading\");\n    }\n  }\n}\n","import { Component, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Text content\n */\n@Component({\n  tag: \"stzh-heading\",\n  styleUrl: \"stzh-heading.scss\",\n  scoped: true,\n})\nexport class StzhHeading {\n  /** Heading level */\n  @Prop({ reflect: true }) level: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves | \"auto\" = \"auto\";\n\n  /* HTML content (since innerHTML won't work when it's being changed after initial render) */\n  @Prop() htmlContent: string;\n  private _htmlContent: string = \"\";\n\n  @Watch(\"htmlContent\")\n  htmlContentWatcher(newValue: string) {\n    this._htmlContent = newValue;\n  }\n\n  componentWillLoad() {\n    this.htmlContentWatcher(this.htmlContent);\n  }\n\n  render() {\n    const Heading = `h${this.level}`;\n    const classes = {\n      \"stzh-heading\": true,\n      [`stzh-heading--level-${this.level}`]: !!this.level,\n      [`stzh-heading--curve-${this.curve}`]: !!this.curve,\n    };\n\n    return (\n      <Host>\n        <Heading class={classes}>\n          <slot></slot>\n          {this._htmlContent && <div innerHTML={this._htmlContent}></div>}\n        </Heading>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-d91d6c31.js → p-18ba315e.js}

@@ -360,7 +360,7 @@ const StzhSticky = /*@__PURE__*/ proxyCustomElement(class StzhSticky extends H {
             [`stzh-sticky--position-${this.position}`]: !!this.position,
             [`stzh-sticky--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: '09b291b9b737fe5bcf0c86fa64367c59d93e52d2', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { key: '29b6e68c486f85fa8c07a61c5fd124cca65a377b', class: classes }, h("div", { key: 'b7006519791f0d1bbdfab03fe6c3d995406f3318', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { key: '6efa8cbbd1a53255f74e55746a397328283f597a', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { key: '701494061066cf048f04293c6610b074bdc9ea60', class: "stzh-sticky__content" }, h("div", { key: '9c50260068f966551bb025001b2f83d4679507c3', class: "stzh-sticky__content-inner" }, h("slot", { key: '9110714f09149e6c0cdbe2f46d8b2cc8b8f846b5' })))))));
+        return (h(Host, { key: '366a3c2c59058ea5e6184d481827b5487a642f33', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { key: 'f94ec092ad846089f58e75a5bf3b11efe123b210', class: classes }, h("div", { key: 'c69b2cc74ef7276d4530c6eab020c5801e5db86f', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), h("div", { key: '8059e8c6fd26eca9cd1409674ed32925bf244aae', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, h("div", { key: 'd3531d057480b4e99f5a398c1801a661b8250c80', class: "stzh-sticky__content" }, h("div", { key: 'adbe9130517d8564d0e6c591580af6ecb4c81dd1', class: "stzh-sticky__content-inner" }, h("slot", { key: '0e1ff73b671caa8d7119a8900853437cfb731bd1' })))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -412,4 +412,4 @@ function defineCustomElement() {
 
 export { StzhSticky as S, defineCustomElement as d, throttle_1 as t };
 
-//# sourceMappingURL=p-d91d6c31.js.map
+//# sourceMappingURL=p-18ba315e.js.map

package/dist/components/{p-d91d6c31.js.map → p-18ba315e.js.map}

@@ -1 +1 @@
-{"file":"p-d91d6c31.js","mappings":"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","names":["require$$0","require$$1","throttle"],"sources":["node_modules/lodash/throttle.js","src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=shadow","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["var debounce = require('./debounce'),\n    isObject = require('./isObject');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/**\n * Creates a throttled function that only invokes `func` at most once per\n * every `wait` milliseconds. The throttled function comes with a `cancel`\n * method to cancel delayed `func` invocations and a `flush` method to\n * immediately invoke them. Provide `options` to indicate whether `func`\n * should be invoked on the leading and/or trailing edge of the `wait`\n * timeout. The `func` is invoked with the last arguments provided to the\n * throttled function. Subsequent calls to the throttled function return the\n * result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the throttled function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.throttle` and `_.debounce`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to throttle.\n * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=true]\n *  Specify invoking on the leading edge of the timeout.\n * @param {boolean} [options.trailing=true]\n *  Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new throttled function.\n * @example\n *\n * // Avoid excessively updating the position while scrolling.\n * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n *\n * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n * jQuery(element).on('click', throttled);\n *\n * // Cancel the trailing throttled invocation.\n * jQuery(window).on('popstate', throttled.cancel);\n */\nfunction throttle(func, wait, options) {\n  var leading = true,\n      trailing = true;\n\n  if (typeof func != 'function') {\n    throw new TypeError(FUNC_ERROR_TEXT);\n  }\n  if (isObject(options)) {\n    leading = 'leading' in options ? !!options.leading : leading;\n    trailing = 'trailing' in options ? !!options.trailing : trailing;\n  }\n  return debounce(func, wait, {\n    'leading': leading,\n    'maxWait': wait,\n    'trailing': trailing\n  });\n}\n\nmodule.exports = throttle;\n","/**\n * @prop --padding-top: Padding top of sticky element\n * @prop --padding-bottom: Padding bottom of sticky element\n * @prop --padding-left: Padding left of sticky element\n * @prop --padding-right: Padding right of sticky element\n * @prop --background-color: Background color of sticky element\n * @prop --stuck-padding-top: Padding top of stuck sticky element\n * @prop --stuck-padding-bottom: Padding bottom of stuck sticky element\n * @prop --stuck-padding-left: Padding left of stuck sticky element\n * @prop --stuck-padding-right: Padding right of stuck sticky element\n * @prop --stuck-background-color: Background color of stuck sticky element\n *\n * @prop --stzh-sticky-{NAME}-is-stuck: **Global**: Whether sticky is currently stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck: **Global**: Whether sticky is currently not stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-top: **Global**: Whether sticky is currently stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-top: **Global**: Whether sticky is currently not stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-bottom: **Global**: Whether sticky is currently stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-bottom: **Global**: Whether sticky is currently not stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-top-height: **Global**: Stuck top sticky element height (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-bottom-height: **Global**: Stuck bottom sticky element height (readonly variable on `<html>`)\n */\n\n:host {\n  --padding-top: #{space(\"large\")};\n  --padding-bottom: #{space(\"large\")};\n  --padding-left: 0;\n  --padding-right: 0;\n  --background-color: transparent;\n\n  --stuck-padding-top: var(--padding-top);\n  --stuck-padding-bottom: var(--padding-bottom);\n  --stuck-padding-left: var(--padding-left);\n  --stuck-padding-right: var(--padding-right);\n  --stuck-background-color: #{$colorGrey10};\n\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n:host([variant=\"transparent\"]) {\n  --background-color: transparent;\n  --stuck-background-color: transparent;\n\n  pointer-events: none;\n}\n\n:host([position=\"fixed\"]) {\n  display: block;\n}\n\n.stzh-sticky {\n  display: contents;\n\n  &__sticky {\n    position: sticky;\n    top: -1px;\n    bottom: -1px;\n    z-index: $zIndexSticky;\n    width: var(--stzh-sticky-unstuck-width, auto);\n    transition-property: width, transform, opacity;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__content,\n  &__content::before {\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__content {\n    --stzh-button-pointer-events: all;\n    --stzh-link-pointer-events: all;\n\n    position: relative;\n    transition-property: background-color, transform;\n\n    // &::before,\n    // &::after {\n    //   content: '';\n    //   pointer-events: none;\n    //   display: block;\n    //   position: absolute;\n    //   left: 0;\n    //   width: 100%;\n    //   height: space('xxlarge');\n    //   opacity: 0;\n    //   transition: opacity $baseTransitionAnimationSpeed;\n    // }\n\n    // &::before {\n    //   background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n    //   top: 0;\n    //   transform: translateY(-100%);\n    // }\n\n    // &::after {\n    //   background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n    //   bottom: 0;\n    //   transform: translateY(100%);\n    // }\n  }\n\n  &__content-inner {\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    transition-property: padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__spacer {\n    display: none;\n  }\n\n  /* Disabled variants */\n\n  &--is-disabled-sticky-top &__sticky {\n    top: auto;\n  }\n\n  &--is-disabled-sticky-bottom &__sticky {\n    bottom: auto;\n  }\n\n  /* Bleeding variant */\n\n  &--is-bleeding &__content {\n    &::before {\n      z-index: -1;\n      content: \"\";\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      transform: translateY(0);\n      transition-property: width, background-color, transform;\n    }\n  }\n\n  /* Is stuck variant */\n\n  &--is-stuck &__content,\n  &--is-stuck &__content::before {\n    background-color: var(--stuck-background-color);\n  }\n\n  &--is-stuck &__content::before {\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    transform: translateX(calc(var(--stzh-sticky-offset-left) / -1));\n  }\n\n  &--is-stuck &__content-inner {\n    padding-top: var(--stuck-padding-top);\n    padding-bottom: var(--stuck-padding-bottom);\n    padding-left: var(--stuck-padding-left);\n    padding-right: var(--stuck-padding-right);\n  }\n\n  // &--is-stuck-bottom &__content {\n  //   &::before {\n  //     opacity: 1;\n  //   }\n  // }\n\n  // &--is-stuck-top &__content {\n  //   &::after {\n  //     opacity: 1;\n  //   }\n  // }\n\n  /* Transparent variant */\n\n  // &--transparent &__content {\n  //   &::after,\n  //   &::before {\n  //     display: none;\n  //   }\n  // }\n\n  // /* Position sticky variant */\n\n  // &--is-breakout &__content {\n  // position: relative;\n  // left: 50%;\n  // right: 50%;\n  // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  // width: calc(100vw - var(--stzh-scrollbar-width));\n  // max-width: calc(100vw - var(--stzh-scrollbar-width));\n  // }\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded#{&}--is-stuck &__sticky {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n\n  &--is-not-loaded &__sticky,\n  &--is-not-loaded &__content,\n  &--is-not-loaded &__content::before,\n  &--is-not-loaded &__content-inner {\n    transition-duration: 0ms;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Watch, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStickyStuckTopEvent, StzhStickyStuckBottomEvent } from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  shadow: true,\n})\nexport class StzhSticky {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"transparent\" = \"default\";\n\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether background breaks out container to full viewport width */\n  @Prop({ reflect: true }) bleeding: boolean = false;\n\n  /** Name of sticky element (used for setting css properties) */\n  @Prop() name: string;\n\n  /**\n   * Position type used.\n   *\n   * - sticky: used only css position sticky\n   * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n   */\n  @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (this.position === \"fixed\") {\n          this.updateFixedByResize();\n        } else {\n          this.updateStuck();\n        }\n      });\n    });\n  }\n\n  @Watch(\"isStuckTop\")\n  @Watch(\"isStuckBottom\")\n  @Watch(\"hasReachedTopLimit\")\n  @Watch(\"hasReachedBottomLimit\")\n  stuckHeightWatcher() {\n    let isStuck = false;\n\n    if (this.isStuckTop && !this.hasReachedBottomLimit) {\n      isStuck = true;\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-top`, \"1\");\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-top`, \"0\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-top-height`,\n        `${this.stickyElement.offsetHeight}px`,\n      );\n    } else {\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-top`, \"0\");\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-top`, \"1\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-top-height`,\n        \"0px\",\n      );\n    }\n\n    if (this.isStuckBottom && !this.hasReachedTopLimit) {\n      isStuck = true;\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-bottom`, \"1\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-bottom`,\n        \"0\",\n      );\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-bottom-height`,\n        `${this.stickyElement.offsetHeight}px`,\n      );\n    } else {\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-bottom`, \"0\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-bottom`,\n        \"1\",\n      );\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-bottom-height`,\n        \"0px\",\n      );\n    }\n\n    document.documentElement.style.setProperty(\n      `--stzh-sticky-${this.name && this.name + \"-\"}is-stuck`,\n      isStuck ? \"1\" : \"0\",\n    );\n    document.documentElement.style.setProperty(\n      `--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck`,\n      isStuck ? \"0\" : \"1\",\n    );\n\n    if (isStuck) {\n      this.stickyResizeObserver.observe(this.stickyElement);\n    } else {\n      this.stickyResizeObserver.unobserve(this.stickyElement);\n    }\n  }\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue,\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue,\n    });\n  }\n\n  @Watch(\"position\")\n  @Watch(\"bleeding\")\n  positionWatcher() {\n    if (this.position === \"fixed\") {\n      if (this.observer) {\n        this.observer.disconnect();\n      }\n\n      window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n      window.addEventListener(\"resize\", this.handleResize);\n\n      this.updateFixedByResize();\n    } else {\n      if (this.bleeding) {\n        window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n        this.updateByScroll();\n      } else {\n        window.removeEventListener(\"scroll\", this.handleScroll);\n      }\n\n      window.removeEventListener(\"resize\", this.handleResize);\n      this.setUnfixed();\n\n      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n      this.observer.observe(this.stickyElement);\n\n      this.updateStuck();\n    }\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean;\n  @State() isStuckBottom: boolean;\n\n  @State() hasReachedTopLimit: boolean;\n  @State() hasReachedBottomLimit: boolean;\n\n  @State() loaded: boolean = false;\n\n  private observer: IntersectionObserver;\n  private stickyResizeObserver: ResizeObserver;\n  private debounceScroll: number;\n  private debounceResize: number;\n  private stickyElement: HTMLElement;\n  private spacerElement: HTMLElement;\n\n  private windowHeight: number;\n  private scrollX: number;\n  private scrollY: number;\n  private fixedTop: number;\n  private fixedLeft: number;\n  private fixedHeight: number = 0;\n  private fixedWidth: number = 0;\n  private fixedLimit: { top: number; bottom: number } | null = null;\n\n  private updateStuck() {\n    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n    const rect = this.stickyElement.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private getFixedLimit(): { top: number; bottom: number } | null {\n    const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n    if (!stickyContainer) {\n      return null;\n    }\n\n    const off = offset(stickyContainer);\n\n    return {\n      top: off.top,\n      bottom: off.top + stickyContainer.scrollHeight,\n    };\n  }\n\n  private setUnfixed() {\n    Object.assign(this.stickyElement.style, {\n      position: null,\n      top: null,\n      bottom: null,\n      left: null,\n      width: null,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"none\",\n    });\n  }\n\n  private setFixed() {\n    const position = this.hasReachedTopLimit || this.hasReachedBottomLimit ? \"absolute\" : \"fixed\";\n\n    Object.assign(this.stickyElement.style, {\n      position,\n      top:\n        position === \"absolute\"\n          ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n          : this.isStuckTop\n            ? \"0px\"\n            : \"auto\",\n      bottom: this.isStuckTop || position === \"absolute\" ? \"auto\" : \"0px\",\n      left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n      width: `${this.fixedWidth}px`,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"block\",\n    });\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n  };\n\n  private handleStickyResize = throttle(() => {\n    this.stuckHeightWatcher();\n    this.updateByScroll();\n  }, 100);\n\n  private updateByScroll = () => {\n    if (!isVisible(this.stickyElement) || !this.element.isConnected) {\n      return;\n    }\n\n    const stickyFixedWidthContainer =\n      (this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement) || this.element.parentElement;\n\n    const off = offset(\n      (this.isStuckTop || this.isStuckBottom) && this.position === \"fixed\" ? this.spacerElement : this.stickyElement,\n    );\n\n    this.fixedTop = off.top;\n    this.fixedLeft = off.left;\n\n    stickyFixedWidthContainer.style.setProperty(\"--stzh-sticky-offset-top\", `${this.fixedTop}px`);\n    stickyFixedWidthContainer.style.setProperty(\"--stzh-sticky-offset-left\", `${this.fixedLeft}px`);\n\n    if (this.position === \"sticky\") {\n      // for position sticky we only need the offsets variables to be updated in bleeding variant\n      return;\n    }\n\n    this.fixedHeight = this.stickyElement.offsetHeight;\n    this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n    this.scrollX = window.scrollX;\n    this.scrollY = window.scrollY;\n    this.fixedLimit = this.getFixedLimit();\n\n    this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n    const unstuckWidth = this.element.getBoundingClientRect().width;\n    // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n    stickyFixedWidthContainer.style.setProperty(\"--stzh-sticky-unstuck-width\", `${unstuckWidth}px`);\n\n    // console.log(unstuckWidth);\n\n    // console.log(\n    //   this.scrollX,\n    //   this.scrollY,\n    //   this.windowHeight,\n    //   this.fixedTop,\n    //   this.fixedLeft,\n    //   this.fixedHeight,\n    //   this.fixedLimit,\n    // );\n\n    this.isStuckBottom =\n      !this.disableStickyBottom && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n    this.isStuckTop = !this.disableStickyTop && this.scrollY >= this.fixedTop;\n\n    this.hasReachedTopLimit =\n      this.fixedLimit && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n    this.hasReachedBottomLimit = this.fixedLimit && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n    // console.log(\n    //   this.isStuckBottom,\n    //   this.isStuckTop,\n    //   this.hasReachedBottomLimit,\n    //   this.hasReachedTopLimit,\n    // );\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      this.setFixed();\n      // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);\n    } else {\n      this.setUnfixed();\n      // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n    }\n  };\n\n  private updateFixedByResize = () => {\n    if (!this.stickyElement || !this.element.isConnected) {\n      return;\n    }\n\n    // reset sticky so we can read current offsets\n    this.setUnfixed();\n    this.stickyElement.style.position = \"static\";\n    this.stickyElement.style.width = \"auto\";\n    this.isStuckTop = false;\n    this.isStuckBottom = false;\n\n    if (isVisible(this.stickyElement)) {\n      this.windowHeight = window.innerHeight;\n      this.updateByScroll();\n    }\n  };\n\n  private observe = () => {\n    this.updateStuck();\n  };\n\n  componentDidLoad() {\n    this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n    this.positionWatcher();\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        window.setTimeout(() => {\n          this.loaded = true;\n\n          if (this.position === \"fixed\") {\n            this.updateFixedByResize();\n          }\n        }, 250);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.stickyResizeObserver?.disconnect();\n\n    window.removeEventListener(\"scroll\", this.handleScroll);\n    window.removeEventListener(\"resize\", this.handleResize);\n  }\n\n  render() {\n    const isStuck = this.isStuckTop || this.isStuckBottom;\n\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-not-loaded\": !this.loaded,\n      \"stzh-sticky--is-stuck\": isStuck,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n      \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n      \"stzh-sticky--is-bleeding\": this.bleeding,\n      [`stzh-sticky--position-${this.position}`]: !!this.position,\n      [`stzh-sticky--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <div ref={el => (this.spacerElement = el as HTMLDivElement)} class=\"stzh-sticky__spacer\"></div>\n          <div ref={el => (this.stickyElement = el as HTMLDivElement)} class=\"stzh-sticky__sticky\">\n            <div class=\"stzh-sticky__content\">\n              <div class=\"stzh-sticky__content-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-18ba315e.js","mappings":"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","names":["require$$0","require$$1","throttle"],"sources":["node_modules/lodash/throttle.js","src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=shadow","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["var debounce = require('./debounce'),\n    isObject = require('./isObject');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/**\n * Creates a throttled function that only invokes `func` at most once per\n * every `wait` milliseconds. The throttled function comes with a `cancel`\n * method to cancel delayed `func` invocations and a `flush` method to\n * immediately invoke them. Provide `options` to indicate whether `func`\n * should be invoked on the leading and/or trailing edge of the `wait`\n * timeout. The `func` is invoked with the last arguments provided to the\n * throttled function. Subsequent calls to the throttled function return the\n * result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the throttled function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.throttle` and `_.debounce`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to throttle.\n * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=true]\n *  Specify invoking on the leading edge of the timeout.\n * @param {boolean} [options.trailing=true]\n *  Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new throttled function.\n * @example\n *\n * // Avoid excessively updating the position while scrolling.\n * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n *\n * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n * jQuery(element).on('click', throttled);\n *\n * // Cancel the trailing throttled invocation.\n * jQuery(window).on('popstate', throttled.cancel);\n */\nfunction throttle(func, wait, options) {\n  var leading = true,\n      trailing = true;\n\n  if (typeof func != 'function') {\n    throw new TypeError(FUNC_ERROR_TEXT);\n  }\n  if (isObject(options)) {\n    leading = 'leading' in options ? !!options.leading : leading;\n    trailing = 'trailing' in options ? !!options.trailing : trailing;\n  }\n  return debounce(func, wait, {\n    'leading': leading,\n    'maxWait': wait,\n    'trailing': trailing\n  });\n}\n\nmodule.exports = throttle;\n","/**\n * @prop --padding-top: Padding top of sticky element\n * @prop --padding-bottom: Padding bottom of sticky element\n * @prop --padding-left: Padding left of sticky element\n * @prop --padding-right: Padding right of sticky element\n * @prop --background-color: Background color of sticky element\n * @prop --stuck-padding-top: Padding top of stuck sticky element\n * @prop --stuck-padding-bottom: Padding bottom of stuck sticky element\n * @prop --stuck-padding-left: Padding left of stuck sticky element\n * @prop --stuck-padding-right: Padding right of stuck sticky element\n * @prop --stuck-background-color: Background color of stuck sticky element\n *\n * @prop --stzh-sticky-{NAME}-is-stuck: **Global**: Whether sticky is currently stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck: **Global**: Whether sticky is currently not stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-top: **Global**: Whether sticky is currently stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-top: **Global**: Whether sticky is currently not stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-bottom: **Global**: Whether sticky is currently stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-bottom: **Global**: Whether sticky is currently not stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-top-height: **Global**: Stuck top sticky element height (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-bottom-height: **Global**: Stuck bottom sticky element height (readonly variable on `<html>`)\n */\n\n:host {\n  --padding-top: #{space(\"large\")};\n  --padding-bottom: #{space(\"large\")};\n  --padding-left: 0;\n  --padding-right: 0;\n  --background-color: transparent;\n\n  --stuck-padding-top: var(--padding-top);\n  --stuck-padding-bottom: var(--padding-bottom);\n  --stuck-padding-left: var(--padding-left);\n  --stuck-padding-right: var(--padding-right);\n  --stuck-background-color: #{$colorGrey10};\n\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n:host([variant=\"transparent\"]) {\n  --background-color: transparent;\n  --stuck-background-color: transparent;\n\n  pointer-events: none;\n}\n\n:host([position=\"fixed\"]) {\n  display: block;\n}\n\n.stzh-sticky {\n  display: contents;\n\n  &__sticky {\n    position: sticky;\n    top: -1px;\n    bottom: -1px;\n    z-index: $zIndexSticky;\n    width: var(--stzh-sticky-unstuck-width, auto);\n    transition-property: width, transform, opacity;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__content,\n  &__content::before {\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__content {\n    --stzh-button-pointer-events: all;\n    --stzh-link-pointer-events: all;\n\n    position: relative;\n    transition-property: background-color, transform;\n\n    // &::before,\n    // &::after {\n    //   content: '';\n    //   pointer-events: none;\n    //   display: block;\n    //   position: absolute;\n    //   left: 0;\n    //   width: 100%;\n    //   height: space('xxlarge');\n    //   opacity: 0;\n    //   transition: opacity $baseTransitionAnimationSpeed;\n    // }\n\n    // &::before {\n    //   background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n    //   top: 0;\n    //   transform: translateY(-100%);\n    // }\n\n    // &::after {\n    //   background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n    //   bottom: 0;\n    //   transform: translateY(100%);\n    // }\n  }\n\n  &__content-inner {\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    transition-property: padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__spacer {\n    display: none;\n  }\n\n  /* Disabled variants */\n\n  &--is-disabled-sticky-top &__sticky {\n    top: auto;\n  }\n\n  &--is-disabled-sticky-bottom &__sticky {\n    bottom: auto;\n  }\n\n  /* Bleeding variant */\n\n  &--is-bleeding &__content {\n    &::before {\n      z-index: -1;\n      content: \"\";\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      transform: translateY(0);\n      transition-property: width, background-color, transform;\n    }\n  }\n\n  /* Is stuck variant */\n\n  &--is-stuck &__content,\n  &--is-stuck &__content::before {\n    background-color: var(--stuck-background-color);\n  }\n\n  &--is-stuck &__content::before {\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    transform: translateX(calc(var(--stzh-sticky-offset-left) / -1));\n  }\n\n  &--is-stuck &__content-inner {\n    padding-top: var(--stuck-padding-top);\n    padding-bottom: var(--stuck-padding-bottom);\n    padding-left: var(--stuck-padding-left);\n    padding-right: var(--stuck-padding-right);\n  }\n\n  // &--is-stuck-bottom &__content {\n  //   &::before {\n  //     opacity: 1;\n  //   }\n  // }\n\n  // &--is-stuck-top &__content {\n  //   &::after {\n  //     opacity: 1;\n  //   }\n  // }\n\n  /* Transparent variant */\n\n  // &--transparent &__content {\n  //   &::after,\n  //   &::before {\n  //     display: none;\n  //   }\n  // }\n\n  // /* Position sticky variant */\n\n  // &--is-breakout &__content {\n  // position: relative;\n  // left: 50%;\n  // right: 50%;\n  // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  // width: calc(100vw - var(--stzh-scrollbar-width));\n  // max-width: calc(100vw - var(--stzh-scrollbar-width));\n  // }\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded#{&}--is-stuck &__sticky {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n\n  &--is-not-loaded &__sticky,\n  &--is-not-loaded &__content,\n  &--is-not-loaded &__content::before,\n  &--is-not-loaded &__content-inner {\n    transition-duration: 0ms;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Watch, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStickyStuckTopEvent, StzhStickyStuckBottomEvent } from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-sticky\",\n  styleUrl: \"stzh-sticky.scss\",\n  shadow: true,\n})\nexport class StzhSticky {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"transparent\" = \"default\";\n\n  /** Whether to disable sticking to top */\n  @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n  /** Whether to disable sticking to bottom */\n  @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n  /** Whether background breaks out container to full viewport width */\n  @Prop({ reflect: true }) bleeding: boolean = false;\n\n  /** Name of sticky element (used for setting css properties) */\n  @Prop() name: string;\n\n  /**\n   * Position type used.\n   *\n   * - sticky: used only css position sticky\n   * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n   */\n  @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n  @Watch(\"disableStickyTop\")\n  @Watch(\"disableStickyBottom\")\n  disableStickyWatcher() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        if (this.position === \"fixed\") {\n          this.updateFixedByResize();\n        } else {\n          this.updateStuck();\n        }\n      });\n    });\n  }\n\n  @Watch(\"isStuckTop\")\n  @Watch(\"isStuckBottom\")\n  @Watch(\"hasReachedTopLimit\")\n  @Watch(\"hasReachedBottomLimit\")\n  stuckHeightWatcher() {\n    let isStuck = false;\n\n    if (this.isStuckTop && !this.hasReachedBottomLimit) {\n      isStuck = true;\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-top`, \"1\");\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-top`, \"0\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-top-height`,\n        `${this.stickyElement.offsetHeight}px`,\n      );\n    } else {\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-top`, \"0\");\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-top`, \"1\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-top-height`,\n        \"0px\",\n      );\n    }\n\n    if (this.isStuckBottom && !this.hasReachedTopLimit) {\n      isStuck = true;\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-bottom`, \"1\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-bottom`,\n        \"0\",\n      );\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-bottom-height`,\n        `${this.stickyElement.offsetHeight}px`,\n      );\n    } else {\n      document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + \"-\"}is-stuck-bottom`, \"0\");\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck-bottom`,\n        \"1\",\n      );\n      document.documentElement.style.setProperty(\n        `--stzh-sticky-${this.name && this.name + \"-\"}stuck-bottom-height`,\n        \"0px\",\n      );\n    }\n\n    document.documentElement.style.setProperty(\n      `--stzh-sticky-${this.name && this.name + \"-\"}is-stuck`,\n      isStuck ? \"1\" : \"0\",\n    );\n    document.documentElement.style.setProperty(\n      `--stzh-sticky-${this.name && this.name + \"-\"}is-not-stuck`,\n      isStuck ? \"0\" : \"1\",\n    );\n\n    if (isStuck) {\n      this.stickyResizeObserver.observe(this.stickyElement);\n    } else {\n      this.stickyResizeObserver.unobserve(this.stickyElement);\n    }\n  }\n\n  @Watch(\"isStuckTop\")\n  isStuckTopWatcher(newValue: boolean) {\n    this.stzhStuckTop.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue,\n    });\n  }\n\n  @Watch(\"isStuckBottom\")\n  isStuckBottomWatcher(newValue: boolean) {\n    this.stzhStuckBottom.emit({\n      component: \"stzh-sticky\",\n      sticky: newValue,\n    });\n  }\n\n  @Watch(\"position\")\n  @Watch(\"bleeding\")\n  positionWatcher() {\n    if (this.position === \"fixed\") {\n      if (this.observer) {\n        this.observer.disconnect();\n      }\n\n      window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n      window.addEventListener(\"resize\", this.handleResize);\n\n      this.updateFixedByResize();\n    } else {\n      if (this.bleeding) {\n        window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n        this.updateByScroll();\n      } else {\n        window.removeEventListener(\"scroll\", this.handleScroll);\n      }\n\n      window.removeEventListener(\"resize\", this.handleResize);\n      this.setUnfixed();\n\n      this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n      this.observer.observe(this.stickyElement);\n\n      this.updateStuck();\n    }\n  }\n\n  /** Sticky stuck top event */\n  @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n  /** Sticky stuck bottom event */\n  @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n  @Element() element: HTMLStzhStickyElement;\n\n  @State() isStuckTop: boolean;\n  @State() isStuckBottom: boolean;\n\n  @State() hasReachedTopLimit: boolean;\n  @State() hasReachedBottomLimit: boolean;\n\n  @State() loaded: boolean = false;\n\n  private observer: IntersectionObserver;\n  private stickyResizeObserver: ResizeObserver;\n  private debounceScroll: number;\n  private debounceResize: number;\n  private stickyElement: HTMLElement;\n  private spacerElement: HTMLElement;\n\n  private windowHeight: number;\n  private scrollX: number;\n  private scrollY: number;\n  private fixedTop: number;\n  private fixedLeft: number;\n  private fixedHeight: number = 0;\n  private fixedWidth: number = 0;\n  private fixedLimit: { top: number; bottom: number } | null = null;\n\n  private updateStuck() {\n    const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n    const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n    const rect = this.stickyElement.getBoundingClientRect();\n\n    if (topCss) {\n      this.isStuckTop = rect.top < 0;\n    } else {\n      this.isStuckTop = false;\n    }\n\n    if (bottomCss) {\n      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n    } else {\n      this.isStuckBottom = false;\n    }\n  }\n\n  private getFixedLimit(): { top: number; bottom: number } | null {\n    const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n    if (!stickyContainer) {\n      return null;\n    }\n\n    const off = offset(stickyContainer);\n\n    return {\n      top: off.top,\n      bottom: off.top + stickyContainer.scrollHeight,\n    };\n  }\n\n  private setUnfixed() {\n    Object.assign(this.stickyElement.style, {\n      position: null,\n      top: null,\n      bottom: null,\n      left: null,\n      width: null,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"none\",\n    });\n  }\n\n  private setFixed() {\n    const position = this.hasReachedTopLimit || this.hasReachedBottomLimit ? \"absolute\" : \"fixed\";\n\n    Object.assign(this.stickyElement.style, {\n      position,\n      top:\n        position === \"absolute\"\n          ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n          : this.isStuckTop\n            ? \"0px\"\n            : \"auto\",\n      bottom: this.isStuckTop || position === \"absolute\" ? \"auto\" : \"0px\",\n      left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n      width: `${this.fixedWidth}px`,\n    });\n\n    Object.assign(this.spacerElement.style, {\n      display: \"block\",\n    });\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n  };\n\n  private handleStickyResize = throttle(() => {\n    this.stuckHeightWatcher();\n    this.updateByScroll();\n  }, 100);\n\n  private updateByScroll = () => {\n    if (!isVisible(this.stickyElement) || !this.element.isConnected) {\n      return;\n    }\n\n    const stickyFixedWidthContainer =\n      (this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement) || this.element.parentElement;\n\n    const off = offset(\n      (this.isStuckTop || this.isStuckBottom) && this.position === \"fixed\" ? this.spacerElement : this.stickyElement,\n    );\n\n    this.fixedTop = off.top;\n    this.fixedLeft = off.left;\n\n    stickyFixedWidthContainer.style.setProperty(\"--stzh-sticky-offset-top\", `${this.fixedTop}px`);\n    stickyFixedWidthContainer.style.setProperty(\"--stzh-sticky-offset-left\", `${this.fixedLeft}px`);\n\n    if (this.position === \"sticky\") {\n      // for position sticky we only need the offsets variables to be updated in bleeding variant\n      return;\n    }\n\n    this.fixedHeight = this.stickyElement.offsetHeight;\n    this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n    this.scrollX = window.scrollX;\n    this.scrollY = window.scrollY;\n    this.fixedLimit = this.getFixedLimit();\n\n    this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n    const unstuckWidth = this.element.getBoundingClientRect().width;\n    // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n    stickyFixedWidthContainer.style.setProperty(\"--stzh-sticky-unstuck-width\", `${unstuckWidth}px`);\n\n    // console.log(unstuckWidth);\n\n    // console.log(\n    //   this.scrollX,\n    //   this.scrollY,\n    //   this.windowHeight,\n    //   this.fixedTop,\n    //   this.fixedLeft,\n    //   this.fixedHeight,\n    //   this.fixedLimit,\n    // );\n\n    this.isStuckBottom =\n      !this.disableStickyBottom && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n    this.isStuckTop = !this.disableStickyTop && this.scrollY >= this.fixedTop;\n\n    this.hasReachedTopLimit =\n      this.fixedLimit && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n    this.hasReachedBottomLimit = this.fixedLimit && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n    // console.log(\n    //   this.isStuckBottom,\n    //   this.isStuckTop,\n    //   this.hasReachedBottomLimit,\n    //   this.hasReachedTopLimit,\n    // );\n\n    if (this.isStuckTop || this.isStuckBottom) {\n      this.setFixed();\n      // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);\n    } else {\n      this.setUnfixed();\n      // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n    }\n  };\n\n  private updateFixedByResize = () => {\n    if (!this.stickyElement || !this.element.isConnected) {\n      return;\n    }\n\n    // reset sticky so we can read current offsets\n    this.setUnfixed();\n    this.stickyElement.style.position = \"static\";\n    this.stickyElement.style.width = \"auto\";\n    this.isStuckTop = false;\n    this.isStuckBottom = false;\n\n    if (isVisible(this.stickyElement)) {\n      this.windowHeight = window.innerHeight;\n      this.updateByScroll();\n    }\n  };\n\n  private observe = () => {\n    this.updateStuck();\n  };\n\n  componentDidLoad() {\n    this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n    this.positionWatcher();\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        window.setTimeout(() => {\n          this.loaded = true;\n\n          if (this.position === \"fixed\") {\n            this.updateFixedByResize();\n          }\n        }, 250);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.stickyResizeObserver?.disconnect();\n\n    window.removeEventListener(\"scroll\", this.handleScroll);\n    window.removeEventListener(\"resize\", this.handleResize);\n  }\n\n  render() {\n    const isStuck = this.isStuckTop || this.isStuckBottom;\n\n    const classes = {\n      \"stzh-sticky\": true,\n      \"stzh-sticky--is-not-loaded\": !this.loaded,\n      \"stzh-sticky--is-stuck\": isStuck,\n      \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n      \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n      \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n      \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n      \"stzh-sticky--is-bleeding\": this.bleeding,\n      [`stzh-sticky--position-${this.position}`]: !!this.position,\n      [`stzh-sticky--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host\n        is-stuck={this.isStuckTop || this.isStuckBottom}\n        is-stuck-top={this.isStuckTop}\n        is-stuck-bottom={this.isStuckBottom}\n      >\n        <div class={classes}>\n          <div ref={el => (this.spacerElement = el as HTMLDivElement)} class=\"stzh-sticky__spacer\"></div>\n          <div ref={el => (this.stickyElement = el as HTMLDivElement)} class=\"stzh-sticky__sticky\">\n            <div class=\"stzh-sticky__content\">\n              <div class=\"stzh-sticky__content-inner\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-b5f00d83.js → p-1cfd0791.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$3 } from './p-17efbc57.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-0ac64574.js';
+import { d as defineCustomElement$3 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$2 } from './p-7c4e756c.js';
+import { d as defineCustomElement$1 } from './p-111f7e01.js';
 
 const stzhAppNavCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-app-nav{background-color:var(--stzh-color-coolgrey10)}@media screen and (max-width: 899px){.stzh-app-nav{height:var(--stzh-app-nav-height)}}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{--text-decoration-line:none;--hover-text-decoration-line:none;color:var(--stzh-color-coolgrey90)}@media screen and (min-width: 900px){.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link:last-child,.stzh-app-nav .stzh-app-nav__link a:last-child{margin-right:0}.stzh-app-nav__link:hover,.stzh-app-nav .stzh-app-nav__link a:hover{color:var(--stzh-color-primary60)}.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{text-decoration:none;color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}";
 const StzhAppNavStyle0 = stzhAppNavCss;
@@ -31,7 +31,7 @@ const StzhAppNav = /*@__PURE__*/ proxyCustomElement(class StzhAppNav extends H {
         const classes = {
             "stzh-app-nav": true,
         };
-        return (h(Host, { key: '28755895d833a369da3678b55c41362340dbf98b' }, h("nav", { key: '6375efcd34fc270155dbfadef06442ece3d9486f', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null }, h("div", { key: '7c7a9afd20f6d8f92e21cc8b7b5c7b83f88a881a', class: "stzh-app-nav__links", role: "list" }, this.items.map(item => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => {
+        return (h(Host, { key: '6aca18c8040667968cc291e82469826c6427ed72' }, h("nav", { key: 'e3db9d373f33780b50d177f42a99aa87f31ee257', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null }, h("div", { key: '056f487b031c715ecd4a1f8372c153c9bb95a297', class: "stzh-app-nav__links", role: "list" }, this.items.map(item => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => {
                 this.handleAppNavItemClick(e, item);
             } }, item.text)))))));
     }
@@ -73,4 +73,4 @@ function defineCustomElement() {
 
 export { StzhAppNav as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-b5f00d83.js.map
+//# sourceMappingURL=p-1cfd0791.js.map

package/dist/components/{p-b5f00d83.js.map → p-1cfd0791.js.map}

@@ -1 +1 @@
-{"file":"p-b5f00d83.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,i4GAAi4G,CAAC;AACx5G,yBAAe,aAAa;;MCSf,UAAU;;;;;QAqBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB;YACtE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;gBAC5B,SAAS,EAAE,cAAc;gBACzB,IAAI;gBACJ,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;;qBAtBgC,EAAE;;;IAUpC,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SACjG;KACF;IAUD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;SACrB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,IACnG,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;aACrC,IAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId || null}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-1cfd0791.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,i4GAAi4G,CAAC;AACx5G,yBAAe,aAAa;;MCSf,UAAU;;;;;QAqBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB;YACtE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;gBAC5B,SAAS,EAAE,cAAc;gBACzB,IAAI;gBACJ,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;;qBAtBgC,EAAE;;;IAUpC,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SACjG;KACF;IAUD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;SACrB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,IACnG,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;aACrC,IAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId || null}>\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-ce0311f9.js → p-2502ff26.js}

@@ -17,7 +17,7 @@ const StzhLoader = /*@__PURE__*/ proxyCustomElement(class StzhLoader extends H {
             "stzh-loader--hide-label": this.hideLabel,
             [`stzh-loader--size-${this.size}`]: !!this.size,
         };
-        return (h(Host, { key: 'f928859546fc204dffd6a175cc401ba273697a94' }, h("div", { key: 'c52f0e26667791cc815df1cd1902a743fd08a808', class: classes }, h("div", { key: '0f41109fc78aba388a9937fd37110dc5e552c909', class: "stzh-loader__wrapper" }, h("div", { key: '5b6801fc65c234c806ec388653cd478bc67cf54b', class: "stzh-loader__uil" }, h("div", { key: '9c81f56b552c24497fa42070e9d1ed9ae9e9068f', class: "stzh-loader__ib" }, h("div", { key: 'abe087c982475e2db41696aad2ad3a4fa2333e91', class: "stzh-loader__circle" }, h("div", { key: '029e0669c3449e83bd357d8c853b598cd1c276eb' })), h("div", { key: 'c7dcea928580d1feb9f6cbeac36a023f43078e30', class: "stzh-loader__circle" }, h("div", { key: '12689365fec09cd690c4b1f2b0e037faabe3da6a' })), h("div", { key: 'a541381378c9b6563d7c2def5f79a5015e6f84a6', class: "stzh-loader__circle" }, h("div", { key: '3d33858a510240f5020309dfd49ee5bec1706bff' })), h("div", { key: '7be2a01f27fa9588ad07ed544d9f982fae524018', class: "stzh-loader__circle" }, h("div", { key: 'd164fd797d4dc3f455d542b476c06b6540169947' }))))), h("div", { key: '195321648428d3c9712c6b2eb9b524c9a75f1823', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
+        return (h(Host, { key: '04ea1a87f71fe4a8503f8bf9ca368653744dc61d' }, h("div", { key: '7cdce1ab2258bc9c62a098cc3be51c0cb5b5dc5f', class: classes }, h("div", { key: 'd81308f8188ab0d034f5cef5339a0c4b8c3db75a', class: "stzh-loader__wrapper" }, h("div", { key: '02bca1dc720d074f44c933208bc6d4c018a96886', class: "stzh-loader__uil" }, h("div", { key: '5ec372001f23ea607364d47375d62b4ba3819ca2', class: "stzh-loader__ib" }, h("div", { key: '7ccf1e975dbb1ed8ae25939f0e23174abb4e908d', class: "stzh-loader__circle" }, h("div", { key: '936ed6e5f8910b20f75f75c539f6355c63ab01dc' })), h("div", { key: 'cf050adbcb6e02ca65cf2b8c3456ac424befab62', class: "stzh-loader__circle" }, h("div", { key: '3f1d494ea26dd9bd28a062342f598c9e53df8fa9' })), h("div", { key: '1483f672a399dc28e87da6353f56d3105f9f46ea', class: "stzh-loader__circle" }, h("div", { key: '8645d56dede758369af31706ca0dbc7046b7cc1d' })), h("div", { key: '9ea35595360dd1022e1d6dfb8b3874a3df3d48b8', class: "stzh-loader__circle" }, h("div", { key: 'd702063d6a54bd3de1e369d4698c7ecb092a76ab' }))))), h("div", { key: '229d7fb08cb99144a11da40174af41530fd89c0c', class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
     }
     get element() { return this; }
     static get style() { return StzhLoaderStyle0; }
@@ -42,4 +42,4 @@ function defineCustomElement() {
 
 export { StzhLoader as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-ce0311f9.js.map
+//# sourceMappingURL=p-2502ff26.js.map

package/dist/components/{p-ce0311f9.js.map → p-2502ff26.js.map}

@@ -1 +1 @@
-{"file":"p-ce0311f9.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m2GAAm2G,CAAC;AAC13G,yBAAe,aAAa;;MCSf,UAAU;;;;oBAEe,SAAS;qBAGrB,EAAE;yBAGG,KAAK;;IAIlC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,CACF,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,oBAAoB,eAAW,QAAQ,IAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-2502ff26.js","mappings":";;AAAA,MAAM,aAAa,GAAG,m2GAAm2G,CAAC;AAC13G,yBAAe,aAAa;;MCSf,UAAU;;;;oBAEe,SAAS;qBAGrB,EAAE;yBAGG,KAAK;;IAIlC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;SAChD,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAW,CACP,CACF,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,oBAAoB,eAAW,QAAQ,IAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-loader/stzh-loader.scss?tag=stzh-loader&encapsulation=scoped","src/components/stzh-loader/stzh-loader.tsx"],"sourcesContent":[":host {\n}\n\n@keyframes stzh-loader {\n  0% {\n    transform: scale(0);\n    left: 0px;\n    opacity: 1;\n  }\n  12.5% {\n    transform: scale(1);\n  }\n  25% {\n    left: 0px;\n  }\n  37.5% {\n    left: 70px;\n  }\n  50% {\n    left: 70px;\n  }\n  62.5% {\n    left: 140px;\n  }\n  75% {\n    left: 140px;\n    transform: scale(1);\n  }\n  87.5% {\n    left: 140px;\n    transform: scale(0);\n    opacity: 1;\n  }\n  100% {\n    left: 140px;\n    opacity: 0;\n  }\n}\n\n.stzh-loader {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  &__label {\n    @include fontSize(\"micro\");\n    text-align: center;\n\n    &:not(:empty) {\n      margin-top: space(\"medium\");\n    }\n  }\n\n  &__wrapper {\n    width: calc(200px / $loaderFactor);\n    height: calc(40px / $loaderFactor);\n  }\n\n  &__uil {\n    background: none;\n    position: relative;\n    width: 200px;\n    height: 40px;\n    transform: scale($loaderScale);\n    transform-origin: top left;\n  }\n\n  &__ib {\n    width: 100%;\n    height: 100%;\n    transform: rotate(0deg);\n  }\n\n  &__circle {\n    width: 60px;\n    height: 40px;\n    position: absolute;\n    opacity: 0;\n    text-align: center;\n    animation: stzh-loader 3s linear infinite;\n\n    & > div {\n      width: 40px;\n      height: 40px;\n      border-radius: 20px;\n      margin: 0 10px;\n    }\n\n    &:nth-of-type(2n + 1) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(2n) > div {\n      background: #0f05a0;\n    }\n\n    &:nth-of-type(1) {\n      animation-delay: 0s;\n    }\n\n    &:nth-of-type(2) {\n      animation-delay: 0.75s;\n    }\n\n    &:nth-of-type(3) {\n      animation-delay: 1.5s;\n    }\n\n    &:nth-of-type(4) {\n      animation-delay: 2.25s;\n    }\n  }\n\n  /* Small variant */\n\n  &--size-small &__label {\n    @include fontSize(\"pico\");\n\n    &:not(:empty) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  &--size-small &__wrapper {\n    width: calc(200px / $loaderFactor * $loaderSmallFactor);\n    height: calc(40px / $loaderFactor * $loaderSmallFactor);\n  }\n\n  &--size-small &__uil {\n    transform: scale($loaderScale * $loaderSmallFactor);\n  }\n\n  /* Hide label */\n\n  &--hide-label &__label {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\n\n/**\n * @slot - Slot for label/text content\n */\n@Component({\n  tag: \"stzh-loader\",\n  styleUrl: \"stzh-loader.scss\",\n  scoped: true,\n})\nexport class StzhLoader {\n  /** Size */\n  @Prop() size: \"default\" | \"small\" = \"default\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Hide label text visually (still anounced for screenreaders) */\n  @Prop() hideLabel: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  render() {\n    const classes = {\n      \"stzh-loader\": true,\n      \"stzh-loader--hide-label\": this.hideLabel,\n      [`stzh-loader--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-loader__wrapper\">\n            <div class=\"stzh-loader__uil\">\n              <div class=\"stzh-loader__ib\">\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n                <div class=\"stzh-loader__circle\">\n                  <div></div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-loader__label\" aria-live=\"polite\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-25ff5360.js → p-26edabbb.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-17efbc57.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$2 } from './p-dd1c0c0c.js';
+import { d as defineCustomElement$1 } from './p-7c4e756c.js';
 
 const stzhMenuItemCss = ".sc-stzh-menu-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h,[stzh-hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-black);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--hover-color:var(--stzh-popover-item-hover-color, var(--stzh-color-black));--hover-background-color:var(--stzh-popover-item-hover-bg, var(--stzh-color-grey20))}[size=large].sc-stzh-menu-item-h{--icon-size:var(--stzh-icon-size);--height:var(--stzh-menu-large-item-height);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge)}[variant=secondary].sc-stzh-menu-item-h{--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-secondary30)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-grey20)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:flex;gap:var(--stzh-space-small);align-items:center;justify-content:stretch;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{--stzh-icon-size:var(--icon-size);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__text-wrapper.sc-stzh-menu-item{display:flex;gap:var(--stzh-space-xsmall)}.stzh-menu-item__counter.sc-stzh-menu-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--size-large.sc-stzh-menu-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);gap:var(--stzh-space-medium)}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}";
 const StzhMenuItemStyle0 = stzhMenuItemCss;
@@ -87,7 +87,7 @@ const StzhMenuItem = /*@__PURE__*/ proxyCustomElement(class StzhMenuItem extends
             [`stzh-menu-item--size-${this.size}`]: !!this.size,
             [`stzh-menu-item--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'a7e424eb94f2897feb0862294c622e7741ca7b97', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: '5890cc5dec0b12903ac165230472b93eae8393e4', role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : (h("button", { ref: el => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return this; }
     static get style() { return StzhMenuItemStyle0; }
@@ -133,4 +133,4 @@ function defineCustomElement() {
 
 export { StzhMenuItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-25ff5360.js.map
+//# sourceMappingURL=p-26edabbb.js.map

package/dist/components/{p-25ff5360.js.map → p-26edabbb.js.map}

@@ -1 +1 @@
-{"file":"p-25ff5360.js","mappings":"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","names":[],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-26edabbb.js","mappings":"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","names":[],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize(\"small\")};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"large\")};\n  --padding-right: #{space(\"large\")};\n\n  --hover-color: var(--stzh-popover-item-hover-color, #{$colorBlack});\n  --hover-background-color: var(--stzh-popover-item-hover-bg, #{$colorGrey20});\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space(\"xlarge\")};\n    --padding-right: #{space(\"xlarge\")};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize(\"micro\");\n  font-family: inherit;\n  display: flex;\n  gap: space(\"small\");\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space(\"xsmall\")} * -1);\n    right: calc(#{space(\"xsmall\")} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space(\"xsmall\");\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize(\"milli\");\n    gap: space(\"medium\");\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}