@oiz/stzh-components 4.12.0 → 4.12.1-beta1

package/dist/components/{p-CU8kKUrp.js → p-DWVF3j-K.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-X46RDuY9.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DajXzNIS.js';
 
 const stzhCellCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);flex-basis:var(--cell-width);flex-shrink:0}:host([align=left]){margin-right:auto}:host([align=right]){margin-left:auto}:host([align=middle]){margin-left:auto;margin-right:auto}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=center]){align-self:center}:host([align-self=baseline]){align-self:baseline}:host([align-self=stretch]){align-self:stretch}:host([span="1"]){--cell-width:8.3333333333%}:host([span="2"]){--cell-width:16.6666666667%}:host([span="3"]){--cell-width:25%}:host([span="4"]){--cell-width:33.3333333333%}:host([span="5"]){--cell-width:41.6666666667%}:host([span="6"]){--cell-width:50%}:host([span="7"]){--cell-width:58.3333333333%}:host([span="8"]){--cell-width:66.6666666667%}:host([span="9"]){--cell-width:75%}:host([span="10"]){--cell-width:83.3333333333%}:host([span="11"]){--cell-width:91.6666666667%}:host([span="12"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="3"]){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="6"]){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="9"]){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="12"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="3"]){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="6"]){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="9"]){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="12"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 900px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}@media screen and (min-width: 1260px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-large) / 2);padding-right:calc(var(--stzh-grid-gutter-large) / 2)}}@media screen and (min-width: 1600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-ultra) / 2);padding-right:calc(var(--stzh-grid-gutter-ultra) / 2)}}`;
 
@@ -44,6 +44,6 @@ function defineCustomElement() {
 }
 
 export { StzhCell as S, defineCustomElement as d };
-//# sourceMappingURL=p-CU8kKUrp.js.map
+//# sourceMappingURL=p-DWVF3j-K.js.map
 
-//# sourceMappingURL=p-CU8kKUrp.js.map
+//# sourceMappingURL=p-DWVF3j-K.js.map

package/dist/components/{p-CU8kKUrp.js.map → p-DWVF3j-K.js.map}

@@ -1 +1 @@
-{"file":"p-CU8kKUrp.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,srNAAsrN,CAAC;;MCYrsN,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAK,CAAA,KAAA,GAAyC,MAAM;;AAGpD,QAAA,IAAS,CAAA,SAAA,GAAqB,MAAM;AAe9D;IAbC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AAClB,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DWVF3j-K.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,srNAAsrN,CAAC;;MCYrsN,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAK,CAAA,KAAA,GAAyC,MAAM;;AAGpD,QAAA,IAAS,CAAA,SAAA,GAAqB,MAAM;AAe9D;IAbC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AAClB,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-By3HNKZ9.js → p-DX6blqyR.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-X46RDuY9.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-DajXzNIS.js';
 import { a as api } from './p-Cpg2gH_9.js';
-import { d as defineCustomElement$4 } from './p-DZquFVcX.js';
-import { d as defineCustomElement$3 } from './p-BmkW_Y9y.js';
-import { d as defineCustomElement$2 } from './p-EnVb6m-B.js';
-import { d as defineCustomElement$1 } from './p-YtvrJDZu.js';
+import { d as defineCustomElement$4 } from './p-BSx9yT8P.js';
+import { d as defineCustomElement$3 } from './p-ulFcx8BE.js';
+import { d as defineCustomElement$2 } from './p-C7Wum7Zf.js';
+import { d as defineCustomElement$1 } from './p-B6XvNGiA.js';
 
 const stzhToastbarCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}:host{z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}`;
 
@@ -204,6 +204,6 @@ function defineCustomElement() {
 }
 
 export { StzhToastbar as S, defineCustomElement as d };
-//# sourceMappingURL=p-By3HNKZ9.js.map
+//# sourceMappingURL=p-DX6blqyR.js.map
 
-//# sourceMappingURL=p-By3HNKZ9.js.map
+//# sourceMappingURL=p-DX6blqyR.js.map

package/dist/components/{p-By3HNKZ9.js.map → p-DX6blqyR.js.map}

