@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/stzh-components/{p-ef21f4dc.entry.js → p-ba716237.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,f as i,a as o,g as a}from"./p-c7bfac7a.js";import{t as c}from"./p-eb09159c.js";import{h as n}from"./p-7e304ea3.js";import"./p-dd385618.js";import"./p-7183ba4d.js";import"./p-9b063923.js";const r=":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{--gap:var(--stzh-space-small);--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-small));--stuck-offset:calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  )}@media screen and (min-width: 900px){:host{--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-medium))}}@media print{:host{display:none}}.stzh-sticky-actions{}.stzh-sticky-actions__container{display:flex;justify-content:flex-end;transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky-actions__sticky{--padding-top:0px;--padding-bottom:var(--sticky-padding-bottom)}.stzh-sticky-actions__sticky[is-stuck-bottom] .stzh-sticky-actions__container{transform:translateY(calc(var(--stuck-offset) / -1))}.stzh-sticky-actions__scrollup-wrapper{transition-property:transform, opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed);opacity:0;visibility:hidden;transform:translateX(var(--stzh-sticky-actions-scrollup-width, 44px))}.stzh-sticky-actions.has-chat .stzh-sticky-actions__scrollup-wrapper{transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))))}.stzh-sticky-actions.has-scrollup .stzh-sticky-actions__chat-wrapper{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))))}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__scrollup-wrapper{opacity:1;visibility:visible;transform:translateX(0px)}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__chat-wrapper{transform:translateX(calc(var(--gap) / -1))}";const e=class{constructor(s){t(this,s);this.observePagetitle=t=>{this.hasActiveScrollup=!t[0].isIntersecting};this.updateScrollupWidth=()=>{if(this.scrollupElement&&this.element.isConnected){const{width:t}=this.scrollupElement.getBoundingClientRect();document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width",`${t}px`)}};this.handleScrollupResize=c(this.updateScrollupWidth,100);this.pagetitleQuery="stzh-pagetitle, stzh-pagetitle-hero";this.hasActiveScrollup=false}hasActiveScrollupWatcher(t){document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active",t?"1":"0");document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active",t?"0":"1")}componentDidLoad(){const t=typeof this.pagetitleQuery==="string"?document.querySelector(this.pagetitleQuery):this.pagetitleQuery();if(t){this.observer=new IntersectionObserver(this.observePagetitle,{rootMargin:"0px"});this.observer.observe(t)}requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updateScrollupWidth();this.resizeObserver=new ResizeObserver(this.handleScrollupResize);this.resizeObserver.observe(this.scrollupElement)}))}))}disconnectedCallback(){var t,s;(t=this.observer)===null||t===void 0?void 0:t.disconnect();(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}render(){const t=n(this.element,"chat");const a=n(this.element,"scrollup");const c={"stzh-sticky-actions":true,"has-chat":t,"has-scrollup":a,"has-active-scrollup":this.hasActiveScrollup};return s(o,null,s("div",{class:c,"data-stzh-sticky-width-container":true},s("stzh-sticky",{name:"actions",class:"stzh-sticky-actions__sticky",position:"fixed",variant:"transparent",disableStickyTop:true},s("div",{class:"stzh-sticky-actions__container"},s("div",{class:"stzh-sticky-actions__chat-wrapper"},s("slot",{name:"chat",onSlotchange:()=>i(this.element)})),s("div",{ref:t=>this.scrollupElement=t,class:"stzh-sticky-actions__scrollup-wrapper"},s("slot",{name:"scrollup",onSlotchange:()=>i(this.element)}))))))}get element(){return a(this)}static get watchers(){return{hasActiveScrollup:["hasActiveScrollupWatcher"]}}};e.style=r;export{e as stzh_sticky_actions};
-//# sourceMappingURL=p-ef21f4dc.entry.js.map
+import{r as t,h as s,f as i,a as o,g as a}from"./p-c7bfac7a.js";import{t as c}from"./p-eb09159c.js";import{h as n}from"./p-e30a5acc.js";import"./p-dd385618.js";import"./p-7183ba4d.js";import"./p-9b063923.js";const r=":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{--gap:var(--stzh-space-small);--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-small));--stuck-offset:calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  )}@media screen and (min-width: 900px){:host{--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-medium))}}@media print{:host{display:none}}.stzh-sticky-actions{}.stzh-sticky-actions__container{display:flex;justify-content:flex-end;transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky-actions__sticky{--padding-top:0px;--padding-bottom:var(--sticky-padding-bottom)}.stzh-sticky-actions__sticky[is-stuck-bottom] .stzh-sticky-actions__container{transform:translateY(calc(var(--stuck-offset) / -1))}.stzh-sticky-actions__scrollup-wrapper{transition-property:transform, opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed);opacity:0;visibility:hidden;transform:translateX(var(--stzh-sticky-actions-scrollup-width, 44px))}.stzh-sticky-actions.has-chat .stzh-sticky-actions__scrollup-wrapper{transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))))}.stzh-sticky-actions.has-scrollup .stzh-sticky-actions__chat-wrapper{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))))}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__scrollup-wrapper{opacity:1;visibility:visible;transform:translateX(0px)}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__chat-wrapper{transform:translateX(calc(var(--gap) / -1))}.stzh-sticky-actions.is-not-slotted{height:0}";const e=class{constructor(s){t(this,s);this.observePagetitle=t=>{this.hasActiveScrollup=!t[0].isIntersecting};this.updateScrollupWidth=()=>{if(this.scrollupElement&&this.element.isConnected){const{width:t}=this.scrollupElement.getBoundingClientRect();document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width",`${t}px`)}};this.handleScrollupResize=c(this.updateScrollupWidth,100);this.pagetitleQuery="stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights";this.hasActiveScrollup=false;this.isSlotted=true}hasActiveScrollupWatcher(t){document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active",t?"1":"0");document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active",t?"0":"1")}componentDidLoad(){this.isSlotted=!!this.element.assignedSlot;const t=typeof this.pagetitleQuery==="string"?document.querySelector(this.pagetitleQuery):this.pagetitleQuery();if(t){this.observer=new IntersectionObserver(this.observePagetitle,{rootMargin:"0px"});this.observer.observe(t)}requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updateScrollupWidth();this.resizeObserver=new ResizeObserver(this.handleScrollupResize);this.resizeObserver.observe(this.scrollupElement)}))}))}disconnectedCallback(){var t,s;(t=this.observer)===null||t===void 0?void 0:t.disconnect();(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}render(){const t=n(this.element,"chat");const a=n(this.element,"scrollup");const c={"stzh-sticky-actions":true,"has-chat":t,"has-scrollup":a,"has-active-scrollup":this.hasActiveScrollup,"is-not-slotted":!this.isSlotted};return s(o,null,s("div",{class:c,"data-stzh-sticky-width-container":true},s("stzh-sticky",{name:"actions",class:"stzh-sticky-actions__sticky",position:"fixed",variant:"transparent",disableStickyTop:true},s("div",{class:"stzh-sticky-actions__container"},s("div",{class:"stzh-sticky-actions__chat-wrapper"},s("slot",{name:"chat",onSlotchange:()=>i(this.element)})),s("div",{ref:t=>this.scrollupElement=t,class:"stzh-sticky-actions__scrollup-wrapper"},s("slot",{name:"scrollup",onSlotchange:()=>i(this.element)}))))))}get element(){return a(this)}static get watchers(){return{hasActiveScrollup:["hasActiveScrollupWatcher"]}}};e.style=r;export{e as stzh_sticky_actions};
+//# sourceMappingURL=p-ba716237.entry.js.map

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

@@ -0,0 +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"}