@oiz/stzh-components 3.2.0-beta1 → 3.2.0

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

@@ -1 +1 @@
-{"version":3,"names":["stzhStickyActionsCss","StzhStickyActions","this","observePagetitle","entries","hasActiveScrollup","isIntersecting","updateScrollupWidth","scrollupElement","element","isConnected","width","getBoundingClientRect","document","documentElement","style","setProperty","handleScrollupResize","throttle","hasActiveScrollupWatcher","newValue","componentDidLoad","isSlotted","assignedSlot","pagetitle","pagetitleQuery","querySelector","observer","IntersectionObserver","rootMargin","observe","requestAnimationFrame","resizeObserver","ResizeObserver","disconnectedCallback","_a","disconnect","_b","render","chatSlotUsed","hasSlot","scrollupSlotUsed","classes","h","Host","class","name","position","variant","disableStickyTop","onSlotchange","forceUpdate","ref","el"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n  --gap: #{space('small')};\n  --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n  --stuck-offset: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: medium) {\n    --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n  }\n\n  // z-index: $zIndexSticky;\n  // position: fixed;\n  // right: $containerMargin;\n  // bottom: space('small');\n  // transition: transform $baseTransitionAnimationSpeed;\n  // transform:\n  //   translateY(calc((\n  //     var(--stzh-pagetitle-disturber-stuck-height, 0px)\n  //     + var(--stzh-cta-stuck-bottom-height, 0px)\n  //   ) / -1))\n  //   translateX(0);\n\n  // @include mq($from: small) {\n  //   right: $containerMarginSmall;\n  // }\n\n  // @include mq($from: medium) {\n  //   right: $containerMarginMedium;\n  // }\n\n  // @include mq($from: large) {\n  //   right: $containerMarginLarge;\n  // }\n\n  // @include mq($from: ultra) {\n  //   right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n  // }\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-sticky-actions {\n  &__container {\n    display: flex;\n    justify-content: flex-end;\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__sticky {\n    --padding-top: 0px;\n    --padding-bottom: var(--sticky-padding-bottom);\n  }\n\n  &__sticky[is-stuck-bottom] &__container {\n    transform: translateY(calc(var(--stuck-offset) / -1))\n  }\n\n  &__scrollup-wrapper {\n    transition-property: transform, opacity, visibility;\n    transition-duration: $baseTransitionAnimationSpeed;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n  }\n\n  &.has-chat &__scrollup-wrapper {\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n  }\n\n  &.has-scrollup &__chat-wrapper {\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n  }\n\n  /* Active scrollup variant */\n\n  &.has-active-scrollup &__scrollup-wrapper {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0px);\n  }\n\n  &.has-active-scrollup &__chat-wrapper {\n    transform: translateX(calc(var(--gap) / -1));\n  }\n\n  /* Is not slotted */\n  &.is-not-slotted {\n    height: 0;\n  }\n}\n","import { Component, Element, forceUpdate, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n */\n@Component({\n  tag: \"stzh-sticky-actions\",\n  styleUrl: \"stzh-sticky-actions.scss\",\n  shadow: true,\n})\nexport class StzhStickyActions {\n  /** Query used to get pagetitle element (will show scrollup when passed). */\n  @Prop() pagetitleQuery: string | (() => HTMLElement) =\n    \"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\";\n\n  @State() hasActiveScrollup = false;\n  @State() isSlotted = true;\n\n  @Element() element: HTMLStzhStickyActionsElement;\n\n  @Watch(\"hasActiveScrollup\")\n  hasActiveScrollupWatcher(newValue: boolean) {\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n  }\n\n  private observer: IntersectionObserver;\n  private resizeObserver: ResizeObserver;\n  private scrollupElement: HTMLElement;\n\n  private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n    this.hasActiveScrollup = !entries[0].isIntersecting;\n  };\n\n  private updateScrollupWidth = () => {\n    if (this.scrollupElement && this.element.isConnected) {\n      const { width } = this.scrollupElement.getBoundingClientRect();\n      document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n    }\n  };\n\n  private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n  componentDidLoad() {\n    this.isSlotted = !!this.element.assignedSlot;\n    const pagetitle =\n      typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n\n    if (pagetitle) {\n      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\" });\n      this.observer.observe(pagetitle);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateScrollupWidth();\n\n        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n        this.resizeObserver.observe(this.scrollupElement);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  render() {\n    const chatSlotUsed = hasSlot(this.element, \"chat\");\n    const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n    const classes = {\n      \"stzh-sticky-actions\": true,\n      \"has-chat\": chatSlotUsed,\n      \"has-scrollup\": scrollupSlotUsed,\n      \"has-active-scrollup\": this.hasActiveScrollup,\n      \"is-not-slotted\": !this.isSlotted,\n    };\n\n    return (\n      <Host>\n        <div class={classes} data-stzh-sticky-width-container>\n          <stzh-sticky\n            name=\"actions\"\n            class=\"stzh-sticky-actions__sticky\"\n            position=\"fixed\"\n            variant=\"transparent\"\n            disableStickyTop={true}\n          >\n            <div class=\"stzh-sticky-actions__container\">\n              <div class=\"stzh-sticky-actions__chat-wrapper\">\n                <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n              <div ref={el => (this.scrollupElement = el as HTMLElement)} class=\"stzh-sticky-actions__scrollup-wrapper\">\n                <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n            </div>\n          </stzh-sticky>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gNAAA,MAAMA,EAAuB,gwF,MCahBC,EAAiB,M,yBAoBpBC,KAAAC,iBAAoBC,IAC1BF,KAAKG,mBAAqBD,EAAQ,GAAGE,cAAc,EAG7CJ,KAAAK,oBAAsB,KAC5B,GAAIL,KAAKM,iBAAmBN,KAAKO,QAAQC,YAAa,CACpD,MAAMC,MAAEA,GAAUT,KAAKM,gBAAgBI,wBACvCC,SAASC,gBAAgBC,MAAMC,YAAY,uCAAwC,GAAGL,M,GAIlFT,KAAAe,qBAAuBC,EAAShB,KAAKK,oBAAqB,K,oBA5BhE,mI,uBAE2B,M,eACR,I,CAKrB,wBAAAY,CAAyBC,GACvBP,SAASC,gBAAgBC,MAAMC,YAAY,2CAA4CI,EAAW,IAAM,KACxGP,SAASC,gBAAgBC,MAAMC,YAAY,+CAAgDI,EAAW,IAAM,I,CAoB9G,gBAAAC,GACEnB,KAAKoB,YAAcpB,KAAKO,QAAQc,aAChC,MAAMC,SACGtB,KAAKuB,iBAAmB,SAAWZ,SAASa,cAAcxB,KAAKuB,gBAAkBvB,KAAKuB,iBAE/F,GAAID,EAAW,CACbtB,KAAKyB,SAAW,IAAIC,qBAAqB1B,KAAKC,iBAAkB,CAAE0B,WAAY,QAC9E3B,KAAKyB,SAASG,QAAQN,E,CAGxBO,uBAAsB,KACpBA,uBAAsB,KACpB7B,KAAKK,sBAELL,KAAK8B,eAAiB,IAAIC,eAAe/B,KAAKe,sBAC9Cf,KAAK8B,eAAeF,QAAQ5B,KAAKM,gBAAgB,GACjD,G,CAIN,oBAAA0B,G,SACEC,EAAAjC,KAAKyB,YAAQ,MAAAQ,SAAA,SAAAA,EAAEC,cACfC,EAAAnC,KAAK8B,kBAAc,MAAAK,SAAA,SAAAA,EAAED,Y,CAGvB,MAAAE,GACE,MAAMC,EAAeC,EAAQtC,KAAKO,QAAS,QAC3C,MAAMgC,EAAmBD,EAAQtC,KAAKO,QAAS,YAE/C,MAAMiC,EAAU,CACd,sBAAuB,KACvB,WAAYH,EACZ,eAAgBE,EAChB,sBAAuBvC,KAAKG,kBAC5B,kBAAmBH,KAAKoB,WAG1B,OACEqB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,EAAO,yCACjBC,EAAA,eACEG,KAAK,UACLD,MAAM,8BACNE,SAAS,QACTC,QAAQ,cACRC,iBAAkB,MAElBN,EAAA,OAAKE,MAAM,kCACTF,EAAA,OAAKE,MAAM,qCACTF,EAAA,QAAMG,KAAK,OAAOI,aAAc,IAAMC,EAAYjD,KAAKO,YAEzDkC,EAAA,OAAKS,IAAKC,GAAOnD,KAAKM,gBAAkB6C,EAAoBR,MAAM,yCAChEF,EAAA,QAAMG,KAAK,WAAWI,aAAc,IAAMC,EAAYjD,KAAKO,e"}
+{"version":3,"names":["stzhStickyActionsCss","StzhStickyActions","this","observePagetitle","entries","hasActiveScrollup","isIntersecting","updateScrollupWidth","scrollupElement","element","isConnected","width","getBoundingClientRect","document","documentElement","style","setProperty","handleScrollupResize","throttle","hasActiveScrollupWatcher","newValue","componentDidLoad","isSlotted","assignedSlot","pagetitle","pagetitleQuery","querySelector","observer","IntersectionObserver","rootMargin","observe","requestAnimationFrame","resizeObserver","ResizeObserver","disconnectedCallback","_a","disconnect","_b","render","chatSlotUsed","hasSlot","scrollupSlotUsed","classes","h","Host","class","name","position","variant","disableStickyTop","onSlotchange","forceUpdate","ref","el"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n  --gap: #{space('small')};\n  --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n  --stuck-offset: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: medium) {\n    --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n  }\n\n  // z-index: $zIndexSticky;\n  // position: fixed;\n  // right: $containerMargin;\n  // bottom: space('small');\n  // transition: transform $baseTransitionAnimationSpeed;\n  // transform:\n  //   translateY(calc((\n  //     var(--stzh-pagetitle-disturber-stuck-height, 0px)\n  //     + var(--stzh-cta-stuck-bottom-height, 0px)\n  //   ) / -1))\n  //   translateX(0);\n\n  // @include mq($from: small) {\n  //   right: $containerMarginSmall;\n  // }\n\n  // @include mq($from: medium) {\n  //   right: $containerMarginMedium;\n  // }\n\n  // @include mq($from: large) {\n  //   right: $containerMarginLarge;\n  // }\n\n  // @include mq($from: ultra) {\n  //   right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n  // }\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-sticky-actions {\n  &__container {\n    display: flex;\n    justify-content: flex-end;\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__sticky {\n    --padding-top: 0px;\n    --padding-bottom: var(--sticky-padding-bottom);\n  }\n\n  &__sticky[is-stuck-bottom] &__container {\n    transform: translateY(calc(var(--stuck-offset) / -1))\n  }\n\n  &__scrollup-wrapper {\n    transition-property: transform, opacity, visibility;\n    transition-duration: $baseTransitionAnimationSpeed;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n  }\n\n  &.has-chat &__scrollup-wrapper {\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n  }\n\n  &.has-scrollup &__chat-wrapper {\n    transition-property: transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n  }\n\n  /* Active scrollup variant */\n\n  &.has-active-scrollup &__scrollup-wrapper {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(0px);\n  }\n\n  &.has-active-scrollup &__chat-wrapper {\n    transform: translateX(calc(var(--gap) / -1));\n  }\n\n  /* Is not slotted */\n  &.is-not-slotted {\n    height: 0;\n  }\n}\n","import { Component, Element, forceUpdate, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n * @slot - Slot for content that should stick to scroll-up place\n\n */\n@Component({\n  tag: \"stzh-sticky-actions\",\n  styleUrl: \"stzh-sticky-actions.scss\",\n  shadow: true,\n})\nexport class StzhStickyActions {\n  /** Query used to get pagetitle element (will show scrollup when passed). */\n  @Prop() pagetitleQuery: string | (() => HTMLElement) =\n    \"stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights\";\n\n  @State() hasActiveScrollup = false;\n  @State() isSlotted = true;\n\n  @Element() element: HTMLStzhStickyActionsElement;\n\n  @Watch(\"hasActiveScrollup\")\n  hasActiveScrollupWatcher(newValue: boolean) {\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n  }\n\n  private observer: IntersectionObserver;\n  private resizeObserver: ResizeObserver;\n  private scrollupElement: HTMLElement;\n\n  private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n    this.hasActiveScrollup = !entries[0].isIntersecting;\n  };\n\n  private updateScrollupWidth = () => {\n    if (this.scrollupElement && this.element.isConnected) {\n      const { width } = this.scrollupElement.getBoundingClientRect();\n      document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n    }\n  };\n\n  private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n  componentDidLoad() {\n    this.isSlotted = !!this.element.assignedSlot;\n    const pagetitle =\n      typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n\n    if (pagetitle) {\n      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\" });\n      this.observer.observe(pagetitle);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateScrollupWidth();\n\n        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n        this.resizeObserver.observe(this.scrollupElement);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  render() {\n    const chatSlotUsed = hasSlot(this.element, \"chat\");\n    const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n    const classes = {\n      \"stzh-sticky-actions\": true,\n      \"has-chat\": chatSlotUsed,\n      \"has-scrollup\": scrollupSlotUsed,\n      \"has-active-scrollup\": this.hasActiveScrollup,\n      \"is-not-slotted\": !this.isSlotted,\n    };\n\n    return (\n      <Host>\n        <div class={classes} data-stzh-sticky-width-container>\n          <stzh-sticky\n            name=\"actions\"\n            class=\"stzh-sticky-actions__sticky\"\n            position=\"fixed\"\n            variant=\"transparent\"\n            disableStickyTop={true}\n          >\n            <div class=\"stzh-sticky-actions__container\">\n              <div class=\"stzh-sticky-actions__chat-wrapper\">\n                <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n              <div ref={el => (this.scrollupElement = el as HTMLElement)} class=\"stzh-sticky-actions__scrollup-wrapper\">\n                <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n              </div>\n            </div>\n          </stzh-sticky>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gNAAA,MAAMA,EAAuB,gwF,MCehBC,EAAiB,M,yBAoBpBC,KAAAC,iBAAoBC,IAC1BF,KAAKG,mBAAqBD,EAAQ,GAAGE,cAAc,EAG7CJ,KAAAK,oBAAsB,KAC5B,GAAIL,KAAKM,iBAAmBN,KAAKO,QAAQC,YAAa,CACpD,MAAMC,MAAEA,GAAUT,KAAKM,gBAAgBI,wBACvCC,SAASC,gBAAgBC,MAAMC,YAAY,uCAAwC,GAAGL,M,GAIlFT,KAAAe,qBAAuBC,EAAShB,KAAKK,oBAAqB,K,oBA5BhE,mI,uBAE2B,M,eACR,I,CAKrB,wBAAAY,CAAyBC,GACvBP,SAASC,gBAAgBC,MAAMC,YAAY,2CAA4CI,EAAW,IAAM,KACxGP,SAASC,gBAAgBC,MAAMC,YAAY,+CAAgDI,EAAW,IAAM,I,CAoB9G,gBAAAC,GACEnB,KAAKoB,YAAcpB,KAAKO,QAAQc,aAChC,MAAMC,SACGtB,KAAKuB,iBAAmB,SAAWZ,SAASa,cAAcxB,KAAKuB,gBAAkBvB,KAAKuB,iBAE/F,GAAID,EAAW,CACbtB,KAAKyB,SAAW,IAAIC,qBAAqB1B,KAAKC,iBAAkB,CAAE0B,WAAY,QAC9E3B,KAAKyB,SAASG,QAAQN,E,CAGxBO,uBAAsB,KACpBA,uBAAsB,KACpB7B,KAAKK,sBAELL,KAAK8B,eAAiB,IAAIC,eAAe/B,KAAKe,sBAC9Cf,KAAK8B,eAAeF,QAAQ5B,KAAKM,gBAAgB,GACjD,G,CAIN,oBAAA0B,G,SACEC,EAAAjC,KAAKyB,YAAQ,MAAAQ,SAAA,SAAAA,EAAEC,cACfC,EAAAnC,KAAK8B,kBAAc,MAAAK,SAAA,SAAAA,EAAED,Y,CAGvB,MAAAE,GACE,MAAMC,EAAeC,EAAQtC,KAAKO,QAAS,QAC3C,MAAMgC,EAAmBD,EAAQtC,KAAKO,QAAS,YAE/C,MAAMiC,EAAU,CACd,sBAAuB,KACvB,WAAYH,EACZ,eAAgBE,EAChB,sBAAuBvC,KAAKG,kBAC5B,kBAAmBH,KAAKoB,WAG1B,OACEqB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,EAAO,yCACjBC,EAAA,eACEG,KAAK,UACLD,MAAM,8BACNE,SAAS,QACTC,QAAQ,cACRC,iBAAkB,MAElBN,EAAA,OAAKE,MAAM,kCACTF,EAAA,OAAKE,MAAM,qCACTF,EAAA,QAAMG,KAAK,OAAOI,aAAc,IAAMC,EAAYjD,KAAKO,YAEzDkC,EAAA,OAAKS,IAAKC,GAAOnD,KAAKM,gBAAkB6C,EAAoBR,MAAM,yCAChEF,EAAA,QAAMG,KAAK,WAAWI,aAAc,IAAMC,EAAYjD,KAAKO,e"}

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

@@ -1 +1 @@
-{"version":3,"names":["stzhPagetitleCss","StzhPagetitle","this","isDisturberOpen","update","disturberElement","isMedium","media","matches","disturberHeight","_a","offsetHeight","hasDisturber","isStuck","document","documentElement","style","setProperty","init","heading","element","querySelector","disturber","leads","querySelectorAll","show","readspeakerButton","tag","setPropsIfNull","curve","level","initialOpenAnimation","mikro","type","size","nonInteractive","variant","noPaddingLeft","noPaddingRight","sizeMedium","buttonAccesskey","forEach","lead","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleStzhOpen","event","detail","component","handleStzhClose","componentDidRender","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageSlotUsed","hasSlot","leadSlotUsed","tagSlotUsed","readspeakerSlotUsed","classes","hyphensEnabled","background","h","Host","class","name","dateline","ratio","ratioSmall","ratioMedium","ref","el"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: **Global**: Background color of pagetitle.\n */\n\n:host {\n  --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-height\",\n      hasDisturber ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-stuck-height\",\n      isStuck ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true,\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true,\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true,\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\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    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const tagSlotUsed = hasSlot(this.element, \"tag\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhPagetitleCss","StzhPagetitle","this","isDisturberOpen","update","disturberElement","isMedium","media","matches","disturberHeight","_a","offsetHeight","hasDisturber","isStuck","document","documentElement","style","setProperty","init","heading","element","querySelector","disturber","leads","querySelectorAll","show","readspeakerButton","tag","setPropsIfNull","curve","level","initialOpenAnimation","mikro","type","size","nonInteractive","variant","noPaddingLeft","noPaddingRight","sizeMedium","buttonAccesskey","forEach","lead","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleStzhOpen","event","detail","component","handleStzhClose","componentDidRender","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageSlotUsed","hasSlot","leadSlotUsed","tagSlotUsed","readspeakerSlotUsed","classes","hyphensEnabled","background","h","Host","class","name","dateline","ratio","ratioSmall","ratioMedium","ref","el"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: **Global**: Background color of pagetitle.\n */\n\n:host {\n  --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot disturber - Slot for disturber content\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-height\",\n      hasDisturber ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-stuck-height\",\n      isStuck ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true,\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true,\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true,\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\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    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const tagSlotUsed = hasSlot(this.element, \"tag\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-bfe8d5cc.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,a as i,g as r}from"./p-c7bfac7a.js";import{s as o,h as n}from"./p-e30a5acc.js";import{w as a}from"./p-54bd842e.js";import{s as h,a as l}from"./p-7e2354d0.js";import{m as d}from"./p-10e2901a.js";import{j as c}from"./p-1b399113.js";import"./p-9b063923.js";import"./p-7183ba4d.js";const f=':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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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}:host{--label-color:var(--stzh-color-primary70);--background-color:var(--stzh-color-lemonyellow50);--border-color:var(--stzh-color-primary70);--border-width:0.5rem}.stzh-disturber{position:relative;display:flex;background-color:var(--background-color);transition:background-color var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-masked)}.stzh-disturber::before{content:"";position:absolute;inset:0;pointer-events:none;border-style:solid;border-width:0px;border-color:var(--border-color);border-bottom-width:var(--border-width)}@media screen and (min-width: 900px){.stzh-disturber::before{border-right-width:var(--border-width)}}.stzh-disturber__content{padding-bottom:var(--stzh-space-xlarge);padding-top:var(--stzh-space-xxlarge);padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large);flex-grow:1}@media screen and (min-width: 900px){.stzh-disturber__content{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-disturber__content{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-disturber__label{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color);transition:color var(--stzh-base-transition-animation-speed);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-disturber__label{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-disturber__label{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-disturber__label{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-disturber__close-wrapper{position:absolute;top:0px;right:0px}@media screen and (min-width: 900px){.stzh-disturber__close-wrapper{right:var(--border-width)}}';const u="stzh-components-disturber-close";function z(){const t=d("medium").matches;return{keyframes:[{transform:t?"translateY(40px)":"translateY(100%)",opacity:"0"},{transform:"translateY(0px)",opacity:"1"}],options:{duration:300,easing:"ease-out"}}}function p(){const t=d("medium").matches;return{keyframes:[{transform:"translateY(0px)",opacity:"1"},{transform:t?"translateY(40px)":"translateY(100%)",opacity:"0"}],options:{duration:300,easing:"ease-in"}}}const m=class{constructor(e){t(this,e);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.handleLinkSlotchange=()=>{var t;const s=((t=this.element.getRootNode())===null||t===void 0?void 0:t.host)||this.element;const e=s.querySelectorAll('stzh-link[slot="link"], [slot="link"] stzh-link');e.forEach((t=>{o(t,{icon:"arrow-right",iconPosition:"right"})}))};this.onCloseButtonClick=()=>{this.hide()};this.localization=undefined;this.label="";this.hideClose=false;this.open=true;this.initialOpenAnimation=false;this.closeKey=""}async openWatcher(t){if(!this.rootElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-disturber"})}await h(this.element);this.element.hidden=false;const t=z();await l(this.element,t.keyframes,t.options);this.element.style.opacity="1";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-disturber"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-disturber"})}await h(this.element);const t=p();await l(this.element,t.keyframes,t.options);this.element.style.opacity="0";this.element.hidden=true;if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-disturber"})}}this.toggledByMethod=false}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return a(this.element,"stzhOpened")}async hide(t=true){if(!this.open){return}if(this.closeKey&&t){c.set(`${u}-${this.closeKey}`,Date.now().toString())}this.toggledByMethod=true;this.open=false;return a(this.element,"stzhClosed")}async componentWillLoad(){if(this.closeKey){const t=c.get(`${u}-${this.closeKey}`);if(t){this.hide(false)}}if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"disturber")}}componentDidLoad(){if(this.initialOpenAnimation&&this.open){this.element.hidden=true;this.element.style.opacity="0";this.toggledByMethod=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{window.setTimeout((()=>{this.openWatcher(true)}),250)}))}))}else{this.element.hidden=!this.open;this.element.style.opacity=this.open?"1":"0"}}render(){const t=n(this.element,"link");const s={"stzh-disturber":true,"stzh-disturber--has-link":t,"stzh-disturber--has-close-hidden":this.hideClose};return e(i,null,e("div",{ref:t=>this.rootElement=t,class:s},e("div",{class:"stzh-disturber__content"},e("div",{class:"stzh-disturber__label"},this.label?this.label:e("slot",{name:"label"})),e("div",{class:"stzh-disturber__link"},e("slot",{name:"link",onSlotchange:this.handleLinkSlotchange}))),!this.hideClose&&e("div",{class:"stzh-disturber__close-wrapper"},e("stzh-button",{class:"stzh-disturber__close",onClick:this.onCloseButtonClick,label:this.localization.close,variant:"tertiary",size:"small",iconOnly:true,icon:"close-big"}))))}get element(){return r(this)}static get watchers(){return{open:["openWatcher"]}}};m.style=f;export{m as stzh_disturber};
+//# sourceMappingURL=p-bfe8d5cc.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhDisturberCss","KEY_PREFIX_CLOSE","getAnimationShow","isMedium","media","matches","keyframes","transform","opacity","options","duration","easing","getAnimationHide","StzhDisturber","this","handleLinkSlotchange","host","_a","element","getRootNode","links","querySelectorAll","forEach","link","setPropsIfNull","icon","iconPosition","onCloseButtonClick","hide","openWatcher","newValue","rootElement","toggledByMethod","stzhOpen","emit","component","stopAnimations","hidden","animationShow","animateTo","style","stzhOpened","stzhClose","animationHide","stzhClosed","show","open","waitForEvent","setCloseKey","closeKey","Cookie","set","Date","now","toString","componentWillLoad","timeClosed","get","localization","window","stzhComponents","utils","fetchTranslations","componentDidLoad","initialOpenAnimation","requestAnimationFrame","setTimeout","render","linkUsed","hasSlot","classes","hideClose","h","Host","ref","el","class","label","name","onSlotchange","onClick","close","variant","size","iconOnly"],"sources":["src/components/stzh-disturber/stzh-disturber.scss?tag=stzh-disturber&encapsulation=shadow","src/components/stzh-disturber/stzh-disturber.tsx"],"sourcesContent":[":host {\n  --label-color: #{$colorPrimary70};\n  --background-color: #{$colorLemonyellow50};\n  --border-color: #{$colorPrimary70};\n  --border-width: 8px;\n}\n\n.stzh-disturber {\n  position: relative;\n  display: flex;\n  background-color: var(--background-color);\n  transition: background-color $baseTransitionAnimationSpeed;\n  z-index: var(--stzh-z-index-masked);\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    border-style: solid;\n    border-width: 0px;\n    border-color: var(--border-color);\n    border-bottom-width: var(--border-width);\n\n    @include mq($from: medium) {\n      border-right-width: var(--border-width);\n    }\n  }\n\n  &__content {\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-top: space('xxlarge');\n    padding-left: space('large');\n    padding-right: space('large');\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-bottom: space('medium');\n  }\n\n  &__close-wrapper {\n    position: absolute;\n    top: 0px;\n    right: 0px;\n\n    @include mq($from: medium) {\n      right: var(--border-width);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDisturberOpenEvent,\n  StzhDisturberOpenedEvent,\n  StzhDisturberCloseEvent,\n  StzhDisturberClosedEvent,\n} from \"../../index\";\n\nimport { StzhDisturberLocalizedText } from \"./stzh-disturber.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\nimport { media } from \"../../utils/media-utils\";\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-disturber-close\";\n\nfunction getAnimationShow() {\n  const isMedium = media(\"medium\").matches;\n\n  return {\n    keyframes: [\n      { transform: isMedium ? \"translateY(40px)\" : \"translateY(100%)\", opacity: \"0\" },\n      { transform: \"translateY(0px)\", opacity: \"1\" },\n    ],\n    options: {\n      duration: 300,\n      easing: \"ease-out\"\n    }\n  };\n}\n\nfunction getAnimationHide() {\n  const isMedium = media(\"medium\").matches;\n\n  return {\n    keyframes: [\n      { transform: \"translateY(0px)\", opacity: \"1\" },\n      { transform: isMedium ? \"translateY(40px)\" : \"translateY(100%)\", opacity: \"0\" },\n    ],\n    options: {\n      duration: 300,\n      easing: \"ease-in\"\n    }\n  };\n}\n\n/**\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-disturber\",\n  styleUrl: \"stzh-disturber.scss\",\n  shadow: true\n})\nexport class StzhDisturber {\n  /** Translation strings. */\n  @Prop() localization: StzhDisturberLocalizedText;\n\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-disturber-close-{name})\n   * and if not empty (disturber already closed before) will hide the disturber.\n   */\n  @Prop() closeKey: string = \"\";\n\n  /** Disturber open event */\n  @Event() stzhOpen: EventEmitter<StzhDisturberOpenEvent>;\n\n  /** Disturber opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhDisturberOpenedEvent>;\n\n  /** Disturber close event */\n  @Event() stzhClose: EventEmitter<StzhDisturberCloseEvent>;\n\n  /** Disturber closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhDisturberClosedEvent>;\n\n  @Element() element: HTMLStzhDisturberElement;\n\n  // @State() loaded: boolean = false;\n\n  // @Listen(\"appload\", { target: \"window\" })\n  // handleAppload() {\n  //   if (this.initialOpenAnimation && this.open && !this.loaded) {\n  //     this.loaded = true;\n\n  //     console.log('appload');\n\n  //     requestAnimationFrame(() => {\n  //       requestAnimationFrame(() => {\n  //         window.setTimeout(() => {\n  //           this.openWatcher(true);\n  //         }, 4000);\n  //       });\n  //     });\n  //   }\n  // }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-disturber\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const animationShow = getAnimationShow();\n\n      await animateTo(\n        this.element,\n        animationShow.keyframes,\n        animationShow.options\n      );\n\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-disturber\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-disturber\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const animationHide = getAnimationHide();\n\n      await animateTo(\n        this.element,\n        animationHide.keyframes,\n        animationHide.options\n      );\n\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-disturber\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide(setCloseKey: boolean = true) {\n    if (!this.open) {\n      return;\n    }\n\n    if (this.closeKey && setCloseKey) {\n      Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const links = host.querySelectorAll(\n      'stzh-link[slot=\"link\"], [slot=\"link\"] stzh-link'\n    );\n\n    links.forEach((link) => {\n      setPropsIfNull(link, {\n        icon: \"arrow-right\",\n        iconPosition: \"right\"\n      } as HTMLStzhLinkElement)\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n      if (timeClosed) {\n        this.hide(false);\n      }\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"disturber\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.opacity = \"0\";\n\n      // set flag because we want stzhOpen event to be triggered\n      this.toggledByMethod = true;\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          window.setTimeout(() => {\n            this.openWatcher(true);\n          }, 250);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-disturber\": true,\n      \"stzh-disturber--has-link\": linkUsed,\n      \"stzh-disturber--has-close-hidden\": this.hideClose\n    };\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <div class=\"stzh-disturber__content\">\n            <div class=\"stzh-disturber__label\">\n              {this.label ? this.label : <slot name=\"label\"></slot>}\n            </div>\n            <div class=\"stzh-disturber__link\">\n              <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <div class=\"stzh-disturber__close-wrapper\">\n              <stzh-button\n                class=\"stzh-disturber__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["stzhClampCss","StzhClamp","this","updateClamped","textCloneElement","beforeClamped","clamped","scrollHeight","clientHeight","stzhClamp","emit","component","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleMutaton","update","handleExpandClick","async","expanded","waitForNextRender","stzhExpand","innerHTML","textElement","Promise","resolve","renderPromiseResolve","componentWillLoad","localization","stzhComponents","utils","fetchTranslations","element","componentDidLoad","mutationObserver","MutationObserver","observe","childList","subtree","componentDidRender","connectedCallback","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","classes","h","Host","style","lines","toString","linesSmall","linesMedium","linesLarge","linesUltra","class","ref","el","showExpandLink","a11yTabindex","onClick","showMore","showLess"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space('xxsmall');\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,k1G,MCyBRC,EAAS,M,qGA8CZC,KAAAC,cAAgB,KACtB,IAAKD,KAAKE,iBAAkB,CAC1B,M,CAGF,MAAMC,EAAgBH,KAAKI,QAC3BJ,KAAKI,QAAUJ,KAAKE,iBAAiBG,aAAeL,KAAKE,iBAAiBI,aAE1E,GAAIH,IAAkBH,KAAKI,QAAS,CAClCJ,KAAKO,UAAUC,KAAK,CAClBC,UAAW,aACXL,QAASJ,KAAKI,S,GAKZJ,KAAAU,aAAe,KACrB,GAAIV,KAAKW,eAAgB,CACvBC,OAAOC,qBAAqBb,KAAKW,e,CAGnCX,KAAKW,eAAiBG,sBAAsBd,KAAKC,cAAc,EAGzDD,KAAAe,cAAgB,KACtBf,KAAKgB,QAAQ,EAGPhB,KAAAiB,kBAAoBC,UAC1BlB,KAAKmB,UAAYnB,KAAKmB,eAChBnB,KAAKoB,oBAEXpB,KAAKqB,WAAWb,KAAK,CACnBC,UAAW,aACXU,SAAUnB,KAAKmB,UACf,E,uCA5EoB,E,gBAEK,E,iBAEC,E,gBAED,E,gBAEA,E,oBAGK,M,cAG0B,M,aAGD,K,CAW3D,YAAMH,GACJhB,KAAKE,iBAAiBoB,UAAYtB,KAAKuB,YAAYD,UACnDtB,KAAKC,e,CAiDC,iBAAAmB,GACN,OAAO,IAAII,SAAQC,GAAWzB,KAAK0B,qBAAuBD,G,CAG5D,uBAAME,GACJ,IAAK3B,KAAK4B,aAAc,CACtB5B,KAAK4B,mBAAqBhB,OAAOiB,eAAeC,MAAMC,kBAAkB/B,KAAKgC,QAAS,Q,EAI1F,gBAAAC,GACEjC,KAAKkC,iBAAmB,IAAIC,iBAAiBnC,KAAKe,eAClDf,KAAKkC,iBAAiBE,QAAQpC,KAAKuB,YAAa,CAC9Cc,UAAW,KACXC,QAAS,M,CAIb,kBAAAC,GACE,GAAIvC,KAAK0B,qBAAsB,CAC7B1B,KAAK0B,sB,CAGP1B,KAAKgB,Q,CAGP,iBAAAwB,GACExC,KAAKyC,eAAiB,IAAIC,eAAe1C,KAAKU,cAC9CV,KAAKyC,eAAeL,QAAQpC,KAAKgC,Q,CAGnC,oBAAAW,GACE,GAAI3C,KAAKyC,eAAgB,CACvBzC,KAAKyC,eAAeG,Y,CAGtB,GAAI5C,KAAKkC,iBAAkB,CACzBlC,KAAKkC,iBAAiBU,Y,EAI1B,MAAAC,GACE,MAAMC,EAAU,CACd,aAAc,KACd,+BAAgC9C,KAAKmB,UAGvC,OACE4B,EAACC,EAAI,CACHC,MAAO,CACL,UAAWjD,KAAKkD,MAAQlD,KAAKkD,MAAMC,WAAa,KAChD,gBAAiBnD,KAAKoD,WAAapD,KAAKoD,WAAWD,WAAa,KAChE,iBAAkBnD,KAAKqD,YAAcrD,KAAKqD,YAAYF,WAAa,KACnE,gBAAiBnD,KAAKsD,WAAatD,KAAKsD,WAAWH,WAAa,KAChE,gBAAiBnD,KAAKuD,WAAavD,KAAKuD,WAAWJ,WAAa,OAGlEJ,EAAA,OAAKS,MAAOV,GACVC,EAAA,OACEU,IAAMC,GAAQ1D,KAAKuB,YAAcmC,EACjCF,MAAM,oBAENT,EAAA,cAGFA,EAAA,OACEU,IAAMC,GAAQ1D,KAAKE,iBAAmBwD,EACtCF,MAAM,4BAA2B,cACrB,SAGbxD,KAAK2D,gBAAkB3D,KAAKI,SAC3B2C,EAAA,aACES,MAAM,sBACNI,aAAa,KAAI,cACL,OACZC,QAAS7D,KAAKiB,oBAEZjB,KAAKmB,SAAWnB,KAAK4B,aAAakC,SAAW9D,KAAK4B,aAAamC,W"}
+{"version":3,"names":["stzhClampCss","StzhClamp","this","updateClamped","textCloneElement","beforeClamped","clamped","scrollHeight","clientHeight","stzhClamp","emit","component","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleMutaton","update","handleExpandClick","async","expanded","waitForNextRender","stzhExpand","innerHTML","textElement","Promise","resolve","renderPromiseResolve","componentWillLoad","localization","stzhComponents","utils","fetchTranslations","element","componentDidLoad","mutationObserver","MutationObserver","observe","childList","subtree","componentDidRender","connectedCallback","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","classes","h","Host","style","lines","toString","linesSmall","linesMedium","linesLarge","linesUltra","class","ref","el","showExpandLink","a11yTabindex","onClick","showMore","showLess"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space('xxsmall');\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,k1G,MCyBRC,EAAS,M,qGA8CZC,KAAAC,cAAgB,KACtB,IAAKD,KAAKE,iBAAkB,CAC1B,M,CAGF,MAAMC,EAAgBH,KAAKI,QAC3BJ,KAAKI,QAAUJ,KAAKE,iBAAiBG,aAAeL,KAAKE,iBAAiBI,aAE1E,GAAIH,IAAkBH,KAAKI,QAAS,CAClCJ,KAAKO,UAAUC,KAAK,CAClBC,UAAW,aACXL,QAASJ,KAAKI,S,GAKZJ,KAAAU,aAAe,KACrB,GAAIV,KAAKW,eAAgB,CACvBC,OAAOC,qBAAqBb,KAAKW,e,CAGnCX,KAAKW,eAAiBG,sBAAsBd,KAAKC,cAAc,EAGzDD,KAAAe,cAAgB,KACtBf,KAAKgB,QAAQ,EAGPhB,KAAAiB,kBAAoBC,UAC1BlB,KAAKmB,UAAYnB,KAAKmB,eAChBnB,KAAKoB,oBAEXpB,KAAKqB,WAAWb,KAAK,CACnBC,UAAW,aACXU,SAAUnB,KAAKmB,UACf,E,uCA5EoB,E,gBAEK,E,iBAEC,E,gBAED,E,gBAEA,E,oBAGK,M,cAG0B,M,aAGD,K,CAW3D,YAAMH,GACJhB,KAAKE,iBAAiBoB,UAAYtB,KAAKuB,YAAYD,UACnDtB,KAAKC,e,CAiDC,iBAAAmB,GACN,OAAO,IAAII,SAAQC,GAAWzB,KAAK0B,qBAAuBD,G,CAG5D,uBAAME,GACJ,IAAK3B,KAAK4B,aAAc,CACtB5B,KAAK4B,mBAAqBhB,OAAOiB,eAAeC,MAAMC,kBAAkB/B,KAAKgC,QAAS,Q,EAI1F,gBAAAC,GACEjC,KAAKkC,iBAAmB,IAAIC,iBAAiBnC,KAAKe,eAClDf,KAAKkC,iBAAiBE,QAAQpC,KAAKuB,YAAa,CAC9Cc,UAAW,KACXC,QAAS,M,CAIb,kBAAAC,GACE,GAAIvC,KAAK0B,qBAAsB,CAC7B1B,KAAK0B,sB,CAGP1B,KAAKgB,Q,CAGP,iBAAAwB,GACExC,KAAKyC,eAAiB,IAAIC,eAAe1C,KAAKU,cAC9CV,KAAKyC,eAAeL,QAAQpC,KAAKgC,Q,CAGnC,oBAAAW,GACE,GAAI3C,KAAKyC,eAAgB,CACvBzC,KAAKyC,eAAeG,Y,CAGtB,GAAI5C,KAAKkC,iBAAkB,CACzBlC,KAAKkC,iBAAiBU,Y,EAI1B,MAAAC,GACE,MAAMC,EAAU,CACd,aAAc,KACd,+BAAgC9C,KAAKmB,UAGvC,OACE4B,EAACC,EAAI,CACHC,MAAO,CACL,UAAWjD,KAAKkD,MAAQlD,KAAKkD,MAAMC,WAAa,KAChD,gBAAiBnD,KAAKoD,WAAapD,KAAKoD,WAAWD,WAAa,KAChE,iBAAkBnD,KAAKqD,YAAcrD,KAAKqD,YAAYF,WAAa,KACnE,gBAAiBnD,KAAKsD,WAAatD,KAAKsD,WAAWH,WAAa,KAChE,gBAAiBnD,KAAKuD,WAAavD,KAAKuD,WAAWJ,WAAa,OAGlEJ,EAAA,OAAKS,MAAOV,GACVC,EAAA,OACEU,IAAMC,GAAQ1D,KAAKuB,YAAcmC,EACjCF,MAAM,oBAENT,EAAA,cAGFA,EAAA,OACEU,IAAMC,GAAQ1D,KAAKE,iBAAmBwD,EACtCF,MAAM,4BAA2B,cACrB,SAGbxD,KAAK2D,gBAAkB3D,KAAKI,SAC3B2C,EAAA,aACES,MAAM,sBACNI,aAAa,KAAI,cACL,OACZC,QAAS7D,KAAKiB,oBAEZjB,KAAKmB,SAAWnB,KAAK4B,aAAakC,SAAW9D,KAAK4B,aAAamC,W"}

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

@@ -1 +1 @@
-{"version":3,"names":["stzhDialogCss","CLASS_BODY_OPEN","activeDialog","dialogCounter","StzhDialog","this","handleDialogClick","event","target","dataset","stzhDialogClose","hide","closest","handleCloseButtonClick","init","actions","element","querySelector","setPropsIfNull","variant","handleOutsideClick","open","closeOnBackdropClick","isClickOutside","dialogElement","contains","handleKeydown","key","closeOnEscapeKey","handleOpenTriggerClick","stzhDialogTrigger","id","show","stzhOpen","emit","component","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","createBaseFocusTrapOptions","connectedCallback","stay","appendChild","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","heading","hideClose","size","ref","el","tabindex","role","a11yRole","a11yLabel","onClick","level","name","icon","iconOnly","close","analyticsId","closeAnalyticsId"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve('--padding-top', 'large');\n  @include spaceCurve('--padding-bottom', 'large');\n  @include spaceCurve('--padding-left', 'medium');\n  @include spaceCurve('--padding-right', 'medium');\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    // overflow: visible;\n    overflow: hidden;\n    outline: none;\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding-top: space('medium');\n      padding-bottom: var(--padding-bottom);\n      padding-left: var(--padding-left);\n      padding-right: var(--padding-right);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\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 close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\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    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"names":["stzhDialogCss","CLASS_BODY_OPEN","activeDialog","dialogCounter","StzhDialog","this","handleDialogClick","event","target","dataset","stzhDialogClose","hide","closest","handleCloseButtonClick","init","actions","element","querySelector","setPropsIfNull","variant","handleOutsideClick","open","closeOnBackdropClick","isClickOutside","dialogElement","contains","handleKeydown","key","closeOnEscapeKey","handleOpenTriggerClick","stzhDialogTrigger","id","show","stzhOpen","emit","component","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","createBaseFocusTrapOptions","connectedCallback","stay","appendChild","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","heading","hideClose","size","ref","el","tabindex","role","a11yRole","a11yLabel","onClick","level","name","icon","iconOnly","close","analyticsId","closeAnalyticsId"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve('--padding-top', 'large');\n  @include spaceCurve('--padding-bottom', 'large');\n  @include spaceCurve('--padding-left', 'medium');\n  @include spaceCurve('--padding-right', 'medium');\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    // overflow: visible;\n    overflow: hidden;\n    outline: none;\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding-top: space('medium');\n      padding-bottom: var(--padding-bottom);\n      padding-left: var(--padding-left);\n      padding-right: var(--padding-right);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\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 close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\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    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"mappings":"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"}