@@ -1 +1 @@
-{"file":"p-By3HNKZ9.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,q9DAAq9D,CAAC;;ACMr/D,MAAM,iBAAiB,GAAG,iCAAiC;MAU9C,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AAE9B;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,CAAC;AAEvB;;;;;;;;AAQG;AACK,QAAA,IAAa,CAAA,aAAA,GAAwC,EAAE;AACvD,QAAA,IAAc,CAAA,cAAA,GAA+B,EAAE;AA0F/C,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,oBAAoB,EAAE;AAC7B,SAAC;AA+DF;;AAtJC,IAAA,MAAM,KAAK,CACT,KAAa,EACb,EAAE,IAAI,EAAE,IAAI,EAA6D,GAAA,EAAE,IAAI,EAAE,MAAM,EAAE,EAAA;QAEzF,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC;AAClD,QAAA,KAAK,CAAC,MAAM,GAAG,IAAI;AACnB,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACnB,QAAA,KAAK,CAAC,IAAI,GAAG,OAAO;AACpB,QAAA,KAAK,CAAC,IAAI,GAAG,IAAI,IAAI,MAAM;AAC3B,QAAA,KAAK,CAAC,oBAAoB,GAAG,IAAI;QAEjC,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,IAAI,GAAG,MAAM;AAClB,YAAA,IAAI,CAAC,IAAI,GAAG,OAAO;AACnB,YAAA,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC;;AAGzB,QAAA,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC;AAE/B,QAAA,OAAO,KAAK;;AAId,IAAA,oBAAoB,CAAC,QAAwB,EAAA;AAC3C,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;aACrC;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,QAAQ;;;AAI1B,IAAA,aAAa,CAAC,KAA2B,EAAA;AAC/C,QAAA,IAAI,KAAK,CAAC,YAAY,CAAC,4BAA4B,CAAC,EAAE;YACpD;;AAGF,QAAA,KAAK,CAAC,YAAY,CAAC,4BAA4B,EAAE,EAAE,CAAC;AAEpD,QAAA,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAK;YACxC,KAAK,CAAC,MAAM,EAAE;AAChB,SAAC,CAAC;AAEF,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAC1B,IAAI,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE;AACzC,YAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI;AACpC,YAAA,IAAI,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;gBAC1C,KAAK,CAAC,IAAI,EAAE;aACb,EAAE,QAAQ,CAAC;AAEZ,YAAA,KAAK,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;gBAC1C,IAAI,cAAc,EAAE;AAClB,oBAAA,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC;oBACnC,MAAM,UAAU,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,cAAc;AACxD,oBAAA,QAAQ,GAAG,QAAQ,GAAG,UAAU;;AAEpC,aAAC,CAAC;AAEF,YAAA,KAAK,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAK;AAC1C,gBAAA,cAAc,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE;AACrC,gBAAA,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;oBACtC,KAAK,CAAC,IAAI,EAAE;iBACb,EAAE,QAAQ,CAAC;AACd,aAAC,CAAC;;;IAIE,cAAc,GAAA;;AACpB,QAAA,MAAM,IAAI,GAAG,CAAA,CAAC,EAAA,GAAA,IAAI,CAAC,OAAO,CAAC,WAAW,EAAiB,0CAAE,IAAI,KAAI,IAAI,CAAC,OAAO;AAC7E,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAA2B,KAAI;AAChE,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AAC3B,SAAC,CAAC;;IAGI,oBAAoB,GAAA;;AAC1B,QAAA,MAAM,IAAI,GAAG,CAAA,CAAC,EAAA,GAAA,IAAI,CAAC,OAAO,CAAC,WAAW,EAAiB,0CAAE,IAAI,KAAI,IAAI,CAAC,OAAO;AAC7E,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM;AAEvC,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;aACrB,MAAM,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,GAAG;AAC/B,aAAA,OAAO,CAAC,CAAC,KAA2B,KAAI;YACvC,KAAK,CAAC,IAAI,EAAE;AACd,SAAC,CAAC;;IAQN,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC;;IAG/C,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAM,IAAI,KAAG;AACvC,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,MAAM,mBAAmB,GAAGC,GAAM,CAAC,GAAG,CAAC,CAAA,EAAG,iBAAiB,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,CAAA,CAAE,CAAC;gBAE7E,IAAI,mBAAmB,EAAE;oBACvB;;;AAIJ,YAAA,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI;AAEpB,YAAA,IAAI,EAAE,IAAI,YAAYD,CAAW,CAAC,EAAE;gBAClC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC;AAC3D,gBAAA,aAAa,CAAC,IAAI,GAAG,MAAM;AAC3B,gBAAA,aAAa,CAAC,IAAI,GAAG,OAAO;gBAE5B,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC;gBACvC,IAAI,GAAG,aAAa;;YAGtB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE;gBACzC,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,gBAAA,IAAI,EAAE,IAA6B;AACpC,aAAA,CAAC;AAEF,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,aAAa,GAAG,GAAG;AAEvB,gBAAA,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,EAAE;oBAC5B,aAAa,GAAG,IAAI;;AACf,qBAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AAC7B,oBAAA,aAAa,GAAG,IAAI,CAAC,aAAa;;AAGpC,gBAAA,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAK;AACxC,oBAAAC,GAAM,CAAC,GAAG,CAAC,CAAA,EAAG,iBAAiB,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,CAAA,CAAE,EAAE,GAAG,EAAE;AACrD,wBAAA,OAAO,EAAE,aAAa;AACvB,qBAAA,CAAC;AACJ,iBAAC,CAAC;;AAEN,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,eAAe,EAAE,IAAI;SACtB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAS,CAAA,CAC9C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve(\"bottom\", \"regular\");\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc(\n      (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n    );\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space(\"small\");\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true,\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n      return;\n    }\n\n    toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  };\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async data => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement,\n      });\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n            expires: cookieExpires,\n          });\n        });\n      }\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DX6blqyR.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve(\"bottom\", \"regular\");\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc(\n      (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n    );\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space(\"small\");\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true,\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n      return;\n    }\n\n    toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  };\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async data => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement,\n      });\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n            expires: cookieExpires,\n          });\n        });\n      }\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-X46RDuY9.js → p-DajXzNIS.js}

@@ -1,5 +1,5 @@
 const name = "@oiz/stzh-components";
-const version = "4.12.0";
+const version = "4.12.1-beta1";
 
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;
@@ -2374,6 +2374,6 @@ function transformTag(tag) {
 }
 
 export { Fragment as F, H, getAssetPath as a, setNonce as b, setPlatformOptions as c, createEvent as d, Host as e, forceUpdate as f, globalScripts as g, h, readTask as i, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t, writeTask as w };
-//# sourceMappingURL=p-X46RDuY9.js.map
+//# sourceMappingURL=p-DajXzNIS.js.map
 
-//# sourceMappingURL=p-X46RDuY9.js.map
+//# sourceMappingURL=p-DajXzNIS.js.map