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

package/dist/components/{p-CViAWrjM.js.map → p-D471mdkF.js.map}

@@ -1 +1 @@
-{"file":"p-CViAWrjM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.scss?tag=stzh-bathstatus-item&encapsulation=scoped","src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-bathstatus-item {\n  background-color: var(--stzh-color-grey10);\n  padding-top: var(--stzh-space-xlarge);\n  padding-right: var(--stzh-space-large);\n  padding-bottom: var(--stzh-space-xlarge);\n  padding-left: var(--stzh-space-large);\n\n  &__description,\n  &-value {\n    @include fontSize(\"milli\");\n  }\n\n  &__title {\n    @include fontSize(\"milli\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n  }\n\n  &-container {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    gap: var(--stzh-space-small) var(--stzh-space-xlarge);\n    align-items: center;\n  }\n\n  &-key {\n    @include fontSize(\"nano\");\n    color: var(--stzh-color-grey70);\n  }\n\n  /** Variant teaser */\n\n  &--teaser &__title {\n    display: none;\n  }\n\n  &--teaser &__description {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  /** Variant list */\n\n  &--list {\n    padding-top: var(--stzh-space-small);\n    padding-right: var(--stzh-space-xsmall);\n    padding-bottom: var(--stzh-space-small);\n    padding-left: var(--stzh-space-xsmall);\n\n    @include mq($from: medium) {\n      padding-top: var(--stzh-space-medium);\n      padding-right: var(--stzh-space-large);\n      padding-bottom: var(--stzh-space-medium);\n      padding-left: var(--stzh-space-large);\n    }\n  }\n\n  &--list &__description,\n  &--list &-key,\n  &--list &-uv-index-prediction {\n    display: none;\n  }\n\n  &--list &-container {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  &--list &-value {\n    @include fontSize(\"micro\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhBathstatusItemData, StzhLocaleAdapter } from \"../../../index\";\nimport { StzhBathstatusItemLocalizedText } from \"./stzh-bathstatus-item.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-bathstatus-item\",\n  styleUrl: \"stzh-bathstatus-item.scss\",\n  scoped: true,\n})\nexport class StzhBathstatusItem {\n  /** Translation strings */\n  @Prop() localization: StzhBathstatusItemLocalizedText;\n\n  /** Variant */\n  @Prop() variant: \"teaser\" | \"list\" = \"teaser\";\n\n  /** Bathstatus item */\n  @Prop() item: StzhBathstatusItemData | string = \"\";\n  private _item: StzhBathstatusItemData | undefined;\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  @Element() element: HTMLStzhBathstatusItemElement;\n\n  @State() isMedium: boolean;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhBathstatusItemData | 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 mediaChangeHandler = () => {\n    this.isMedium = media(\"medium\").matches;\n  };\n\n  private init = () => {\n    this.itemWatcher(this.item);\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  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"bathstatus-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  connectedCallback() {\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-bathstatus-item\": true,\n      [`stzh-bathstatus-item--${this.variant}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {!!this._item.description && <div class=\"stzh-bathstatus-item__description\">{this._item.description}</div>}\n          <div class=\"stzh-bathstatus-item-container\">\n            <stzh-link\n              class=\"stzh-bathstatus-item__title\"\n              size=\"default\"\n              textAlign={\"left\"}\n              href={this._item.url}\n              label={this._item.title}\n            ></stzh-link>\n            {!!this._item.temp && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.temperature}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.temp}</div>\n              </Fragment>\n            )}\n            {!!this._item.statusMessage && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.status}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.statusMessage}</div>\n              </Fragment>\n            )}\n            {!!this._item.lastUpdate && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.lastUpdate}</div>\n                <div class=\"stzh-bathstatus-item-value\">\n                  {this.isMedium ? (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"datetimeLong\")}\n                    </Fragment>\n                  ) : (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"dateInput\")}{\" \"}\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"time\")}\n                    </Fragment>\n                  )}\n                </div>\n              </Fragment>\n            )}\n            {!!this._item.uvIndexPrediction && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.uvIndexPrediction}</div>\n                <div class=\"stzh-bathstatus-item-value stzh-bathstatus-item-uv-index-prediction\">\n                  <img\n                    src={`${window.stzhComponents.pathMedia}/uvindex/uvindex_${this._item.uvIndexPrediction}.gif`}\n                    alt={\"UV Index\" + this._item.uvIndexPrediction}\n                  />\n                </div>\n              </Fragment>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D471mdkF.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.scss?tag=stzh-bathstatus-item&encapsulation=scoped","src/components/CMS/stzh-bathstatus-item/stzh-bathstatus-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-bathstatus-item {\n  background-color: var(--stzh-color-grey10);\n  padding-top: var(--stzh-space-xlarge);\n  padding-right: var(--stzh-space-large);\n  padding-bottom: var(--stzh-space-xlarge);\n  padding-left: var(--stzh-space-large);\n\n  &__description,\n  &-value {\n    @include fontSize(\"milli\");\n  }\n\n  &__title {\n    @include fontSize(\"milli\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n  }\n\n  &-container {\n    display: grid;\n    grid-template-columns: max-content 1fr;\n    gap: var(--stzh-space-small) var(--stzh-space-xlarge);\n    align-items: center;\n  }\n\n  &-key {\n    @include fontSize(\"nano\");\n    color: var(--stzh-color-grey70);\n  }\n\n  /** Variant teaser */\n\n  &--teaser &__title {\n    display: none;\n  }\n\n  &--teaser &__description {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  /** Variant list */\n\n  &--list {\n    padding-top: var(--stzh-space-small);\n    padding-right: var(--stzh-space-xsmall);\n    padding-bottom: var(--stzh-space-small);\n    padding-left: var(--stzh-space-xsmall);\n\n    @include mq($from: medium) {\n      padding-top: var(--stzh-space-medium);\n      padding-right: var(--stzh-space-large);\n      padding-bottom: var(--stzh-space-medium);\n      padding-left: var(--stzh-space-large);\n    }\n  }\n\n  &--list &__description,\n  &--list &-key,\n  &--list &-uv-index-prediction {\n    display: none;\n  }\n\n  &--list &-container {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  &--list &-value {\n    @include fontSize(\"micro\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhBathstatusItemData, StzhLocaleAdapter } from \"../../../index\";\nimport { StzhBathstatusItemLocalizedText } from \"./stzh-bathstatus-item.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-bathstatus-item\",\n  styleUrl: \"stzh-bathstatus-item.scss\",\n  scoped: true,\n})\nexport class StzhBathstatusItem {\n  /** Translation strings */\n  @Prop() localization: StzhBathstatusItemLocalizedText;\n\n  /** Variant */\n  @Prop() variant: \"teaser\" | \"list\" = \"teaser\";\n\n  /** Bathstatus item */\n  @Prop() item: StzhBathstatusItemData | string = \"\";\n  private _item: StzhBathstatusItemData | undefined;\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  @Element() element: HTMLStzhBathstatusItemElement;\n\n  @State() isMedium: boolean;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhBathstatusItemData | 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 mediaChangeHandler = () => {\n    this.isMedium = media(\"medium\").matches;\n  };\n\n  private init = () => {\n    this.itemWatcher(this.item);\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  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"bathstatus-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  connectedCallback() {\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-bathstatus-item\": true,\n      [`stzh-bathstatus-item--${this.variant}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {!!this._item.description && <div class=\"stzh-bathstatus-item__description\">{this._item.description}</div>}\n          <div class=\"stzh-bathstatus-item-container\">\n            <stzh-link\n              class=\"stzh-bathstatus-item__title\"\n              size=\"default\"\n              textAlign={\"left\"}\n              href={this._item.url}\n              label={this._item.title}\n            ></stzh-link>\n            {!!this._item.temp && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.temperature}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.temp}</div>\n              </Fragment>\n            )}\n            {!!this._item.statusMessage && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.status}</div>\n                <div class=\"stzh-bathstatus-item-value\">{this._item.statusMessage}</div>\n              </Fragment>\n            )}\n            {!!this._item.lastUpdate && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.lastUpdate}</div>\n                <div class=\"stzh-bathstatus-item-value\">\n                  {this.isMedium ? (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"datetimeLong\")}\n                    </Fragment>\n                  ) : (\n                    <Fragment>\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"dateInput\")}{\" \"}\n                      {this.dateAdapter.format(this.getParsedDate(this._item.lastUpdate), \"time\")}\n                    </Fragment>\n                  )}\n                </div>\n              </Fragment>\n            )}\n            {!!this._item.uvIndexPrediction && (\n              <Fragment>\n                <div class=\"stzh-bathstatus-item-key\">{this.localization.uvIndexPrediction}</div>\n                <div class=\"stzh-bathstatus-item-value stzh-bathstatus-item-uv-index-prediction\">\n                  <img\n                    src={`${window.stzhComponents.pathMedia}/uvindex/uvindex_${this._item.uvIndexPrediction}.gif`}\n                    alt={\"UV Index\" + this._item.uvIndexPrediction}\n                  />\n                </div>\n              </Fragment>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C720-Qcv.js → p-D71JIHdD.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { s as setPropsIfNull, h as hasSlot } from './p-CN5apKPb.js';
 import { w as waitForEvent } from './p--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-BOO84wnP.js';
-import { d as defineCustomElement$3 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$2 } from './p-BtU8igAM.js';
-import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
+import { d as defineCustomElement$3 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$2 } from './p-ka1rmhv9.js';
+import { d as defineCustomElement$1 } from './p-B8VeEjIy.js';
 
 const stzhToastCss = () => `: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{pointer-events:all;--label-font-family:var(--stzh-toast-label-font-family);--label-font-weight:var(--stzh-toast-label-font-weight);--label-font-style:var(--stzh-toast-label-font-style);--label-color:var(--stzh-toast-label-color);--background-color:var(--stzh-toast-background-color);--close-color:var(--stzh-toast-close-color);--button-color:var(--stzh-toast-button-color);--icon-color:var(--stzh-toast-icon-color)}:host([type=success]){--icon-color:var(--stzh-toast-success-icon-color)}:host([type=warning]){--icon-color:var(--stzh-toast-warning-icon-color)}:host([type=error]){--icon-color:var(--stzh-toast-error-icon-color)}.stzh-toast{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius);transition:background-color var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-toast{border:0.0625rem solid Highlight}}.stzh-toast__content{flex-grow:1;display:flex;gap:var(--stzh-space-small);padding:var(--stzh-space-medium)}.stzh-toast__icon-wrapper{flex-shrink:0;display:flex}.stzh-toast__icon{color:var(--icon-color)}.stzh-toast__text-wrapper{flex-grow:1}.stzh-toast__label{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--label-color);font-family:var(--label-font-family);font-weight:var(--label-font-weight);font-style:var(--label-font-style);transition:color var(--stzh-base-transition-animation-speed);padding-right:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-toast__label{padding-right:var(--stzh-space-xxxlarge)}}.stzh-toast__close-wrapper{flex-shrink:0}.stzh-toast__link{--stzh-button-tertiary-color:var(--button-color);display:flex;justify-content:flex-end}.stzh-toast__close[variant=tertiary]{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-toast{}.stzh-toast--has-link .stzh-toast__label:not(:empty)+.stzh-toast__link{margin-top:var(--stzh-space-xsmall)}`;
 
@@ -233,6 +233,6 @@ function defineCustomElement() {
 }
 
 export { StzhToast as S, defineCustomElement as d };
-//# sourceMappingURL=p-C720-Qcv.js.map
+//# sourceMappingURL=p-D71JIHdD.js.map
 
-//# sourceMappingURL=p-C720-Qcv.js.map
+//# sourceMappingURL=p-D71JIHdD.js.map

package/dist/components/{p-C720-Qcv.js.map → p-D71JIHdD.js.map}

@@ -1 +1 @@
-{"file":"p-C720-Qcv.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space(\"small\");\n    padding: space(\"medium\");\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize(\"milli\");\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space(\"xxlarge\");\n\n    @include mq($from: small) {\n      padding-right: space(\"xxxlarge\");\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space(\"xsmall\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Method, Watch } from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\";\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\",\n  },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\",\n  },\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true,\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll('stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button');\n\n    buttons.forEach(link => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  (this.type === \"info\" && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">{this.label}</div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D71JIHdD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of toast\n */\n\n:host {\n  pointer-events: all;\n\n  --label-font-family: #{$toastLabelFontFamily};\n  --label-font-weight: #{$toastLabelFontWeight};\n  --label-font-style: #{$toastLabelFontStyle};\n\n  --label-color: #{$toastLabelColor};\n  --background-color: #{$toastBackgroundColor};\n  --close-color: #{$toastCloseColor};\n  --button-color: #{$toastButtonColor};\n  --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n  --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n  --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n  --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n  transition: background-color $baseTransitionAnimationSpeed;\n\n  @include highContrast() {\n    border: 1px solid Highlight;\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    gap: space(\"small\");\n    padding: space(\"medium\");\n  }\n\n  &__icon-wrapper {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  &__icon {\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    flex-grow: 1;\n  }\n\n  &__label {\n    @include fontSize(\"milli\");\n    color: var(--label-color);\n    font-family: var(--label-font-family);\n    font-weight: var(--label-font-weight);\n    font-style: var(--label-font-style);\n    transition: color $baseTransitionAnimationSpeed;\n    padding-right: space(\"xxlarge\");\n\n    @include mq($from: small) {\n      padding-right: space(\"xxxlarge\");\n    }\n  }\n\n  &__close-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__link {\n    --stzh-button-tertiary-color: var(--button-color);\n\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Has link */\n\n  &--has-link &__label:not(:empty) + &__link {\n    margin-top: space(\"xsmall\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Method, Watch } from \"@stencil/core\";\n\nimport {\n  StzhToastOpenEvent,\n  StzhToastOpenedEvent,\n  StzhToastCloseEvent,\n  StzhToastClosedEvent,\n  StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\";\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-out\",\n  },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: \"auto\" },\n    { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: \"0\" },\n    // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n    // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n  ],\n  options: {\n    duration: 300,\n    easing: \"ease-in\",\n  },\n};\n\n/**\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-toast\",\n  styleUrl: \"stzh-toast.scss\",\n  shadow: true,\n})\nexport class StzhToast {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n  /** Whether to hide close button */\n  @Prop({ reflect: true }) hideClose: boolean = false;\n\n  /** Open state */\n  @Prop({ reflect: true }) open: boolean = true;\n\n  /** Whether open animation should be played initially. */\n  @Prop() initialOpenAnimation = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhToastLocalizedText;\n\n  /** Toast open event */\n  @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n  /** Toast opened event (after animation)  */\n  @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n  /** Toast close event */\n  @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n  /** Toast closed event (after animation)  */\n  @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n  @Element() element: HTMLStzhToastElement;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n      this.element.hidden = false;\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.element.style.height = \"auto\";\n      this.element.style.opacity = \"1\";\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-toast\",\n        });\n      }\n\n      await stopAnimations(this.element);\n\n      // this.element.style.willChange = \"transform, opacity, height\";\n\n      const computedStyle = getComputedStyle(this.element, null);\n\n      await animateTo(\n        this.element,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.element.scrollHeight,\n          marginTop: parseInt(computedStyle[\"margin-top\"]),\n          marginBottom: parseInt(computedStyle[\"margin-bottom\"]),\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n      this.element.hidden = true;\n      // this.element.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-toast\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  // private observer: MutationObserver;\n  private toggledByMethod: boolean;\n  private rootElement: HTMLElement;\n\n  private handleLinkSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const buttons = host.querySelectorAll('stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button');\n\n    buttons.forEach(link => {\n      setPropsIfNull(link, {\n        size: \"small\",\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.initialOpenAnimation && this.open) {\n      // hide first so the open animation will be shown\n      this.element.hidden = true;\n      this.element.style.height = \"0px\";\n      this.element.style.opacity = \"0\";\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          this.openWatcher(true);\n        });\n      });\n    } else {\n      this.element.hidden = !this.open;\n      this.element.style.height = this.open ? \"auto\" : \"0px\";\n      this.element.style.opacity = this.open ? \"1\" : \"0\";\n    }\n  }\n\n  // connectedCallback() {\n  //   this.init();\n\n  //   this.observer = new MutationObserver(this.init);\n  //   this.observer.observe(this.element, {\n  //     childList: true,\n  //     subtree: true\n  //   });\n  // }\n\n  // disconnectedCallback() {\n  //   if (this.observer) {\n  //     this.observer.disconnect();\n  //   }\n  // }\n\n  render() {\n    const linkUsed = hasSlot(this.element, \"link\");\n\n    const classes = {\n      \"stzh-toast\": true,\n      \"stzh-toast--has-link\": linkUsed,\n      \"stzh-toast--has-close-hidden\": this.hideClose,\n      [`stzh-toast--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host>\n        <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n          <div class=\"stzh-toast__content\">\n            <div class=\"stzh-toast__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-toast__icon\"\n                name={\n                  (this.type === \"info\" && \"info-help-filled\") ||\n                  (this.type === \"success\" && \"checkmark-circle-filled\") ||\n                  (this.type === \"warning\" && \"important-warning-filled\") ||\n                  (this.type === \"error\" && \"warning-filled\")\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-toast__text-wrapper\">\n              <div class=\"stzh-toast__label\">{this.label}</div>\n              <div class=\"stzh-toast__link\">\n                <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose && (\n            <div class=\"stzh-toast__close-wrapper\">\n              <stzh-button\n                class=\"stzh-toast__close\"\n                onClick={this.onCloseButtonClick}\n                label={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D3atNlwG.js → p-DC-bkkG9.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
 import { s as setPropsIfNull } from './p-CN5apKPb.js';
-import { d as defineCustomElement$3 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$2 } from './p-BtU8igAM.js';
-import { d as defineCustomElement$1 } from './p-BU4OH8Cm.js';
+import { d as defineCustomElement$3 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$2 } from './p-ka1rmhv9.js';
+import { d as defineCustomElement$1 } from './p-B8VeEjIy.js';
 
 const stzhGhettoboxCss = () => `.sc-stzh-ghettobox-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-ghettobox-h,[stzh-hidden].sc-stzh-ghettobox-h{display:none}.sc-stzh-ghettobox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-ghettobox-h .has-focus.sc-stzh-ghettobox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox{outline-style:none !important}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox::-moz-focus-inner{border:0 !important}.sc-stzh-ghettobox-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--stzh-button-color:var(--stzh-color-primary);--stzh-button-background-color:var(--stzh-base-invert-color);--stzh-button-hover-color:var(--stzh-color-primary);--stzh-button-hover-background-color:var(--stzh-color-white80op);--stzh-button-disabled-color:var(--stzh-color-primary);--stzh-button-disabled-background-color:var(--stzh-color-white40op);--stzh-button-secondary-color:var(--stzh-base-invert-color);--stzh-button-secondary-background-color:var(--stzh-color-white40op);--stzh-button-secondary-hover-color:var(--stzh-base-invert-color);--stzh-button-secondary-hover-background-color:var(--stzh-color-white30op);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op);--stzh-button-tertiary-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-color:var(--stzh-base-invert-color);--stzh-button-tertiary-hover-background-color:var(--stzh-color-white20op);--stzh-button-tertiary-disabled-color:var(--stzh-color-white70op);--stzh-button-active-color:var(--stzh-color-primary);--stzh-button-active-background-color:var(--stzh-color-white80op);--stzh-button-active-hover-color:var(--stzh-color-primary);--stzh-button-active-hover-background-color:var(--stzh-color-white80op);--background-color:var(--stzh-color-coral60);--color:var(--stzh-base-invert-color);--richtext-color:var(--color)}.stzh-ghettobox.sc-stzh-ghettobox{position:relative;color:var(--color);box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);--stzh-button-secondary-color:var(--stzh-color-coral60);--stzh-button-secondary-background-color:var(--stzh-color-white90op);--stzh-button-secondary-hover-color:var(--stzh-color-coral60);--stzh-button-secondary-hover-background-color:var(--stzh-color-white);--stzh-button-secondary-disabled-color:var(--stzh-color-white60op);--stzh-button-secondary-disabled-background-color:var(--stzh-color-white40op)}.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-ghettobox__container.sc-stzh-ghettobox{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__container.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__message.sc-stzh-ghettobox{gap:var(--stzh-space-xxlarge)}}.stzh-ghettobox__message.sc-stzh-ghettobox{display:flex;flex-direction:column}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-ghettobox__main-title.sc-stzh-ghettobox{margin:0;color:inherit}.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox__main-title.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-ghettobox__description.sc-stzh-ghettobox{--stzh-base-color:var(--richtext-color)}.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-ghettobox__button.sc-stzh-ghettobox{display:grid}@media screen and (min-width: 600px){.stzh-ghettobox__button.sc-stzh-ghettobox{justify-content:start}}.stzh-ghettobox__close.sc-stzh-ghettobox{position:absolute;top:0;right:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{top:0.625rem;right:0.625rem}}`;
 
@@ -121,6 +121,6 @@ function defineCustomElement() {
 }
 
 export { StzhGhettobox as S, defineCustomElement as d };
-//# sourceMappingURL=p-D3atNlwG.js.map
+//# sourceMappingURL=p-DC-bkkG9.js.map
 
-//# sourceMappingURL=p-D3atNlwG.js.map
+//# sourceMappingURL=p-DC-bkkG9.js.map

package/dist/components/{p-D3atNlwG.js.map → p-DC-bkkG9.js.map}

@@ -1 +1 @@
-{"file":"p-D3atNlwG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorCoral60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  --stzh-button-secondary-color: #{$colorCoral60};\n  --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n  --stzh-button-secondary-hover-color: #{$colorCoral60};\n  --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n  --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n  --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n  &__container {\n    @include container;\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include spaceCurve(\"padding-bottom\", \"large\");\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve(\"gap\", \"regular\");\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font(\"title\");\n    @include fontCurve(\"h2\", \"heading\");\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"regular\");\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true,\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\",\n      } as HTMLStzhButtonElement);\n    }\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose,\n    };\n\n    // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n    return (\n      <Host hidden={!this.open}>\n        <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle || this.localization.hiddenTitle}</h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n                <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose && (\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DC-bkkG9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-ghettobox/stzh-ghettobox.scss?tag=stzh-ghettobox&encapsulation=scoped","src/components/CMS/stzh-ghettobox/stzh-ghettobox.tsx"],"sourcesContent":["/*\n * @prop --background-color: Background color of ghettobox\n */\n\n:host {\n  @include base-invert;\n  @include button-invert;\n\n  --background-color: #{$colorCoral60};\n  --color: #{$baseInvertColor};\n  --richtext-color: var(--color);\n}\n\n.stzh-ghettobox {\n  position: relative;\n  color: var(--color);\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n\n  --stzh-button-secondary-color: #{$colorCoral60};\n  --stzh-button-secondary-background-color: #{$colorWhite90op};\n\n  --stzh-button-secondary-hover-color: #{$colorCoral60};\n  --stzh-button-secondary-hover-background-color: #{$colorWhite};\n\n  --stzh-button-secondary-disabled-color: #{$colorWhite60op};\n  --stzh-button-secondary-disabled-background-color: #{$colorWhite40op};\n\n  &__container {\n    @include container;\n    @include spaceCurve(\"padding-top\", \"large\");\n    @include spaceCurve(\"padding-bottom\", \"large\");\n  }\n\n  &__hidden-title {\n    @include visuallyhidden;\n  }\n\n  &__message {\n    @include spaceCurve(\"gap\", \"regular\");\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__main-title {\n    @include font(\"title\");\n    @include fontCurve(\"h2\", \"heading\");\n    margin: 0;\n    color: inherit;\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"regular\");\n    }\n  }\n\n  &__description {\n    @include fontCurve(\"p1\");\n    --stzh-base-color: var(--richtext-color);\n\n    &:not(:empty) {\n      @include spaceCurve(\"margin-bottom\", \"small\");\n    }\n  }\n\n  &__button {\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: start;\n    }\n  }\n\n  &__close {\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    @include mq($from: small) {\n      top: 10px;\n      right: 10px;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\";\n\nimport { StzhGhettoboxCloseEvent, StzhGhettoboxOpenEvent } from \"../../../index\";\n\nimport { setPropsIfNull } from \"../../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\";\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true,\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\",\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\",\n      } as HTMLStzhButtonElement);\n    }\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose,\n    };\n\n    // TODO: Temporary workaround/bugfix for readspeaker class \"rs_skip\" can be removed once Readspeaker update with bugfix has arrived (ETA end of 2024).\n    return (\n      <Host hidden={!this.open}>\n        <div class={{ ...classes, rs_skip: !this.open }} aria-hidden={this.open ? \"false\" : \"true\"}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">{this.hiddenTitle || this.localization.hiddenTitle}</h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">{this.mainTitle}</h2>\n                <div class=\"stzh-ghettobox__description\">{this.description ? this.description : <slot></slot>}</div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose && (\n              <stzh-button\n                class=\"stzh-ghettobox__close\"\n                onClick={this.onCloseButtonClick}\n                a11yLabel={this.localization.close}\n                variant=\"tertiary\"\n                size=\"small\"\n                iconOnly={true}\n                icon=\"close-big\"\n              ></stzh-button>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-tNg83_1b.js → p-DEFPf8mR.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DAS4ghWk.js';
-import { d as defineCustomElement$4 } from './p-Cz-ha88J.js';
-import { d as defineCustomElement$3 } from './p-CgEDyVYF.js';
-import { d as defineCustomElement$2 } from './p-BU4OH8Cm.js';
-import { d as defineCustomElement$1 } from './p-CVGsVbS2.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-ptAFQZzh.js';
+import { d as defineCustomElement$4 } from './p-BaC_gScF.js';
+import { d as defineCustomElement$3 } from './p-B8oKMYV6.js';
+import { d as defineCustomElement$2 } from './p-B8VeEjIy.js';
+import { d as defineCustomElement$1 } from './p-BK7VtwAc.js';
 
 const stzhChipCss = () => `.sc-stzh-chip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h,[stzh-hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}@media screen and (min-width: 900px){.sc-stzh-chip-h{--outer-height:auto}}.sc-stzh-chip-h{--color:var(--stzh-chip-color, var(--stzh-color-primary70));--remove-color:var(--color);--remove-border-radius:1.5rem;--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--icon-size:var(--stzh-icon-size-xsmall);--icon-color:var(--color);--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--color);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(
     --stzh-chip-hover-background-color,
@@ -200,6 +200,6 @@ function defineCustomElement() {
 }
 
 export { StzhChip as S, defineCustomElement as d };
-//# sourceMappingURL=p-tNg83_1b.js.map
+//# sourceMappingURL=p-DEFPf8mR.js.map
 
-//# sourceMappingURL=p-tNg83_1b.js.map
+//# sourceMappingURL=p-DEFPf8mR.js.map

package/dist/components/{p-tNg83_1b.js.map → p-DEFPf8mR.js.map}

@@ -1 +1 @@
-{"file":"p-tNg83_1b.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 32px;\n  --outer-height: 40px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --border-radius: 16px;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n}\n\n@mixin chip--size-large() {\n  --height: 40px;\n  --border-radius: 20px;\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n}\n\n@mixin chip--size-small() {\n  --font-size: var(--stzh-font-nano-font-size);\n  --line-height: var(--stzh-font-nano-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 24px;\n  --border-radius: 12px;\n  --padding-left: #{space(\"xsmall\")};\n  --padding-right: #{space(\"xsmall\")};\n}\n\n:host {\n  @include chip--size-default;\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize(\"xsmall\")};\n  --icon-color: var(--color);\n  --icon-gap: #{space(\"xsmall\")};\n  --counter-color: var(--color);\n  --counter-gap: #{space(\"xsmall\")};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(\n    --stzh-chip-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space(\"xsmall\")};\n    --padding-right: #{space(\"xsmall\")};\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-chip-active-hover-background-color,\n      #{$colorPrimary90}\n    );\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-chip-disabled-background-color,\n      #{$colorGrey20}\n    );\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n  @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include chip--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include chip--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"large\"])) {\n      @include chip--size-large;\n    }\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space(\"xxsmall\");\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize(\"xxsmall\")};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space(\"xxsmall\")});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n  StzhChipBlurEvent,\n  StzhChipClickEvent,\n  StzhChipFocusEvent,\n  StzhChipRemoveEvent,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true,\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n            <stzh-icon\n              class=\"stzh-chip__icon\"\n              name={\n                this.icon ||\n                (this.type === \"info\" && \"info-help\") ||\n                (this.type === \"warning\" && \"important-warning\") ||\n                (this.type === \"error\" && \"warning\") ||\n                (this.type === \"success\" && \"checkmark-circle\")\n              }\n            ></stzh-icon>\n          ) : (\n            <slot name=\"icon\"></slot>\n          )}\n        </div>\n\n        <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n          {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n            <span class=\"stzh-chip__vhidden\">&nbsp;({this.counter})</span>\n          )}\n        </stzh-clamp>\n\n        {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant,\n    };\n\n    const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable && (\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          )}\n\n          {this.href ? (\n            <Chip\n              ref={el => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          ) : (\n            <Chip\n              ref={el => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DEFPf8mR.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 32px;\n  --outer-height: 40px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space(\"small\")};\n  --padding-right: #{space(\"small\")};\n  --border-radius: 16px;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n}\n\n@mixin chip--size-large() {\n  --height: 40px;\n  --border-radius: 20px;\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n}\n\n@mixin chip--size-small() {\n  --font-size: var(--stzh-font-nano-font-size);\n  --line-height: var(--stzh-font-nano-text-line-height);\n  --letter-spacing: normal;\n\n  --height: 24px;\n  --border-radius: 12px;\n  --padding-left: #{space(\"xsmall\")};\n  --padding-right: #{space(\"xsmall\")};\n}\n\n:host {\n  @include chip--size-default;\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize(\"xsmall\")};\n  --icon-color: var(--color);\n  --icon-gap: #{space(\"xsmall\")};\n  --counter-color: var(--color);\n  --counter-gap: #{space(\"xsmall\")};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(\n    --stzh-chip-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space(\"xsmall\")};\n    --padding-right: #{space(\"xsmall\")};\n    --icon-gap: #{space(\"xxsmall\")};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(\n      --stzh-chip-active-hover-background-color,\n      #{$colorPrimary90}\n    );\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n    --background-color: var(\n      --stzh-chip-disabled-background-color,\n      #{$colorGrey20}\n    );\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n  @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include chip--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include chip--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"large\"])) {\n      @include chip--size-large;\n    }\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    font-size: var(--font-size);\n    line-height: var(--line-height);\n    letter-spacing: var(--letter-spacing);\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space(\"xxsmall\");\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize(\"xxsmall\")};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space(\"xxsmall\")});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n  StzhChipBlurEvent,\n  StzhChipClickEvent,\n  StzhChipFocusEvent,\n  StzhChipRemoveEvent,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true,\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Size variant (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n  /** Size variant (above ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n            <stzh-icon\n              class=\"stzh-chip__icon\"\n              name={\n                this.icon ||\n                (this.type === \"info\" && \"info-help\") ||\n                (this.type === \"warning\" && \"important-warning\") ||\n                (this.type === \"error\" && \"warning\") ||\n                (this.type === \"success\" && \"checkmark-circle\")\n              }\n            ></stzh-icon>\n          ) : (\n            <slot name=\"icon\"></slot>\n          )}\n        </div>\n\n        <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n          {this.label ? this.label : <slot></slot>}\n          {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n            <span class=\"stzh-chip__vhidden\">&nbsp;({this.counter})</span>\n          )}\n        </stzh-clamp>\n\n        {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant,\n    };\n\n    const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable && (\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          )}\n\n          {this.href ? (\n            <Chip\n              ref={el => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          ) : (\n            <Chip\n              ref={el => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href,\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BMKAa5cH.js → p-DEZhHL-h.js}

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

package/dist/components/{p-BMKAa5cH.js.map → p-DEZhHL-h.js.map}

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