@oiz/stzh-components 4.11.0-beta2 → 4.11.0-beta3

package/dist/components/{p-BGShEOJ0.js → p-C40p0YFG.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-D1w1cyua.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-C-pdhkit.js';
 import { S as StzhSocialmediastreamItemActionVariant } from './p-uD4ilJut.js';
-import { d as defineCustomElement$3 } from './p-CGS9ruwP.js';
-import { d as defineCustomElement$2 } from './p-DmpLfWlL.js';
-import { d as defineCustomElement$1 } from './p-B1-O50k0.js';
+import { d as defineCustomElement$3 } from './p-CJX3w1VJ.js';
+import { d as defineCustomElement$2 } from './p-Dg5x1Ygd.js';
+import { d as defineCustomElement$1 } from './p-CTZlFeRd.js';
 
 const stzhSocialmediastreamItemCss = () => `: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}.stzh-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}`;
 
@@ -126,6 +126,6 @@ function defineCustomElement() {
 }
 
 export { StzhSocialmediastreamItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-BGShEOJ0.js.map
+//# sourceMappingURL=p-C40p0YFG.js.map
 
-//# sourceMappingURL=p-BGShEOJ0.js.map
+//# sourceMappingURL=p-C40p0YFG.js.map

package/dist/components/{p-BGShEOJ0.js.map → p-C40p0YFG.js.map}

@@ -1 +1 @@
-{"file":"p-BGShEOJ0.js","mappings":";;;;;;AAAA,MAAM,4BAA4B,GAAG,MAAM,CAAC,4wGAA4wG,CAAC;;MCY5yG,yBAAyB,iBAAAA,kBAAA,CAAA,MAAA,yBAAA,SAAAC,CAAA,CAAA;AAJtC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAI,CAAA,IAAA,GAA2C,EAAE;AA4BjD,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7B,SAAC;AA6FF;AA7GC,IAAA,WAAW,CAAC,QAAgD,EAAA;QAC1D,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;AACjB,aAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AACvC,YAAA,IAAI;gBACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;YACjC,OAAO,CAAC,EAAE;AACV,gBAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;;aAEnB;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;;;AAQjB,IAAA,WAAW,CAAC,IAAmC,EAAA;AACrD,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,UAAU;AACnB,YAAA,KAAK,SAAS;AACd,YAAA,KAAK,GAAG;AACN,gBAAA,OAAO,SAAS;AAClB,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,WAAW;AACpB,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,SAAS;AAClB,YAAA;AACE,gBAAA,OAAO,SAAS;;;AAId,IAAA,iBAAiB,CAAC,OAA+C,EAAA;QACvE,QAAQ,OAAO;YACb,KAAK,sCAAsC,CAAC,QAAQ;AAClD,gBAAA,OAAO,kBAAkB;YAC3B,KAAK,sCAAsC,CAAC,KAAK;AAC/C,gBAAA,OAAO,WAAW;YACpB,KAAK,sCAAsC,CAAC,MAAM;AAChD,gBAAA,OAAO,OAAO;;;AAIZ,IAAA,aAAa,CAAC,OAAe,EAAA;AACnC,QAAA,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,EAAE;AAC/B,YAAA,OAAO,IAAI;;AAEb,QAAA,OAAO,UAAU;;IAGnB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;AAGb,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,wBAAwB,CAAC;;AAEjH,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,wBAAwB,CACrE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAC1B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC3B;;;IAIL,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,6BAA6B,EAAE,IAAI;SACpC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,KAAK,CAAC,KAAK,KACf,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAc,CAAA,EACrC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kDAAkD,EAAA,EAC3D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAI,CAAA,CACzD,CACF,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sCAAsC,EAAA,EAC/C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2CAA2C,EAAA,EACpD,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4CAA4C,EAAA,EACvE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAS,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAU,EAC3C,CAAM,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,CAChE,EACZ,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,CAAc,CACvD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2CAA2C,EAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAQ,CAAA,EACzF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kDAAkD,EAAA,EAC1D,IAAI,CAAC,KAAK,CAAC,OAAO;AACjB,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAC3B,SAAG,IAAI,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAC,qCAAqC,EAAC,MAAM,EAAC,QAAQ,EAAA,EACnG,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,EAAc,CAAA,EACpE,MAAM,CAAC,KAAK,CACX,CACL,CAAC,CACA,CACF,CACJ,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n  display: block;\n  background-color: var(--stzh-color-grey10);\n  text-decoration: none;\n  color: var(--stzh-color-grey80);\n\n  &:visited {\n    color: var(--stzh-color-grey80);\n  }\n\n  &:hover {\n    background-color: var(--stzh-color-secondary10);\n    color: var(--stzh-color-black);\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &__image img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* Content */\n\n  &__content {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n      var(--stzh-space-small);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    @include font(medium);\n    @include fontSize(micro);\n    --color: var(--stzh-color-grey80);\n  }\n\n  &__content-body a {\n    word-wrap: break-word;\n    color: var(--stzh-link-color);\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__content-body a + a {\n    margin-left: space(xxsmall);\n  }\n\n  /* Content Footer and Actions */\n\n  &__content-footer {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-small);\n  }\n\n  &__action {\n    text-decoration: none;\n    @include fontSize(pico);\n    color: var(--stzh-link-color);\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n    line-height: 1;\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__action stzh-icon {\n    --size: 16px;\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n  StzhLocaleAdapter,\n  StzhLocaleComponent,\n  StzhSocialmediastreamItemActionVariant,\n  StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n  tag: \"stzh-socialmediastream-item\",\n  styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n  @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhSocialmediastreamItemData | string = \"\";\n  private _item: StzhSocialmediastreamItemData | undefined;\n\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhSocialmediastreamItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  private getIconName(item: StzhSocialmediastreamItemData) {\n    switch (item.channel) {\n      case \"facebook\":\n        return \"facebook\";\n      case \"twitter\":\n      case \"x\":\n        return \"twitter\";\n      case \"instagram\":\n        return \"instagram\";\n      case \"youtube\":\n        return \"youtube\";\n      default:\n        return \"warning\";\n    }\n  }\n\n  private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n    switch (variant) {\n      case StzhSocialmediastreamItemActionVariant.comments:\n        return \"facebook-comment\";\n      case StzhSocialmediastreamItemActionVariant.likes:\n        return \"like-hand\";\n      case StzhSocialmediastreamItemActionVariant.shares:\n        return \"share\";\n    }\n  }\n\n  private getParsedDate(dateStr: string): Date | null {\n    const parsedDate = new Date(dateStr);\n    if (isNaN(parsedDate.getTime())) {\n      return null;\n    }\n    return parsedDate;\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n    }\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-socialmediastream-item\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.link} target=\"_blank\">\n          {this._item.image && (\n            <div class=\"stzh-socialmediastream-item__image\">\n              <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n              <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n                <img src={this._item.image} alt={this._item.account.title} />\n              </div>\n            </div>\n          )}\n          <div class=\"stzh-socialmediastream-item__content\">\n            <div class=\"stzh-socialmediastream-item__content-head\">\n              <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n                <strong>{this._item.account.title}</strong>\n                <br />\n                {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n              </stzh-text>\n              <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n            </div>\n            <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n            <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n              {this._item.actions &&\n                this._item.actions.map(action => (\n                  <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n                    <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n                    {action.count}\n                  </a>\n                ))}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C40p0YFG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n  display: block;\n  background-color: var(--stzh-color-grey10);\n  text-decoration: none;\n  color: var(--stzh-color-grey80);\n\n  &:visited {\n    color: var(--stzh-color-grey80);\n  }\n\n  &:hover {\n    background-color: var(--stzh-color-secondary10);\n    color: var(--stzh-color-black);\n  }\n\n  &__image {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &__image img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  /* Content */\n\n  &__content {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n      var(--stzh-space-small);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    @include font(medium);\n    @include fontSize(micro);\n    --color: var(--stzh-color-grey80);\n  }\n\n  &__content-body a {\n    word-wrap: break-word;\n    color: var(--stzh-link-color);\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__content-body a + a {\n    margin-left: space(xxsmall);\n  }\n\n  /* Content Footer and Actions */\n\n  &__content-footer {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-small);\n  }\n\n  &__action {\n    text-decoration: none;\n    @include fontSize(pico);\n    color: var(--stzh-link-color);\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n    line-height: 1;\n\n    &:hover {\n      color: var(--stzh-link-hover-color);\n    }\n  }\n\n  &__action stzh-icon {\n    --size: 16px;\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n  StzhLocaleAdapter,\n  StzhLocaleComponent,\n  StzhSocialmediastreamItemActionVariant,\n  StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n  tag: \"stzh-socialmediastream-item\",\n  styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n  @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhSocialmediastreamItemData | string = \"\";\n  private _item: StzhSocialmediastreamItemData | undefined;\n\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhSocialmediastreamItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  private getIconName(item: StzhSocialmediastreamItemData) {\n    switch (item.channel) {\n      case \"facebook\":\n        return \"facebook\";\n      case \"twitter\":\n      case \"x\":\n        return \"twitter\";\n      case \"instagram\":\n        return \"instagram\";\n      case \"youtube\":\n        return \"youtube\";\n      default:\n        return \"warning\";\n    }\n  }\n\n  private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n    switch (variant) {\n      case StzhSocialmediastreamItemActionVariant.comments:\n        return \"facebook-comment\";\n      case StzhSocialmediastreamItemActionVariant.likes:\n        return \"like-hand\";\n      case StzhSocialmediastreamItemActionVariant.shares:\n        return \"share\";\n    }\n  }\n\n  private getParsedDate(dateStr: string): Date | null {\n    const parsedDate = new Date(dateStr);\n    if (isNaN(parsedDate.getTime())) {\n      return null;\n    }\n    return parsedDate;\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n    }\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals,\n      );\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-socialmediastream-item\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.link} target=\"_blank\">\n          {this._item.image && (\n            <div class=\"stzh-socialmediastream-item__image\">\n              <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n              <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n                <img src={this._item.image} alt={this._item.account.title} />\n              </div>\n            </div>\n          )}\n          <div class=\"stzh-socialmediastream-item__content\">\n            <div class=\"stzh-socialmediastream-item__content-head\">\n              <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n                <strong>{this._item.account.title}</strong>\n                <br />\n                {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n              </stzh-text>\n              <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n            </div>\n            <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n            <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n              {this._item.actions &&\n                this._item.actions.map(action => (\n                  <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n                    <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n                    {action.count}\n                  </a>\n                ))}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CIRdG-IN.js → p-C9XDXe-I.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-D1w1cyua.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-C-pdhkit.js';
 
 const stzhSpaceCss = () => `: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{--space:var(--stzh-space-default);--around:0;display:flex;color:inherit;font-weight:inherit;font-family:inherit;letter-spacing:inherit}:host ::slotted(*){max-width:100%;padding:calc(var(--space) / 2 * var(--around));margin:calc(var(--space) / 2 * (1 - var(--around)))}:host ::slotted(stzh-show){--show-display:block}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){align-self:stretch;flex-grow:1}:host(:empty){--around:1;width:var(--space);height:var(--space)}:host([around]:not([around=false])){--around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--space:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){:host([curve=tiny]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--space:var(--stzh-space-small)}}:host([curve=small]){--space:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){:host([curve=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([curve=small]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--space:var(--stzh-space-xlarge)}}:host([curve=intermediary]){--space:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([curve=intermediary]){--space:var(--stzh-space-large)}}:host([curve=regular]){--space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=regular]){--space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=regular]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=regular]){--space:var(--stzh-space-xxlarge)}}:host([curve=medium]){--space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=medium]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=medium]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){:host([curve=large]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([curve=big]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([curve=big]){--space:var(--stzh-space-xbig)}}:host([curve=huge]){--space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([curve=huge]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=huge]){--space:var(--stzh-space-huge)}}:host([curve=section-inner]){--space:var(--stzh-space-large)}@media screen and (min-width: 600px){:host([curve=section-inner]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([curve=section-inner]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=section-inner]){--space:var(--stzh-space-xxxlarge)}}:host([curve=background-section-inner]){--space:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){:host([curve=background-section-inner]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([curve=background-section-inner]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-inner]){--space:var(--stzh-space-xxxxlarge)}}:host([curve=background-section-outer]){--space:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([curve=background-section-outer]){--space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([curve=background-section-outer]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([curve=background-section-outer]){--space:var(--stzh-space-xxlarge)}}:host([size=xxxsmall]){--space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--space:var(--stzh-space-xsmall)}:host([size=small]){--space:var(--stzh-space-small)}:host([size=medium]){--space:var(--stzh-space-medium)}:host([size=large]){--space:var(--stzh-space-large)}:host([size=xlarge]){--space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}:host([size=big]){--space:var(--stzh-space-big)}:host([size=xbig]){--space:var(--stzh-space-xbig)}:host([size=huge]){--space:var(--stzh-space-huge)}:host([size=xhuge]){--space:var(--stzh-space-xhuge)}:host([size=none]){--space:var(--stzh-space-none)}:host([size=default]){--space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 900px){:host([size-medium=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){:host([size-medium=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){:host([size-medium=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 900px){:host([size-medium=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host([size-medium=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([size-medium=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([size-medium=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 900px){:host([size-medium=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 900px){:host([size-medium=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 900px){:host([size-medium=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 900px){:host([size-medium=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 900px){:host([size-medium=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){:host([size-ultra=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1600px){:host([size-ultra=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){:host([size-ultra=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1600px){:host([size-ultra=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1600px){:host([size-ultra=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1600px){:host([size-ultra=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1600px){:host([size-ultra=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1600px){:host([size-ultra=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1600px){:host([size-ultra=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1600px){:host([size-ultra=default]){--space:var(--stzh-space-default)}}.stzh-space{flex-grow:1;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;padding:calc(var(--space) / -2 * var(--around));margin:calc(var(--space) / -2 * (1 - var(--around)))}.stzh-space--is-around{padding:calc(var(--space) / 2 * var(--around));margin:calc(var(--space) / 2 * (1 - var(--around)))}.stzh-space{}.stzh-space--justify-center{justify-content:center}.stzh-space--justify-end{justify-content:flex-end}.stzh-space--justify-between{justify-content:space-between}.stzh-space--justify-around{justify-content:space-around}.stzh-space--justify-evenly{justify-content:space-evenly}.stzh-space{}.stzh-space--items-end{align-items:flex-end}.stzh-space--items-center{align-items:center}.stzh-space--items-baseline{align-items:baseline}.stzh-space--items-stretch{align-items:stretch}`;
 
@@ -56,6 +56,6 @@ function defineCustomElement() {
 }
 
 export { StzhSpace as S, defineCustomElement as d };
-//# sourceMappingURL=p-CIRdG-IN.js.map
+//# sourceMappingURL=p-C9XDXe-I.js.map
 
-//# sourceMappingURL=p-CIRdG-IN.js.map
+//# sourceMappingURL=p-C9XDXe-I.js.map

package/dist/components/{p-CIRdG-IN.js.map → p-C9XDXe-I.js.map}

@@ -1 +1 @@
-{"file":"p-CIRdG-IN.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ynaAAyna,CAAC;;MCYzoa,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAc5B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAM,CAAA,MAAA,GAA+E,MAAM;AAkBrH;IAhBC,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,YAAY,EAAE,IAAI;gBAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACvD,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAClD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":["@use \"sass:map\";\n\n:host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map.get($value, \"size\");\n  $breakpointSizes: map.get($value, \"sizes\");\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\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","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\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  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C9XDXe-I.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ynaAAyna,CAAC;;MCYzoa,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAc5B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAM,CAAA,MAAA,GAA+E,MAAM;AAkBrH;IAhBC,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,YAAY,EAAE,IAAI;gBAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACvD,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAClD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":["@use \"sass:map\";\n\n:host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-show) {\n    --show-display: block;\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map.get($value, \"size\");\n  $breakpointSizes: map.get($value, \"sizes\");\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\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","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true,\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\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  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            \"stzh-space--is-around\": this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CHjZDihY.js → p-CGp34Z0C.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-D1w1cyua.js';
-import { d as defineCustomElement$1 } from './p-CGS9ruwP.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-C-pdhkit.js';
+import { d as defineCustomElement$1 } from './p-CJX3w1VJ.js';
 
 // This file is autogenerated. It's used to publish ESM to npm.
 function _typeof(obj) {
@@ -2116,6 +2116,6 @@ function defineCustomElement() {
 }
 
 export { StzhVbzLinechip as S, defineCustomElement as d };
-//# sourceMappingURL=p-CHjZDihY.js.map
+//# sourceMappingURL=p-CGp34Z0C.js.map
 
-//# sourceMappingURL=p-CHjZDihY.js.map
+//# sourceMappingURL=p-CGp34Z0C.js.map