@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/components/{p-503bdd56.js → p-34267046.js}

@@ -29,10 +29,10 @@ const StzhOverlay = /*@__PURE__*/ proxyCustomElement(class StzhOverlay extends H
         });
     }
     getSiblings() {
-        if (!this.parentElement) {
+        if (!this.containerElement) {
             return [];
         }
-        return Array.from(this.parentElement.children).filter(child => child !== this.element);
+        return Array.from(this.containerElement.children).filter(child => child !== this.element);
     }
     disableSiblings() {
         this.getSiblings().forEach(sibling => {
@@ -62,7 +62,7 @@ const StzhOverlay = /*@__PURE__*/ proxyCustomElement(class StzhOverlay extends H
         if (!this.stay && this.element.parentElement !== document.body) {
             document.body.appendChild(this.element);
         }
-        this.parentElement = this.element.parentElement;
+        this.containerElement = this.element.parentElement;
     }
     componentDidRender() {
         this.open ? this.dialogShown() : this.dialogHidden();
@@ -84,7 +84,7 @@ const StzhOverlay = /*@__PURE__*/ proxyCustomElement(class StzhOverlay extends H
             "stzh-overlay": true,
             "stzh-overlay--is-open": this.open,
         };
-        return (h(Host, { key: 'c148ee174114e804d4d3c9072ee33dc48f0a8979' }, h("div", { key: '5cdad3816a30c501023929a7d5b012ca2b7ac29b', class: classes }, h("div", { key: '91a4c1706f8ab761efbeacb1bf677e0f6fe955fd', class: "stzh-overlay__backdrop" }), h("div", { key: 'b9de6d532deeb66bcde5c8320609e6dde3d5f793', class: "stzh-overlay__content" }, h("div", { key: 'a07584a8f910017ba3f8b1e8de9250726bf2f41e', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'cc2c369527c89cfbd1632f277af198b0ec4e2642' }))))));
+        return (h(Host, { key: '81b6944f8c78b47d458051683ed4d5072ea92326' }, h("div", { key: '9ee41160e627e2677839b91fd506df4d389f3657', class: classes }, h("div", { key: '2625e0fd1ee5531db2ef8282e0a16c6fbb1153db', class: "stzh-overlay__backdrop" }), h("div", { key: 'f32bc152846404355aa7af53359806c17fb1e7f4', class: "stzh-overlay__content" }, h("div", { key: '192446b508a56de235af7da51290b081415fe837', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'a3c5dc7aca4b2f2848f655f031e2a766a9b5131f' }))))));
     }
     get element() { return this; }
     static get style() { return StzhOverlayStyle0; }
@@ -111,4 +111,4 @@ function defineCustomElement() {
 
 export { StzhOverlay as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-503bdd56.js.map
+//# sourceMappingURL=p-34267046.js.map

package/dist/components/p-34267046.js.map

@@ -0,0 +1 @@
+{"file":"p-34267046.js","mappings":"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","names":[],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-285c271e.js → p-36681d03.js}

@@ -57,9 +57,9 @@ const StzhShow = /*@__PURE__*/ proxyCustomElement(class StzhShow extends H {
     }
     render() {
         const timeNow = Date.now();
-        return (h(Host, { key: 'bf64c808ce14fa749fed40172435916356a217c2', hidden: (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||
+        return (h(Host, { key: 'ffb27427b6e8a01179c3785245e0d54fc7d302b0', hidden: (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||
                 (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||
-                this.closedByCookie }, h("slot", { key: 'b4c0382f64e006f81e4728cb725df6b3bd443e29' })));
+                this.closedByCookie }, h("slot", { key: '9ac1898b34c5bfb6d5afddaa533c076ae1b31301' })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -96,4 +96,4 @@ function defineCustomElement() {
 
 export { StzhShow as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-285c271e.js.map
+//# sourceMappingURL=p-36681d03.js.map

package/dist/components/{p-285c271e.js.map → p-36681d03.js.map}

@@ -1 +1 @@
-{"file":"p-285c271e.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,82DAA82D,CAAC;AACn4D,uBAAe,WAAW;;ACK1B,MAAM,gBAAgB,GAAG,4BAA4B,CAAC;MAUzC,QAAQ;;;;;QAyEX,mBAAc,GAAY,KAAK,CAAC;;;;;;;;wBA3Cb,EAAE;;IAG7B,YAAY,CAAC,KAA0F;QACrG,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;YACtF,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;aAC3E;SACF;KACF;IAGD,mBAAmB,CAAC,QAAuB;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;SAC3D;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;QAED,IAAI,cAAc,GAAG,KAAK,CAAC;QAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAEtE,IAAI,UAAU,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;gBAC7F,cAAc,GAAG,IAAI,CAAC;aACvB;SACF;QAED,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;KACtC;IAGD,mBAAmB,CAAC,QAAuB;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;SAC3D;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAMD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,QACE,EAAC,IAAI,qDACH,MAAM,EACJ,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;iBAC7D,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC/D,IAAI,CAAC,cAAc,IAGrB,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true,\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (timeClosed && (!this._showFromDate || Number(timeClosed) >= this._showFromDate.getTime())) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host\n        hidden={\n          (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||\n          (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||\n          this.closedByCookie\n        }\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-36681d03.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,82DAA82D,CAAC;AACn4D,uBAAe,WAAW;;ACK1B,MAAM,gBAAgB,GAAG,4BAA4B,CAAC;MAUzC,QAAQ;;;;;QAyEX,mBAAc,GAAY,KAAK,CAAC;;;;;;;;wBA3Cb,EAAE;;IAG7B,YAAY,CAAC,KAA0F;QACrG,IAAI,CAAC,aAAa,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;YACtF,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC;aAC3E;SACF;KACF;IAGD,mBAAmB,CAAC,QAAuB;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;SAC3D;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;QAED,IAAI,cAAc,GAAG,KAAK,CAAC;QAE3B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAEtE,IAAI,UAAU,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,MAAM,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;gBAC7F,cAAc,GAAG,IAAI,CAAC;aACvB;SACF;QAED,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;KACtC;IAGD,mBAAmB,CAAC,QAAuB;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;SAC3D;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;KACF;IAMD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC7C;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE3B,QACE,EAAC,IAAI,qDACH,MAAM,EACJ,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;iBAC7D,IAAI,CAAC,aAAa,IAAI,OAAO,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC/D,IAAI,CAAC,cAAc,IAGrB,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n * @prop --current-display: Current display value (readonly)\n */\n\n:host {\n  --show-display: contents;\n  --hide-display: none;\n  --current-display: var(--hide-display);\n\n  display: var(--current-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  --current-display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  --current-display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    --current-display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    --current-display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    --current-display: var(--hide-display);\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhBannerCloseEvent, StzhGhettoboxCloseEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSE = \"stzh-components-show-close\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true,\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Show from date */\n  @Prop() showFromDate: Date | string;\n  private _showFromDate: Date;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  /**\n   * Close cookie name key.\n   * Component will check for the cookie (stzh-components-show-close-{name})\n   * and if not empty (component inside already closed before) will hide show.\n   * Will also compare with showFromDate if given, to make sure cookie was set after showFromDate (otherwise will show again).\n   */\n  @Prop() closeKey: string = \"\";\n\n  @Listen(\"stzhClose\")\n  closeWatcher(event: CustomEvent<StzhBannerCloseEvent | StzhMessageCloseEvent | StzhGhettoboxCloseEvent>) {\n    if ([\"stzh-banner\", \"stzh-message\", \"stzh-ghettobox\"].includes(event.detail.component)) {\n      if (this.closeKey) {\n        Cookie.set(`${KEY_PREFIX_CLOSE}-${this.closeKey}`, Date.now().toString());\n      }\n    }\n  }\n\n  @Watch(\"showFromDate\")\n  showFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._showFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._showFromDate = newValue;\n    }\n\n    let closedByCookie = false;\n\n    if (this.closeKey) {\n      const timeClosed = Cookie.get(`${KEY_PREFIX_CLOSE}-${this.closeKey}`);\n\n      if (timeClosed && (!this._showFromDate || Number(timeClosed) >= this._showFromDate.getTime())) {\n        closedByCookie = true;\n      }\n    }\n\n    this.closedByCookie = closedByCookie;\n  }\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = newValue ? new Date(newValue) : null;\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  private closedByCookie: boolean = false;\n\n  componentWillLoad() {\n    this.showFromDateWatcher(this.showFromDate);\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    const timeNow = Date.now();\n\n    return (\n      <Host\n        hidden={\n          (this._showFromDate && timeNow <= this._showFromDate.getTime()) ||\n          (this._hideFromDate && timeNow >= this._hideFromDate.getTime()) ||\n          this.closedByCookie\n        }\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-527121ef.js → p-36fb6c94.js}

@@ -20,7 +20,7 @@ const StzhRatio = /*@__PURE__*/ proxyCustomElement(class StzhRatio extends H {
         const classes = {
             "stzh-ratio": true,
         };
-        return (h(Host, { key: '1510cd331194c10f92cf625a667530153ab95377' }, h("div", { key: '8f5a100be3b4852aadbad869c8e7315d9afec751', class: classes }, h("slot", { key: 'b742bae2a8098b1441de9909cc55c8b6c209c478', name: "image" }), h("slot", { key: 'c42417b89532473ccb0ed71aff62017e3a722d28' }))));
+        return (h(Host, { key: '8b21c97cf22e8a09933f76444ab120b4b4bd6209' }, h("div", { key: '1531f56313bc56cf041fbd988e2ec7645119fbac', class: classes }, h("slot", { key: 'f66bc6c071d9b449bcd2f3a4b6659c5606d4c427', name: "image" }), h("slot", { key: '01da559bb1612ef797cb6618a14249214475e0be' }))));
     }
     get element() { return this; }
     static get style() { return StzhRatioStyle0; }
@@ -49,4 +49,4 @@ function defineCustomElement() {
 
 export { StzhRatio as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-527121ef.js.map
+//# sourceMappingURL=p-36fb6c94.js.map

package/dist/components/{p-527121ef.js.map → p-36fb6c94.js.map}

@@ -1 +1 @@
-{"file":"p-527121ef.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6pPAA6pP,CAAC;AACnrP,wBAAe,YAAY;;MCWd,SAAS;;;;;qBAE2B,MAAM;0BAEW,SAAS;2BAER,SAAS;0BAEV,SAAS;0BAET,SAAS;wBAG5B,KAAK;mBAGE,OAAO;;IAI3D,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;SACnB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 1)} /\n    #{nth(map-get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 2)} /\n    #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: nth($value, 1);\n    $secondNr: nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-36fb6c94.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6pPAA6pP,CAAC;AACnrP,wBAAe,YAAY;;MCWd,SAAS;;;;;qBAE2B,MAAM;0BAEW,SAAS;2BAER,SAAS;0BAEV,SAAS;0BAET,SAAS;wBAG5B,KAAK;mBAGE,OAAO;;IAI3D,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,YAAY,EAAE,IAAI;SACnB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 1)} /\n    #{nth(map-get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 2)} /\n    #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: nth($value, 1);\n    $secondNr: nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-7b016fd0.js → p-387454b3.js}

@@ -18,12 +18,12 @@ const StzhRow = /*@__PURE__*/ proxyCustomElement(class StzhRow extends H {
         this.content = "start";
     }
     render() {
-        return (h(Host, { key: 'c17143a246be05264d2d7dec1b755cae89835bc7' }, h("div", { key: 'c12389b4017db28ceeb5b2daf8aa58a618a5f058', class: {
+        return (h(Host, { key: '78a67fedfca80991b13e78909b2d2ac946cd2b76' }, h("div", { key: '5814d3ae91c58e63be3272d56a8d9744513826df', class: {
                 "stzh-row": true,
                 [`stzh-row--justify-${this.justify}`]: !!this.justify,
                 [`stzh-row--items-${this.items}`]: !!this.items,
                 [`stzh-row--content-${this.content}`]: !!this.content,
-            } }, h("slot", { key: '16cf7b8b3e603cb08dd48b88936576dee4dfe889' }))));
+            } }, h("slot", { key: '5b23950827230b17820b03820760f26e03ba5538' }))));
     }
     static get style() { return StzhRowStyle0; }
 }, [1, "stzh-row", {
@@ -52,4 +52,4 @@ function defineCustomElement() {
 
 export { StzhRow as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-7b016fd0.js.map
+//# sourceMappingURL=p-387454b3.js.map

package/dist/components/{p-7b016fd0.js.map → p-387454b3.js.map}

@@ -1 +1 @@
-{"file":"p-7b016fd0.js","mappings":";;AAAA,MAAM,UAAU,GAAG,u2SAAu2S,CAAC;AAC33S,sBAAe,UAAU;;MCWZ,OAAO;;;;;;;;;;uBAaiC,OAAO;qBAGX,OAAO;uBAGH,OAAO;;IAE1D,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;aACtD,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($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-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\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 cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-387454b3.js","mappings":";;AAAA,MAAM,UAAU,GAAG,u2SAAu2S,CAAC;AAC33S,sBAAe,UAAU;;MCWZ,OAAO;;;;;;;;;;uBAaiC,OAAO;qBAGX,OAAO;uBAGH,OAAO;;IAE1D,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;aACtD,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($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-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\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 cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-15e2b360.js → p-3efe43d2.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { c as commonjsGlobal } from './p-1ab64d01.js';
-import { d as defineCustomElement$1 } from './p-5a8587ab.js';
+import { d as defineCustomElement$1 } from './p-7c4e756c.js';
 
 function globals(defs) {
   defs('EPSG:4326', "+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees");
@@ -53584,7 +53584,7 @@ const StzhOlmap = /*@__PURE__*/ proxyCustomElement(class StzhOlmap extends H {
             "stzh-olmap--has-no-print-control": !this.printControl,
             "stzh-olmap--has-location-control": this.locationControl,
         };
-        return (h(Host, { key: 'e3dcaa84f585422a2b9dcb4202958c63c4c55759' }, h("div", { key: 'e94097970244edad65ee79c6079f73adf19fe2df', class: classes }, h("div", { key: '2d93761f276134c2962862730139202eaab6e624', ref: el => (this.mapElement = el), class: "stzh-olmap__map" }), h("div", { key: '75e23dcb13b0f370bc92eb587ea56faba85cc4da', ref: el => (this.popoverElement = el), class: "stzh-olmap__popover" }))));
+        return (h(Host, { key: 'e28a107ac9a90a41465d9e3dd05d944d90132537' }, h("div", { key: '04d9282f39677b5f193bf7e22179638a75ce6c24', class: classes }, h("div", { key: '2ea42eff652a6137f6d640b1c7f41290212f14ca', ref: el => (this.mapElement = el), class: "stzh-olmap__map" }), h("div", { key: '2060fce68327ffffbdde8822f017b6e701166262', ref: el => (this.popoverElement = el), class: "stzh-olmap__popover" }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -53665,4 +53665,4 @@ function defineCustomElement() {
 
 export { StzhOlmap as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-15e2b360.js.map
+//# sourceMappingURL=p-3efe43d2.js.map