@oiz/stzh-components 3.2.0-beta1 → 3.2.0

package/dist/stzh-components/p-b397337c.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhGhettoboxCss","StzhGhettobox","this","onCloseButtonClick","hide","init","button","element","querySelector","setPropsIfNull","size","sizeMedium","variant","effect","icon","iconPosition","show","open","stzhOpen","emit","component","stzhClose","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","hideClose","h","Host","hidden","class","hiddenTitle","mainTitle","description","name","onClick","a11yLabel","close","iconOnly","stzhRichtextCss","CLASS_EXTERNAL_LINK","CLASS_EXTERNAL_ICON_WRAPPER","CLASS_EXTERNAL_ICON","CLASS_EXTERNAL_VHIDDEN","StzhRichtext","addExternalLinkIcons","externalLinks","forEach","externalLink","classList","add","screenreaderText","document","createElement","innerText","$globals","externalLinkLabel","prepend","iconWrapper","externalLinkIcon","appendChild","componentDidRender","Array","from","querySelectorAll","externalLinkSelector","length","removeFirstMargin","removeLastMargin","stzhShowCss","KEY_PREFIX_CLOSE","StzhShow","closedByCookie","closeWatcher","event","includes","detail","closeKey","Cookie","set","Date","now","toString","showFromDateWatcher","newValue","_showFromDate","timeClosed","get","Number","getTime","hideFromDateWatcher","_hideFromDate","showFromDate","hideFromDate","timeNow"],"sources":["src/components/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/stzh-ghettobox/stzh-ghettobox.tsx","src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx","src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorError60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n    @include spaceCurve('padding-top', 'large');\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve('gap', 'regular');\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'regular');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\"\n    })\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\"\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\"\n      } as HTMLStzhButtonElement)\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\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-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">\n              {this.hiddenTitle || this.localization.hiddenTitle}\n            </h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">\n                  {this.mainTitle}\n                </h2>\n                <div class=\"stzh-ghettobox__description\">\n                  {this.description ? this.description : <slot></slot>}\n                </div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose &&\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhBannerCloseEvent,\n  StzhGhettoboxCloseEvent,\n  StzhMessageCloseEvent\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (\n        timeClosed && (\n          !this._showFromDate\n          || Number(timeClosed) >= this._showFromDate.getTime()\n        )\n      ) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host hidden={\n        this._showFromDate && timeNow <= this._showFromDate.getTime()\n        || this._hideFromDate && timeNow >= this._hideFromDate.getTime()\n        || this.closedByCookie\n      }>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhGhettoboxCss","StzhGhettobox","this","onCloseButtonClick","hide","init","button","element","querySelector","setPropsIfNull","size","sizeMedium","variant","effect","icon","iconPosition","show","open","stzhOpen","emit","component","stzhClose","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","hideClose","h","Host","hidden","class","hiddenTitle","mainTitle","description","name","onClick","a11yLabel","close","iconOnly","stzhRichtextCss","CLASS_EXTERNAL_LINK","CLASS_EXTERNAL_ICON_WRAPPER","CLASS_EXTERNAL_ICON","CLASS_EXTERNAL_VHIDDEN","StzhRichtext","addExternalLinkIcons","externalLinks","forEach","externalLink","classList","add","screenreaderText","document","createElement","innerText","$globals","externalLinkLabel","prepend","iconWrapper","externalLinkIcon","appendChild","componentDidRender","Array","from","querySelectorAll","externalLinkSelector","length","removeFirstMargin","removeLastMargin","stzhShowCss","KEY_PREFIX_CLOSE","StzhShow","closedByCookie","closeWatcher","event","includes","detail","closeKey","Cookie","set","Date","now","toString","showFromDateWatcher","newValue","_showFromDate","timeClosed","get","Number","getTime","hideFromDateWatcher","_hideFromDate","showFromDate","hideFromDate","timeNow"],"sources":["src/components/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/stzh-ghettobox/stzh-ghettobox.tsx","src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx","src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorError60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n    @include spaceCurve('padding-top', 'large');\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve('gap', 'regular');\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'regular');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\"\n    })\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\"\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\"\n      } as HTMLStzhButtonElement)\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\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-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">\n              {this.hiddenTitle || this.localization.hiddenTitle}\n            </h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">\n                  {this.mainTitle}\n                </h2>\n                <div class=\"stzh-ghettobox__description\">\n                  {this.description ? this.description : <slot></slot>}\n                </div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose &&\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhBannerCloseEvent,\n  StzhGhettoboxCloseEvent,\n  StzhMessageCloseEvent\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (\n        timeClosed && (\n          !this._showFromDate\n          || Number(timeClosed) >= this._showFromDate.getTime()\n        )\n      ) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host hidden={\n        this._showFromDate && timeNow <= this._showFromDate.getTime()\n        || this._hideFromDate && timeNow >= this._hideFromDate.getTime()\n        || this.closedByCookie\n      }>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-b41d255f.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhPiQuoteCss","StzhPiQuote","render","classes","h","Host","class","this","text"],"sources":["src/components/stzh-pi-quote/stzh-pi-quote.scss?tag=stzh-pi-quote&encapsulation=scoped","src/components/stzh-pi-quote/stzh-pi-quote.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-pi-quote-background-color, #{$colorPrimary30});\n  --color: var(--stzh-pi-quote-color, #{$colorPrimary50});\n}\n\n.stzh-pi-quote {\n  position: relative;\n  background-color: var(--background-color);\n  @include spaceCurve('padding-top', medium);\n  @include spaceCurve('padding-right', medium);\n  @include spaceCurve('padding-bottom', medium);\n  @include spaceCurve('padding-left', medium);\n\n  @include mq($from: small) {\n    padding-left: 87px;\n  }\n\n  @include mq($from: medium) {\n    padding-left: 158px;\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &__text {\n    @include fontCurve('h3');\n    @include font('heavy');\n    margin: 0;\n    padding: 0;\n    display: flex;\n\n    &::before,\n    &::after {\n      display: block;\n      font-size: var(--stzh-font-mega-font-size);\n\n      @include mq($from: large) {\n        font-size: var(--stzh-font-hero-font-size);\n      }\n    }\n\n    &::before {\n      content: '\\00AB';\n      color: var(--color);\n      display: flex;\n      align-items: flex-start;\n      padding-right: var(--stzh-space-xsmall);\n      line-height: 0;\n      padding-top: var(--stzh-space-small);\n    }\n\n    &::after {\n      content: '\\00BB';\n      color: var(--color);\n      display: flex;\n      align-items: flex-end;\n      padding-left: var(--stzh-space-xsmall);\n      line-height: 0;\n      padding-bottom: var(--stzh-space-medium);\n\n      @include mq($from: large) {\n        padding-bottom: var(--stzh-space-large);\n      }\n    }\n  }\n}\n\n\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"stzh-pi-quote\",\n  styleUrl: \"stzh-pi-quote.scss\",\n  scoped: true,\n})\nexport class StzhPiQuote {\n  @Element() element: HTMLStzhListElement;\n\n  /* Text for quote */\n  @Prop() text: string = \"\";\n\n  render() {\n    const classes = {\n      \"stzh-pi-quote\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <blockquote class=\"stzh-pi-quote__text\">{this.text}</blockquote>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,4rK,MCOVC,EAAW,M,mCAIC,E,CAEvB,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,cAAYE,MAAM,uBAAuBC,KAAKC,O"}
+{"version":3,"names":["stzhPiQuoteCss","StzhPiQuote","render","classes","h","Host","class","this","text"],"sources":["src/components/stzh-pi-quote/stzh-pi-quote.scss?tag=stzh-pi-quote&encapsulation=scoped","src/components/stzh-pi-quote/stzh-pi-quote.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-pi-quote-background-color, #{$colorPrimary30});\n  --color: var(--stzh-pi-quote-color, #{$colorPrimary50});\n}\n\n.stzh-pi-quote {\n  position: relative;\n  background-color: var(--background-color);\n  @include spaceCurve('padding-top', medium);\n  @include spaceCurve('padding-right', medium);\n  @include spaceCurve('padding-bottom', medium);\n  @include spaceCurve('padding-left', medium);\n\n  @include mq($from: small) {\n    padding-left: 87px;\n  }\n\n  @include mq($from: medium) {\n    padding-left: 158px;\n  }\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &__text {\n    @include fontCurve('h3');\n    @include font('heavy');\n    margin: 0;\n    padding: 0;\n    display: flex;\n\n    &::before,\n    &::after {\n      display: block;\n      font-size: var(--stzh-font-mega-font-size);\n\n      @include mq($from: large) {\n        font-size: var(--stzh-font-hero-font-size);\n      }\n    }\n\n    &::before {\n      content: '\\00AB';\n      color: var(--color);\n      display: flex;\n      align-items: flex-start;\n      padding-right: var(--stzh-space-xsmall);\n      line-height: 0;\n      padding-top: var(--stzh-space-small);\n    }\n\n    &::after {\n      content: '\\00BB';\n      color: var(--color);\n      display: flex;\n      align-items: flex-end;\n      padding-left: var(--stzh-space-xsmall);\n      line-height: 0;\n      padding-bottom: var(--stzh-space-medium);\n\n      @include mq($from: large) {\n        padding-bottom: var(--stzh-space-large);\n      }\n    }\n  }\n}\n\n\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n/**\n * \n */\n@Component({\n  tag: \"stzh-pi-quote\",\n  styleUrl: \"stzh-pi-quote.scss\",\n  scoped: true,\n})\nexport class StzhPiQuote {\n  @Element() element: HTMLStzhListElement;\n\n  /* Text for quote */\n  @Prop() text: string = \"\";\n\n  render() {\n    const classes = {\n      \"stzh-pi-quote\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <blockquote class=\"stzh-pi-quote__text\">{this.text}</blockquote>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,4rK,MCUVC,EAAW,M,mCAIC,E,CAEvB,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,cAAYE,MAAM,uBAAuBC,KAAKC,O"}

package/dist/stzh-components/{p-2ba166dd.entry.js → p-b5c781bc.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as t,a as e,g as r}from"./p-c7bfac7a.js";import{m as i,a as h,r as o}from"./p-10e2901a.js";const a=".sc-stzh-progressbar-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-progressbar-h{display:none}.sc-stzh-progressbar-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::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-progressbar-h .has-focus.sc-stzh-progressbar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar{outline-style:none !important}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar::-moz-focus-inner{border:0 !important}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:flex;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{flex-grow:1;flex-shrink:1;flex-basis:0}";const c=class{constructor(t){s(this,t);this.setCurrentSteps=()=>{if(i("ultra").matches&&this.stepsUltra){this.currentSteps=this.stepsUltra}else if(i("large").matches&&this.stepsLarge){this.currentSteps=this.stepsLarge}else if(i("medium").matches&&this.stepsMedium){this.currentSteps=this.stepsMedium}else if(i("small").matches&&this.stepsSmall){this.currentSteps=this.stepsSmall}else{this.currentSteps=this.steps}};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.clickDisabled=false;this.currentSteps=undefined}async getItemData(){return this._data.map(((s,t)=>Object.assign(Object.assign({},s),this.getItemAttributes(t))))}stepsWatcher(){this.setCurrentSteps()}dataWatcher(s){if(typeof s==="string"){this._data=JSON.parse(s)}else{this._data=s}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex}getItemAttributes(s){const t={};t.step=s+1;t.first=s===0;t.last=s===this.lastItemIndex;t.current=s===this.index;t.passed=s<this.index;if(this._data.length>this.currentSteps){if(s===this.lastItemIndex&&!this.withinLastFewSteps){t.dotted=true}if(this.index<2){t.hide=s>this.maxStepIndex-1&&s<this.lastItemIndex}else{if(s===0){t.dotted=true}let e=this.index;if(this.withinLastFewSteps){e=this._data.length-this.maxStepIndex}t.hide=s>0&&s<e||s>this.index+(this.currentSteps-3)&&s<this.lastItemIndex}}return t}async componentWillLoad(){this.dataWatcher(this.data);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"progressbar")}}connectedCallback(){this.setCurrentSteps();h(this.setCurrentSteps)}disconnectedCallback(){o(this.setCurrentSteps)}render(){const s={"stzh-progressbar":true,[`stzh-progressbar--index-${this.index}`]:!!this.index};return t(e,{style:{"--steps":this.currentSteps?this.currentSteps.toString():null}},t("div",{class:s},t("div",{class:"stzh-progressbar__items",role:"list","aria-label":this.localization.label},this._data.map(((s,e)=>t("stzh-progressbar-item",Object.assign({},this.getItemAttributes(e),{icon:s.icon,disabled:s.disabled,label:s.label,"click-disabled":this.clickDisabled,class:"stzh-progressbar__item"})))))))}get element(){return r(this)}static get watchers(){return{steps:["stepsWatcher"],stepsSmall:["stepsWatcher"],stepsMedium:["stepsWatcher"],stepsLarge:["stepsWatcher"],stepsUltra:["stepsWatcher"],data:["dataWatcher"]}}};c.style=a;export{c as stzh_progressbar};
-//# sourceMappingURL=p-2ba166dd.entry.js.map
+import{r as s,h as t,a as e,g as r}from"./p-c7bfac7a.js";import{m as i,a as h,r as o}from"./p-10e2901a.js";const a=".sc-stzh-progressbar-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-progressbar-h{display:none}.sc-stzh-progressbar-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::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-progressbar-h .has-focus.sc-stzh-progressbar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar{outline-style:none !important}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar::-moz-focus-inner{border:0 !important}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:flex;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{flex-grow:1;flex-shrink:1;flex-basis:0}";const c=class{constructor(t){s(this,t);this.setCurrentSteps=()=>{if(i("ultra").matches&&this.stepsUltra){this.currentSteps=this.stepsUltra}else if(i("large").matches&&this.stepsLarge){this.currentSteps=this.stepsLarge}else if(i("medium").matches&&this.stepsMedium){this.currentSteps=this.stepsMedium}else if(i("small").matches&&this.stepsSmall){this.currentSteps=this.stepsSmall}else{this.currentSteps=this.steps}};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.clickDisabled=false;this.currentSteps=undefined}async getItemData(){return this._data.map(((s,t)=>Object.assign(Object.assign({},s),this.getItemAttributes(t))))}stepsWatcher(){this.setCurrentSteps()}dataWatcher(s){if(typeof s==="string"){this._data=JSON.parse(s)}else{this._data=s}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex}getItemAttributes(s){const t={};t.step=s+1;t.first=s===0;t.last=s===this.lastItemIndex;t.current=s===this.index;t.passed=s<this.index;if(this._data.length>this.currentSteps){if(s===this.lastItemIndex&&!this.withinLastFewSteps){t.dotted=true}if(this.index<2){t.hide=s>this.maxStepIndex-1&&s<this.lastItemIndex}else{if(s===0){t.dotted=true}let e=this.index;if(this.withinLastFewSteps){e=this._data.length-this.maxStepIndex}t.hide=s>0&&s<e||s>this.index+(this.currentSteps-3)&&s<this.lastItemIndex}}return t}async componentWillLoad(){this.dataWatcher(this.data);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"progressbar")}}connectedCallback(){this.setCurrentSteps();h(this.setCurrentSteps)}disconnectedCallback(){o(this.setCurrentSteps)}render(){const s={"stzh-progressbar":true,[`stzh-progressbar--index-${this.index}`]:!!this.index};return t(e,{style:{"--steps":this.currentSteps?this.currentSteps.toString():null}},t("div",{class:s},t("div",{class:"stzh-progressbar__items",role:"list","aria-label":this.localization.label},this._data.map(((s,e)=>t("stzh-progressbar-item",Object.assign({},this.getItemAttributes(e),{icon:s.icon,disabled:s.disabled,label:s.label,"click-disabled":this.clickDisabled,class:"stzh-progressbar__item"})))),t("slot",null))))}get element(){return r(this)}static get watchers(){return{steps:["stepsWatcher"],stepsSmall:["stepsWatcher"],stepsMedium:["stepsWatcher"],stepsLarge:["stepsWatcher"],stepsUltra:["stepsWatcher"],data:["dataWatcher"]}}};c.style=a;export{c as stzh_progressbar};
+//# sourceMappingURL=p-b5c781bc.entry.js.map

