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

package/dist/components/{p-t2WEvxaO.js → p-CQD8uCLY.js}

@@ -1,13 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-D1w1cyua.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-C-pdhkit.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
-import { d as defineCustomElement$8 } from './p-iUoPBRFh.js';
-import { d as defineCustomElement$7 } from './p-BmfB4Krn.js';
-import { d as defineCustomElement$6 } from './p-CGS9ruwP.js';
-import { d as defineCustomElement$5 } from './p-IHtabsRZ.js';
-import { d as defineCustomElement$4 } from './p-BNyOXGiJ.js';
-import { d as defineCustomElement$3 } from './p-C1jRUhAU.js';
-import { d as defineCustomElement$2 } from './p-B1-O50k0.js';
-import { d as defineCustomElement$1 } from './p-DgluQL6p.js';
+import { d as defineCustomElement$8 } from './p-14jBJEN0.js';
+import { d as defineCustomElement$7 } from './p-GhNQI0T5.js';
+import { d as defineCustomElement$6 } from './p-CJX3w1VJ.js';
+import { d as defineCustomElement$5 } from './p-Dz9vwH7S.js';
+import { d as defineCustomElement$4 } from './p-at8hIzB4.js';
+import { d as defineCustomElement$3 } from './p-wDEAW6Kp.js';
+import { d as defineCustomElement$2 } from './p-CTZlFeRd.js';
+import { d as defineCustomElement$1 } from './p-Cd2uv7vV.js';
 
 const stzhActionsetCss = () => `.sc-stzh-actionset-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-actionset-h,[stzh-hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::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-actionset-h .has-focus.sc-stzh-actionset{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset{outline-style:none !important}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset::-moz-focus-inner{border:0 !important}.stzh-actionset__actions.sc-stzh-actionset{display:flex;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:1}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto}@media screen and (min-width: 900px){.stzh-actionset--overflow.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (min-width: 600px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{display:none}}`;
 
@@ -237,6 +237,6 @@ function defineCustomElement() {
 }
 
 export { StzhActionset as S, defineCustomElement as d };
-//# sourceMappingURL=p-t2WEvxaO.js.map
+//# sourceMappingURL=p-CQD8uCLY.js.map
 
-//# sourceMappingURL=p-t2WEvxaO.js.map
+//# sourceMappingURL=p-CQD8uCLY.js.map

package/dist/components/{p-t2WEvxaO.js.map → p-CQD8uCLY.js.map}

