@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/components/stzh-textandimage.js.map

@@ -1 +1 @@
-{"file":"stzh-textandimage.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,oiKAAoiK;;MCoBnjKA,kBAAgB;;;;;IAQnB,SAAI,GAAG;MACb,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC1C,8GAA8G,CAC/G,CAAC;MAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC7C,yDAAyD,CAC1D,CAAC;MAEF,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;MACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,EAAE,YAAY,IAAI,aAAa,CAAC,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM;UACpB,cAAc,CAAC,MAAM,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,MAAM;WACK,CAAC,CAAA;SAC3B,CAAC,CAAC;OACJ;MAED,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM;QACvB,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAA;OAC7B,CAAC,CAAC;KACJ,CAAA;gBAhC8D,SAAS;;EAkCxE,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,EAAE,YAAY,IAAI,aAAa,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,mCAAmC,EAAE,QAAQ,IAAI,YAAY;MAC7D,oCAAoC,EAAE,QAAQ,IAAI,aAAa;MAC/D,6BAA6B,EAAE,YAAY;MAC3C,8BAA8B,EAAE,aAAa;MAC7C,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACtD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,IACpB,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE,EAEN,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACrE,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhTextandimage"],"sources":["src/components/stzh-textandimage/stzh-textandimage.scss?tag=stzh-textandimage&encapsulation=shadow","src/components/stzh-textandimage/stzh-textandimage.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('--row-gap', 'regular');\n\n  --grid-template-areas: var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-textandimage-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-textandimage-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n}\n\n:host([size=\"small\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n\n:host([size=\"large\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text text . . .\"\n    // \"image image image image image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    );\n  }\n}\n\n:host([single]:not([single=\"false\"])) {\n  --grid-template-areas: var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    );\n  }\n}\n\n.stzh-textandimage {\n  @include gridGutter;\n  display: grid;\n  row-gap: var(--row-gap);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__left {\n    grid-area: text;\n  }\n\n  &__right {\n    grid-area: image;\n  }\n\n  /* Single variant */\n\n  &--is-single &__right {\n    grid-area: text;\n  }\n\n  &--is-single-left &__right {\n    display: none;\n  }\n\n  &--is-single-right &__left {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-textandimage.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,uiMAAuiM;;MCatjMA,kBAAgB;;;;;IAWnB,SAAI,GAAG;MACb,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC1C,8GAA8G,CAC/G,CAAC;MAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,yDAAyD,CAAC,CAAC;MAE3G,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;MACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,EAAE,YAAY,IAAI,aAAa,CAAC,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,MAAM;UACnB,cAAc,CAAC,MAAM,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,MAAM;WACK,CAAC,CAAC;SAC5B,CAAC,CAAC;OACJ;MAED,SAAS,CAAC,OAAO,CAAC,MAAM;QACtB,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAC;OAC9B,CAAC,CAAC;KACJ,CAAC;gBAjC6D,SAAS;yBAGb,OAAO;;EAgClE,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,EAAE,YAAY,IAAI,aAAa,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,mCAAmC,EAAE,QAAQ,IAAI,YAAY;MAC7D,oCAAoC,EAAE,QAAQ,IAAI,aAAa;MAC/D,6BAA6B,EAAE,YAAY;MAC3C,8BAA8B,EAAE,aAAa;MAC7C,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MACrD,CAAC,qCAAqC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa;KAClF,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,oBAAkB,IAAI,CAAC,aAAa,IACxD,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE,EAEN,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACrE,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhTextandimage"],"sources":["src/components/stzh-textandimage/stzh-textandimage.scss?tag=stzh-textandimage&encapsulation=shadow","src/components/stzh-textandimage/stzh-textandimage.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('--row-gap', 'regular');\n\n  --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\" \"image image image image\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-textandimage-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n        --stzh-textandimage-grid-template-areas,\n        \"text text text text\" \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-textandimage-grid-template-areas,\n        \"text text text image image image image image\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-textandimage-grid-template-columns,\n        #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text image image image image image\"\n    --grid-template-areas: var(\n        --stzh-textandimage-grid-template-areas,\n        \"text text text text image image image image\"\n    );\n  }\n}\n\n\n:host([image-position=\"left\"]) {\n  --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas-image-left,\n      \"text text text text\" \"image image image image\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n        --stzh-textandimage-grid-template-areas-image-left,\n        \"text text text text\" \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-textandimage-grid-template-areas-image-left,\n        \"text text text image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n        --stzh-textandimage-grid-template-areas-image-left,\n        \"text text text text image image image image\"\n    );\n  }\n}\n\n:host([size=\"small\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n        --stzh-textandimage-small-grid-template-areas,\n        \"text text image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-textandimage-small-grid-template-areas,\n        \"text text text text image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text image image image image\"\n    --grid-template-areas: var(\n        --stzh-textandimage-small-grid-template-areas,\n        \"text text text text text image image image\"\n    );\n  }\n}\n\n:host([size=\"large\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n        --stzh-textandimage-large-grid-template-areas,\n        \"text text text .\" \"image image image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-textandimage-large-grid-template-areas,\n        \"text text text text text . . .\" \"image image image image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text text . . .\"\n    // \"image image image image image image image image image\"\n    --grid-template-areas: var(\n        --stzh-textandimage-large-grid-template-areas,\n        \"text text text text text text . .\" \"image image image image image image image image\"\n    );\n  }\n}\n\n:host([single]:not([single=\"false\"])) {\n  --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n        --stzh-textandimage-single-grid-template-areas,\n        \"text text text .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n        --stzh-textandimage-single-grid-template-areas,\n        \"text text text text text text . .\"\n    );\n  }\n}\n\n.stzh-textandimage {\n  @include gridGutter;\n  display: grid;\n  row-gap: var(--row-gap);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__left {\n    grid-area: text;\n  }\n\n  &__right {\n    grid-area: image;\n  }\n\n  /* Single variant */\n\n  &--is-single &__right {\n    grid-area: text;\n  }\n\n  &--is-single-left &__right {\n    display: none;\n  }\n\n  &--is-single-right &__left {\n    display: none;\n  }\n\n  /* Image position */\n  &--image-position-left &__left {\n    grid-area: image;\n  }\n\n  &--image-position-left &__right {\n    grid-area: text;\n  }\n}\n","import { Component, Element, forceUpdate, h, Host, Prop } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true,\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"left\" | \"right\" = \"right\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll('stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery');\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach(button => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\",\n        } as HTMLStzhRatioElement);\n      });\n    }\n\n    galleries.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"single\",\n      } as HTMLStzhGalleryElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size,\n      [`stzh-textandimage--image-position-${this.imagePosition}`]: !!this.imagePosition,\n    };\n\n    return (\n      <Host single={isSingle} image-position={this.imagePosition}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-timepicker.js.map

@@ -1 +1 @@
-{"file":"stzh-timepicker.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,w7CAAw7C;;MC0Br8CA,gBAAc;;;;;IA0FjB,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,KAAK,EAAE;QACd,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;OACpB;KACF,CAAA;IAEO,qBAAgB,GAAG,CAAC,KAA2C;MACrE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MAE5F,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,iBAAiB;QAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;gBArGuB,KAAK;eAMP,CAAC;eAMD,IAAI;gBAGH,EAAE;gBAGe,EAAE;iBAGD,EAAE;4BAGgF,QAAQ;iBAG3G,EAAE;oBAGmB,KAAK;oBAGL,KAAK;;;;mBAYN,KAAK;oBAGJ,KAAK;wBAGD,KAAK;gBAGD,SAAS;2BAGK,EAAE;;;EAYrE,aAAa;IACX,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,sEAAsE,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;KACrG;IAED,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,EAAE;MACtC,MAAM,IAAI,KAAK,CAAC,oFAAoF,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;KACnH;IAED,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;MACvB,MAAM,IAAI,KAAK,CAAC,mBAAmB,IAAI,CAAC,GAAG,4CAA4C,IAAI,CAAC,GAAG,qBAAqB,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;KACnI;IAED,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAoBO,qBAAqB;IAC3B,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;MACvD,IAAI,KAAK,GAAW,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;MACvC,IAAI,OAAO,GAAW,CAAC,GAAG,EAAE,CAAC;MAE7B,IAAI,WAAW,GAAW,CAAC,IAAI,GAAG,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;MACnD,IAAI,aAAa,GAAW,CAAC,IAAI,GAAG,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;MACvD,IAAI,IAAI,GAAG,GAAG,WAAW,IAAI,aAAa,EAAE,CAAC;MAE7C,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;KAC3C;IAED,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC;GACjC;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,aAAa,EAAE,CAAC;IAErB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,WAAK,KAAK,EAAE,OAAO,IACjB,qBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,2BAA2B,EACjC,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAA6B,CAAC,EACzD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,GAChB,CACb,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhTimepicker"],"sources":["src/components/stzh-timepicker/stzh-timepicker.scss?tag=stzh-timepicker&encapsulation=scoped","src/components/stzh-timepicker/stzh-timepicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-timepicker {\n  &__dropdown {\n    --icon-angle-size: #{iconSize('small')};\n    --active-icon-angle-transform: rotate(0deg) translateY(-50%);\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhTimepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhTimepickerLocalizedText } from \"./stzh-timepicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-timepicker\",\n  styleUrl: \"stzh-timepicker.scss\",\n  scoped: true\n})\nexport class StzhTimepicker {\n  /** Initial open state */\n  @Prop() open: boolean = false;\n\n  /**\n   * Minimum time allowed to be picked in minutes. Can not be lower than 0.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min: number = 0\n\n  /**\n   * Maximum time allowed to be picked in minutes. Can not be higher than 1440 (24h * 60).\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max: number = 1439;\n\n  /** Time added for each step in minutes. */\n  @Prop() step: number = 15;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of dropdown (current selected time in format HH.MM). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhTimepickerLocalizedText;\n\n  /** Timepicker change event */\n  @Event() stzhChange: EventEmitter<StzhTimepickerChangeEvent>;\n\n  @Element() element: HTMLStzhTimepickerElement;\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    if (this.min < 0 || this.max < 0) {\n      throw new Error(`\"min/max\" property can not be lower than 0 (00:00): dropdown name \"${this.name}\"`);\n    }\n\n    if (this.min > 1440 || this.max > 1440) {\n      throw new Error(`\"min/max\" property can not be higher than 1440 (24h * 60, 24:00): dropdown name \"${this.name}\"`);\n    }\n\n    if (this.min > this.max) {\n      throw new Error(`\"min\" property (${this.min}) can not be higher than \"max\" property (${this.max}): dropdown name \"${this.name}\"`);\n    }\n\n    this.updateDropdownOptions();\n  }\n\n  private input: HTMLStzhDropdownElement;\n  private _dropdownOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  }\n\n  private onDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-timepicker\",\n      value: this.value\n    });\n  }\n\n  private updateDropdownOptions(): void {\n    const options = [];\n\n    for (let i = this.min; i <= this.max; i = i + this.step) {\n      let hours: number = Math.floor(i / 60);\n      let minutes: number = i % 60;\n\n      let paddedHours: string = ('00' + hours).slice(-2);\n      let paddedMinutes: string = ('00' + minutes).slice(-2);\n      let time = `${paddedHours}.${paddedMinutes}`;\n\n      options.push({ text: time, value: time });\n    }\n\n    this._dropdownOptions = options;\n  }\n\n  async componentWillLoad() {\n    this.minMaxWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"timepicker\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-timepicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <stzh-dropdown\n            open={this.open}\n            class=\"stzh-timepicker__dropdown\"\n            iconAngle={\"clock\"}\n            label={this.label}\n            ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n            onStzhChange={this.onDropdownChange}\n            options={this._dropdownOptions}\n            items={[this.value]}\n            required={this.required}\n            disabled={this.disabled}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            error={this.error}\n            popoverPlacement={this.popoverPlacement}\n            a11yDescribedby={this.a11yDescribedby}\n            name={this.name}\n            size={this.size}\n            invalid={this.invalid}\n            hideOptional={this.hideOptional}\n          ></stzh-dropdown>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-timepicker.js","mappings":"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","names":["StzhTimepicker"],"sources":["src/components/stzh-timepicker/stzh-timepicker.scss?tag=stzh-timepicker&encapsulation=scoped","src/components/stzh-timepicker/stzh-timepicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-timepicker {\n  &__dropdown {\n    --icon-angle-size: #{iconSize('small')};\n    --active-icon-angle-transform: rotate(0deg) translateY(-50%);\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhTimepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhTimepickerLocalizedText } from \"./stzh-timepicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-timepicker\",\n  styleUrl: \"stzh-timepicker.scss\",\n  scoped: true\n})\nexport class StzhTimepicker {\n  /** Initial open state */\n  @Prop() open: boolean = false;\n\n  /**\n   * Minimum time allowed to be picked in minutes. Can not be lower than 0.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min: number = 0\n\n  /**\n   * Maximum time allowed to be picked in minutes. Can not be higher than 1440 (24h * 60).\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max: number = 1439;\n\n  /** Time added for each step in minutes. */\n  @Prop() step: number = 15;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of dropdown (current selected time in format HH.MM). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhTimepickerLocalizedText;\n\n  /** Timepicker change event */\n  @Event() stzhChange: EventEmitter<StzhTimepickerChangeEvent>;\n\n  @Element() element: HTMLStzhTimepickerElement;\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    if (this.min < 0 || this.max < 0) {\n      throw new Error(`\"min/max\" property can not be lower than 0 (00:00): dropdown name \"${this.name}\"`);\n    }\n\n    if (this.min > 1440 || this.max > 1440) {\n      throw new Error(`\"min/max\" property can not be higher than 1440 (24h * 60, 24:00): dropdown name \"${this.name}\"`);\n    }\n\n    if (this.min > this.max) {\n      throw new Error(`\"min\" property (${this.min}) can not be higher than \"max\" property (${this.max}): dropdown name \"${this.name}\"`);\n    }\n\n    this.updateDropdownOptions();\n  }\n\n  private input: HTMLStzhDropdownElement;\n  private _dropdownOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  }\n\n  private onDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-timepicker\",\n      value: this.value\n    });\n  }\n\n  private updateDropdownOptions(): void {\n    const options = [];\n\n    for (let i = this.min; i <= this.max; i = i + this.step) {\n      let hours: number = Math.floor(i / 60);\n      let minutes: number = i % 60;\n\n      let paddedHours: string = ('00' + hours).slice(-2);\n      let paddedMinutes: string = ('00' + minutes).slice(-2);\n      let time = `${paddedHours}.${paddedMinutes}`;\n\n      options.push({ text: time, value: time });\n    }\n\n    this._dropdownOptions = options;\n  }\n\n  async componentWillLoad() {\n    this.minMaxWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"timepicker\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-timepicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <stzh-dropdown\n            open={this.open}\n            class=\"stzh-timepicker__dropdown\"\n            iconAngle={\"clock\"}\n            label={this.label}\n            ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n            onStzhChange={this.onDropdownChange}\n            options={this._dropdownOptions}\n            items={[this.value]}\n            required={this.required}\n            disabled={this.disabled}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            error={this.error}\n            popoverPlacement={this.popoverPlacement}\n            a11yDescribedby={this.a11yDescribedby}\n            name={this.name}\n            size={this.size}\n            invalid={this.invalid}\n            hideOptional={this.hideOptional}\n          ></stzh-dropdown>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-toggle.js.map

@@ -1 +1 @@
-{"file":"stzh-toggle.js","mappings":"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","names":["StzhToggle"],"sources":["src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-toggle {\n  @include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    position: relative;\n    background-color: $colorBlack10op;\n    width: 44px;\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translate(0, -50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorOldPrimary48;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translate(100%, -50%);\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n  }\n\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space('xsmall');\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space('xsmall');\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    border-color: $colorError60;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    background-color: $colorBlack10op;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    background-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorOldGrey13;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    background-color: $colorOldGrey25;\n    border-color: $colorOldGrey25;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhToggleChangeEvent,\n  StzhToggleFocusEvent,\n  StzhToggleBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'toggle');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid || errorUsed,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            <div class=\"stzh-toggle__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-toggle__marker\">\n                  <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-toggle__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-toggle\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-toggle.js","mappings":"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","names":["StzhToggle"],"sources":["src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-toggle {\n  @include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    position: relative;\n    background-color: $colorBlack10op;\n    width: 44px;\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translate(0, -50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorOldPrimary48;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translate(100%, -50%);\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n  }\n\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space('xsmall');\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space('xsmall');\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    border-color: $colorError60;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    background-color: $colorBlack10op;\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    background-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorOldGrey13;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    background-color: $colorOldGrey25;\n    border-color: $colorOldGrey25;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhToggleChangeEvent,\n  StzhToggleFocusEvent,\n  StzhToggleBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'toggle');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid || errorUsed,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            <div class=\"stzh-toggle__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-toggle__marker\">\n                  <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-toggle__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-toggle\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongTitle={this.descriptionLongTitle}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-tooltip2.js

@@ -7,24 +7,18 @@ import { s as stopAnimations, a as animateTo } from './animation-utils.js';
 import { d as defineCustomElement$2 } from './stzh-icon2.js';
 import { d as defineCustomElement$1 } from './stzh-text2.js';
 
-const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
+const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 
 const ANIMATION_SHOW = {
-  keyframes: [
-    { opacity: "0" },
-    { opacity: "1" }
-  ],
-  options: { duration: 100, easing: "linear" }
+  keyframes: [{ opacity: "0" }, { opacity: "1" }],
+  options: { duration: 100, easing: "linear" },
 };
 const ANIMATION_HIDE = {
-  keyframes: [
-    { opacity: "1" },
-    { opacity: "0" }
-  ],
-  options: { duration: 200, easing: "linear" }
+  keyframes: [{ opacity: "1" }, { opacity: "0" }],
+  options: { duration: 200, easing: "linear" },
 };
 const keyCode = {
-  ESC: 27
+  ESC: 27,
 };
 let tooltipCounter = 0;
 const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends HTMLElement {
@@ -46,24 +40,24 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
       if (!this.open) {
         return;
       }
-      const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.triggerFirstElement, this.contentElement, {
+      const { x = 0, y = 0, strategy = "absolute", placement, middlewareData, } = await computePosition(this.triggerFirstElement, this.contentElement, {
         strategy: this.strategy,
         placement: this.placement,
         middleware: [
           offset({
             mainAxis: this.distance,
-            crossAxis: this.skidding
+            crossAxis: this.skidding,
           }),
           flip({
-            padding: 5
+            padding: 5,
           }),
           shift({
-            padding: 5
+            padding: 5,
           }),
           arrow({
             element: this.arrowElement,
-            padding: 5
-          })
+            padding: 5,
+          }),
         ],
       });
       this.middlewareData = middlewareData;
@@ -135,8 +129,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
       var _a;
       let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (!trigger) {
-        const defaultSlot = Array.from(this.element.children)
-          .find(child => !child.hasAttribute('slot'));
+        const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute("slot"));
         trigger = defaultSlot;
       }
       if (trigger) {
@@ -153,6 +146,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     this.content = "";
     this.placement = "bottom";
     this.strategy = "absolute";
+    this.type = "overlay";
     this.size = "default";
     this.skidding = 0;
     this.distance = 12;
@@ -209,7 +203,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
       await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
-          component: "stzh-tooltip"
+          component: "stzh-tooltip",
         });
       }
     }
@@ -225,7 +219,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
       this.contentElement.style.willChange = "auto";
       if (this.toggledByMethod) {
         this.stzhClosed.emit({
-          component: "stzh-tooltip"
+          component: "stzh-tooltip",
         });
       }
     }
@@ -238,10 +232,8 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     if (!this.open) {
       return;
     }
-    const isClickOutside = event.target !== this.contentElement
-      && this.contentElement.contains(event.target) === false;
-    const isClickTrigger = event.target === this.triggerElement
-      || this.triggerElement.contains(event.target);
+    const isClickOutside = event.target !== this.contentElement && this.contentElement.contains(event.target) === false;
+    const isClickTrigger = event.target === this.triggerElement || this.triggerElement.contains(event.target);
     if (isClickOutside && !isClickTrigger && this.hasTrigger("click")) {
       this.hide();
     }
@@ -260,29 +252,24 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     this.computePosition();
     const isStzh = isStzhElement(this.triggerFirstElement);
     if (this.hasTrigger("click")) {
-      this.triggerFirstElement
-        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
-      if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby"))
-        || (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
-        this.triggerFirstElement
-          .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
+      this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
+      if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby")) ||
+        (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
+        this.triggerFirstElement.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
       }
-      if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-label"))
-        || (!isStzh && !this.triggerFirstElement.getAttribute("aria-label"))) {
-        this.triggerFirstElement
-          .setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
+      if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-label")) ||
+        (!isStzh && !this.triggerFirstElement.getAttribute("aria-label"))) {
+        this.triggerFirstElement.setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
       }
-      if ((isStzh && !this.triggerFirstElement.getAttribute("analytics-id"))
-        || (!isStzh && !this.triggerFirstElement.getAttribute("s-object-id"))) {
-        this.triggerFirstElement
-          .setAttribute(isStzh ? "analytics-id" : "s-object-id", this.label);
+      if ((isStzh && !this.triggerFirstElement.getAttribute("analytics-id")) ||
+        (!isStzh && !this.triggerFirstElement.getAttribute("s-object-id"))) {
+        this.triggerFirstElement.setAttribute(isStzh ? "analytics-id" : "s-object-id", this.label);
       }
     }
     else {
-      if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby"))
-        || (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
-        this.triggerFirstElement
-          .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-content`);
+      if ((isStzh && !this.triggerFirstElement.getAttribute("a11y-describedby")) ||
+        (!isStzh && !this.triggerFirstElement.getAttribute("aria-describedby"))) {
+        this.triggerFirstElement.setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-content`);
       }
     }
     if (this.trap) {
@@ -300,7 +287,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
       this.trap = createFocusTrap(this.contentElement, {
         fallbackFocus: this.contentElement,
         clickOutsideDeactivates: true,
-        returnFocusOnDeactivate: true
+        returnFocusOnDeactivate: true,
       });
       if (this.open) {
         this.trap.activate();
@@ -313,7 +300,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     this.observer = new MutationObserver(this.init);
     this.observer.observe(this.element, {
       childList: true,
-      subtree: true
+      subtree: true,
     });
   }
   disconnectedCallback() {
@@ -334,13 +321,11 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
   render() {
     const classes = {
       "stzh-tooltip": true,
+      [`stzh-tooltip--type-${this.type}`]: true,
       [`stzh-tooltip--open`]: this.open,
-      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement
+      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), this.hasTrigger("click") &&
-      h("div", { class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { class: "stzh-tooltip__content", id: `${this.id}-content`, ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
-      h("h2", { id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label), this.hasTrigger("click") &&
-      h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close)), h("stzh-text", { curve: "none", class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" }))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: el => (this.triggerElement = el) }, h("slot", null)), this.hasTrigger("click") && (h("div", { class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open)), h("div", { class: "stzh-tooltip__content", id: `${this.id}-content`, ref: el => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: el => (this.arrowElement = el), innerHTML: Arrow }), this.label && (h("h2", { id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label)), this.hasTrigger("click") && (h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))), h("stzh-text", Object.assign({ curve: this.type === "overlay" ? "none" : "caption" }, (this.type === "button" ? { font: "heavy" } : {}), { class: "stzh-tooltip__content-slot" }), this.content ? this.content : h("slot", { name: "content" }))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -354,6 +339,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     "content": [1],
     "placement": [1],
     "strategy": [1],
+    "type": [513],
     "size": [513],
     "skidding": [2],
     "distance": [2],

package/dist/components/stzh-tooltip2.js.map

@@ -1 +1 @@
-{"file":"stzh-tooltip2.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorWhite};\n  --background-color: #{$colorCoolgrey60};\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: #{$colorWhite};\n\n  --hover-link-color: #{$colorWhite70op};\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer which color it should be for hover\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import {\n  Host,\n  Element,\n  Component,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhTooltipOpenEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipClosedEvent\n} from \"../../index\";\n\nimport {\n  arrow,\n  computePosition,\n  offset,\n  shift,\n  flip,\n  autoUpdate,\n  Placement,\n  MiddlewareData\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { opacity: \"0\" },\n    { opacity: \"1\" }\n  ],\n  options: { duration: 100, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { opacity: \"1\" },\n    { opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"linear\" }\n};\n\nconst keyCode = {\n  ESC: 27\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\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  /** Hide tooltip content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(\n        this.contentElement,\n        ANIMATION_SHOW.keyframes,\n        ANIMATION_SHOW.options\n      );\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(\n        this.contentElement,\n        ANIMATION_HIDE.keyframes,\n        ANIMATION_HIDE.options\n      );\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.contentElement\n      && this.contentElement.contains(event.target as HTMLElement) === false\n\n    const isClickTrigger = event.target === this.triggerElement\n      || this.triggerElement.contains(event.target as HTMLElement)\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide()\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide()\n    }\n  }\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n      = await computePosition(this.triggerFirstElement, this.contentElement, {\n        strategy: this.strategy,\n        placement: this.placement,\n        middleware: [\n          offset({\n            mainAxis: this.distance,\n            crossAxis: this.skidding\n          }),\n          flip({\n            padding: 5\n          }),\n          shift({\n            padding: 5\n          }),\n          arrow({\n            element: this.arrowElement,\n            padding: 5\n          })\n        ],\n      });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  }\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  }\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  }\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  }\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  }\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  }\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop =\n      popperRect.top - clientY > topDistance;\n    const exceedsBottom =\n      clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft =\n      popperRect.left - clientX > leftDistance;\n    const exceedsRight =\n      clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  }\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !child.hasAttribute('slot')) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n      }\n\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n        || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement\n          .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.trap) {\n      this.trap.updateContainerElements(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(\n      this.element,\n      this.contentElement,\n      this.computePosition\n    );\n\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true\n      });\n\n      if (this.open) {\n        this.trap.activate();\n      }\n    }\n\n    this.contentElement.hidden = !this.open;\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            class=\"stzh-tooltip__trigger\"\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n          >\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") &&\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          }\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={(el) => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label &&\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            }\n            {this.hasTrigger(\"click\") &&\n              <button\n                class=\"stzh-tooltip__close\"\n                onClick={() => this.hide()}\n                type=\"button\"\n              >\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            }\n            <stzh-text curve=\"none\" class=\"stzh-tooltip__content-slot\">\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-tooltip2.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n  display: contents;\n\n  --color: #{$colorWhite};\n  --background-color: #{$colorCoolgrey60};\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: #{$colorWhite};\n\n  --hover-link-color: #{$colorWhite70op};\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    // TODO: check with designer which color it should be for hover\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\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  /** Hide tooltip content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      middleware: [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  };\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    this.computePosition();\n\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.trap) {\n      this.trap.updateContainerElements(this.contentElement);\n    }\n  }\n\n  componentDidLoad() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n\n      if (this.open) {\n        this.trap.activate();\n      }\n    }\n\n    this.contentElement.hidden = !this.open;\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}