package/dist/stzh-components/{p-2ba166dd.entry.js.map → p-b5c781bc.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","getItemData","_data","map","step","index","Object","assign","getItemAttributes","stepsWatcher","dataWatcher","newValue","JSON","parse","lastItemIndex","length","maxStepIndex","withinLastFewSteps","itemIndex","item","first","last","current","passed","dotted","hide","substract","componentWillLoad","data","localization","window","stzhComponents","utils","fetchTranslations","element","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","style","toString","class","role","label","icon","disabled","clickDisabled"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  /**\n   * Whether all the progressbar-items are clickable.\n   */\n  @Prop() clickDisabled: boolean = false;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                click-disabled={this.clickDisabled}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","getItemData","_data","map","step","index","Object","assign","getItemAttributes","stepsWatcher","dataWatcher","newValue","JSON","parse","lastItemIndex","length","maxStepIndex","withinLastFewSteps","itemIndex","item","first","last","current","passed","dotted","hide","substract","componentWillLoad","data","localization","window","stzhComponents","utils","fetchTranslations","element","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","style","toString","class","role","label","icon","disabled","clickDisabled"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  /**\n   * Whether all the progressbar-items are clickable.\n   */\n  @Prop() clickDisabled: boolean = false;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                click-disabled={this.clickDisabled}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}