@oiz/stzh-components 3.2.0-beta1 → 3.2.0

package/dist/components/stzh-clamp2.js.map

@@ -1 +1 @@
-{"file":"stzh-clamp2.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space('xxsmall');\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-clamp2.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))));\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))));\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    @include mq($from: medium) {\n      margin-top: space('xxsmall');\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhClampClampEvent,\n  StzhClampExpandEvent\n} from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\"\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped\n      });\n    }\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  }\n\n  private handleMutaton = () => {\n    this.update();\n  }\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded\n    });\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded\n    };\n\n    return (\n      <Host\n        style={{\n          '--lines': this.lines ? this.lines.toString() : null,\n          '--lines-small': this.linesSmall ? this.linesSmall.toString() : null,\n          '--lines-medium': this.linesMedium ? this.linesMedium.toString() : null,\n          '--lines-large': this.linesLarge ? this.linesLarge.toString() : null,\n          '--lines-ultra': this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            ref={(el) => (this.textElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text\"\n          >\n            <slot></slot>\n          </div>\n\n          <div\n            ref={(el) => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped &&\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-datalist2.js.map

@@ -1 +1 @@
-{"file":"stzh-datalist2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n  // @prop --item-label-min-width: Min width of label\n  // --item-label-min-width: 120px;\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\n  // @include mq($from: medium) { // was smallheader before\n  //   --item-label-min-width: 144px;\n  // }\n\n  // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n  //   --item-label-min-width: none;\n  // }\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  // ::slotted(.layout_column) {\n  //   display: contents;\n\n  //   .section {\n  //     display: contents;\n  //   }\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","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirection,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\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  /** 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  /** 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(\"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.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--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 &&\n                    <stzh-datalist items={item.items}></stzh-datalist>\n                  }\n                </stzh-datalist-item>\n              )}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-datalist2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n  // @prop --item-label-min-width: Min width of label\n  // --item-label-min-width: 120px;\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\n  // @include mq($from: medium) { // was smallheader before\n  //   --item-label-min-width: 144px;\n  // }\n\n  // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n  //   --item-label-min-width: none;\n  // }\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  // ::slotted(.layout_column) {\n  //   display: contents;\n\n  //   .section {\n  //     display: contents;\n  //   }\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","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirection,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} 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  /** 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  /** 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(\"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.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--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 &&\n                    <stzh-datalist items={item.items}></stzh-datalist>\n                  }\n                </stzh-datalist-item>\n              )}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-datamessagelist.js.map

@@ -1 +1 @@
-{"file":"stzh-datamessagelist.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,2rDAA2rD;;MCc7sDA,qBAAmB;;;;;EAG9B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,IACjD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhDatamessagelist"],"sources":["src/components/stzh-datamessagelist/stzh-datamessagelist.scss?tag=stzh-datamessagelist&encapsulation=scoped","src/components/stzh-datamessagelist/stzh-datamessagelist.tsx"],"sourcesContent":[":host {\n  ::slotted(*:not(:last-child)) {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n}\n\n.stzh-datamessagelist {\n  @include mq($to: small) {\n    margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n    margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n} from \"@stencil/core\";\n\n/**\n */\n@Component({\n  tag: \"stzh-datamessagelist\",\n  styleUrl: \"stzh-datamessagelist.scss\",\n  scoped: true\n})\nexport class StzhDatamessagelist {\n  @Element() element: HTMLStzhDatamessagelistElement;\n\n  render() {\n    const classes = {\n      \"stzh-datamessagelist\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datamessagelist__list\" role=\"list\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-datamessagelist.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,2rDAA2rD;;MCe7sDA,qBAAmB;;;;;EAG9B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,IACjD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhDatamessagelist"],"sources":["src/components/stzh-datamessagelist/stzh-datamessagelist.scss?tag=stzh-datamessagelist&encapsulation=scoped","src/components/stzh-datamessagelist/stzh-datamessagelist.tsx"],"sourcesContent":[":host {\n  ::slotted(*:not(:last-child)) {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n}\n\n.stzh-datamessagelist {\n  @include mq($to: small) {\n    margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n    margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-datamessagelist\",\n  styleUrl: \"stzh-datamessagelist.scss\",\n  scoped: true\n})\nexport class StzhDatamessagelist {\n  @Element() element: HTMLStzhDatamessagelistElement;\n\n  render() {\n    const classes = {\n      \"stzh-datamessagelist\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datamessagelist__list\" role=\"list\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-datatable.js

@@ -88,19 +88,19 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     this.stzhSortDirectionChange = createEvent(this, "stzhSortDirectionChange", 7);
     this.handleSortByDropdownChange = async (event) => {
       const target = event.target;
-      const sortBy = await target.getValue();
+      const sortBy = (await target.getValue());
       this.sortBy = sortBy;
     };
     this.handleSortDirectionDropdownChange = async (event) => {
       const target = event.target;
-      const sortDirection = await target.getValue();
+      const sortDirection = (await target.getValue());
       this.sortDirection = sortDirection;
     };
     this.handleRowClick = (event, row) => {
       this.stzhRowClick.emit({
         component: "stzh-datatable",
         row,
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.handleCellClick = (event, row, column, cellIndex, rowIndex) => {
@@ -110,14 +110,14 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
         column,
         cellIndex,
         rowIndex,
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.handleSortClick = (event, column) => {
       this.stzhSortClick.emit({
         component: "stzh-datatable",
         column,
-        originalEvent: event
+        originalEvent: event,
       });
       this.toggleSort(column.key);
     };
@@ -142,14 +142,12 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       cells.forEach((cell, index) => {
         const offsetLeft = cell.offsetLeft;
         const offsetRight = offsetLeft + cell.offsetWidth;
-        if (this.hasScrollLeft
-          && this._columns[index].fixed === "left"
-          && Math.ceil(wrapperScrollLeft) >= offsetLeft) {
+        if (this.hasScrollLeft && this._columns[index].fixed === "left" && Math.ceil(wrapperScrollLeft) >= offsetLeft) {
           this.cellsStickyLeft.push(index);
         }
-        if (this.hasScrollRight
-          && this._columns[index].fixed === "right"
-          && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight) {
+        if (this.hasScrollRight &&
+          this._columns[index].fixed === "right" &&
+          Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight) {
           this.cellsStickyRight.push(index);
         }
       });
@@ -218,7 +216,7 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     const csvData = await response.text();
     const { columns, rows } = await this.parseCsvToJson(csvData);
     if (this.csvHeader) {
-      this.columns = columns.map((column) => {
+      this.columns = columns.map(column => {
         var _a;
         return (Object.assign(Object.assign({}, column), (((_a = this._columns) === null || _a === void 0 ? void 0 : _a.find(({ key }) => key === column.key)) || {})));
       });
@@ -240,7 +238,7 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       const row = {};
       function transformRowCell(cellData) {
         const baseCellData = {
-          value: ""
+          value: "",
         };
         if (typeof cellData === "object") {
           return Object.assign(Object.assign({}, baseCellData), cellData);
@@ -274,14 +272,14 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     this.stzhSortByChange.emit({
       component: "stzh-datatable",
       value,
-      oldValue
+      oldValue,
     });
   }
   sortDirectionWatcher(value, oldValue) {
     this.stzhSortDirectionChange.emit({
       component: "stzh-datatable",
       value,
-      oldValue
+      oldValue,
     });
   }
   async parseCsvToJson(csvData) {
@@ -289,23 +287,23 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       papaparse_min.parse(csvData, {
         header: this.csvHeader,
         dynamicTyping: this.csvDynamicTyping,
-        complete: (result) => {
-          const normalizedData = result.data.map((row) => {
+        complete: result => {
+          const normalizedData = result.data.map(row => {
             const normalizedRow = {};
-            Object.keys(row).forEach((key) => {
+            Object.keys(row).forEach(key => {
               normalizedRow[key.toLowerCase()] = row[key];
             });
             return normalizedRow;
           });
           resolve({
-            columns: Object.keys(result.data[0]).map((key) => ({
+            columns: Object.keys(result.data[0]).map(key => ({
               key: key.toLowerCase(),
               text: key,
             })),
             rows: normalizedData,
           });
         },
-        error: (error) => {
+        error: error => {
           reject(error);
         },
       });
@@ -316,26 +314,25 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       component: "stzh-datatable",
       column,
       index,
-      originalEvent: event
+      originalEvent: event,
     });
   }
   buildSearchIndex() {
-    if (!this._rows || this._rows.length === 0
-      || !this._columns || this._columns.length === 0) {
+    if (!this._rows || this._rows.length === 0 || !this._columns || this._columns.length === 0) {
       return;
     }
     this.searchIndex = new flexsearch_bundle_min.Document({
       tokenize: "forward",
       matcher: {
-        '[äà]': 'a',
-        '[öó]': 'o',
-        '[üûúù]': 'u',
-        '[éè]': 'e'
+        "[äà]": "a",
+        "[öó]": "o",
+        "[üûúù]": "u",
+        "[éè]": "e",
       },
       document: {
         id: this.idField,
-        index: this._columns.map(column => column.key)
-      }
+        index: this._columns.map(column => column.key),
+      },
     });
     this._rows.forEach(row => {
       const rowData = {};
@@ -360,15 +357,14 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     this._rowsFiltered = [];
     if (this.query) {
       let resultIds = [];
-      this.searchIndex.search(this.query).forEach((result) => {
+      this.searchIndex.search(this.query).forEach(result => {
         resultIds = [...resultIds, ...result.result];
       });
       resultIds = resultIds.filter(function (item, pos) {
         return resultIds.indexOf(item) === pos;
       });
-      this._rows.forEach((row) => {
-        if (resultIds.includes(row[this.idField].value)
-          || resultIds.includes(row[this.idField].value.toString())) {
+      this._rows.forEach(row => {
+        if (resultIds.includes(row[this.idField].value) || resultIds.includes(row[this.idField].value.toString())) {
           this._rowsFiltered.push(row);
         }
       });
@@ -377,7 +373,7 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       this._rowsFiltered = [...this._rows];
     }
     if (this.sortBy) {
-      const columnConfig = this._columns.find((column) => column.key === this.sortBy);
+      const columnConfig = this._columns.find(column => column.key === this.sortBy);
       let column = this.sortBy;
       let type = null;
       if (typeof columnConfig.sort === "object") {
@@ -434,14 +430,14 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       "has-list": this.showList,
       "has-heading": headingSlotUsed,
       "has-action-or-search": actionButtonSlotUsed || !this.hideSearch,
-      "has-header": headingSlotUsed || actionButtonSlotUsed || !this.hideSearch
+      "has-header": headingSlotUsed || actionButtonSlotUsed || !this.hideSearch,
     };
     const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);
-    const firstHeaderColumn = this._columns.find((column) => column.isHeader);
+    const firstHeaderColumn = this._columns.find(column => column.isHeader);
     const sortByOptions = [
       {
         text: this.localization.sortByDefaultOption,
-        value: ''
+        value: "",
       },
       ...this._columns
         .filter(column => !!column.sort)
@@ -451,17 +447,17 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
           value: column.key,
           text: (_a = this.localization.sortByOption) === null || _a === void 0 ? void 0 : _a.replace(/\{column\}/gi, column.text),
         });
-      })
+      }),
     ];
     const sortDirectionOptions = [
       {
-        value: 'asc',
+        value: "asc",
         text: (_a = this.localization.sortDirectionOption) === null || _a === void 0 ? void 0 : _a.replace(/\{direction\}/gi, this.localization.asc),
       },
       {
-        value: 'desc',
+        value: "desc",
         text: (_b = this.localization.sortDirectionOption) === null || _b === void 0 ? void 0 : _b.replace(/\{direction\}/gi, this.localization.desc),
-      }
+      },
     ];
     const getCellClasses = (column, row, index) => {
       var _a, _b, _c, _d, _e;
@@ -476,48 +472,71 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
         "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
         "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
         [`align-${((_b = row[column.key]) === null || _b === void 0 ? void 0 : _b.align) || column.align}`]: !!((_c = row[column.key]) === null || _c === void 0 ? void 0 : _c.align) || !!column.align,
-        [`valign-${((_d = row[column.key]) === null || _d === void 0 ? void 0 : _d.valign) || column.valign}`]: !!((_e = row[column.key]) === null || _e === void 0 ? void 0 : _e.valign) || !!column.valign
+        [`valign-${((_d = row[column.key]) === null || _d === void 0 ? void 0 : _d.valign) || column.valign}`]: !!((_e = row[column.key]) === null || _e === void 0 ? void 0 : _e.valign) || !!column.valign,
       };
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datatable__header" }, h("div", { class: "stzh-datatable__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-datatable__sub-header" }, !this.hideSearch &&
-      h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-datatable__search", size: "small", name: "stzh-datatable-search", onStzhChange: this.onInputChange, hideOptional: true, label: this.localization.searchLabel, type: "search" }), h("div", { class: "stzh-datatable__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-datatable__outer-wrapper" }, h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-datatable__wrapper", onScroll: this.handleScroll }, h("table", { class: {
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-datatable__header" }, h("div", { class: "stzh-datatable__heading" }, h("slot", { name: "heading" })), h("div", { class: "stzh-datatable__sub-header" }, !this.hideSearch && (h("stzh-input", { ref: el => (this.input = el), class: "stzh-datatable__search", size: "small", name: "stzh-datatable-search", onStzhChange: this.onInputChange, hideOptional: true, label: this.localization.searchLabel, type: "search" })), h("div", { class: "stzh-datatable__action-button" }, h("slot", { name: "action-button" })))), h("div", { class: "stzh-datatable__outer-wrapper" }, h("div", { ref: el => (this.tableWrapper = el), class: "stzh-datatable__wrapper", onScroll: this.handleScroll }, h("table", { class: {
         "stzh-datatable__table": true,
         "has-layout-fixed": this.tableLayout === "fixed",
-      } }, !this.hideColumnHeadings &&
-      h("thead", { class: "stzh-datatable__thead" }, h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, this._columns.map((column, index) => h("th", { onClick: (event) => this.handleHeadingCellClick(event, column, index), style: column.style, class: {
-          "stzh-datatable__cell stzh-datatable__cell--head": true,
-          "is-sticky-left": column.fixed === "left",
-          "is-sticky-right": column.fixed === "right",
-          "is-sortable": !!column.sort,
-          "has-sticked": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,
-          "has-sorted": column.key === this.sortBy,
-          "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
-          "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
-          [`align-${column.align}`]: !!column.align,
-          [`valign-${column.valign}`]: !!column.valign
-        } }, !column.hideColumnHeading &&
-        (column.sort ?
-          h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: (event) => this.handleSortClick(event, column), "s-object-id": column.analyticsId || `${column.text} ${this.localization.columnSort}` }, h("span", null, column.text), h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon", a11yTitle: this.localization.columnSort }))
-          :
-            h("span", null, column.text)))))), h("tbody", { class: "stzh-datatable__tbody" }, this._rowsShown.map((row, rowIndex) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body", onClick: (event) => this.handleRowClick(event, row) }, this._columns.map((column, index) => {
-      var _a;
-      return (!!((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.isHeader) || !!column.isHeader)
-        ?
-          h("th", { id: row[column.key].id, onClick: (event) => this.handleCellClick(event, row, column, index, rowIndex), innerHTML: row[column.key].value.toString() || "", style: column.style, class: getCellClasses(column, row, index) })
-        :
-          h("td", { id: row[column.key].id, onClick: (event) => this.handleCellClick(event, row, column, index, rowIndex), innerHTML: row[column.key].value.toString() || "", style: column.style, class: getCellClasses(column, row, index) });
-    }))))))), this.showList &&
-      h("div", { class: "stzh-datatable__list-wrapper" }, sortByOptions.length > 1 &&
-        h("div", { class: "stzh-datatable__list-sort-wrapper" }, h("stzh-dropdown", { inline: true, "no-search": true, class: "stzh-datatable__list-sort-by-dropdown", variant: "plain", size: "small", items: [this.sortBy], options: sortByOptions, onStzhChange: this.handleSortByDropdownChange }), h("stzh-dropdown", { disabled: this.sortBy === '', inline: true, "no-search": true, class: "stzh-datatable__list-sort-direction-dropdown", variant: "plain", size: "small", items: [this.sortDirection], options: sortDirectionOptions, onStzhChange: this.handleSortDirectionDropdownChange })), h("stzh-accordion", { variant: "table" }, this._rowsShown.map((row, index) => {
-        var _a, _b, _c, _d;
-        return h("stzh-accordion-item", { heading: ((_b = (_a = row[this.rowHeaderField]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toString())
-            || ((_d = (_c = row[firstHeaderColumn === null || firstHeaderColumn === void 0 ? void 0 : firstHeaderColumn.key]) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.toString())
-            || this.localization.defaultListRowHeading.replace(/\{n\}/ig, (index + 1).toString()) }, h("stzh-datalist", { variant: "table", columnsMedium: 2 }, this._columns.map((column) => {
-          var _a, _b;
-          return h("stzh-datalist-item", { label: column.text, value: ((_b = (_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toString()) || "" });
-        })));
-      }))), this.pageSize !== null && totalPages > 1 &&
-      h("div", { class: "stzh-datatable__pagination-wrapper" }, h("stzh-pagination", { value: this.page, total: totalPages, onStzhChange: this.onPaginationChange })))));
+      } }, !this.hideColumnHeadings && (h("thead", { class: "stzh-datatable__thead" }, h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, (() => {
+      let colspanOffset = 0;
+      return this._columns.map((column, index) => {
+        if (colspanOffset > 0) {
+          colspanOffset--;
+          return null;
+        }
+        const colspan = column.colspan || 1;
+        if (colspan > 1) {
+          colspanOffset = colspan - 1;
+        }
+        return (h("th", Object.assign({ onClick: event => this.handleHeadingCellClick(event, column, index), style: column.style, class: {
+            "stzh-datatable__cell stzh-datatable__cell--head": true,
+            "is-sticky-left": column.fixed === "left",
+            "is-sticky-right": column.fixed === "right",
+            "is-sortable": !!column.sort,
+            "has-sticked": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,
+            "has-sorted": column.key === this.sortBy,
+            "has-sorted-asc": column.key === this.sortBy && this.sortDirection === "asc",
+            "has-sorted-desc": column.key === this.sortBy && this.sortDirection === "desc",
+            [`align-${column.align}`]: !!column.align,
+            [`valign-${column.valign}`]: !!column.valign,
+          } }, (colspan > 1 ? { colspan } : {}), (column.rowspan ? { rowspan: column.rowspan } : {})), !column.hideColumnHeading &&
+          (column.sort ? (h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: event => this.handleSortClick(event, column), "s-object-id": column.analyticsId || `${column.text} ${this.localization.columnSort}` }, h("span", null, column.text), h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon", a11yTitle: this.localization.columnSort }))) : (h("span", null, column.text)))));
+      });
+    })()))), h("tbody", { class: "stzh-datatable__tbody" }, (() => {
+      const rowspanOffsets = [];
+      return this._rowsShown.map((row, rowIndex) => (h("tr", { class: "stzh-datatable__row stzh-datatable__row--body", onClick: event => this.handleRowClick(event, row) }, (() => {
+        let colspanOffset = 0;
+        return this._columns.map((column, index) => {
+          if (rowspanOffsets[index]) {
+            rowspanOffsets[index]--;
+            return null;
+          }
+          if (colspanOffset > 0) {
+            colspanOffset--;
+            return null;
+          }
+          const cell = row[column.key];
+          const colspan = (cell === null || cell === void 0 ? void 0 : cell.colspan) || 1;
+          const rowspan = (cell === null || cell === void 0 ? void 0 : cell.rowspan) || 1;
+          if (colspan > 1) {
+            colspanOffset = colspan - 1;
+          }
+          if (rowspan > 1) {
+            rowspanOffsets[index] = rowspan - 1;
+          }
+          return (cell === null || cell === void 0 ? void 0 : cell.isHeader) || column.isHeader ? (h("th", Object.assign({ id: cell.id, onClick: event => this.handleCellClick(event, row, column, index, rowIndex), innerHTML: cell.value.toString() || "", style: column.style }, (colspan > 1 ? { colspan } : {}), (rowspan > 1 ? { rowspan } : {}), { class: getCellClasses(column, row, index) }))) : (h("td", Object.assign({ id: cell.id, onClick: event => this.handleCellClick(event, row, column, index, rowIndex), innerHTML: cell.value.toString() || "", style: column.style }, (colspan > 1 ? { colspan } : {}), (rowspan > 1 ? { rowspan } : {}), { class: getCellClasses(column, row, index) })));
+        });
+      })())));
+    })())))), this.showList && (h("div", { class: "stzh-datatable__list-wrapper" }, sortByOptions.length > 1 && (h("div", { class: "stzh-datatable__list-sort-wrapper" }, h("stzh-dropdown", { inline: true, "no-search": true, class: "stzh-datatable__list-sort-by-dropdown", variant: "plain", size: "small", items: [this.sortBy], options: sortByOptions, onStzhChange: this.handleSortByDropdownChange }), h("stzh-dropdown", { disabled: this.sortBy === "", inline: true, "no-search": true, class: "stzh-datatable__list-sort-direction-dropdown", variant: "plain", size: "small", items: [this.sortDirection], options: sortDirectionOptions, onStzhChange: this.handleSortDirectionDropdownChange }))), h("stzh-accordion", { variant: "table" }, this._rowsShown.map((row, index) => {
+      var _a, _b, _c, _d;
+      return (h("stzh-accordion-item", { heading: ((_b = (_a = row[this.rowHeaderField]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toString()) ||
+          ((_d = (_c = row[firstHeaderColumn === null || firstHeaderColumn === void 0 ? void 0 : firstHeaderColumn.key]) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.toString()) ||
+          this.localization.defaultListRowHeading.replace(/\{n\}/gi, (index + 1).toString()) }, h("stzh-datalist", { variant: "table", columnsMedium: 2 }, this._columns.map(column => {
+        var _a, _b;
+        return (h("stzh-datalist-item", { label: column.text, value: ((_b = (_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.toString()) || "" }));
+      }))));
+    })))), this.pageSize !== null && totalPages > 1 && (h("div", { class: "stzh-datatable__pagination-wrapper" }, h("stzh-pagination", { value: this.page, total: totalPages, onStzhChange: this.onPaginationChange }))))));
   }
   get element() { return this; }
   static get watchers() { return {