@@ -1 +1 @@
-{"file":"p-t2WEvxaO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space(\"xsmall\");\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element, Watch, Event, EventEmitter, State } from \"@stencil/core\";\n\nimport { StzhActionsetItem, StzhActionsetItemClickEvent } from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from \"./stzh-actionset.localization\";\n\nimport { media, addMediaChangeListener, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nimport { Placement } from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true,\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent,\n    });\n  };\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null,\n    });\n\n    let newActionsVisible = 0;\n\n    if ((this.variant === \"overflow\" && this.isMedium) || (this.variant === \"stack\" && this.isSmall)) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`,\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  };\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  };\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant,\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant ? action.variant : this.variant === \"stack\" ? \"secondary\" : \"tertiary\"}\n        size={action.size ? action.size : this.variant === \"stack\" ? \"small\" : \"tiny\"}\n        badgePosition=\"icon\"\n        onClick={e => {\n          this.actionClick(action, e);\n        }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div ref={el => (this.actionsElement = el as HTMLElement)} class=\"stzh-actionset__actions-wrapper\">\n              {this._actions.map(\n                action =>\n                  (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&\n                  (action.tooltipContent ? (\n                    <stzh-tooltip strategy=\"fixed\" content={action.tooltipContent}>\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                  ) : (\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )),\n              )}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={\n                  this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : !this.isMedium\n                      ? this.localization.actions\n                      : \"\"\n                }\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={\n                    this.popoverButtonVariant !== \"\"\n                      ? this.popoverButtonVariant\n                      : this.variant === \"stack\"\n                        ? \"secondary\"\n                        : \"tertiary\"\n                  }\n                  size={\n                    this.popoverButtonSize !== \"\" ? this.popoverButtonSize : this.variant === \"stack\" ? \"small\" : \"tiny\"\n                  }\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={\n                    this.variant === \"stack\"\n                      ? this.localization.furtherActions\n                      : !this.isMedium\n                        ? this.localization.actions\n                        : \"\"\n                  }\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={e => {\n                        this.actionClick(action, e);\n                      }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CQD8uCLY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space(\"xsmall\");\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space(\"xsmall\");\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h, Element, Watch, Event, EventEmitter, State } from \"@stencil/core\";\n\nimport { StzhActionsetItem, StzhActionsetItemClickEvent } from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from \"./stzh-actionset.localization\";\n\nimport { media, addMediaChangeListener, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nimport { Placement } from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true,\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent,\n    });\n  };\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null,\n    });\n\n    let newActionsVisible = 0;\n\n    if ((this.variant === \"overflow\" && this.isMedium) || (this.variant === \"stack\" && this.isSmall)) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`,\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  };\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  };\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant,\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant ? action.variant : this.variant === \"stack\" ? \"secondary\" : \"tertiary\"}\n        size={action.size ? action.size : this.variant === \"stack\" ? \"small\" : \"tiny\"}\n        badgePosition=\"icon\"\n        onClick={e => {\n          this.actionClick(action, e);\n        }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div ref={el => (this.actionsElement = el as HTMLElement)} class=\"stzh-actionset__actions-wrapper\">\n              {this._actions.map(\n                action =>\n                  (this.dynamicActions || (!this.dynamicActions && this.actionsCollapsed.indexOf(action) === -1)) &&\n                  (action.tooltipContent ? (\n                    <stzh-tooltip strategy=\"fixed\" content={action.tooltipContent}>\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                  ) : (\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )),\n              )}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={\n                  this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : !this.isMedium\n                      ? this.localization.actions\n                      : \"\"\n                }\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={\n                    this.popoverButtonVariant !== \"\"\n                      ? this.popoverButtonVariant\n                      : this.variant === \"stack\"\n                        ? \"secondary\"\n                        : \"tertiary\"\n                  }\n                  size={\n                    this.popoverButtonSize !== \"\" ? this.popoverButtonSize : this.variant === \"stack\" ? \"small\" : \"tiny\"\n                  }\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={\n                    this.variant === \"stack\"\n                      ? this.localization.furtherActions\n                      : !this.isMedium\n                        ? this.localization.actions\n                        : \"\"\n                  }\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={e => {\n                        this.actionClick(action, e);\n                      }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B1-O50k0.js → p-CTZlFeRd.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-D1w1cyua.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-C-pdhkit.js';
 
 const stzhTextCss = () => `.sc-stzh-text-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-text-h,[stzh-hidden].sc-stzh-text-h{display:none}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(
     --stzh-text-grid-template-areas,
@@ -82,6 +82,6 @@ function defineCustomElement() {
 }
 
 export { StzhText as S, defineCustomElement as d };
-//# sourceMappingURL=p-B1-O50k0.js.map
+//# sourceMappingURL=p-CTZlFeRd.js.map
 
-//# sourceMappingURL=p-B1-O50k0.js.map
+//# sourceMappingURL=p-CTZlFeRd.js.map

package/dist/components/{p-B1-O50k0.js.map → p-CTZlFeRd.js.map}

@@ -1 +1 @@
-{"file":"p-B1-O50k0.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,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;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n\n      @media (hover: none) {\n        color: inherit;\n      }\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font(\"heavy\");\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font(\"heavy\");\n    @include fontCurve(\"lead\", \"lead\");\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n\n.stzh-text__text-inner {\n  text-overflow: var(--text-overflow, clip);\n  white-space: var(--white-space, normal);\n  overflow: var(--overflow, visible);\n  width: var(--width, initial);\n  max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true,\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CTZlFeRd.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,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;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n\n      @media (hover: none) {\n        color: inherit;\n      }\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font(\"heavy\");\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font(\"heavy\");\n    @include fontCurve(\"lead\", \"lead\");\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n\n.stzh-text__text-inner {\n  text-overflow: var(--text-overflow, clip);\n  white-space: var(--white-space, normal);\n  overflow: var(--overflow, visible);\n  width: var(--width, initial);\n  max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true,\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CQUkqYER.js → p-CUx7_aMg.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-D1w1cyua.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-C-pdhkit.js';
 import { g as getDefaultExportFromCjs } from './p-E-ZsRS8r.js';
-import { d as defineCustomElement$1 } from './p-CGS9ruwP.js';
+import { d as defineCustomElement$1 } from './p-CJX3w1VJ.js';
 
 function globals (defs) {
   defs('EPSG:4326', '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees');
@@ -56717,6 +56717,6 @@ function defineCustomElement() {
 }
 
 export { StzhOlmap as S, defineCustomElement as d };
-//# sourceMappingURL=p-CQUkqYER.js.map
+//# sourceMappingURL=p-CUx7_aMg.js.map
 
-//# sourceMappingURL=p-CQUkqYER.js.map
+//# sourceMappingURL=p-CUx7_aMg.js.map