@oiz/stzh-components 4.1.0 → 4.1.1-beta

package/dist/components/{p-8f5849c3.js.map → p-c8b9cba7.js.map}

@@ -1 +1 @@
-{"file":"p-8f5849c3.js","mappings":"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","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/**\n * @prop --content-min-height: Min height of content\n */\n\n:host {\n  // --box-shadow: none;\n  --border-radius: 0px;\n\n  --content-min-height: 120px;\n\n  --dnd-visibility: hidden;\n  --dnd-opacity: 0;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-radius: var(--border-radius);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  &[collapsed]:not([collapsed=\"false\"]) {\n    --content-min-height: none;\n  }\n\n  &[checked]:not([checked=\"false\"]) {\n    outline: 3px solid $colorPrimary;\n  }\n\n  &.is-ghost::after,\n  .is-ghost &::after {\n    border-radius: var(--border-radius);\n  }\n\n  &[href]:hover,\n  &[href]:focus-within,\n  &.is-selected,\n  &.is-chosen,\n  .is-selected &,\n  .is-chosen & {\n    // --box-shadow: #{$boxShadowOverlay};\n  }\n\n  &.is-ghost,\n  .is-ghost & {\n    // --box-shadow: none;\n    overflow: hidden;\n  }\n\n  &.is-drag,\n  &.is-chosen,\n  &.is-ghost,\n  &.is-selected,\n  .is-drag &,\n  .is-chosen &,\n  .is-ghost &,\n  .is-selected &,\n  &[is-sortable]:hover {\n    --dnd-visibility: visible;\n    --dnd-opacity: 1;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  ::slotted(img[slot=\"image\"]) {\n    display: block;\n  }\n\n  ::slotted(table) {\n    border: 0;\n    border-spacing: 0;\n\n    th {\n      @include font;\n    }\n\n    td, th {\n      padding: 0;\n    }\n\n    td {\n      color: $colorBlack;\n      padding-left: space('xsmall');\n    }\n  }\n}\n\n.stzh-card {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: $colorGrey10;\n  border-radius: var(--border-radius);\n  // box-shadow: var(--box-shadow);\n  // transition: box-shadow $baseTransitionAnimationSpeed;\n\n  // .vshow-medium {\n  //   @include mq($to: medium) {\n  //     @include visuallyhidden;\n  //   }\n  // }\n\n  // .show-medium {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // .hide-medium {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n  \n  &--background-grey {\n    background-color: $colorGrey10;  \n  }\n\n  &--background-white {\n    background-color: $colorWhite;  \n  }\n  \n  &__content-wrapper {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--content-min-height);\n  }\n\n  &__dnd {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    // INFO: we don't use space() values here, because we want this element to align with the heading\n    left: 3px;\n    top: 23px;\n    display: flex;\n    visibility: var(--dnd-visibility);\n    opacity: var(--dnd-opacity);\n    transition: all $baseTransitionAnimationSpeed;\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n\n    @include mq($from: large) {\n      // INFO: we don't use space() values here, because we want this element to align with the heading\n      left: 4px;\n      top: 27px;\n    }\n  }\n\n  &__header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  &__header-meta {\n    &:not(:empty) {\n      display: inline-flex;\n      margin-top: space('xsmall');\n      gap: space('xsmall');\n    }\n  }\n\n  &__header-left,\n  &__header-right {\n    display: flex;\n  }\n\n  &__header-right {\n    @include spaceCurve('padding-left', 'tiny');\n  }\n\n  &__left {\n    align-self: center;\n  }\n\n  &__title-area {\n    @include wordWrap;\n    overflow: hidden;\n  }\n\n  &__title,\n  &__subtitle {\n    margin: 0;\n  }\n\n  &__title-link {\n    color: inherit;\n    text-decoration-line: none;\n  }\n\n  &__title {\n    @include font('title');\n    @include fontSize('milli');\n  }\n\n  &__image-link {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    text-decoration-line: none;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n    margin-left: -0.5625em;\n  }\n\n  &__subtitle-text {\n    position: relative;\n    display: inline-flex;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n    padding-left: 0.5625em;\n\n    &::after {\n      content: ',';\n      position: absolute;\n      left: 0;\n    }\n  }\n\n  &__content {\n    @include fontSize('milli');\n    flex-grow: 1;\n  }\n\n  // &__footer-meta {\n  //   @include fontSize('micro');\n  //   display: flex;\n  //   flex-wrap: wrap;\n  //   gap: space('xsmall');\n  //   color: $colorGrey80;\n  // }\n\n  // &__footer-meta-separator {\n  //   width: 1px;\n  //   background-color: currentColor;\n  //   flex-shrink: 0;\n  // }\n\n  &__card-actions {\n    display: inline-flex;\n    white-space: nowrap;\n  }\n\n  &__card-action {\n    @include mq($to: medium) {\n      --icon-text-margin: 0px;\n      --badge-icon-text-margin: 0px;\n    }\n\n    &[variant=\"tertiary\"] {\n      --color: #{$baseColor};\n    }\n\n    &.is-button {\n      --icon-size: #{iconSize('small')};\n    }\n\n    &.is-placeholder {\n      width: space('xxlarge');\n      height: space('xxlarge');\n    }\n\n    &.is-star {\n    }\n  }\n\n  &__card-action-popover {\n    --width: auto;\n  }\n\n  /* Service */\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__title {\n    @include fontCurve('h3', 'heading');\n  }\n\n  /* Has content */\n\n  &--has-content &__content {\n    @include spaceCurve('padding-bottom', 'large');\n    padding-top: space('xlarge');\n    padding-left: space('xlarge');\n    padding-right: space('medium');\n\n    @include mq($from: medium) {\n      @include spaceCurve('padding-bottom', 'medium');\n    }\n  }\n\n  &--has-content#{&}--service &__content {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  /* Has header */\n\n  &--has-header &__header {\n    padding-top: space('xlarge');\n    padding-left: space('xlarge');\n    padding-right: space('medium');\n  }\n\n  &--has-header#{&}--has-content &__content {\n    padding-top: space('xsmall');\n  }\n\n  &--has-header#{&}--service &__header {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-header#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has footer */\n\n  &--has-footer &__footer {\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('xlarge');\n    padding-right: space('medium');\n  }\n\n  &--has-footer#{&}--has-content &__content {\n    padding-bottom: space('medium');\n  }\n\n  &--has-footer#{&}--service &__footer {\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-footer#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag#{&}--has-header &__header {\n    padding-top: space('xxxlarge');\n  }\n\n  /* Has Link */\n\n  &--has-link &__title-link,\n  &--has-link &__content {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &--has-link &__title-link {\n    color: $colorPrimary;\n    text-decoration-line: none;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    // &::before {\n    //   transition: all $baseTransitionAnimationSpeed;\n    // }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &--has-link &__card-actions,\n  &--has-link &__header-meta,\n  &--has-link &__footer-actionset,\n  &--has-link &__footer-select-button {\n    position: relative;\n    z-index: 2;\n  }\n\n  &--has-link:has(#{&}__image-link:hover) &__title-link,\n  &--has-link:has(#{&}__image-link:hover) &__content,\n  &--has-link:has(#{&}__title-link:hover) &__title-link,\n  &--has-link:has(#{&}__title-link:hover) &__content {\n    color: $colorSecondary60;\n\n    //   &::before,\n    //   &::before {\n    //     background-color: $colorPrimary20;\n    //   }\n  }\n\n  // &__footer-arrow {\n  //   color: $colorPrimary;\n  // }\n\n  // &--has-link:hover &__footer-arrow {\n  //   color: $colorSecondary60;\n  // }\n\n  /* Interactive Subtitle */\n\n  &--has-subtitle-interactive &__subtitle {\n    cursor: pointer;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Is collapsible */\n\n  &--is-collapsible &__header {\n    cursor: pointer;\n  }\n\n  /* Collapsed (Header) */\n\n  &--is-collapsed,\n  &--has-collapsed-header &__header {\n    // .vhide-when-collapsed {\n    //   @include visuallyhidden;\n    // }\n\n    .hide-when-collapsed {\n      display: none;\n    }\n\n    // .show-when-collapsed {\n    //   display: block;\n    // }\n  }\n\n  &--is-collapsed &__header {\n    // border-bottom: none;\n    padding-bottom: space('xlarge');\n  }\n\n  &--is-collapsed#{&}--service &__header {\n    // border-bottom: none;\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--is-collapsed &__card-action,\n  &--has-collapsed-header &__card-action {\n    --icon-text-margin: 0px;\n    --badge-icon-text-margin: 0px;\n  }\n\n  /* Starred */\n\n  &--is-starred &__card-action.is-star {\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading,\n  &--hyphens &__title {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, Event, EventEmitter, forceUpdate, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhButtonChangeEvent,\n  StzhCardClickEvent,\n  StzhCardCollapseEvent,\n  StzhCardHeaderAction,\n  StzhCardHeaderActionClickEvent,\n  StzhCardStarClickEvent,\n  StzhCardSubtitleClickEvent,\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n// import { media } from '../../utils/media-utils';\nimport { StzhCardLocalizedText } from \"./stzh-card.localization\";\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions` and `selectable` button are not shown anymore)\n */\n@Component({\n  tag: \"stzh-card\",\n  styleUrl: \"stzh-card.scss\",\n  scoped: true,\n})\nexport class StzhCard {\n  /** Translation strings */\n  @Prop() localization: StzhCardLocalizedText;\n\n  /** Whether background should be grey (default) or white */\n  @Prop({ reflect: true }) backgroundColor: \"grey\" | \"white\" = \"grey\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"service\" = \"default\";\n\n  /** Whether card is collapsed or not */\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n  /** Whether card was starred */\n  @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n  /**\n   * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n   */\n  @Prop({ reflect: true }) starrable: boolean = false;\n\n  /** Whether card is selectable */\n  @Prop({ reflect: true }) selectable: boolean = false;\n\n  /** Whether card is checked (if card is selectable) */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if card is selectable) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** The value of the input element (if card is selectable) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Whether the element is disabled or not (if card is selectable) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Heading (or use heading slot instead) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Subtitle */\n  @Prop() subtitle: string | string[] = \"\";\n  private _subtitles = [];\n\n  /** Author name */\n  // @Prop() author: string;\n\n  /** Date to display */\n  // @Prop() date: Date | string;\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  /** Tag name */\n  // @Prop() tag: string;\n\n  /** Card header actions */\n  @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n  private _headerActions: StzhCardHeaderAction[];\n\n  /**\n   * Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n   */\n  @Prop() headerActionsBadge: string;\n\n  /**\n   * If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n   * By default, it takes the badge type from the first one. With this property you can overwrite it.\n   */\n  @Prop() headerActionsBadgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n  /**\n   * Card footer actions.\n   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n   * You can listen to clicks with the `stzhActionClick` event.\n   */\n  @Prop() footerActions: string | StzhActionsetItem[] = [];\n  private _footerActions: StzhActionsetItem[];\n\n  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n  @Prop() subtitleInteractive: boolean = false;\n\n  /**\n   * Whether sorting should be disabled.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n  /** Whether card is collapsible */\n  @Prop({ reflect: true }) collapsible: boolean = false;\n\n  /**\n   * Whether movement menu items should be shown.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop() hideMovementActions: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhCardElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n  /** Collapse event */\n  @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n  /** Subtitle click event */\n  @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n  /** Star click event */\n  @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n  /** Header action click event */\n  @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n  @Watch(\"subtitle\")\n  subtitleWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      if (newValue === \"\") {\n        this._subtitles = [];\n      } else {\n        try {\n          this._subtitles = JSON.parse(newValue);\n        } catch (err) {\n          this._subtitles = [newValue];\n        }\n      }\n    } else {\n      this._subtitles = newValue;\n    }\n  }\n\n  @Watch(\"headerActions\")\n  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._headerActions = JSON.parse(newValue);\n    } else {\n      this._headerActions = newValue;\n    }\n  }\n\n  @Watch(\"footerActions\")\n  footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._footerActions = JSON.parse(newValue);\n    } else {\n      this._footerActions = newValue;\n    }\n  }\n\n  // @Watch(\"collapsed\")\n  // collapsedWatcher() {\n  //   this.handleResize();\n  // }\n\n  private observer: MutationObserver;\n\n  private nodeChange = entries => {\n    let changeInSlot = false;\n\n    entries.forEach(entry => {\n      if (entry.target.closest(\"[slot]\") || entry.target.hasAttribute(\"slot\")) {\n        changeInSlot = true;\n      }\n    });\n\n    if (changeInSlot) {\n      forceUpdate(this.element);\n    }\n  };\n\n  // private mainElement: HTMLElement;\n  // private headerElement: HTMLElement;\n  // private headerLeftElement: HTMLElement;\n  // private headerRightElement: HTMLElement;\n  private imageLinkElement: HTMLAnchorElement;\n  private titleLinkElement: HTMLAnchorElement;\n  private headingTextElement: HTMLDivElement;\n  private sortable: HTMLStzhSortableElement;\n\n  // private debounceResize: number;\n  // private resizeObserver: ResizeObserver;\n\n  // private update = () => {\n  //   if (!this.mainElement) {\n  //     return;\n  //   }\n\n  //   this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n  //   if (media('medium').matches) {\n  //     const headerWidth = this.headerElement.clientWidth;\n  //     const leftWidth = this.headerLeftElement.clientWidth;\n  //     const rightWidth = this.headerRightElement.clientWidth;\n\n  //     if (headerWidth - leftWidth <= rightWidth) {\n  //       this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n  //     }\n  //   }\n  // }\n\n  private headerClick = (event: MouseEvent) => {\n    if (!this.collapsible) {\n      return;\n    }\n\n    const filterTags = [\n      \"stzh-popover\",\n      \"stzh-tooltip\",\n      \"button\",\n      \"a\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"iframe\",\n      \"details\",\n      \"label\",\n      \"area\",\n    ];\n    const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n    const found = composedPathTags.some(r => filterTags.includes(r));\n\n    if (!found) {\n      this.collapsed = !this.collapsed;\n\n      this.stzhCollapse.emit({\n        component: \"stzh-card\",\n        collapsed: this.collapsed,\n      });\n    }\n  };\n\n  private subtitleClick = (event: MouseEvent) => {\n    if (this.subtitleInteractive) {\n      this.stzhSubtitleClick.emit({\n        component: \"stzh-card\",\n        originalEvent: event,\n      });\n    }\n  };\n\n  private starToggleClick = (event: MouseEvent) => {\n    this.stzhStarClick.emit({\n      component: \"stzh-card\",\n      starred: this.starred,\n      originalEvent: event,\n    });\n  };\n\n  private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n    this.stzhHeaderActionClick.emit({\n      component: \"stzh-card\",\n      action,\n      originalEvent: event,\n    });\n  };\n\n  private arrowUpClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"up\");\n    }\n  };\n\n  private arrowDownClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"down\");\n    }\n  };\n\n  private updateElementInsideSortable = () => {\n    const currentSortable = this.element.closest(\"stzh-sortable\");\n\n    // check if element is still inside sortable\n    if (!currentSortable) {\n      this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable);\n      return;\n    }\n\n    if (this.element) {\n      forceUpdate(this.element);\n    }\n  };\n\n  private init = () => {\n    const chips = this.element.querySelectorAll('stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip');\n\n    const texts = this.element.querySelectorAll('stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text');\n\n    chips.forEach(chip => {\n      setPropsIfNull(chip, {\n        size: \"small\",\n      } as HTMLStzhChipElement);\n    });\n\n    texts.forEach(text => {\n      setPropsIfNull(text, {\n        size: \"inherit\",\n      } as HTMLStzhTextElement);\n    });\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 handleMutation = entries => {\n    this.init();\n    this.nodeChange(entries);\n  };\n\n  private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n    this.checked = event.detail.checked;\n  };\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  private findSortableChildElement(): HTMLElement | undefined {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      let element: HTMLElement = this.element;\n      let sortableContainer = null;\n\n      if (typeof sortable.container === \"function\") {\n        sortableContainer = sortable.container();\n      } else {\n        sortableContainer = sortable.container;\n      }\n\n      while (element.parentElement && element.parentElement !== sortableContainer) {\n        element = element.parentElement;\n      }\n\n      return element;\n    }\n  }\n\n  async componentWillLoad() {\n    this.subtitleWatcher(this.subtitle);\n    this.headerActionsWatcher(this.headerActions);\n    this.footerActionsWatcher(this.footerActions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n    }\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  componentDidLoad() {\n    this.sortable = this.element.closest(\"stzh-sortable\");\n\n    if (this.sortable) {\n      this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable);\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.handleMutation);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n\n    // this.resizeObserver = new ResizeObserver(this.handleResize);\n    // this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    // if (this.resizeObserver) {\n    //   this.resizeObserver.disconnect();\n    // }\n  }\n\n  render() {\n    const imageUsed: boolean = hasSlot(this.element, \"image\");\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n    const footerUsed: boolean = hasSlot(this.element, \"footer\");\n    const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n    const Heading = `h${this.headingLevel}`;\n    const Subtitle = `${this.subtitleInteractive ? \"button\" : \"span\"}`;\n\n    const sortableChildElement = this.findSortableChildElement();\n\n    const isFirstItemInSortable =\n      sortableChildElement?.parentElement &&\n      Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) === 0;\n\n    const isLastItemInSortable =\n      sortableChildElement?.parentElement &&\n      Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) ===\n        sortableChildElement?.parentElement?.children.length - 1;\n\n    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n    // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n    // const headerActions = [\n    //   ...this._headerActions\n    // ];\n\n    const hasHeading = !!this.heading || headingUsed;\n\n    const hasHeader =\n      hasHeading ||\n      this._subtitles.length > 0 ||\n      this._headerActions.length > 0 ||\n      // || nonCollapsingTextHeaderActions.length > 0\n      this.starrable ||\n      sortableActionsEnabled;\n\n    const hasFooter = footerUsed || this._footerActions.length > 0 || this.selectable;\n    // || !!this.author\n    // || !!this.date;\n\n    const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\n\n    const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;\n    const descriptionId = `stzh-card${uniqueId}`;\n\n    const classes = {\n      \"stzh-card\": true,\n      \"stzh-card--background-grey\": this.backgroundColor === \"grey\",\n      \"stzh-card--background-white\": this.backgroundColor === \"white\",\n      \"stzh-card--has-link\": !!this.href,\n      \"stzh-card--has-image\": imageUsed,\n      \"stzh-card--has-content\": contentUsed,\n      \"stzh-card--has-subtitle\": !!this.subtitle,\n      \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n      \"stzh-card--has-header\": hasHeader,\n      \"stzh-card--has-footer\": hasFooter,\n      // \"stzh-card--has-tag\": !!this.tag,\n      \"stzh-card--is-collapsible\": this.collapsible,\n      \"stzh-card--is-collapsed\": this.collapsed,\n      \"stzh-card--is-starred\": this.starred,\n      \"stzh-card--is-checked\": this.checked,\n      \"stzh-card--is-sortable\": sortableEnabled,\n      [`stzh-card--${this.variant}`]: !!this.variant,\n      \"stzh-card--hyphens\": this.hyphensEnabled,\n    };\n\n    return (\n      <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n        <article\n          // ref={(el) => (this.mainElement = el as HTMLElement)}\n          class={classes}\n        >\n          <a\n            ref={el => (this.imageLinkElement = el as HTMLAnchorElement)}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class=\"stzh-card__image-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.href ? this.handleCardClick : null}\n          >\n            <slot name=\"image\"></slot>\n          </a>\n          <div class=\"stzh-card__content-wrapper\">\n            <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n            {/* {this.tag && <div class=\"stzh-card__tag\">{this.tag}</div>} */}\n\n            <header\n              // ref={(el) => (this.headerElement = el as HTMLElement)}\n              class=\"stzh-card__header\"\n              onClick={this.headerClick}\n            >\n              <div class=\"stzh-card__header-top\">\n                <div\n                  // ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n                  class=\"stzh-card__header-left\"\n                >\n                  <div class=\"stzh-card__title-area\">\n                    {hasHeading && (\n                      <Heading class=\"stzh-card__title\">\n                        <a\n                          ref={el => (this.titleLinkElement = el as HTMLAnchorElement)}\n                          class=\"stzh-card__title-link\"\n                          href={this.href}\n                          target={this.target}\n                          onClick={this.href ? this.handleCardClick : null}\n                          aria-describedby={descriptionId}\n                        >\n                          <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n                            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                          </div>\n                        </a>\n                      </Heading>\n                    )}\n                    <span id={descriptionId} hidden>\n                      {this.localization?.clickTitle}\n                    </span>\n                    {this._subtitles.length > 0 && (\n                      <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n                        {this._subtitles.map(subtitle => (\n                          <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n                        ))}\n                      </Subtitle>\n                    )}\n                  </div>\n                </div>\n                <div\n                  // ref={(el) => (this.headerRightElement = el as HTMLElement)}\n                  class=\"stzh-card__header-right\"\n                >\n                  <div class=\"stzh-card__card-actions\">\n                    {/* {this._headerActions.map(action => (\n                      <stzh-button\n                        class={{\n                          \"stzh-card__card-action\": true,\n                          \"is-button\": true,\n                          \"show-medium\": !action.onlyCollapseText,\n                          \"hide-when-collapsed\": !action.onlyCollapseText,\n                          \"hide-text-when-collapsed\": action.onlyCollapseText\n                        }}\n                        icon={action.icon}\n                        badge={action.badge}\n                        badgeEmpty={action.badgeEmpty}\n                        badgeType={action.badgeType}\n                        variant=\"tertiary\"\n                        size=\"tiny\"\n                        badgePosition=\"icon\"\n                        onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n                      >\n                        <span\n                          class={{\n                            \"vshow-medium\": action.onlyCollapseText,\n                            \"vhide-when-collapsed\": action.onlyCollapseText\n                          }}\n                        >\n                          {action.label}\n                        </span>\n                      </stzh-button>\n                    ))} */}\n\n                    {this.starrable && (\n                      <stzh-tooltip>\n                        <stzh-button\n                          class=\"stzh-card__card-action is-star\"\n                          icon={this.starred ? \"star-filled\" : \"star\"}\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          iconOnly={true}\n                          onClick={this.starToggleClick}\n                        ></stzh-button>\n                        <div slot=\"content\">\n                          {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                        </div>\n                      </stzh-tooltip>\n                    )}\n\n                    {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n                    {/* {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) && */}\n                    {(this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (\n                      <stzh-popover\n                        label={this.localization.actionsPopoverLabel}\n                        placement=\"bottom-end\"\n                        class={{\n                          \"stzh-card__card-action-popover\": true,\n                          // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n                        }}\n                      >\n                        <stzh-button\n                          class=\"stzh-card__card-action is-further\"\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          icon=\"more-vertical\"\n                          iconOnly={true}\n                          badge={this.headerActionsBadge}\n                          badgeEmpty={headerActionsWithBadge.length > 0}\n                          badgePosition=\"icon\"\n                          badgeType={this.headerActionsBadgeType || headerActionsWithBadge[0]?.badgeType || \"default\"}\n                        ></stzh-button>\n                        <stzh-menu slot=\"content\">\n                          {/* {nonCollapsingTextHeaderActions.map(action => ( */}\n                          {this._headerActions.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: MouseEvent) => {\n                                this.actionClick(e, action);\n                              }}\n                            >\n                              {action.label}\n                            </stzh-menu-item>\n                          ))}\n\n                          {sortableActionsEnabled && (\n                            <Fragment>\n                              {!isFirstItemInSortable && (\n                                <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n                                  {this.localization.actionMoveUp}\n                                </stzh-menu-item>\n                              )}\n                              {!isLastItemInSortable && (\n                                <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n                                  {this.localization.actionMoveDown}\n                                </stzh-menu-item>\n                              )}\n                            </Fragment>\n                          )}\n\n                          {this.starrable && (\n                            <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n                              {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                            </stzh-menu-item>\n                          )}\n                        </stzh-menu>\n                      </stzh-popover>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"stzh-card__header-meta\">\n                <slot name=\"meta\"></slot>\n              </div>\n            </header>\n\n            <div class=\"stzh-card__content hide-when-collapsed\">\n              <slot name=\"content\"></slot>\n            </div>\n\n            <div class=\"stzh-card__footer hide-when-collapsed\">\n              {/* {(this.author || this.date) &&\n                <div class=\"stzh-card__footer-meta\">\n                  {this.author &&\n                    <div class=\"stzh-card__footer-author\">{this.author}</div>\n                  }\n                  {this.author && this.date &&\n                    <div class=\"stzh-card__footer-meta-separator\"></div>\n                  }\n                  {this.date &&\n                    <div class=\"stzh-card__footer-date\">\n                      {this.dateAdapter.format(new Date(this.date), \"dateInput\")}\n                    </div>\n                  }\n                </div>\n              } */}\n\n              <slot name=\"footer\">\n                {this._footerActions.length > 0 && (\n                  <stzh-actionset class=\"stzh-card__footer-actionset\" actions={this._footerActions}></stzh-actionset>\n                )}\n\n                {this.selectable && (\n                  <stzh-button\n                    class=\"stzh-card__footer-select-button\"\n                    fullwidth\n                    type=\"radio\"\n                    variant=\"secondary\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    label={this.localization.select}\n                    onStzhChange={this.handleSelectionChange}\n                  ></stzh-button>\n                )}\n              </slot>\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-c8b9cba7.js","mappings":"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","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/**\n * @prop --content-min-height: Min height of content\n */\n\n:host {\n  // --box-shadow: none;\n  --border-radius: 0px;\n\n  --content-min-height: 120px;\n\n  --dnd-visibility: hidden;\n  --dnd-opacity: 0;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-radius: var(--border-radius);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  &[collapsed]:not([collapsed=\"false\"]) {\n    --content-min-height: none;\n  }\n\n  &[checked]:not([checked=\"false\"]) {\n    outline: 3px solid $colorPrimary;\n  }\n\n  &.is-ghost::after,\n  .is-ghost &::after {\n    border-radius: var(--border-radius);\n  }\n\n  &[href]:hover,\n  &[href]:focus-within,\n  &.is-selected,\n  &.is-chosen,\n  .is-selected &,\n  .is-chosen & {\n    // --box-shadow: #{$boxShadowOverlay};\n  }\n\n  &.is-ghost,\n  .is-ghost & {\n    // --box-shadow: none;\n    overflow: hidden;\n  }\n\n  &.is-drag,\n  &.is-chosen,\n  &.is-ghost,\n  &.is-selected,\n  .is-drag &,\n  .is-chosen &,\n  .is-ghost &,\n  .is-selected &,\n  &[is-sortable]:hover {\n    --dnd-visibility: visible;\n    --dnd-opacity: 1;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  ::slotted(img[slot=\"image\"]) {\n    display: block;\n  }\n\n  ::slotted(table) {\n    border: 0;\n    border-spacing: 0;\n\n    th {\n      @include font;\n    }\n\n    td, th {\n      padding: 0;\n    }\n\n    td {\n      color: $colorBlack;\n      padding-left: space('xsmall');\n    }\n  }\n}\n\n.stzh-card {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: $colorGrey10;\n  border-radius: var(--border-radius);\n  // box-shadow: var(--box-shadow);\n  // transition: box-shadow $baseTransitionAnimationSpeed;\n\n  // .vshow-medium {\n  //   @include mq($to: medium) {\n  //     @include visuallyhidden;\n  //   }\n  // }\n\n  // .show-medium {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // .hide-medium {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n  \n  &--background-grey {\n    background-color: $colorGrey10;  \n  }\n\n  &--background-white {\n    background-color: $colorWhite;  \n  }\n  \n  &__content-wrapper {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--content-min-height);\n  }\n\n  &__dnd {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    // INFO: we don't use space() values here, because we want this element to align with the heading\n    left: 3px;\n    top: 23px;\n    display: flex;\n    visibility: var(--dnd-visibility);\n    opacity: var(--dnd-opacity);\n    transition: all $baseTransitionAnimationSpeed;\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n\n    @include mq($from: large) {\n      // INFO: we don't use space() values here, because we want this element to align with the heading\n      left: 4px;\n      top: 27px;\n    }\n  }\n\n  &__header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  &__header-meta {\n    &:not(:empty) {\n      display: inline-flex;\n      margin-top: space('xsmall');\n      gap: space('xsmall');\n    }\n  }\n\n  &__header-left,\n  &__header-right {\n    display: flex;\n  }\n\n  &__header-right {\n    @include spaceCurve('padding-left', 'tiny');\n  }\n\n  &__left {\n    align-self: center;\n  }\n\n  &__title-area {\n    @include wordWrap;\n    overflow: hidden;\n  }\n\n  &__title,\n  &__subtitle {\n    margin: 0;\n  }\n\n  &__title-link {\n    color: inherit;\n    text-decoration-line: none;\n  }\n\n  &__title {\n    @include font('title');\n    @include fontSize('milli');\n  }\n\n  &__image-link {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    text-decoration-line: none;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n    margin-left: -0.5625em;\n  }\n\n  &__subtitle-text {\n    position: relative;\n    display: inline-flex;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n    padding-left: 0.5625em;\n\n    &::after {\n      content: ',';\n      position: absolute;\n      left: 0;\n    }\n  }\n\n  &__content {\n    @include fontSize('milli');\n    flex-grow: 1;\n  }\n\n  // &__footer-meta {\n  //   @include fontSize('micro');\n  //   display: flex;\n  //   flex-wrap: wrap;\n  //   gap: space('xsmall');\n  //   color: $colorGrey80;\n  // }\n\n  // &__footer-meta-separator {\n  //   width: 1px;\n  //   background-color: currentColor;\n  //   flex-shrink: 0;\n  // }\n\n  &__card-actions {\n    display: inline-flex;\n    white-space: nowrap;\n  }\n\n  &__card-action {\n    @include mq($to: medium) {\n      --icon-text-margin: 0px;\n      --badge-icon-text-margin: 0px;\n    }\n\n    &[variant=\"tertiary\"] {\n      --color: #{$baseColor};\n    }\n\n    &.is-button {\n      --icon-size: #{iconSize('small')};\n    }\n\n    &.is-placeholder {\n      width: space('xxlarge');\n      height: space('xxlarge');\n    }\n\n    &.is-star {\n    }\n  }\n\n  &__card-action-popover {\n    --width: auto;\n  }\n\n  /* Service */\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__title {\n    @include fontCurve('h3', 'heading');\n  }\n\n  /* Has content */\n\n  &--has-content &__content {\n    @include spaceCurve('padding-bottom', 'large');\n    padding-top: space('xlarge');\n    padding-left: space('xlarge');\n    padding-right: space('medium');\n\n    @include mq($from: medium) {\n      @include spaceCurve('padding-bottom', 'medium');\n    }\n  }\n\n  &--has-content#{&}--service &__content {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  /* Has header */\n\n  &--has-header &__header {\n    padding-top: space('xlarge');\n    padding-left: space('xlarge');\n    padding-right: space('medium');\n  }\n\n  &--has-header#{&}--has-content &__content {\n    padding-top: space('xsmall');\n  }\n\n  &--has-header#{&}--service &__header {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-header#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has footer */\n\n  &--has-footer &__footer {\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('xlarge');\n    padding-right: space('medium');\n  }\n\n  &--has-footer#{&}--has-content &__content {\n    padding-bottom: space('medium');\n  }\n\n  &--has-footer#{&}--service &__footer {\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-footer#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag#{&}--has-header &__header {\n    padding-top: space('xxxlarge');\n  }\n\n  /* Has Link */\n\n  &--has-link &__title-link,\n  &--has-link &__content {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &--has-link &__title-link {\n    color: $colorPrimary;\n    text-decoration-line: none;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    // &::before {\n    //   transition: all $baseTransitionAnimationSpeed;\n    // }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &--has-link &__card-actions,\n  &--has-link &__header-meta,\n  &--has-link &__footer-actionset,\n  &--has-link &__footer-select-button {\n    position: relative;\n    z-index: 2;\n  }\n\n  &--has-link:has(#{&}__image-link:hover) &__title-link,\n  &--has-link:has(#{&}__image-link:hover) &__content,\n  &--has-link:has(#{&}__title-link:hover) &__title-link,\n  &--has-link:has(#{&}__title-link:hover) &__content {\n    color: $colorSecondary60;\n\n    //   &::before,\n    //   &::before {\n    //     background-color: $colorPrimary20;\n    //   }\n  }\n\n  // &__footer-arrow {\n  //   color: $colorPrimary;\n  // }\n\n  // &--has-link:hover &__footer-arrow {\n  //   color: $colorSecondary60;\n  // }\n\n  /* Interactive Subtitle */\n\n  &--has-subtitle-interactive &__subtitle {\n    cursor: pointer;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Is collapsible */\n\n  &--is-collapsible &__header {\n    cursor: pointer;\n  }\n\n  /* Collapsed (Header) */\n\n  &--is-collapsed,\n  &--has-collapsed-header &__header {\n    // .vhide-when-collapsed {\n    //   @include visuallyhidden;\n    // }\n\n    .hide-when-collapsed {\n      display: none;\n    }\n\n    // .show-when-collapsed {\n    //   display: block;\n    // }\n  }\n\n  &--is-collapsed &__header {\n    // border-bottom: none;\n    padding-bottom: space('xlarge');\n  }\n\n  &--is-collapsed#{&}--service &__header {\n    // border-bottom: none;\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--is-collapsed &__card-action,\n  &--has-collapsed-header &__card-action {\n    --icon-text-margin: 0px;\n    --badge-icon-text-margin: 0px;\n  }\n\n  /* Starred */\n\n  &--is-starred &__card-action.is-star {\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading,\n  &--hyphens &__title {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, Event, EventEmitter, forceUpdate, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhButtonChangeEvent,\n  StzhCardClickEvent,\n  StzhCardCollapseEvent,\n  StzhCardHeaderAction,\n  StzhCardHeaderActionClickEvent,\n  StzhCardStarClickEvent,\n  StzhCardSubtitleClickEvent,\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n// import { media } from '../../utils/media-utils';\nimport { StzhCardLocalizedText } from \"./stzh-card.localization\";\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions` and `selectable` button are not shown anymore)\n */\n@Component({\n  tag: \"stzh-card\",\n  styleUrl: \"stzh-card.scss\",\n  scoped: true,\n})\nexport class StzhCard {\n  /** Translation strings */\n  @Prop() localization: StzhCardLocalizedText;\n\n  /** Whether background should be grey (default) or white */\n  @Prop({ reflect: true }) backgroundColor: \"grey\" | \"white\" = \"grey\";\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"service\" = \"default\";\n\n  /** Whether card is collapsed or not */\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n  /** Whether card was starred */\n  @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n  /**\n   * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n   */\n  @Prop({ reflect: true }) starrable: boolean = false;\n\n  /** Whether card is selectable */\n  @Prop({ reflect: true }) selectable: boolean = false;\n\n  /** Whether card is checked (if card is selectable) */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if card is selectable) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** The value of the input element (if card is selectable) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Whether the element is disabled or not (if card is selectable) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Heading (or use heading slot instead) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Subtitle */\n  @Prop() subtitle: string | string[] = \"\";\n  private _subtitles = [];\n\n  /** Author name */\n  // @Prop() author: string;\n\n  /** Date to display */\n  // @Prop() date: Date | string;\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  /** Tag name */\n  // @Prop() tag: string;\n\n  /** Card header actions */\n  @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n  private _headerActions: StzhCardHeaderAction[];\n\n  /**\n   * Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n   */\n  @Prop() headerActionsBadge: string;\n\n  /**\n   * If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n   * By default, it takes the badge type from the first one. With this property you can overwrite it.\n   */\n  @Prop() headerActionsBadgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n  /**\n   * Card footer actions.\n   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n   * You can listen to clicks with the `stzhActionClick` event.\n   */\n  @Prop() footerActions: string | StzhActionsetItem[] = [];\n  private _footerActions: StzhActionsetItem[];\n\n  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n  @Prop() subtitleInteractive: boolean = false;\n\n  /**\n   * Whether sorting should be disabled.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n  /** Whether card is collapsible */\n  @Prop({ reflect: true }) collapsible: boolean = false;\n\n  /**\n   * Whether movement menu items should be shown.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop() hideMovementActions: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhCardElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n  /** Collapse event */\n  @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n  /** Subtitle click event */\n  @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n  /** Star click event */\n  @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n  /** Header action click event */\n  @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n  @Watch(\"subtitle\")\n  subtitleWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      if (newValue === \"\") {\n        this._subtitles = [];\n      } else {\n        try {\n          this._subtitles = JSON.parse(newValue);\n        } catch (err) {\n          this._subtitles = [newValue];\n        }\n      }\n    } else {\n      this._subtitles = newValue;\n    }\n  }\n\n  @Watch(\"headerActions\")\n  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._headerActions = JSON.parse(newValue);\n    } else {\n      this._headerActions = newValue;\n    }\n  }\n\n  @Watch(\"footerActions\")\n  footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._footerActions = JSON.parse(newValue);\n    } else {\n      this._footerActions = newValue;\n    }\n  }\n\n  // @Watch(\"collapsed\")\n  // collapsedWatcher() {\n  //   this.handleResize();\n  // }\n\n  private observer: MutationObserver;\n\n  private nodeChange = entries => {\n    let changeInSlot = false;\n\n    entries.forEach(entry => {\n      if (entry.target.closest(\"[slot]\") || entry.target.hasAttribute(\"slot\")) {\n        changeInSlot = true;\n      }\n    });\n\n    if (changeInSlot) {\n      forceUpdate(this.element);\n    }\n  };\n\n  // private mainElement: HTMLElement;\n  // private headerElement: HTMLElement;\n  // private headerLeftElement: HTMLElement;\n  // private headerRightElement: HTMLElement;\n  private imageLinkElement: HTMLAnchorElement;\n  private titleLinkElement: HTMLAnchorElement;\n  private headingTextElement: HTMLDivElement;\n  private sortable: HTMLStzhSortableElement;\n\n  // private debounceResize: number;\n  // private resizeObserver: ResizeObserver;\n\n  // private update = () => {\n  //   if (!this.mainElement) {\n  //     return;\n  //   }\n\n  //   this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n  //   if (media('medium').matches) {\n  //     const headerWidth = this.headerElement.clientWidth;\n  //     const leftWidth = this.headerLeftElement.clientWidth;\n  //     const rightWidth = this.headerRightElement.clientWidth;\n\n  //     if (headerWidth - leftWidth <= rightWidth) {\n  //       this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n  //     }\n  //   }\n  // }\n\n  private headerClick = (event: MouseEvent) => {\n    if (!this.collapsible) {\n      return;\n    }\n\n    const filterTags = [\n      \"stzh-popover\",\n      \"stzh-tooltip\",\n      \"button\",\n      \"a\",\n      \"input\",\n      \"select\",\n      \"textarea\",\n      \"iframe\",\n      \"details\",\n      \"label\",\n      \"area\",\n    ];\n    const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n    const found = composedPathTags.some(r => filterTags.includes(r));\n\n    if (!found) {\n      this.collapsed = !this.collapsed;\n\n      this.stzhCollapse.emit({\n        component: \"stzh-card\",\n        collapsed: this.collapsed,\n      });\n    }\n  };\n\n  private subtitleClick = (event: MouseEvent) => {\n    if (this.subtitleInteractive) {\n      this.stzhSubtitleClick.emit({\n        component: \"stzh-card\",\n        originalEvent: event,\n      });\n    }\n  };\n\n  private starToggleClick = (event: MouseEvent) => {\n    this.stzhStarClick.emit({\n      component: \"stzh-card\",\n      starred: this.starred,\n      originalEvent: event,\n    });\n  };\n\n  private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n    this.stzhHeaderActionClick.emit({\n      component: \"stzh-card\",\n      action,\n      originalEvent: event,\n    });\n  };\n\n  private arrowUpClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"up\");\n    }\n  };\n\n  private arrowDownClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"down\");\n    }\n  };\n\n  private updateElementInsideSortable = () => {\n    const currentSortable = this.element.closest(\"stzh-sortable\");\n\n    // check if element is still inside sortable\n    if (!currentSortable) {\n      this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable);\n      return;\n    }\n\n    if (this.element) {\n      forceUpdate(this.element);\n    }\n  };\n\n  private init = () => {\n    const chips = this.element.querySelectorAll('stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip');\n\n    const texts = this.element.querySelectorAll('stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text');\n\n    chips.forEach(chip => {\n      setPropsIfNull(chip, {\n        size: \"small\",\n      } as HTMLStzhChipElement);\n    });\n\n    texts.forEach(text => {\n      setPropsIfNull(text, {\n        size: \"inherit\",\n      } as HTMLStzhTextElement);\n    });\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 handleMutation = entries => {\n    this.init();\n    this.nodeChange(entries);\n  };\n\n  private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n    this.checked = event.detail.checked;\n  };\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  private findSortableChildElement(): HTMLElement | undefined {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      let element: HTMLElement = this.element;\n      let sortableContainer = null;\n\n      if (typeof sortable.container === \"function\") {\n        sortableContainer = sortable.container();\n      } else {\n        sortableContainer = sortable.container;\n      }\n\n      while (element.parentElement && element.parentElement !== sortableContainer) {\n        element = element.parentElement;\n      }\n\n      return element;\n    }\n  }\n\n  async componentWillLoad() {\n    this.subtitleWatcher(this.subtitle);\n    this.headerActionsWatcher(this.headerActions);\n    this.footerActionsWatcher(this.footerActions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n    }\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  componentDidLoad() {\n    this.sortable = this.element.closest(\"stzh-sortable\");\n\n    if (this.sortable) {\n      this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable);\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.handleMutation);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n\n    // this.resizeObserver = new ResizeObserver(this.handleResize);\n    // this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    // if (this.resizeObserver) {\n    //   this.resizeObserver.disconnect();\n    // }\n  }\n\n  render() {\n    const imageUsed: boolean = hasSlot(this.element, \"image\");\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n    const footerUsed: boolean = hasSlot(this.element, \"footer\");\n    const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n    const Heading = `h${this.headingLevel}`;\n    const Subtitle = `${this.subtitleInteractive ? \"button\" : \"span\"}`;\n\n    const sortableChildElement = this.findSortableChildElement();\n\n    const isFirstItemInSortable =\n      sortableChildElement?.parentElement &&\n      Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) === 0;\n\n    const isLastItemInSortable =\n      sortableChildElement?.parentElement &&\n      Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) ===\n        sortableChildElement?.parentElement?.children.length - 1;\n\n    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n    // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n    // const headerActions = [\n    //   ...this._headerActions\n    // ];\n\n    const hasHeading = !!this.heading || headingUsed;\n\n    const hasHeader =\n      hasHeading ||\n      this._subtitles.length > 0 ||\n      this._headerActions.length > 0 ||\n      // || nonCollapsingTextHeaderActions.length > 0\n      this.starrable ||\n      sortableActionsEnabled;\n\n    const hasFooter = footerUsed || this._footerActions.length > 0 || this.selectable;\n    // || !!this.author\n    // || !!this.date;\n\n    const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\n\n    const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;\n    const descriptionId = `stzh-card${uniqueId}`;\n\n    const classes = {\n      \"stzh-card\": true,\n      \"stzh-card--background-grey\": this.backgroundColor === \"grey\",\n      \"stzh-card--background-white\": this.backgroundColor === \"white\",\n      \"stzh-card--has-link\": !!this.href,\n      \"stzh-card--has-image\": imageUsed,\n      \"stzh-card--has-content\": contentUsed,\n      \"stzh-card--has-subtitle\": !!this.subtitle,\n      \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n      \"stzh-card--has-header\": hasHeader,\n      \"stzh-card--has-footer\": hasFooter,\n      // \"stzh-card--has-tag\": !!this.tag,\n      \"stzh-card--is-collapsible\": this.collapsible,\n      \"stzh-card--is-collapsed\": this.collapsed,\n      \"stzh-card--is-starred\": this.starred,\n      \"stzh-card--is-checked\": this.checked,\n      \"stzh-card--is-sortable\": sortableEnabled,\n      [`stzh-card--${this.variant}`]: !!this.variant,\n      \"stzh-card--hyphens\": this.hyphensEnabled,\n    };\n\n    return (\n      <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n        <article\n          // ref={(el) => (this.mainElement = el as HTMLElement)}\n          class={classes}\n        >\n          <a\n            ref={el => (this.imageLinkElement = el as HTMLAnchorElement)}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class=\"stzh-card__image-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.href ? this.handleCardClick : null}\n          >\n            <slot name=\"image\"></slot>\n          </a>\n          <div class=\"stzh-card__content-wrapper\">\n            <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n            {/* {this.tag && <div class=\"stzh-card__tag\">{this.tag}</div>} */}\n\n            <header\n              // ref={(el) => (this.headerElement = el as HTMLElement)}\n              class=\"stzh-card__header\"\n              onClick={this.headerClick}\n            >\n              <div class=\"stzh-card__header-top\">\n                <div\n                  // ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n                  class=\"stzh-card__header-left\"\n                >\n                  <div class=\"stzh-card__title-area\">\n                    {hasHeading && (\n                      <Heading class=\"stzh-card__title\">\n                        <a\n                          ref={el => (this.titleLinkElement = el as HTMLAnchorElement)}\n                          class=\"stzh-card__title-link\"\n                          href={this.href}\n                          target={this.target}\n                          onClick={this.href ? this.handleCardClick : null}\n                          aria-describedby={descriptionId}\n                        >\n                          <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n                            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                          </div>\n                        </a>\n                      </Heading>\n                    )}\n                    <span id={descriptionId} hidden>\n                      {this.localization?.clickTitle}\n                    </span>\n                    {this._subtitles.length > 0 && (\n                      <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n                        {this._subtitles.map(subtitle => (\n                          <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n                        ))}\n                      </Subtitle>\n                    )}\n                  </div>\n                </div>\n                <div\n                  // ref={(el) => (this.headerRightElement = el as HTMLElement)}\n                  class=\"stzh-card__header-right\"\n                >\n                  <div class=\"stzh-card__card-actions\">\n                    {/* {this._headerActions.map(action => (\n                      <stzh-button\n                        class={{\n                          \"stzh-card__card-action\": true,\n                          \"is-button\": true,\n                          \"show-medium\": !action.onlyCollapseText,\n                          \"hide-when-collapsed\": !action.onlyCollapseText,\n                          \"hide-text-when-collapsed\": action.onlyCollapseText\n                        }}\n                        icon={action.icon}\n                        badge={action.badge}\n                        badgeEmpty={action.badgeEmpty}\n                        badgeType={action.badgeType}\n                        variant=\"tertiary\"\n                        size=\"tiny\"\n                        badgePosition=\"icon\"\n                        onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n                      >\n                        <span\n                          class={{\n                            \"vshow-medium\": action.onlyCollapseText,\n                            \"vhide-when-collapsed\": action.onlyCollapseText\n                          }}\n                        >\n                          {action.label}\n                        </span>\n                      </stzh-button>\n                    ))} */}\n\n                    {this.starrable && (\n                      <stzh-tooltip>\n                        <stzh-button\n                          class=\"stzh-card__card-action is-star\"\n                          icon={this.starred ? \"star-filled\" : \"star\"}\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          iconOnly={true}\n                          onClick={this.starToggleClick}\n                        ></stzh-button>\n                        <div slot=\"content\">\n                          {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                        </div>\n                      </stzh-tooltip>\n                    )}\n\n                    {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n                    {/* {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) && */}\n                    {(this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (\n                      <stzh-popover\n                        label={this.localization.actionsPopoverLabel}\n                        placement=\"bottom-end\"\n                        class={{\n                          \"stzh-card__card-action-popover\": true,\n                          // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n                        }}\n                      >\n                        <stzh-button\n                          class=\"stzh-card__card-action is-further\"\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          icon=\"more-vertical\"\n                          iconOnly={true}\n                          badge={this.headerActionsBadge}\n                          badgeEmpty={headerActionsWithBadge.length > 0}\n                          badgePosition=\"icon\"\n                          badgeType={this.headerActionsBadgeType || headerActionsWithBadge[0]?.badgeType || \"default\"}\n                        ></stzh-button>\n                        <stzh-menu slot=\"content\">\n                          {/* {nonCollapsingTextHeaderActions.map(action => ( */}\n                          {this._headerActions.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: MouseEvent) => {\n                                this.actionClick(e, action);\n                              }}\n                            >\n                              {action.label}\n                            </stzh-menu-item>\n                          ))}\n\n                          {sortableActionsEnabled && (\n                            <Fragment>\n                              {!isFirstItemInSortable && (\n                                <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n                                  {this.localization.actionMoveUp}\n                                </stzh-menu-item>\n                              )}\n                              {!isLastItemInSortable && (\n                                <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n                                  {this.localization.actionMoveDown}\n                                </stzh-menu-item>\n                              )}\n                            </Fragment>\n                          )}\n\n                          {this.starrable && (\n                            <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n                              {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                            </stzh-menu-item>\n                          )}\n                        </stzh-menu>\n                      </stzh-popover>\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"stzh-card__header-meta\">\n                <slot name=\"meta\"></slot>\n              </div>\n            </header>\n\n            <div class=\"stzh-card__content hide-when-collapsed\">\n              <slot name=\"content\"></slot>\n            </div>\n\n            <div class=\"stzh-card__footer hide-when-collapsed\">\n              {/* {(this.author || this.date) &&\n                <div class=\"stzh-card__footer-meta\">\n                  {this.author &&\n                    <div class=\"stzh-card__footer-author\">{this.author}</div>\n                  }\n                  {this.author && this.date &&\n                    <div class=\"stzh-card__footer-meta-separator\"></div>\n                  }\n                  {this.date &&\n                    <div class=\"stzh-card__footer-date\">\n                      {this.dateAdapter.format(new Date(this.date), \"dateInput\")}\n                    </div>\n                  }\n                </div>\n              } */}\n\n              <slot name=\"footer\">\n                {this._footerActions.length > 0 && (\n                  <stzh-actionset class=\"stzh-card__footer-actionset\" actions={this._footerActions}></stzh-actionset>\n                )}\n\n                {this.selectable && (\n                  <stzh-button\n                    class=\"stzh-card__footer-select-button\"\n                    fullwidth\n                    type=\"radio\"\n                    variant=\"secondary\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    label={this.localization.select}\n                    onStzhChange={this.handleSelectionChange}\n                  ></stzh-button>\n                )}\n              </slot>\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-f39503f3.js → p-cbee9daa.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { h as hasSlot } from './p-d1f98854.js';
+import { h as hasSlot } from './p-1c261255.js';
 import { d as defineCustomElement$2 } from './p-486f6cb3.js';
 import { d as defineCustomElement$1 } from './p-0300f421.js';
 
@@ -133,4 +133,4 @@ function defineCustomElement() {
 
 export { StzhMenuItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-f39503f3.js.map
+//# sourceMappingURL=p-cbee9daa.js.map

package/dist/components/{p-f39503f3.js.map → p-cbee9daa.js.map}

@@ -1 +1 @@
-{"file":"p-f39503f3.js","mappings":"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","names":[],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n  --padding-top: #{space('xsmall')};\n  --padding-bottom: #{space('xsmall')};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n\n  --hover-color: #{$colorBlack};\n  --hover-background-color: #{$colorGrey20};\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space('xlarge')};\n    --padding-right: #{space('xlarge')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  gap: space('small');\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\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  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space('xsmall');\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize('milli');\n    gap: space('medium');\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button 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  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: 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  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.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-menu-item\",\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-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-cbee9daa.js","mappings":"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","names":[],"sources":["src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":["/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: var(--stzh-menu-item-height);\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n  --padding-top: #{space('xsmall')};\n  --padding-bottom: #{space('xsmall')};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n\n  --hover-color: #{$colorBlack};\n  --hover-background-color: #{$colorGrey20};\n\n  &[size=\"large\"] {\n    --icon-size: #{iconSize()};\n    --height: var(--stzh-menu-large-item-height);\n    --padding-left: #{space('xlarge')};\n    --padding-right: #{space('xlarge')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary70};\n\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorSecondary30};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary70};\n    --hover-color: #{$colorPrimary70};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey70};\n    --background-color: #{$colorGrey10};\n\n    --hover-color: #{$colorGrey70};\n    --hover-background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  gap: space('small');\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\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  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__text-wrapper {\n    display: flex;\n    gap: space('xsmall');\n  }\n\n  &__counter {\n    @include font;\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Large variant */\n\n  &--size-large {\n    @include fontSize('milli');\n    gap: space('medium');\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent,\n  StzhMenuItemClickEvent,\n  StzhBadgeType,\n  StzhMenuSize,\n  StzhMenuVariant,\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true,\n})\nexport class StzhMenuItem {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n  /** Counter */\n  @Prop() counter: number;\n\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button 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  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: 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  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.menuItem.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-menu-item\",\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-menu-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-menu-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed && (\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ? (\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n            ) : (\n              <slot name=\"icon\"></slot>\n            )}\n            {(this.badge || this.badgeEmpty) && (\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            )}\n          </div>\n        )}\n        <div class=\"stzh-menu-item__text-wrapper\">\n          <div ref={el => (this.text = el as HTMLDivElement)} class=\"stzh-menu-item__text\">\n            {this.label ? this.label : <slot></slot>}\n          </div>\n          {this.counter !== undefined && this.counter > 0 && (\n            <div class=\"stzh-menu-item__counter\">({this.counter})</div>\n          )}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active,\n      [`stzh-menu-item--size-${this.size}`]: !!this.size,\n      [`stzh-menu-item--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ? (\n          <a\n            ref={el => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        ) : (\n          <button\n            ref={el => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-05e1fb77.js → p-ccbd3cdf.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { c as computePosition, o as offset, f as flip, s as shift, a as arrow, b as autoUpdate, A as Arrow } from './p-995d3227.js';
 import { c as createFocusTrap } from './p-f48422c4.js';
-import { i as isStzhElement } from './p-d1f98854.js';
+import { i as isStzhElement } from './p-1c261255.js';
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo } from './p-2c0bec3e.js';
 import { d as defineCustomElement$2 } from './p-0300f421.js';
-import { d as defineCustomElement$1 } from './p-71668a26.js';
+import { d as defineCustomElement$1 } from './p-839b43f8.js';
 
 const stzhTooltipCss = ".sc-stzh-tooltip-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-tooltip-h,[stzh-hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::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-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-tooltip-color, var(--stzh-color-white));--background-color:var(--stzh-tooltip-background-color, var(--stzh-color-coolgrey60));--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-tooltip-link-color, var(--stzh-color-white));--hover-link-color:var(--stzh-tooltip-hover-link-color, var(--stzh-color-white70op))}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}[type=button].sc-stzh-tooltip-h{--color:var(--stzh-color-midnightblue70);--background-color:var(--stzh-color-coolgrey10);--link-color:var(--stzh-color-midnightblue70);--hover-link-color:var(--stzh-color-midnightblue80)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 const StzhTooltipStyle0 = stzhTooltipCss;
@@ -394,4 +394,4 @@ function defineCustomElement() {
 
 export { StzhTooltip as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-05e1fb77.js.map
+//# sourceMappingURL=p-ccbd3cdf.js.map

package/dist/components/{p-05e1fb77.js.map → p-ccbd3cdf.js.map}

@@ -1 +1 @@
-{"file":"p-05e1fb77.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n * @prop --stzh-tooltip-color: **Global**: Color of tooltip text\n * @prop --stzh-tooltip-background-color: **Global**: Background color of tooltip\n * @prop --stzh-tooltip-link-color: **Global**: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: **Global**: Hover color for link within tooltip\n */\n\n:host {\n  display: contents;\n\n  --color: var(--stzh-tooltip-color, #{$colorWhite});\n  --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n  --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\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  /** Hide tooltip content */\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  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      middleware: [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  };\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  private initializedTooltip = false\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedTooltip) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.initializedTooltip = true\n    }\n\n    if (this.initializedTooltip) {\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.contentElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.contentElement.hidden = !this.open;\n    if (this.open && this.trap) {\n      this.trap.activate();\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    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-ccbd3cdf.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n * @prop --stzh-tooltip-color: **Global**: Color of tooltip text\n * @prop --stzh-tooltip-background-color: **Global**: Background color of tooltip\n * @prop --stzh-tooltip-link-color: **Global**: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: **Global**: Hover color for link within tooltip\n */\n\n:host {\n  display: contents;\n\n  --color: var(--stzh-tooltip-color, #{$colorWhite});\n  --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n  --width: #{$tooltipWidth};\n  --min-width: #{$tooltipMinWidth};\n  --max-width: #{$tooltipMaxWidth};\n  --padding: #{$tooltipPadding};\n  --border-radius: #{$tooltipBorderRadius};\n  --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n  --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n  &[size=\"small\"] {\n    --padding: #{$tooltipSmallPadding};\n  }\n\n  &[type=\"button\"] {\n    --color: #{$colorMidnightblue70};\n    --background-color: #{$colorCoolgrey10};\n    --link-color: #{$colorMidnightblue70};\n    --hover-link-color: #{$colorMidnightblue80};\n  }\n}\n\n.stzh-tooltip {\n  @include tooltip-arrow;\n  display: contents;\n\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    @include tooltip-fontsize;\n    @include tooltip-dropshadow;\n    position: absolute;\n    z-index: $zIndexPopover;\n    border-radius: var(--border-radius);\n    background-color: var(--background-color);\n    color: var(--color);\n    width: var(--width);\n    min-width: var(--min-width);\n    max-width: var(--max-width);\n    display: flex;\n    flex-direction: row-reverse;\n\n    --stzh-base-color: var(--color);\n    --stzh-link-color: var(--link-color);\n    --stzh-link-hover-color: var(--hover-link-color);\n  }\n\n  &__content-slot {\n    padding: var(--padding);\n  }\n\n  &__close {\n    @include tooltip__close;\n  }\n\n  &__icon {\n    @include tooltip__icon;\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhTooltipClosedEvent,\n  StzhTooltipCloseEvent,\n  StzhTooltipOpenedEvent,\n  StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n  options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\n  options: { duration: 200, easing: \"linear\" },\n};\n\nconst keyCode = {\n  ESC: 27,\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n  tag: \"stzh-tooltip\",\n  styleUrl: \"stzh-tooltip.scss\",\n  scoped: true,\n})\nexport class StzhTooltip {\n  /** Whether tooltip should be open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Label of tooltip (used for screenreaders) */\n  @Prop() label: string = \"\";\n\n  /** Content of tooltip (use instead of content slot) */\n  @Prop() content: string = \"\";\n\n  /** Default placement of tooltip relative to trigger element */\n  @Prop() placement: Placement = \"bottom\";\n\n  /** Position strategy */\n  @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n  /** Visual type */\n  @Prop({ reflect: true }) type: \"overlay\" | \"button\" = \"overlay\";\n\n  /** Shifting of tooltip content */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Shifting of tooltip content */\n  @Prop() skidding: number = 0;\n\n  /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n  @Prop() distance: number = 12;\n\n  /** Whether tooltip is interactive */\n  @Prop() interactive: boolean = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = \"hover focus\";\n  private _trigger: string[];\n\n  /** Translation strings */\n  @Prop() localization: StzhTooltipLocalizedText;\n\n  @Element() element: HTMLStzhTooltipElement;\n\n  /** Tooltip open event */\n  @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n  /** Tooltip opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n  /** Tooltip close event */\n  @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n  /** Tooltip closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n  /** Show tooltip content */\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  /** Hide tooltip content */\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  /** Toggle tooltip content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  @Method()\n  async update() {\n    return await this.computePosition();\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.contentElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n\n      // safari seems to need will-change,\n      // otherwise it has problems animating the element with the drop shadow\n      this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n      this.contentElement.hidden = false;\n\n      await animateTo(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n\n      await stopAnimations(this.contentElement);\n      await animateTo(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\n\n      this.contentElement.hidden = true;\n      this.contentElement.style.willChange = \"auto\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-tooltip\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  @Watch(\"trigger\")\n  triggerWatcher(newValue: string) {\n    this._trigger = newValue.split(\" \");\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.open) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n    const isClickTrigger =\n      event.target === this.triggerElement || this.triggerElement.contains(event.target as HTMLElement);\n\n    if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n      this.hide();\n    }\n  }\n\n  @State() computedPlacement: Placement;\n\n  private observer: MutationObserver;\n\n  private toggledByMethod: boolean = false;\n  private middlewareData: MiddlewareData;\n  private triggerElement: HTMLElement;\n  private triggerFirstElement: HTMLElement;\n  private contentElement: HTMLElement;\n  private arrowElement: HTMLElement;\n  private autoUpdateCleanup: Function;\n  private id: string;\n  private trap: FocusTrap;\n  private isHovering: boolean = false;\n\n  private hasTrigger(trigger: string) {\n    return this._trigger.indexOf(trigger) > -1;\n  }\n\n  private onEscKey = (event: KeyboardEvent) => {\n    if (event.keyCode === keyCode.ESC) {\n      this.hide();\n    }\n  };\n\n  private computePosition = async () => {\n    if (!this.open) {\n      return;\n    }\n\n    const {\n      x = 0,\n      y = 0,\n      strategy = \"absolute\",\n      placement,\n      middlewareData,\n    } = await computePosition(this.triggerFirstElement, this.contentElement, {\n      strategy: this.strategy,\n      placement: this.placement,\n      middleware: [\n        offset({\n          mainAxis: this.distance,\n          crossAxis: this.skidding,\n        }),\n        flip({\n          padding: 5,\n        }),\n        shift({\n          padding: 5,\n        }),\n        arrow({\n          element: this.arrowElement,\n          padding: 5,\n        }),\n      ],\n    });\n\n    this.middlewareData = middlewareData;\n    this.computedPlacement = placement;\n\n    Object.assign(this.contentElement.style, {\n      position: strategy,\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    Object.assign(this.arrowElement.style, {\n      left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n      top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n    });\n  };\n\n  private onClickTrigger = () => {\n    if (this.hasTrigger(\"click\")) {\n      this.toggle();\n    }\n  };\n\n  private onMouseEnterTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = true;\n      this.show();\n    }\n  };\n\n  private onMouseLeaveTrigger = () => {\n    if (this.hasTrigger(\"hover\")) {\n      this.isHovering = false;\n      document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n    }\n  };\n\n  private onFocusTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.show();\n    }\n  };\n\n  private onBlurTrigger = () => {\n    if (this.hasTrigger(\"focus\")) {\n      this.hide();\n    }\n  };\n\n  private onMouseMoveDocument = (event: MouseEvent) => {\n    const { clientX, clientY } = event;\n\n    if (!this.computedPlacement) {\n      return true;\n    }\n\n    const basePlacement = this.computedPlacement.split(\"-\")[0];\n    const offsetData = this.middlewareData.offset;\n    const popperRect = this.contentElement.getBoundingClientRect();\n\n    if (!offsetData) {\n      return true;\n    }\n\n    const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n    const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n    const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n    const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n    const exceedsTop = popperRect.top - clientY > topDistance;\n    const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n    const exceedsLeft = popperRect.left - clientX > leftDistance;\n    const exceedsRight = clientX - popperRect.right > rightDistance;\n\n    if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n      document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n      if (!this.isHovering) {\n        this.hide();\n      }\n    }\n  };\n\n  private init = () => {\n    let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      this.triggerFirstElement = trigger;\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n      trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n      trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  };\n\n  async componentWillLoad() {\n    this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n    this.triggerWatcher(this.trigger);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n    }\n  }\n\n  componentDidRender() {\n    const isStzh = isStzhElement(this.triggerFirstElement);\n\n    if (this.hasTrigger(\"click\")) {\n      this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(\n          isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n          `${this.id}-trigger-description`\n        );\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n      }\n\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n      }\n    } else {\n      if (\n        (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) ||\n        (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n      ) {\n        this.triggerFirstElement.setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n      }\n    }\n\n    if (this.trap) {\n      this.open ? this.trap.activate() : this.trap.deactivate();\n    }\n  }\n\n  private initializedTooltip = false\n\n  componentDidUpdate() {\n    if (this.open && !this.initializedTooltip) {\n      this.initializeAutoUpdate();\n      this.initializeFocusTrap();\n      this.initializedTooltip = true\n    }\n\n    if (this.initializedTooltip) {\n      this.computePosition();\n      if (this.trap) {\n        this.trap.updateContainerElements(this.contentElement);\n      }\n    }\n  }\n\n  initializeAutoUpdate() {\n    this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n  }\n\n  initializeFocusTrap() {\n    if (this.interactive) {\n      this.trap = createFocusTrap(this.contentElement, {\n        fallbackFocus: this.contentElement,\n        clickOutsideDeactivates: true,\n        returnFocusOnDeactivate: true,\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.contentElement.hidden = !this.open;\n    if (this.open && this.trap) {\n      this.trap.activate();\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    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (this.triggerFirstElement) {\n      this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n      this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n      this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tooltip\": true,\n      [`stzh-tooltip--type-${this.type}`]: true,\n      [`stzh-tooltip--open`]: this.open,\n      [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\n            <slot></slot>\n          </div>\n          {this.hasTrigger(\"click\") && (\n            <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n              {this.localization.open}\n            </div>\n          )}\n          <div\n            class=\"stzh-tooltip__content\"\n            id={`${this.id}-content`}\n            ref={el => (this.contentElement = el as HTMLDivElement)}\n            tabindex=\"-1\"\n            aria-labelledby={this.label ? `${this.id}-label` : null}\n            aria-hidden={this.open ? \"false\" : \"true\"}\n            onKeyDown={this.onEscKey}\n            onMouseEnter={this.onMouseEnterTrigger}\n            onMouseLeave={this.onMouseLeaveTrigger}\n            onFocusin={this.onFocusTrigger}\n            onFocusout={this.onBlurTrigger}\n          >\n            <div\n              class=\"stzh-tooltip__arrow\"\n              ref={el => (this.arrowElement = el as HTMLDivElement)}\n              innerHTML={Arrow}\n            ></div>\n            {this.label && (\n              <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n                {this.label}\n              </h2>\n            )}\n            {this.hasTrigger(\"click\") && (\n              <button class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\n                <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n                <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n              </button>\n            )}\n            <stzh-text\n              curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n              {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n              class=\"stzh-tooltip__content-slot\"\n            >\n              {this.content ? this.content : <slot name=\"content\"></slot>}\n            </stzh-text>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-d5254d48.js → p-d1badd5b.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { a as addWordBreakToLinks, h as hasSlot } from './p-d1f98854.js';
+import { a as addWordBreakToLinks, h as hasSlot } from './p-1c261255.js';
 import { d as defineCustomElement$2 } from './p-486f6cb3.js';
 import { d as defineCustomElement$1 } from './p-0300f421.js';
 
@@ -209,4 +209,4 @@ function defineCustomElement() {
 
 export { StzhLink as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-d5254d48.js.map
+//# sourceMappingURL=p-d1badd5b.js.map