@oiz/stzh-components 4.9.0-beta1 → 4.9.0-beta3

package/dist/components/{p-bDDguSJm.js.map → p-osf80Swh.js.map}

@@ -1 +1 @@
-{"file":"p-bDDguSJm.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-osf80Swh.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-NuLYh9v8.js → p-ptAFQZzh.js}

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