@oiz/stzh-components 3.8.0-beta1 → 3.8.0-beta2

package/dist/stzh-components/p-5bafa548.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAccordionCss","StzhAccordion","variantWatcher","newValue","this","stzhVariantChange","emit","component","value","openListener","event","accordionItemOpened","target","accordionOpened","closest","multiselectable","detail","element","items","Array","from","querySelectorAll","forEach","item","hide","setItemFocus","accordionItem","action","accordion","filter","disabled","currentIndex","indexOf","length","focus","checkIfNested","parentElement","tagName","toLowerCase","isNested","componentDidLoad","render","classes","h","Host","class","heading","level","stzhAccordionItemCss","ANIMATION_SHOW","keyframes","height","opacity","options","duration","easing","ANIMATION_HIDE","accordionItemCounter","StzhAccordionItem","toggledByMethod","focusedByInput","shiftPressed","handleVariantChange","_event","variant","handleHeaderClick","collapsible","toggle","open","show","onRootFocus","buttonElement","onFocus","rootTabindex","stzhFocus","originalEvent","onBlur","stzhBlur","onButtonKeydown","key","ctrlKey","preventDefault","onContentKeydown","_variant","openWatcher","bodyElement","stzhOpen","stopAnimations","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","waitForEvent","handleKeydown","handleKeyup","componentWillLoad","accordionItemId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","hasIcon","hasSlot","icon","iconWrapperElement","Heading","headingLevel","description","subtitle","tabindex","id","onClick","ref","el","onKeyDown","type","analyticsId","name","badge","badgeEmpty","label","badgeType","role","stzhPaginationCss","StzhPagination","gotoPage","newPage","previous","total","stzhChange","page","Number","input","onInputChange","prev","next","localization","window","stzhComponents","utils","fetchTranslations","size","allowManualInput","Fragment","min","max","labelHidden","onStzhChange","_a","toString","required","descriptionLong","error","a11yDescribedby","invalid","hideOptional","noAutocomplete","totalLabel","replace","a11yDisabled","a11yLabel","prevLabel","selectedPageLabel","nextLabel"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx","src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx","src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space('xsmall');\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve('margin-left', 'regular', true);\n    @include spaceCurve('margin-right', 'regular', true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --content-background: Content background\n *\n * @prop --stzh-accordion-content-background: **Global**: Content background\n * @prop --stzh-accordion-button-color: **Global**: Button label background\n */\n\n:host {\n  --trigger-size: 18px;\n  --trigger-color: currentColor;\n  --content-background: #{$accordionContentBackground};\n  --icon-size: #{iconSize()};\n  --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n  --button-background-color: #{$colorSecondary30};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: #{$colorSecondary40};\n  --hover-trigger-color: var(--trigger-color);\n\n  --transition-duration: 200ms;\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Table */\n:host(:where([is-variant=\"table\"])) {\n  --trigger-size: #{iconSize()};\n  --content-background: #{$colorGrey10};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorBlack};\n\n  --hover-button-background-color: #{$colorGrey30};\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorGrey80};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    @include fontCurve('p1');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    min-height: 60px;\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: var(--transition-duration);\n    cursor: pointer;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button,\n  &__content-inner {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &__button-text {\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    &.is-default {\n      position: relative;\n      display: block;\n      width: var(--trigger-size);\n      height: var(--trigger-size);\n      margin-left: space('medium');\n\n      &::before,\n      &::after {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        content: '';\n        display: block;\n        width: var(--trigger-size);\n        height: 2.5px;\n        transition-property: transform, background-color;\n        transition-duration: var(--transition-duration);\n        transform-origin: top left;\n        background-color: var(--trigger-color);\n\n        @media (prefers-reduced-motion: reduce) {\n          transition: none;\n        }\n      }\n\n      &::before {\n        transform: rotate(180deg) translate(-50%, -50%);\n      }\n\n      &::after {\n        transform: rotate(90deg) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      --size: var(--trigger-size);\n\n      transition-property: transform, color;\n      transition-duration: var(--transition-duration);\n      color: var(--trigger-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    &.is-table {\n      color: var(--hover-trigger-color);\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    background-color: var(--content-background);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    align-self: flex-start;\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -5px;\n  }\n\n  &__description {\n    @include fontCurve('caption');\n  }\n\n  &__heading-text,\n  &__description,\n  &__subtitle {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontCurve('p2');\n  }\n\n  /* Has icon */\n\n  &--has-icon &__icon-wrapper {\n    margin-right: space('xsmall');\n  }\n\n  /* Title Variant / Subtitle */\n\n  &--title &__heading-text,\n  &--has-subtitle &__heading-text {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n  }\n\n  &--title &__subtitle:not(:empty) + &__heading-text,\n  &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n    @include spaceCurve('margin-top', 'tiny');\n\n    @include mq($from: medium) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  /* Open */\n\n  &--is-open &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        transform: rotate(0) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      transform: rotate(180deg);\n    }\n  }\n\n  /* Table Variant */\n\n  &--table &__button,\n  &--table &__content-inner {\n    padding-left: space('medium');\n    padding-right: space('medium');\n  }\n\n  &__button {\n    @include fontSize('milli');\n    padding-top: space('medium');\n    padding-bottom: space('medium');\n    min-height: 56px;\n  }\n\n  &--table &__content-inner {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--table &__heading-text {\n    @include font('heavy');\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemBlurEvent,\n  StzhAccordionItemClosedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemFocusEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemOpenEvent,\n  StzhAccordionVariant,\n  StzhAccordionVariantChangeEvent,\n  StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-accordion-item\",\n  styleUrl: \"stzh-accordion-item.scss\",\n  shadow: true,\n})\nexport class StzhAccordionItem {\n  /** Variant (overwrites variant from accordion parent) */\n  @Prop() variant: StzhAccordionVariant;\n\n  /** Whether fold is collapsible (overwrites collapsible from accordion parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhAccordionItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    if (typeof newValue !== \"undefined\") {\n      this._variant = newValue;\n    } else if (this.accordion) {\n      this._variant = this.accordion.variant;\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle accordion item 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  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n  @State() _variant: StzhAccordionVariant;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private iconWrapperElement: HTMLDivElement;\n  private accordionItemId: string;\n  private accordion: HTMLStzhAccordionElement;\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n    this.variantWatcher(this.variant);\n  };\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.accordion || this.accordion.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) {\n      // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  };\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  };\n\n  componentWillLoad() {\n    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.accordion = this.element.closest(\"stzh-accordion\");\n\n    if (this.accordion) {\n      this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n\n    this.variantWatcher(this.variant);\n  }\n\n  disconnectedCallback() {\n    if (this.accordion) {\n      this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.accordion = null;\n    }\n  }\n\n  render() {\n    let hasIcon = hasSlot(this.element, \"icon\") || !!this.icon;\n    if (this.iconWrapperElement) {\n      hasIcon = hasSlot(this.iconWrapperElement, \"icon\") || !!this.icon;\n    }\n\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-accordion-item\": true,\n      \"stzh-accordion-item--has-icon\": hasIcon,\n      \"stzh-accordion-item--has-description\": !!this.description,\n      \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n      \"stzh-accordion-item--is-open\": this.open,\n      \"stzh-accordion-item--is-disabled\": this.disabled,\n      [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : this.rootTabindex} onFocus={this.onRootFocus} is-variant={this._variant}>\n        <div class={classes}>\n          <Heading\n            id={`${this.accordionItemId}-header`}\n            class=\"stzh-accordion-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-accordion-item__button\"\n              aria-controls={`${this.accordionItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span\n                class=\"stzh-accordion-item__icon-wrapper\"\n                ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n              >\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <slot name=\"icon\"></slot>\n                )}\n              </span>\n              <span class=\"stzh-accordion-item__button-text\">\n                <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n                <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n                <span class=\"stzh-accordion-item__description\">{this.description}</span>\n              </span>\n              {this._variant === \"table\" ? (\n                <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n              ) : (\n                <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n              )}\n\n              {(this.badge || this.badgeEmpty) && (\n                <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n              )}\n            </button>\n          </Heading>\n          <div\n            id={`${this.accordionItemId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-accordion-item__content\"\n            aria-labelledby={`${this.accordionItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-accordion-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --justify-content: inherit;\n  --padding-left: calc(#{$formInputHeight} + #{space('medium')});\n\n/* The width property is deprecated. It will be removed with the next major release (breaking change)\n  &[width=full] {\n    --justify-content: space-between;\n    --padding-left: 0;\n  }\n*/\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space('medium');\n  padding-left: var(--padding-left);\n  justify-content: var(--justify-content);\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize('nano');\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space('medium')});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhInputChangeEvent, StzhPaginationChangeEvent } from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true,\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the current page is mutable via input */\n  @Prop({ reflect: true }) allowManualInput: boolean = true;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Width variant. This property is deprecated. It will be removed with the next major release (breaking change) */\n  @Prop({ reflect: true }) width: \"default\" | \"full\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value),\n      });\n    }\n  };\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.allowManualInput ? (\n            <Fragment>\n              <stzh-input\n                class=\"stzh-pagination__input\"\n                type=\"number\"\n                min={1}\n                max={this.total}\n                label={this.label || this.localization.label}\n                labelHidden={true}\n                ref={el => (this.input = el as HTMLStzhInputElement)}\n                onStzhChange={this.onInputChange}\n                value={this.value?.toString() || \"\"}\n                required={this.required}\n                disabled={this.disabled}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                error={this.error}\n                a11yDescribedby={this.a11yDescribedby}\n                name={this.name}\n                size={this.size}\n                invalid={this.invalid}\n                hideOptional={true}\n                noAutocomplete={true}\n              ></stzh-input>\n              <div class=\"stzh-pagination__total\">\n                {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n              </div>\n            </Fragment>\n          ) : (\n            <div class=\"stzh-pagination__total\">\n              {this.value} {this.localization.totalLabel.replace(/\\{total\\}/gi, this.total.toString())}\n            </div>\n          )}\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${\n                this.localization.selectedPageLabel\n              } ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-95427be2.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,a,g as e,F as l}from"./p-c7bfac7a.js";import{m as h,a as n,r as d}from"./p-10e2901a.js";import{c as o}from"./p-ebd6dda5.js";import"./p-9b063923.js";const r='.sc-stzh-datalist-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-datalist-h,[stzh-hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::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-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      "list list list list"\n  );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n        --stzh-datalist-grid-template-areas,\n        "list list list list"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n        --stzh-datalist-grid-template-areas,\n        "list list list list list list list list"\n    );--grid-template-columns:var(\n        --stzh-datalist-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h .sc-stzh-datalist-s>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=""]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=""]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=""]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=""]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--stzh-datalist-item-wrapper-display:flex;--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}@media screen and (max-width: 599px){.stzh-datalist--table.stzh-datalist--big-label.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{--list-display:flex;flex-direction:column;gap:var(--stzh-space-xxxsmall)}}';const m=class{constructor(i){t(this,i);this.stzhVariantChange=s(this,"stzhVariantChange",7);this.stzhBigLabelChange=s(this,"stzhBigLabelChange",7);this.stzhDirectionChange=s(this,"stzhDirectionChange",7);this._items=[];this.setCurrentDirection=()=>{if(h("ultra").matches&&this.directionUltra){this.currentDirection=this.directionUltra}else if(h("large").matches&&this.directionLarge){this.currentDirection=this.directionLarge}else if(h("medium").matches&&this.directionMedium){this.currentDirection=this.directionMedium}else if(h("small").matches&&this.directionSmall){this.currentDirection=this.directionSmall}else{this.currentDirection=this.direction}};this.setCurrentColumns=()=>{if(h("ultra").matches&&this.columnsUltra){this.currentColumns=this.columnsUltra}else if(h("large").matches&&this.columnsLarge){this.currentColumns=this.columnsLarge}else if(h("medium").matches&&this.columnsMedium){this.currentColumns=this.columnsMedium}else if(h("small").matches&&this.columnsSmall){this.currentColumns=this.columnsSmall}else{this.currentColumns=this.columns}};this.resizeHandler=()=>{this.setCurrentDirection();this.setCurrentColumns()};this.variant="default";this.bigLabel=false;this.columns=1;this.columnsSmall=undefined;this.columnsMedium=undefined;this.columnsLarge=undefined;this.columnsUltra=undefined;this.direction="vertical";this.directionSmall=undefined;this.directionMedium=undefined;this.directionLarge=undefined;this.directionUltra=undefined;this.items=[];this.currentColumns=1;this.currentDirection=undefined}directionWatcher(){this.setCurrentDirection()}columnsWatcher(){this.setCurrentColumns()}currentDirectionWatcher(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})}variantWatcher(t){this.stzhVariantChange.emit({component:"stzh-datalist",value:t})}bigLabelWatcher(t){this.stzhBigLabelChange.emit({component:"stzh-datalist",value:t})}itemsWatcher(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}}async getCurrentDirection(){return this.currentDirection}async componentWillLoad(){this.itemsWatcher(this.items);this.bigLabelWatcher(this.bigLabel);this.resizeHandler()}connectedCallback(){n(this.resizeHandler)}disconnectedCallback(){d(this.resizeHandler)}render(){const t={"stzh-datalist":true,"stzh-datalist--has-multiple-columns":this.currentColumns>1,"stzh-datalist--big-label":this.bigLabel,[`stzh-datalist--direction-${this.currentDirection}`]:!!this.currentDirection,[`stzh-datalist--${this.variant}`]:!!this.variant};return i(a,{"is-direction":this.currentDirection,style:{"--columns":this.currentColumns?this.currentColumns.toString():null}},i("div",{class:t},i("div",{class:"stzh-datalist__wrapper"},i("div",{class:"stzh-datalist__list",role:"list"},this._items.map((t=>i("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&i("stzh-datalist",{items:t.items})))),i("slot",null)))))}get element(){return e(this)}static get watchers(){return{direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],columns:["columnsWatcher"],columnsSmall:["columnsWatcher"],columnsMedium:["columnsWatcher"],columnsLarge:["columnsWatcher"],columnsUltra:["columnsWatcher"],currentDirection:["currentDirectionWatcher"],variant:["variantWatcher"],bigLabel:["bigLabelWatcher"],items:["itemsWatcher"]}}};m.style=r;const c='.sc-stzh-datalist-item-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-datalist-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::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-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.no-text-truncate.sc-stzh-datalist-item-h{--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:flex;align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}';let z=0;const u=class{constructor(i){t(this,i);this.stzhItemActionClick=s(this,"stzhItemActionClick",7);this.stzhClick=s(this,"stzhClick",7);this._meta=[];this.external=false;this.isPhone=false;this.onActionClick=t=>{this.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.onClick=t=>{this.stzhClick.emit({component:"stzh-datalist-item",originalEvent:t,href:this.href})};this.handleDirectionChange=t=>{this.direction=t.detail.value};this.handleVariantChange=t=>{this.variant=t.detail.value};this.handleBigLabelChange=t=>{this.bigLabel=t.detail.value};this.localization=undefined;this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconPosition="right";this.iconLabel=undefined;this.iconTooltip=undefined;this.iconHref=undefined;this.label="";this.value="";this.noTextTruncate=false;this.readspeakerLabel="";this.readspeakerHref="";this.meta="";this.statusLabel="";this.statusType="default";this.a11yExpanded=undefined;this.a11yControls=undefined;this.direction="vertical";this.variant="default";this.bigLabel=false}metaWatcher(t){if(typeof t==="string"){try{this._meta=JSON.parse(t)}catch(s){this._meta=t===""?[]:[t]}}else{this._meta=t}}externalWatcher(){this.external=this.rel&&this.rel.includes("external")}hrefWatcher(){this.isPhone=this.href&&(this.href.startsWith("tel:")||this.href.startsWith("fax:"))}addWordBreakToLinks(){var t;const s=Array.from(((t=this.element)===null||t===void 0?void 0:t.getElementsByClassName("stzh-datalist-item__value-text"))||[]);o(s)}renderInner(t,s){const a=t?"button":this.href?"a":"div";const e=()=>i(l,null,(this.href||this.icon)&&!s&&!t&&i("div",{class:"stzh-datalist-item__label-icon"},i("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.isPhone?"phone":this.external&&"external-link"})),t&&i("div",{class:"stzh-datalist-item__label-icon"},i("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),i("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})));return i(l,null,this.variant==="table"&&i(a,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:`${this.datalistItemId}-label`,class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,onClick:this.onClick},this.label),i(a,{id:`${this.datalistItemId}-value`,class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":a!=="div"?`${this.variant==="table"?`${this.datalistItemId}-label`:""} ${this.datalistItemId}-value ${this.datalistItemId}-meta`:null,"aria-controls":this.a11yControls||null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,onClick:this.onClick},this.variant==="default"&&i("div",{class:"stzh-datalist-item__label"},this.label),this.external&&i("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&i("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),i("div",{class:"stzh-datalist-item__value-wrapper"},this.iconPosition==="left"&&i(e,null),this.value?i("stzh-text",{curve:"none",class:"stzh-datalist-item__value-text",innerHTML:this.value}):i("stzh-text",{curve:"none",class:"stzh-datalist-item__value-text"},i("slot",{name:"value"})),this.iconPosition==="right"&&i(e,null))),i(a,{"aria-hidden":this.statusLabel||this._meta.length>0?null:"true",tabindex:"-1",id:`${this.datalistItemId}-meta`,class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,onClick:this.onClick},this.statusLabel&&i("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this._meta.length>0&&i("span",{class:"stzh-datalist-item__meta-text"},this._meta.map(((t,s)=>i(l,null,i("span",{class:"stzh-datalist-item__meta-text-inner"},t),s+1!==this._meta.length&&i("span",{class:"stzh-datalist-item__meta-separator"},"|")))))),this.readspeakerHref&&this.readspeakerLabel&&i("stzh-button",{class:"stzh-datalist-item__readspeaker",variant:"tertiary-plain","no-padding-left":"true","no-padding-right":"true","icon-position":"right",icon:"volume-medium",size:"small",href:this.readspeakerHref,target:"_blank"},this.readspeakerLabel))}renderLeadingIcon(t){const s=t?"button":this.href?"a":"div";return i(s,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,onClick:this.onClick},this.leadingIcon&&i("div",{class:"stzh-datalist-item__leading-icon-container"},i("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))}async componentDidLoad(){this.connectedCallback();this.addWordBreakToLinks()}async componentWillLoad(){this.datalistItemId=`stzh-datalist-item-${z++}`;this.metaWatcher(this.meta);this.externalWatcher();this.hrefWatcher();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datalist-item")}}async connectedCallback(){var t,s,i;this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.variant=this.datalist.variant;this.bigLabel=this.datalist.bigLabel;this.direction=await this.datalist.getCurrentDirection();(t=this.datalist)===null||t===void 0?void 0:t.addEventListener("stzhDirectionChange",this.handleDirectionChange);(s=this.datalist)===null||s===void 0?void 0:s.addEventListener("stzhVariantChange",this.handleVariantChange);(i=this.datalist)===null||i===void 0?void 0:i.addEventListener("stzhBigLabelChange",this.handleBigLabelChange)}}disconnectedCallback(){var t,s,i;if(this.datalist){(t=this.datalist)===null||t===void 0?void 0:t.removeEventListener("stzhDirectionChange",this.handleDirectionChange);(s=this.datalist)===null||s===void 0?void 0:s.removeEventListener("stzhVariantChange",this.handleVariantChange);(i=this.datalist)===null||i===void 0?void 0:i.removeEventListener("stzhBigLabelChange",this.handleBigLabelChange);this.datalist=null}}render(){const t=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";const s=!!((!this.href||this.iconHref||this.iconTooltip)&&this.icon);const e={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||t,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":t,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--big-label":this.bigLabel,[`stzh-datalist-item--direction-${this.direction}`]:!!this.direction&&this.variant==="default",[`stzh-datalist-item--${this.variant}`]:!!this.variant};let h=t?"button":s?"div":"a";const n=()=>i("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"small","aria-label":this.iconLabel,iconOnly:true,href:this.iconHref,icon:this.icon,onClick:this.onActionClick});return i(a,{role:"listitem",class:{"no-text-truncate":!!this.href||this.noTextTruncate}},i("div",{class:e},this.direction==="horizontal"||this.variant==="table"?i(l,null,this.renderLeadingIcon(t),this.renderInner(t,s)):i(l,null,this.renderLeadingIcon(t),i("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(t,s))),i(h,{role:s?null:"presentation","aria-hidden":s?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":t,"is-link":!!this.href&&!this.iconHref},href:!this.iconHref?this.href:null,rel:!this.iconHref?this.rel:null,target:!this.iconHref?this.target:null,download:!this.iconHref?this.download:null},s&&(this.iconTooltip?i("stzh-tooltip",{content:this.iconTooltip},n()):n())),i("div",{class:"stzh-datalist-item__spacer"})),i("div",{class:"stzh-datalist-item__nested"},i("div",{class:"stzh-datalist-item__nested-inner"},i("slot",null))))}get element(){return e(this)}static get watchers(){return{meta:["metaWatcher"],rel:["externalWatcher"],href:["hrefWatcher"]}}};u.style=c;export{m as stzh_datalist,u as stzh_datalist_item};
-//# sourceMappingURL=p-95427be2.entry.js.map

package/dist/stzh-components/p-95427be2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","setCurrentDirection","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","setCurrentColumns","columnsUltra","currentColumns","columnsLarge","columnsMedium","columnsSmall","columns","resizeHandler","directionWatcher","columnsWatcher","currentDirectionWatcher","newValue","stzhDirectionChange","emit","component","value","variantWatcher","stzhVariantChange","bigLabelWatcher","stzhBigLabelChange","itemsWatcher","JSON","parse","getCurrentDirection","componentWillLoad","items","bigLabel","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","variant","h","Host","style","toString","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","_meta","external","isPhone","onActionClick","originalEvent","stzhItemActionClick","onClick","event","stzhClick","href","handleDirectionChange","detail","handleVariantChange","handleBigLabelChange","metaWatcher","ex","externalWatcher","rel","includes","hrefWatcher","startsWith","addWordBreakToLinks","links","Array","from","_a","element","getElementsByClassName","renderInner","isButton","hasActionButton","Item","Icon","Fragment","icon","name","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","iconPosition","curve","innerHTML","statusLabel","type","statusType","meta","index","readspeakerHref","readspeakerLabel","size","renderLeadingIcon","leadingIcon","componentDidLoad","window","stzhComponents","utils","fetchTranslations","datalist","closest","addEventListener","_b","_c","removeEventListener","iconHref","iconTooltip","ActionItem","ActionButton","iconLabel","iconOnly","noTextTruncate","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-datalist-grid-template-columns,\n        #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n\n  /* Table variant with big label */\n\n  &--table#{&}--big-label &__list {\n    @include mq($to: small) {\n      --list-display: flex;\n      flex-direction: column;\n      gap: space('xxxsmall');\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemEntry,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true,\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n\n  /** With big label */\n  @Prop({ reflect: true }) bigLabel: boolean = false;\n\n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Big label attribute change event */\n  @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"bigLabel\")\n  bigLabelWatcher(newValue: boolean) {\n    this.stzhBigLabelChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  };\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  };\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.bigLabelWatcher(this.bigLabel);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n      \"stzh-datalist--big-label\": this.bigLabel,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          \"--columns\": this.currentColumns ? this.currentColumns.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\n            <div class=\"stzh-datalist__list\" role=\"list\">\n              {this._items.map(item => (\n                <stzh-datalist-item {...item}>\n                  {item.items && item.items.length > 0 && <stzh-datalist items={item.items}></stzh-datalist>}\n                </stzh-datalist-item>\n              ))}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  --text-overflow: ellipsis;\n  --white-space: nowrap;\n  --overflow: hidden;\n  --max-width: 100%;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n:host(.no-text-truncate) {\n  --text-overflow: clip;\n  --white-space: normal;\n  --overflow: visible;\n  --width: initial;\n  --max-width: initial;\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: flex;\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n  }\n\n  &__value-text {\n    --color: initial;\n\n    @include fontCurve('p1');\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space('xsmall');\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__readspeaker {\n    width: fit-content;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  &--direction-vertical &__wrapper {\n    flex-grow: inherit;\n  }\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('xsmall');\n    }\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      padding-top: space('xxsmall');\n      padding-bottom: space('xxsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    padding-bottom: space('xxsmall');\n    padding-top: calc(#{space('xxsmall')} + 12px);\n  }\n\n  &--direction-horizontal &__readspeaker {\n    padding-bottom: space('xxsmall');\n    padding-top: space('xxsmall');\n    padding-left: space('medium');\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize('nano');\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize('milli');\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('small');\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  /** Big label */\n\n  &--table#{&}--big-label &__label {\n    @include font('heavy');\n    @include fontSize('milli');\n    color: $colorGrey80;\n  }\n\n  &--table#{&}--big-label &__leading,\n  &--table#{&}--big-label &__value,\n  &--table#{&}--big-label &__label,\n  &--table#{&}--big-label &__meta,\n  &--table#{&}--big-label &__action-list {\n    &:not(:empty) {\n      padding-top: 0;\n      padding-bottom: 0;\n\n      @include mq($from: small) {\n        padding-top: space('xsmall');\n        padding-bottom: space('small');\n      }\n    }\n  }\n\n  &--table#{&}--big-label &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n\n    @include mq($to: small) {\n      padding-left: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistItemClickEvent,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n * @slot readspeaker - Slot for readspeaker\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true,\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Whether text should be truncate or not */\n  @Prop() noTextTruncate: boolean = false;  \n\n  /** Readspeaker label */\n  @Prop() readspeakerLabel: string = \"\";\n\n  /** Readspeaker link */\n  @Prop() readspeakerHref: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n  @State() bigLabel: boolean = false;\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  };\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  };\n\n  private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n    this.bigLabel = event.detail.value;\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(\n      this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") || []\n    );\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon\n              class=\"stzh-datalist-item__icon\"\n              name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n            ></stzh-icon>\n          </div>\n        )}\n\n        {isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        )}\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" && (\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href,\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        )}\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={\n            Item !== \"div\"\n              ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n                  this.datalistItemId\n                }-meta`\n              : null\n          }\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n          {this.external && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n          )}\n          {this.download && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n          )}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value ? (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n            ) : (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            )}\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel && (\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          )}\n          {this._meta.length > 0 && (\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) => (\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">|</span>}\n                </Fragment>\n              ))}\n            </span>\n          )}\n        </Item>\n\n        {this.readspeakerHref && this.readspeakerLabel && (\n          <stzh-button\n            class=\"stzh-datalist-item__readspeaker\"\n            variant=\"tertiary-plain\"\n            no-padding-left=\"true\"\n            no-padding-right=\"true\"\n            icon-position=\"right\"\n            icon=\"volume-medium\"\n            size=\"small\"\n            href={this.readspeakerHref}\n            target=\"_blank\"\n          >\n            {this.readspeakerLabel}\n          </stzh-button>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href,\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon && (\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        )}\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n    this.addWordBreakToLinks();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.bigLabel = this.datalist.bigLabel;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\" || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--big-label\": this.bigLabel,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n    };\n\n    let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true,\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    };\n\n    return (\n      <Host role=\"listitem\" class={{\"no-text-truncate\": !!this.href || this.noTextTruncate}}>\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ? (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n          ) : (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n            </Fragment>\n          )}\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref,\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {hasActionButton &&\n              (this.iconTooltip ? (\n                <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n              ) : (\n                ActionButton()\n              ))}\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-973c5df2.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,a as e,g as r}from"./p-c7bfac7a.js";import{m as i,a as h,r as a}from"./p-10e2901a.js";const o=".sc-stzh-progressbar-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-progressbar-h,[stzh-hidden].sc-stzh-progressbar-h{display:none}.sc-stzh-progressbar-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::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-progressbar-h .has-focus.sc-stzh-progressbar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar{outline-style:none !important}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar::-moz-focus-inner{border:0 !important}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;z-index:0;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:flex;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{flex-grow:1;flex-shrink:1;flex-basis:0}";const c=class{constructor(t){s(this,t);this.setCurrentSteps=()=>{if(i("ultra").matches&&this.stepsUltra){this.currentSteps=this.stepsUltra}else if(i("large").matches&&this.stepsLarge){this.currentSteps=this.stepsLarge}else if(i("medium").matches&&this.stepsMedium){this.currentSteps=this.stepsMedium}else if(i("small").matches&&this.stepsSmall){this.currentSteps=this.stepsSmall}else{this.currentSteps=this.steps}};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.clickDisabled=false;this.currentSteps=undefined}async getItemData(){return this._data.map(((s,t)=>Object.assign(Object.assign({},s),this.getItemAttributes(t))))}stepsWatcher(){this.setCurrentSteps()}dataWatcher(s){if(typeof s==="string"){this._data=JSON.parse(s)}else{this._data=s}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex}getItemAttributes(s){const t={};t.step=s+1;t.first=s===0;t.last=s===this.lastItemIndex;t.current=s===this.index;t.passed=s<this.index;const e=this._data[s];t.incomplete=e.incomplete;if(this._data.length>this.currentSteps){if(s===this.lastItemIndex&&!this.withinLastFewSteps){t.dotted=true}if(this.index<2){t.hide=s>this.maxStepIndex-1&&s<this.lastItemIndex}else{if(s===0){t.dotted=true}let e=this.index;if(this.withinLastFewSteps){e=this._data.length-this.maxStepIndex}t.hide=s>0&&s<e||s>this.index+(this.currentSteps-3)&&s<this.lastItemIndex}}return t}async componentWillLoad(){this.dataWatcher(this.data);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"progressbar")}}connectedCallback(){this.setCurrentSteps();h(this.setCurrentSteps)}disconnectedCallback(){a(this.setCurrentSteps)}render(){const s={"stzh-progressbar":true,[`stzh-progressbar--index-${this.index}`]:!!this.index};return t(e,{style:{"--steps":this.currentSteps?this.currentSteps.toString():null}},t("div",{class:s},t("div",{class:"stzh-progressbar__items",role:"list","aria-label":this.localization.label},this._data.map(((s,e)=>t("stzh-progressbar-item",Object.assign({},this.getItemAttributes(e),{icon:s.icon,disabled:s.disabled,label:s.label,"click-disabled":s.clickDisabled!==undefined?s.clickDisabled:this.clickDisabled,class:"stzh-progressbar__item"})))),t("slot",null))))}get element(){return r(this)}static get watchers(){return{steps:["stepsWatcher"],stepsSmall:["stepsWatcher"],stepsMedium:["stepsWatcher"],stepsLarge:["stepsWatcher"],stepsUltra:["stepsWatcher"],data:["dataWatcher"]}}};c.style=o;export{c as stzh_progressbar};
-//# sourceMappingURL=p-973c5df2.entry.js.map

package/dist/stzh-components/p-973c5df2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","getItemData","_data","map","step","index","Object","assign","getItemAttributes","stepsWatcher","dataWatcher","newValue","JSON","parse","lastItemIndex","length","maxStepIndex","withinLastFewSteps","itemIndex","item","first","last","current","passed","stepItemFromData","incomplete","dotted","hide","substract","componentWillLoad","data","localization","window","stzhComponents","utils","fetchTranslations","element","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","style","toString","class","role","label","icon","disabled","clickDisabled","undefined"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n  z-index: 0; // create new stacking context\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n  /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  /** Whether all the progressbar-items are clickable (overrides item.clickDisabled in data property). */\n  @Prop() clickDisabled: boolean = false;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    const stepItemFromData = this._data[itemIndex];\n    item.incomplete = stepItemFromData.incomplete;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                click-disabled={step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-b25e8b20.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhGeoRefDataCss","CLASS_BODY_OPEN","GeoRefData","this","_availableTags","filterResults","handleFilterToggleClick","isFiltersContentOpen","handleApplyFilterClick","handleOverlayCloseClick","document","body","classList","remove","isOpen","urlParams","URLSearchParams","window","location","search","Array","from","keys","forEach","key","startsWith","delete","newUrl","pathname","toString","history","replaceState","appliedFilters","handleResize","async","metaWrapperElement","clientHeight","mapElement","style","height","resultsListElement","map","getMap","updateSize","mediaChangeHandler","isViewportLarge","media","matches","isViewportMedium","handleFilterChange","e","filtersArray","isArray","detail","value","length","_resetTag","filter","filterValue","noEmptyFilter","setTimeout","handleFilterResults","handleExtentVisibilityChange","showOnlyResultsForCurrentExtent","checked","setVisibleMarkers","handleSearchChange","searchIndex","searchResults","flatSearchResults","flatMap","field","result","Set","searchActive","combineFilterAndSearchResults","toggleViewMode","viewmode","availableTagsWatcher","newValue","JSON","parse","resetTagWatcher","undefined","applyFiltersFromUrl","filters","entries","slice","updateUrlWithFilters","loadMapData","mapDataUrl","response","fetch","rawMapData","text","parsedData","DOMParser","parseFromString","querySelectorAll","item","pos","_a","querySelector","textContent","poiid","_b","lat","lon","split","error","toastbarElement","toast","type","catch","loadPoiData","poiDataUrl","credentials","poiData","json","items","combineData","firstArray","secondArray","smallerArray","largerArray","matchingItem","find","largerArrayItem","Object","assign","sort","a","b","title","localeCompare","noTitleException","enhanceTags","availableTags","combinedData","label","noLabelException","tag","counter","tags","includes","noTagsException","variant","buildSearchIndex","data","Document","tokenize","matcher","id","searchIndexIdField","index","searchIndexFields","add","mapMovedPannedOrZoomed","visibleMarkers","getVisibleMarkers","finalResults","visibleMarker","getId","setEnhancedTags","setPaginatedResults","finalResultsPaginatedList","numberOfItemsToLoad","canLoadMore","checkDirectOpenViaUrl","idFromUrl","get","al","initializeAndOpenMap","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","element","resetTag","disconnectedCallback","removeMediaChangeListener","disconnect","isLoading","has","set","extent","parseFloat","isNaN","updateViewToFitMarkers","isInitialized","mapException","enhancedTags","enhancedResetTag","unshift","some","filterActive","replaceMapMarkers","loadMore","finalResultsPaginationOffset","sliced","concat","removeAllIconMarkers","addIconMarker","description","imageUri","baseUrlOverride","image","href","path","handlePoiTeaserMouseEnter","marker","findMarkerById","setIconMarkerActive","handlePoiTeaserMouseLeave","setIconMarkerInactive","render","classes","h","Host","ref","el","class","onClick","name","open","sticky","slot","curve","heading","icon","iconOnly","size","onStzhClick","onStzhChange","multiple","defaultValue","fullwidth","hideOptional","centerMarker","writeExtentToUrlEnabled","Fragment","onMouseEnter","onMouseLeave","poiname","ratio","portrait","src","alt"],"sources":["src/components/stzh-geo-ref-data/stzh-geo-ref-data.scss?tag=stzh-geo-ref-data&encapsulation=shadow","src/components/stzh-geo-ref-data/stzh-geo-ref-data.tsx"],"sourcesContent":[":host {\n  --teaser-list-width: 480px;\n  --meta-grid-template-areas: \"filters search\";\n  --results-grid-template-areas: \"map list\";\n}\n\n.stzh-geo-ref-data {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 899;\n  flex-direction: column;\n  transition: opacity ease 0.2s;\n  background-color: var(--stzh-color-white);\n\n  // initially hidden\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n\n  &--is-open {\n    display: flex;\n    opacity: 1;\n    visibility: visible;\n    pointer-events: inherit;\n  }\n\n  &__header {\n    display: none;\n\n    @include mq($from: large) {\n      display: inherit;\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    height: 100%;\n  }\n\n  &--content-padding {\n    padding-left: $containerMargin;\n    padding-right: var(--stzh-space-medium);\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginSmall;\n    }\n  }\n\n  &__heading {\n    display: flex;\n    align-items: center;\n    background-color: var(--stzh-color-secondary20);\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /** Everything meta wrapper like search, filters etc. */\n\n  &__meta-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-end;\n    gap: space(large);\n\n    @include mq($to: large) {\n      padding-top: space('medium');\n      padding-bottom: space('medium');\n    }\n\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'small');\n\n    @include mq($from: large) {\n      display: grid;\n      @include gridGutter;\n      grid-template-areas: var(--meta-grid-template-areas);\n      grid-template-columns: 1fr var(--teaser-list-width);\n    }\n  }\n\n  &__filters {\n    grid-area: filters;\n    flex: none;\n    margin-bottom: space(xxsmall);\n  }\n\n  &__filters-toggle {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__filters-toggle stzh-chip {\n    @include mq($to: medium) {\n      --icon-gap: 0;\n    }\n  }\n\n  &__list-search {\n    display: none;\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &__filters-content {\n    display: none;\n\n    &--visible {\n      padding: $containerMargin;\n\n      @include mq($to: medium) {\n        //padding: $containerMarginSmall;\n      }\n\n      @include mq($to: large) {\n        display: flex;\n        gap: space('xxlarge');\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background-color: var(--stzh-color-white);\n        //padding: $containerMarginMedium;\n        z-index: 10;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n    }\n\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n\n  &__filters-apply-button {\n    display: block;\n\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__search {\n    grid-area: search;\n    width: 100%;\n\n    @include mq($from: large) {\n      width: var(--teaser-list-width);\n      padding-left: var(--stzh-space-medium);\n      padding-right: var(--stzh-space-xsmall);\n    }\n  }\n\n  &__search input {\n    @include fontSize('milli');\n  }\n\n  &__results-toggle {\n    grid-area: resultstoggle;\n    flex: none;\n    margin-bottom: space(xxsmall);\n\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  /** Everything with results */\n\n  &__results-wrapper {\n    height: 100%;\n\n    @include mq($from: large) {\n      display: grid;\n      @include gridGutter;\n      grid-template-areas: var(--results-grid-template-areas);\n      grid-template-columns: minmax(0, 1fr) var(--teaser-list-width);\n    }\n  }\n\n  &__results-wrapper .inactive {\n    @include mq($to: large) {\n      visibility: hidden;\n      height: 0;\n      position: absolute;\n      overflow: hidden;\n    }\n  }\n\n  &__results-map {\n    grid-area: map;\n    position: relative;\n    height: 100%;\n  }\n\n  &__map-controls {\n    position: absolute;\n    top: space(small);\n    left: space(small);\n    background-color: var(--stzh-color-white);\n    padding: space(xsmall);\n  }\n\n  &__results-list {\n    grid-area: list;\n    padding-left: $containerMargin;\n    padding-right: var(--stzh-space-medium);\n    padding-bottom: space(\"xxlarge\");\n    overflow: auto;\n    @include scrollbars;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      width: var(--teaser-list-width);\n      padding-left: 0;\n      overflow: auto;\n    }\n  }\n\n  &__results-list-heading {\n    margin-bottom: var(--stzh-space-medium);\n  }\n\n  &__ol-map {\n  }\n\n  &__teaser-list {\n    display: grid;\n    gap: var(--stzh-space-medium);\n    grid-template-columns: 1fr;\n\n    @include mq($from: small) {\n      grid-template-columns: 1fr 1fr;\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  &__teaser-load-more {\n    display: flex;\n    justify-content: center;\n    margin-top: space(medium);\n  }\n\n  /** no filters */\n\n  &:not(&--has-filters) &__meta-wrapper {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &:not(&--has-filters) &__filters {\n    display: none;\n  }\n\n  &:not(&--has-filters) &__list-search {\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n}\n\n.stzh-poi-teaser {\n  display: flex;\n  flex-direction: column-reverse;\n  background-color: var(--stzh-color-grey10);\n  position: relative;\n\n  @include mq($from: large) {\n    flex-direction: row;\n    height: 180px;\n  }\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--stzh-color-secondary10);\n  }\n\n  &-content {\n    padding: var(--stzh-space-medium);\n    hyphens: auto;\n    flex-grow: 1;\n\n    stzh-heading {\n      margin-bottom: space(xsmall);\n      hyphens: auto;\n    }\n\n    stzh-text {\n      --color: var(--stzh-color-grey80);\n    }\n  }\n\n  &-link {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    display: flex;\n    height: 100%;\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--stzh-color-grey20);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n  }\n\n  &__image-inner-wrapper img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &-list-item {\n    display: flex;\n    gap: space(small);\n    margin-top: space(xxsmall);\n\n    stzh-icon, stzh-text {\n      --color: var(--stzh-color-grey80);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  StzhAvailableTag,\n  StzhChipselectChangeEvent,\n  StzhChipselectItem,\n  StzhCombinedGeoRefData,\n  StzhGeoRefDataOverlayCloseClickEvent,\n  StzhMapGeoRefData,\n  StzhPoiGeoRefData\n} from \"../../index\";\nimport { Document } from \"flexsearch/dist/flexsearch.bundle.min.js\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot logo - Slot for brand logo\n */\n@Component({\n  tag: \"stzh-geo-ref-data\",\n  styleUrl: \"stzh-geo-ref-data.scss\",\n  shadow: true\n})\nexport class GeoRefData {\n  /** ID for this instance, can be used to open via URL query param \"al=<id>\" - name \"al\" for historical reasons */\n  @Prop({ reflect: true }) al: string = \"\";\n\n  /** Heading for the overlay. */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** The URL for fetching the card data */\n  @Prop({ reflect: true }) mapDataUrl: string = \"\";\n\n  /** The URL used for fetching the POI data. */\n  @Prop({ reflect: true }) poiDataUrl: string = \"\";\n\n  /** Base URL used for all external requests (map, card). */\n  @Prop() baseUrlOverride: string = \"https://www.stadt-zuerich.ch\";\n\n  /** To make sure all tags are mapped to their identificator, only these will be available. */\n  @Prop() availableTags: StzhAvailableTag[] | string = [];\n  private _availableTags: StzhAvailableTag[] = [];\n\n  /** Reset tag (the first one). */\n  @Prop() resetTag: StzhChipselectItem | string;\n  private _resetTag: StzhChipselectItem;\n\n  /** Fields for building the search index. */\n  @Prop()\n  searchIndexFields: string[] = [\n    \"title\",\n    \"poiname\",\n    \"street\",\n    \"zip\",\n    \"description\"\n  ];\n\n  /** Fields for building the search index. */\n  @Prop() searchIndexIdField: string = \"poiid\";\n\n  @Watch(\"availableTags\")\n  availableTagsWatcher(newValue: StzhAvailableTag[] | string) {\n    if (!newValue) {\n      this._availableTags = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._availableTags = JSON.parse(newValue);\n      } catch (e) {\n        this._availableTags = [];\n      }\n    } else {\n      this._availableTags = newValue;\n    }\n  }\n\n  @Watch(\"resetTag\")\n  resetTagWatcher(newValue: StzhChipselectItem | string) {\n    if (!newValue) {\n      this._resetTag = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._resetTag = JSON.parse(newValue);\n      } catch (e) {\n        this._resetTag = undefined;\n      }\n    } else {\n      this._resetTag = newValue;\n    }\n  }\n\n  @State() filterActive: boolean = false;\n  @State() searchActive: boolean = false;\n  @State() showOnlyResultsForCurrentExtent: boolean = true;\n  @State() finalResults: StzhCombinedGeoRefData[] = [];\n  @State() finalResultsPaginatedList: StzhCombinedGeoRefData[] = [];\n  @State() finalResultsPaginationOffset = 0;\n\n  @State() viewmode: \"map\" | \"list\" = \"map\";\n  @State() isViewportLarge: boolean;\n  @State() isViewportMedium: boolean;\n  @State() isInitialized: boolean;\n  @State() isOpen: boolean;\n  @State() isLoading: boolean;\n  @State() numberOfItemsToLoad: number = 20;\n  @State() canLoadMore: boolean;\n  @State() appliedFilters: string[] = [\"\"];\n  @State() isFiltersContentOpen: boolean = false;\n\n  /** Overlay close click event */\n  @Event()\n  stzhOverlayCloseClick: EventEmitter<StzhGeoRefDataOverlayCloseClickEvent>;\n\n  private combinedData: StzhCombinedGeoRefData[];\n  private enhancedTags: StzhChipselectItem[];\n  private searchIndex: Document;\n\n  private filterResults: StzhCombinedGeoRefData[] = [];\n  private searchResults: Set<string>;\n\n  @Element() element: HTMLStzhGeoRefDataElement;\n  private mapElement: HTMLStzhOlmapElement;\n  private toastbarElement: HTMLStzhToastbarElement;\n  private metaWrapperElement: HTMLDivElement;\n  private resultsListElement: HTMLDivElement;\n  private resizeObserver: ResizeObserver;\n\n  private applyFiltersFromUrl() {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Find all filter parameters from the URL\n    const filters = Array.from(urlParams.entries())\n      .filter(([key, value]) => key.startsWith(\"filters[\") && value === \"true\")\n      .map(([key]) => key.slice(8, -1)); // Extract the filter key (removing 'filters[' and ']')\n\n    // Apply filters if they exist\n    if (filters.length) {\n      this.appliedFilters = filters;\n      // Update the UI to show selected filters\n      this.updateUrlWithFilters(); // Keep the URL sync logic here\n      this.handleFilterChange({\n        detail: { value: filters }\n      } as CustomEvent<StzhChipselectChangeEvent>);\n    }\n  }\n\n  private handleFilterToggleClick = () => {\n    this.isFiltersContentOpen = true;\n  };\n\n  private handleApplyFilterClick = () => {\n    this.isFiltersContentOpen = false;\n  };\n\n  private handleOverlayCloseClick = () => {\n    // Remove the class from the body\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.isOpen = false;\n\n    // Get the current URL's query parameters\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Remove all filters (query parameters that start with \"filters[\")\n    Array.from(urlParams.keys()).forEach(key => {\n      if (key.startsWith(\"filters[\")) {\n        urlParams.delete(key);\n      }\n    });\n\n    // Remove all extent parameters (keys like \"extent[0]\", \"extent[1]\", etc.)\n    urlParams.delete(\"extent[0]\");\n    urlParams.delete(\"extent[1]\");\n    urlParams.delete(\"extent[2]\");\n    urlParams.delete(\"extent[3]\");\n\n    // Remove the al parameter\n    urlParams.delete(\"al\");\n\n    // Update the URL without reloading the page\n    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;\n    history.replaceState(null, \"\", newUrl);\n\n    // Clear filters.\n    this.appliedFilters = [\"\"];\n  };\n\n  private handleResize = async () => {\n    if (this.metaWrapperElement) {\n      if (this.metaWrapperElement.clientHeight) {\n        this.mapElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n        this.resultsListElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n      } else {\n        this.mapElement.style.height = `100%`;\n        this.resultsListElement.style.height = `100%`;\n      }\n      const map = await this.mapElement.getMap();\n      map.updateSize();\n    }\n  };\n\n  private mediaChangeHandler = () => {\n    this.isViewportLarge = media(\"large\").matches;\n    this.isViewportMedium = media(\"medium\").matches;\n  };\n\n  private async loadMapData(): Promise<StzhMapGeoRefData[]> {\n    if (!this.mapDataUrl) {\n      return [];\n    }\n    try {\n      const response = await fetch(this.mapDataUrl);\n      const rawMapData = await response.text();\n      const parsedData = new DOMParser().parseFromString(rawMapData, \"text/xml\");\n      return Array.from(parsedData.querySelectorAll(\"featureMember\")).map(item => {\n        const pos = item.querySelector(\"pos\")?.textContent;\n        const poiid = item.querySelector(\"poi_id\")?.textContent;\n        const [lat, lon] = pos?.split(\" \") || [];\n\n        return { poiid, lat, lon } as StzhMapGeoRefData;\n      });\n    } catch (error) {\n      this.toastbarElement\n        .toast(\"Es ist ein Fehler beim Beziehen der Kartendaten aufgetreten.\", {\n          type: \"error\"\n        })\n        .catch();\n    }\n  }\n\n  private async loadPoiData() {\n    if (!this.poiDataUrl) {\n      return [];\n    }\n    try {\n      const response = await fetch(this.poiDataUrl, { credentials: \"include\" });\n      const poiData = await response.json();\n      return poiData.items;\n    } catch (error) {\n      this.toastbarElement\n        .toast(\"Beim Laden der POI-Daten ist ein Fehler aufgetreten.\", {\n          type: \"error\"\n        })\n        .catch();\n    }\n  }\n\n  private combineData(\n    firstArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[],\n    secondArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[]\n  ): StzhCombinedGeoRefData[] {\n    if (!firstArray.length || !secondArray.length) {\n      return [];\n    }\n    // determine which array is smaller for performance\n    let smallerArray: any[];\n    let largerArray: any[];\n\n    if (firstArray.length < secondArray.length) {\n      smallerArray = firstArray;\n      largerArray = secondArray;\n    } else {\n      smallerArray = secondArray;\n      largerArray = firstArray;\n    }\n    // combine arrays based on poiid\n    return smallerArray\n      .map(item => {\n        const matchingItem = largerArray.find(largerArrayItem => largerArrayItem.poiid === item.poiid);\n        return { ...item, ...matchingItem };\n      })\n      .sort((a, b) => {\n        try {\n          return a.title.localeCompare(b.title); // Sorts alphabetically by the 'name' property\n        } catch (noTitleException) {\n          return 1;\n        }\n      });\n  }\n\n  private enhanceTags(availableTags: StzhAvailableTag[], combinedData: StzhCombinedGeoRefData[]): StzhChipselectItem[] {\n    return availableTags\n      .sort((a, b) => {\n        try {\n          a.label.localeCompare(b.label);\n        } catch (noLabelException) {\n          return 1;\n        }\n      })\n      .map(tag => {\n        const counter = combinedData\n          .filter(item => {\n            try {\n              return item.tags.includes(tag.value);\n            } catch (noTagsException) {\n              return false;\n            }\n          })\n          .length.toString();\n        return { ...tag, counter, variant: \"filter\" };\n      });\n  }\n\n  private buildSearchIndex(data: StzhCombinedGeoRefData[]) {\n    if (!data.length) {\n      return;\n    }\n    this.searchIndex = new Document({\n      tokenize: \"forward\",\n      matcher: {\n        \"[äà]\": \"a\",\n        \"[öó]\": \"o\",\n        \"[üûúù]\": \"u\",\n        \"[éè]\": \"e\"\n      },\n      document: {\n        id: this.searchIndexIdField,\n        index: this.searchIndexFields\n      }\n    });\n    data.forEach(item => {\n      this.searchIndex.add(item);\n    });\n  }\n\n  @Listen(\"stzhPostRender\")\n  @Listen(\"stzhMovePanZoom\")\n  async mapMovedPannedOrZoomed() {\n    await this.setVisibleMarkers();\n  }\n\n  private async setVisibleMarkers() {\n    if (this.combinedData) {\n      const visibleMarkers = await this.mapElement.getVisibleMarkers();\n      if (this.showOnlyResultsForCurrentExtent) {\n        this.finalResults = this.combinedData.filter(item =>\n          visibleMarkers.find(visibleMarker => visibleMarker.getId() === item.poiid)\n        );\n      } else {\n        this.finalResults = this.combinedData;\n      }\n      this.setEnhancedTags();\n      await this.setPaginatedResults();\n    }\n  }\n\n  private async setPaginatedResults() {\n    this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n    this.canLoadMore = this.finalResults.length > this.numberOfItemsToLoad;\n  }\n\n  private async checkDirectOpenViaUrl() {\n    const urlParams = new URLSearchParams(window.location.search);\n    const idFromUrl = urlParams.get(\"al\");\n\n    if (idFromUrl && idFromUrl === this.al) {\n      await this.initializeAndOpenMap();\n    }\n  }\n\n  connectedCallback() {\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n    this.availableTagsWatcher(this.availableTags);\n    this.resetTagWatcher(this.resetTag);\n    this.checkDirectOpenViaUrl();\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private async initializeAndOpenMap() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.isLoading = true;\n    this.isOpen = true;\n\n    // Write the \"al\" prop of the component to the current URL as query param if it is not already there\n    const urlParams = new URLSearchParams(window.location.search);\n    if (!urlParams.has(\"al\")) {\n      urlParams.set(\"al\", this.al);\n      const newUrl = `${window.location.pathname}?${urlParams.toString()}`;\n      history.replaceState(null, \"\", newUrl);\n    }\n\n    try {\n      this.combinedData = this.combineData(await this.loadMapData(), await this.loadPoiData());\n      this.setEnhancedTags();\n      this.applyFiltersFromUrl();\n      this.buildSearchIndex(this.combinedData);\n      this.finalResults = this.combinedData;\n      await this.setVisibleMarkers();\n      await this.combineFilterAndSearchResults();\n      await this.handleResize();\n\n      const urlParams = new URLSearchParams(window.location.search);\n      const extent = [\n        parseFloat(urlParams.get(\"extent[0]\")),\n        parseFloat(urlParams.get(\"extent[1]\")),\n        parseFloat(urlParams.get(\"extent[2]\")),\n        parseFloat(urlParams.get(\"extent[3]\"))\n      ];\n\n      if (!extent.length || isNaN(extent[0]) || isNaN(extent[1]) || isNaN(extent[2]) || isNaN(extent[3])) {\n        await this.mapElement.updateViewToFitMarkers();\n      }\n\n      await this.handleResize();\n      this.isInitialized = true;\n    } catch (mapException) {\n      this.toastbarElement\n        .toast(\"Beim Laden der Karte ist ein Fehler aufgetreten.\", {\n          type: \"error\"\n        })\n        .catch();\n    }\n\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 500);\n  }\n\n  private updateUrlWithFilters() {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    // Remove existing filters from URL\n    Array.from(urlParams.keys()).forEach(key => {\n      if (key.startsWith(\"filters[\")) {\n        urlParams.delete(key);\n      }\n    });\n\n    // Add the selected filters from `appliedFilters` to the URL\n    this.appliedFilters.forEach(filter => {\n      urlParams.set(`filters[${filter}]`, \"true\");\n    });\n\n    // Update the URL without reloading the page\n    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;\n    history.replaceState(null, \"\", newUrl);\n  }\n\n  private setEnhancedTags() {\n    this.enhancedTags = this.enhanceTags(this._availableTags, this.finalResults);\n    const enhancedResetTag = {\n      ...this._resetTag,\n      counter: this.finalResults.length.toString()\n    };\n    if (this._resetTag) {\n      this.enhancedTags.unshift(enhancedResetTag);\n    }\n  }\n\n  private handleFilterChange = async (e: CustomEvent<StzhChipselectChangeEvent>) => {\n    let filtersArray = Array.isArray(e.detail.value) ? e.detail.value : [e.detail.value];\n    if (filtersArray.length === 1 && filtersArray[0] === this._resetTag.value) {\n      this.appliedFilters = [];\n    } else {\n      try {\n        filtersArray = filtersArray.filter(filterValue => filterValue !== \"\");\n      } catch (noEmptyFilter) {\n        // nothing to do here\n      }\n      this.appliedFilters = filtersArray;\n    }\n    setTimeout(async () => {\n      await this.handleFilterResults();\n    });\n  };\n\n  private async handleFilterResults() {\n    // Update the component state based on the selected filters\n    if (this.appliedFilters.length !== 0) {\n      this.filterResults = this.finalResults.filter(\n        item => item.tags && item.tags.some(tag => this.appliedFilters.includes(tag))\n      );\n      this.filterActive = true;\n    } else {\n      this.filterActive = false;\n      this.filterResults = this.finalResults;\n    }\n\n    // Update the URL with the applied filters\n    this.updateUrlWithFilters();\n\n    // Combine the results from filters and search\n    await this.combineFilterAndSearchResults();\n  }\n\n  private handleExtentVisibilityChange = async e => {\n    this.showOnlyResultsForCurrentExtent = e.detail.checked;\n    await this.setVisibleMarkers();\n  };\n\n  private handleSearchChange = async (e: CustomEvent) => {\n    if (e.detail.value !== \"\") {\n      if (!this.searchIndex) {\n        return;\n      }\n      const searchResults = this.searchIndex.search(e.detail.value);\n      const flatSearchResults = searchResults.flatMap(field => field.result);\n      this.searchResults = new Set(flatSearchResults);\n      this.searchActive = true;\n    } else {\n      this.searchActive = false;\n    }\n    await this.combineFilterAndSearchResults();\n  };\n\n  private async combineFilterAndSearchResults() {\n    if (this.filterActive && !this.searchActive) {\n      this.finalResults = this.filterResults;\n    } else if (!this.filterActive && this.searchActive) {\n      this.finalResults = Array.from(this.searchResults).map(id => this.combinedData.find(item => item.poiid === id));\n    } else if (this.filterActive && this.searchActive) {\n      this.finalResults = this.filterResults.filter(item => this.searchResults.has(item.poiid));\n    } else {\n      this.finalResults = this.combinedData;\n    }\n\n    this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n\n    await this.replaceMapMarkers(this.finalResults);\n  }\n\n  private loadMore() {\n    this.finalResultsPaginationOffset++;\n    const sliced = this.finalResults.slice(\n      this.finalResultsPaginationOffset * this.numberOfItemsToLoad,\n      this.finalResultsPaginationOffset * this.numberOfItemsToLoad + this.numberOfItemsToLoad\n    );\n    if (!sliced || !sliced.length || sliced.length < this.numberOfItemsToLoad) {\n      this.canLoadMore = false;\n    }\n    this.finalResultsPaginatedList = this.finalResultsPaginatedList.concat(sliced);\n  }\n\n  private async replaceMapMarkers(items: StzhCombinedGeoRefData[]) {\n    await this.mapElement.removeAllIconMarkers();\n    items\n      .filter(item => !!item.lat && !!item.lon)\n      .forEach(item => {\n        this.mapElement\n          .addIconMarker([\n            parseFloat(item.lat),\n            parseFloat(item.lon)\n          ], {\n            id: item.poiid,\n            title: item.title,\n            text: item.description,\n            data: item.data,\n            imageUri: `${this.baseUrlOverride}${item.image}`,\n            href: `${this.baseUrlOverride}${item.path}`\n          })\n          .catch();\n      });\n    if (!this.showOnlyResultsForCurrentExtent) {\n      this.mapElement.updateViewToFitMarkers().catch();\n    }\n  }\n\n  private toggleViewMode = () => {\n    if (this.viewmode === \"map\") {\n      this.viewmode = \"list\";\n    } else {\n      this.viewmode = \"map\";\n    }\n  };\n\n  private async handlePoiTeaserMouseEnter(item: StzhCombinedGeoRefData) {\n    const marker = await this.mapElement.findMarkerById(item.poiid);\n    if (marker) {\n      await this.mapElement.setIconMarkerActive(marker);\n    }\n  }\n\n  private async handlePoiTeaserMouseLeave(item: StzhCombinedGeoRefData) {\n    const marker = await this.mapElement.findMarkerById(item.poiid);\n    if (marker) {\n      await this.mapElement.setIconMarkerInactive(marker);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-geo-ref-data\": true,\n      \"stzh-geo-ref-data--is-loading\": this.isLoading,\n      \"stzh-geo-ref-data--is-open\": this.isOpen,\n      \"stzh-geo-ref-data--has-filters\": this._availableTags.length > 0\n    };\n    return (\n      <Host>\n        <stzh-toastbar ref={el => (this.toastbarElement = el as HTMLStzhToastbarElement)} />\n        <div class=\"stzh-geo-ref-data__trigger\" onClick={() => this.initializeAndOpenMap()}>\n          <slot name=\"trigger\"></slot>\n        </div>\n        <stzh-overlay open={this.isLoading}>\n          <stzh-loader label=\"Daten werden geladen...\"></stzh-loader>\n        </stzh-overlay>\n        <div class={classes}>\n          <div class=\"stzh-geo-ref-data__header-wrapper\">\n            <stzh-header class=\"stzh-geo-ref-data__header\" hide-metabar={true} sticky=\"disabled\">\n              <slot name=\"logo\" slot=\"logo\"></slot>\n            </stzh-header>\n            <div class=\"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding\">\n              <stzh-heading class=\"stzh-geo-ref-data__heading-heading\" curve=\"h2\">\n                {this.heading}\n              </stzh-heading>\n              <stzh-button\n                class=\"stzh-geo-ref-data__overlay-close\"\n                icon=\"close\"\n                iconOnly={true}\n                size=\"small\"\n                variant=\"tertiary\"\n                onClick={this.handleOverlayCloseClick}\n              ></stzh-button>\n            </div>\n          </div>\n\n          <div class=\"stzh-geo-ref-data__content\">\n            <div\n              class=\"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding\"\n              ref={el => (this.metaWrapperElement = el as HTMLDivElement)}\n            >\n              <div class=\"stzh-geo-ref-data__filters\">\n                {this._availableTags.length > 0 && (\n                  <div class=\"stzh-geo-ref-data__filters-toggle\">\n                    <stzh-chip\n                      label={this.isViewportMedium ? \"Filter\" : \"\"}\n                      variant=\"filter\"\n                      icon=\"filtering\"\n                      onStzhClick={this.handleFilterToggleClick}\n                    ></stzh-chip>\n                  </div>\n                )}\n                <div\n                  class={{\n                    \"stzh-geo-ref-data__filters-content\": true,\n                    \"stzh-geo-ref-data__filters-content--visible\": !this.isViewportLarge && this.isFiltersContentOpen\n                  }}\n                >\n                  <stzh-chipselect\n                    label-hidden={true}\n                    label=\"Tags\"\n                    data={this.enhancedTags}\n                    onStzhChange={this.handleFilterChange}\n                    multiple={true}\n                    defaultValue={this.appliedFilters}\n                    value={this.appliedFilters}\n                  ></stzh-chipselect>\n                  <div class=\"stzh-geo-ref-data__filters-apply-button\">\n                    <stzh-button size=\"small\" fullwidth={true} onStzhClick={this.handleApplyFilterClick}>\n                      Anwenden\n                    </stzh-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"stzh-geo-ref-data__search\">\n                <stzh-input\n                  name=\"stzh-datatable-search\"\n                  onStzhChange={this.handleSearchChange}\n                  hideOptional={true}\n                  label=\"Suche\"\n                  type=\"search\"\n                ></stzh-input>\n              </div>\n              <div class=\"stzh-geo-ref-data__results-toggle\">\n                <stzh-chip\n                  onStzhClick={this.toggleViewMode}\n                  label={this.viewmode === \"map\" ? \"Liste\" : \"Karte\"}\n                  icon={this.viewmode === \"map\" ? \"bulleted-list\" : \"map\"}\n                  variant=\"filter\"\n                ></stzh-chip>\n              </div>\n            </div>\n            <div class=\"stzh-geo-ref-data__results-wrapper\">\n              <div class={`stzh-geo-ref-data__results-map ${this.viewmode === \"map\" ? \"active\" : \"inactive\"}`}>\n                <stzh-olmap\n                  class=\"stzh-geo-ref-data__ol-map\"\n                  centerMarker={false}\n                  writeExtentToUrlEnabled={this.isOpen}\n                  ref={el => (this.mapElement = el as HTMLStzhOlmapElement)}\n                ></stzh-olmap>\n                <div class=\"stzh-geo-ref-data__map-controls\">\n                  <stzh-checkbox\n                    label=\"Treffer an Kartenausschnitt anpassen\"\n                    checked={this.showOnlyResultsForCurrentExtent}\n                    hideOptional={true}\n                    onStzhChange={this.handleExtentVisibilityChange}\n                  ></stzh-checkbox>\n                </div>\n              </div>\n              <div\n                class={`stzh-geo-ref-data__results-list ${this.viewmode === \"list\" ? \"active\" : \"inactive\"}`}\n                ref={el => (this.resultsListElement = el as HTMLDivElement)}\n              >\n                {this.finalResults && (\n                  <Fragment>\n                    <div class=\"stzh-geo-ref-data__list-search\">\n                      <stzh-input\n                        name=\"stzh-datatable-search\"\n                        onStzhChange={this.handleSearchChange}\n                        hideOptional={true}\n                        label=\"Suche\"\n                        type=\"search\"\n                      ></stzh-input>\n                    </div>\n                    <stzh-text class=\"stzh-geo-ref-data__results-list-heading\">\n                      {this.finalResults.length} Treffer\n                    </stzh-text>\n                    <div class=\"stzh-geo-ref-data__teaser-list\">\n                      {this.finalResultsPaginatedList.map(item => (\n                        <div\n                          class=\"stzh-poi-teaser\"\n                          onMouseEnter={() => this.handlePoiTeaserMouseEnter(item)}\n                          onMouseLeave={() => this.handlePoiTeaserMouseLeave(item)}\n                        >\n                          <a class=\"stzh-poi-teaser-link\" href={this.baseUrlOverride + item.path}></a>\n                          <div class=\"stzh-poi-teaser-content\">\n                            <stzh-heading curve=\"lead\">{item.poiname}</stzh-heading>\n                            {item.description && <stzh-text size=\"micro\">{item.description}</stzh-text>}\n                            {item.data &&\n                              item.data.length > 0 &&\n                              item.data.map(item => (\n                                <div class=\"stzh-poi-teaser-list-item\">\n                                  <stzh-icon name={item.icon}></stzh-icon>\n                                  <stzh-text size=\"micro\">{item.text}</stzh-text>\n                                </div>\n                              ))}\n                          </div>\n                          {item.image && (\n                            <div class=\"stzh-poi-teaser__image-wrapper\">\n                              <stzh-ratio\n                                ratio={\"2:1\"}\n                                ratio-large={\"5:4\"}\n                                ratio-ultra={\"1:1\"}\n                                portrait={this.isViewportLarge}\n                                class=\"stzh-poi-teaser__ratio\"\n                              ></stzh-ratio>\n                              <div class=\"stzh-poi-teaser__image-inner-wrapper\">\n                                <img src={this.baseUrlOverride + item.image} alt={\"Foto von \" + item.poiname} />\n                              </div>\n                            </div>\n                          )}\n                        </div>\n                      ))}\n                    </div>\n                    {this.canLoadMore && (\n                      <div class=\"stzh-geo-ref-data__teaser-load-more\">\n                        <stzh-button onStzhClick={() => this.loadMore()}>Weitere laden</stzh-button>\n                      </div>\n                    )}\n                  </Fragment>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-ef38e1fe.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhMicrositeTeaserlistCss","StzhMicrositeTeaserlist","this","_tags","_tagChips","_filteredItems","_filteredSlicedItems","_showMoreLink","handleChange","event","showItems","_initialShowItems","activeFilter","detail","value","handleMoreClick","stepItems","filterHandler","items","filter","item","tags","some","tag","slice","length","tagsWatcher","JSON","parse","map","label","name","id","variant","counter","indexOf","toString","apiWatcher","newValue","apiUrl","api","replace","localization","$locale","data","axios","get","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","class","tagsLabel","onStzhChange","layout","href","link","image","slot","src","title","description","showMore","onClick"],"sources":["src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.scss?tag=stzh-microsite-teaserlist&encapsulation=scoped","src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-microsite-teaserlist {\n  &__filter {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhMicrositeTeaserlistLocalizedText } from './stzh-microsite-teaserlist.localization';\n\nimport {\n  StzhMicrositeTeaserlistTag,\n  StzhMicrositeTeaserlistItem,\n  StzhChipselectItem,\n  StzhChipselectChangeEvent\n} from \"../../index\";\n\n/**\n * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n */\n@Component({\n  tag: \"stzh-microsite-teaserlist\",\n  styleUrl: \"stzh-microsite-teaserlist.scss\",\n  scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n  /** Translation strings */\n  @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  /** Tags */\n  @Prop() tags: string | StzhMicrositeTeaserlistTag[] = [];\n  private _tags: StzhMicrositeTeaserlistTag[] = [];\n  private _tagChips: StzhChipselectItem[] = [];\n\n  /** Numbers of items currently shown */\n  @Prop({ mutable: true }) showItems: number = 6;\n  private _initialShowItems: number;\n\n  /** Numbers of item shown with each load more action */\n  @Prop() stepItems: number = 6;\n\n  @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n  /** Active filter */\n  @State() activeFilter: string = \"\";\n\n  @State() items: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n  private _showMoreLink: boolean = false;\n\n  @Watch(\"items\")\n  @Watch(\"showItems\")\n  @Watch(\"activeFilter\")\n  async filterHandler() {\n    this._filteredItems = this.items\n      .filter((item) => {\n        // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n        return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n      });\n\n    this._filteredSlicedItems = this._filteredItems\n      .slice(0, this.showItems)\n\n    this._showMoreLink = this.showItems < this._filteredItems.length;\n  }\n\n  @Watch(\"items\")\n  @Watch(\"tags\")\n  async tagsWatcher() {\n    if (typeof this.tags === \"string\") {\n      this._tags = JSON.parse(this.tags);\n    } else {\n      this._tags = this.tags;\n    }\n\n    this._tagChips = this._tags.map((tag) => ({\n      \"label\": tag.name,\n      \"value\": tag.id,\n      \"variant\": \"filter\",\n      \"counter\": ((tag.id)\n        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n        : this.items.length).toString()\n    }));\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.items = data.items;\n    this.showItems = this._initialShowItems;\n  }\n\n  private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n    this.showItems = this._initialShowItems;\n    this.activeFilter = typeof event.detail.value === \"string\" ? event.detail.value : event.detail.value[0] || \"\";\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.showItems + this.stepItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n    }\n\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-microsite-teaserlist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._tagChips.length > 0 &&\n            <stzh-chipselect\n              hide-optional\n              label-hidden\n              class=\"stzh-microsite-teaserlist__filter\"\n              label={this.localization.tagsLabel}\n              data={this._tagChips}\n              onStzhChange={this.handleChange}\n            ></stzh-chipselect>\n          }\n\n          <stzh-cardlist layout=\"teasers\">\n            {this._filteredSlicedItems.map((item) =>\n              <stzh-card href={item.link}>\n                {item.image &&\n                  <stzh-ratio slot=\"image\">\n                    <img src={item.image} />\n                  </stzh-ratio>\n                }\n                {item.title &&\n                  <div slot=\"heading\">{item.title}</div>\n                }\n                {/* <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> */}\n                {item.description &&\n                  <div slot=\"content\">{item.description}</div>\n                }\n                {/* <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n              </stzh-card>\n            )}\n          </stzh-cardlist>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-microsite-teaserlist__show-more\">\n              <stzh-button\n                variant=\"secondary\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAA6B,k/E,MC8BtBC,EAAuB,M,yBAS1BC,KAAAC,MAAsC,GACtCD,KAAAE,UAAkC,GAelCF,KAAAG,eAAgD,GAChDH,KAAAI,qBAAsD,GACtDJ,KAAAK,cAAyB,MAoDzBL,KAAAM,aAAgBC,IACtBP,KAAKQ,UAAYR,KAAKS,kBACtBT,KAAKU,oBAAsBH,EAAMI,OAAOC,QAAU,SAAWL,EAAMI,OAAOC,MAAQL,EAAMI,OAAOC,MAAM,IAAM,EAAE,EAGvGZ,KAAAa,gBAAkB,KACxBb,KAAKQ,UAAYR,KAAKQ,UAAYR,KAAKc,SAAS,E,yDA7EI,G,eAKT,E,eAIjB,E,kBAKI,G,WAEgB,E,CAQhD,mBAAMC,GACJf,KAAKG,eAAiBH,KAAKgB,MACxBC,QAAQC,GAEClB,KAAKU,eAAiB,GAAMQ,EAAKC,KAAKC,MAAKC,GAAOrB,KAAKU,eAAiBW,IAAO,OAG3FrB,KAAKI,qBAAuBJ,KAAKG,eAC9BmB,MAAM,EAAGtB,KAAKQ,WAEjBR,KAAKK,cAAgBL,KAAKQ,UAAYR,KAAKG,eAAeoB,M,CAK5D,iBAAMC,GACJ,UAAWxB,KAAKmB,OAAS,SAAU,CACjCnB,KAAKC,MAAQwB,KAAKC,MAAM1B,KAAKmB,K,KACxB,CACLnB,KAAKC,MAAQD,KAAKmB,I,CAGpBnB,KAAKE,UAAYF,KAAKC,MAAM0B,KAAKN,IAAG,CAClCO,MAASP,EAAIQ,KACbjB,MAASS,EAAIS,GACbC,QAAW,SACXC,SAAaX,EAAM,GACfrB,KAAKgB,MAAMC,QAAOC,GAAQA,EAAKC,KAAKc,QAAQZ,EAAIS,KAAO,IAAGP,OAC1DvB,KAAKgB,MAAMO,QAAQW,c,CAK3B,gBAAMC,CAAWC,GACf,IAAKA,EAAU,CACb,M,CAGF,IAAIC,EAASrC,KAAKsC,IAAIC,QAAQ,WAAYvC,KAAKwC,aAAaC,SAG5D,MAAMC,KAAEA,SAAeC,EAAMC,IAAIP,GAEjCrC,KAAKgB,MAAQ0B,EAAK1B,MAClBhB,KAAKQ,UAAYR,KAAKS,iB,CAYxB,uBAAMoC,GACJ7C,KAAKS,kBAAoBT,KAAKQ,UAE9B,IAAKR,KAAKwC,aAAc,CACtBxC,KAAKwC,mBAAqBM,OAAOC,eAAeC,MAAMC,kBAAkBjD,KAAKkD,QAAS,uB,OAGlFlD,KAAKmC,WAAWnC,KAAKsC,I,CAG7B,MAAAa,GACE,MAAMC,EAAU,CACd,4BAA6B,MAG/B,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACTpD,KAAKE,UAAUqB,OAAS,GACvB8B,EAAA,4DAGEE,MAAM,oCACN3B,MAAO5B,KAAKwC,aAAagB,UACzBd,KAAM1C,KAAKE,UACXuD,aAAczD,KAAKM,eAIvB+C,EAAA,iBAAeK,OAAO,WACnB1D,KAAKI,qBAAqBuB,KAAKT,GAC9BmC,EAAA,aAAWM,KAAMzC,EAAK0C,MACnB1C,EAAK2C,OACJR,EAAA,cAAYS,KAAK,SACfT,EAAA,OAAKU,IAAK7C,EAAK2C,SAGlB3C,EAAK8C,OACJX,EAAA,OAAKS,KAAK,WAAW5C,EAAK8C,OAG3B9C,EAAK+C,aACJZ,EAAA,OAAKS,KAAK,WAAW5C,EAAK+C,iBAOjCjE,KAAKK,eACJgD,EAAA,OAAKE,MAAM,wCACTF,EAAA,eACEtB,QAAQ,YACRH,MAAO5B,KAAKwC,aAAa0B,SACzBC,QAASnE,KAAKa,oB"}

package/dist/stzh-components/p-f156650a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as s,g as a}from"./p-c7bfac7a.js";const n=".sc-stzh-eventdata-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-eventdata-h,[stzh-hidden].sc-stzh-eventdata-h{display:none}.sc-stzh-eventdata-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-eventdata-h *.sc-stzh-eventdata,.sc-stzh-eventdata-h *.sc-stzh-eventdata::before,.sc-stzh-eventdata-h *.sc-stzh-eventdata::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-eventdata-h .has-focus.sc-stzh-eventdata{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-eventdata-h .stzh-fylingfocus-focused.sc-stzh-eventdata{outline-style:none !important}.sc-stzh-eventdata-h .stzh-fylingfocus-focused.sc-stzh-eventdata::-moz-focus-inner{border:0 !important}.stzh-eventdata.sc-stzh-eventdata{display:flex;flex-direction:column;row-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-eventdata.sc-stzh-eventdata{flex-direction:row}}.stzh-eventdata__label.sc-stzh-eventdata{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);flex-shrink:0}@media screen and (min-width: 900px){.stzh-eventdata__label.sc-stzh-eventdata{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-eventdata__label.sc-stzh-eventdata{min-width:10rem}}@media screen and (min-width: 900px){.stzh-eventdata__label.sc-stzh-eventdata{min-width:10.875rem}}@media screen and (min-width: 1260px){.stzh-eventdata__label.sc-stzh-eventdata{min-width:11.375rem}}.stzh-eventdata__content.sc-stzh-eventdata{flex-grow:1;display:flex;flex-direction:column;row-gap:var(--stzh-space-xsmall)}";const i=class{constructor(e){t(this,e);this.label=""}render(){const t={"stzh-eventdata":true};return e(s,null,e("div",{class:t},e("div",{class:"stzh-eventdata__label"},this.label?this.label:e("slot",{name:"label"})),e("div",{class:"stzh-eventdata__content"},e("slot",null))))}get element(){return a(this)}};i.style=n;export{i as stzh_eventdata};
-//# sourceMappingURL=p-f156650a.entry.js.map