@oiz/stzh-components 2.7.0 → 2.8.0-alpha

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-datalist-item.js","sourceRoot":"","sources":["../../../src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for nested datalist\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  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\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 and default to link icon) */\n  @Prop() icon: string;\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  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop() meta: string = \"\";\n\n  /** Status Label */\n  @Prop() statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Hide border lines */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\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  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  private datalist: HTMLStzhDatalistElement;\n\n  private actionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n    this.hideBorder = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Fragment>\n        <Item\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\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        >\n          {this.label}\n        </Item>\n\n        <Item\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-label={`${this.label}, ${this.value}, ${this.meta}`}\n          aria-controls={this.a11yControls}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n        >\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n          {this.value}\n        </Item>\n\n        <Item\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\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        >\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 && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n        </Item>\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        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      >\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 connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.direction = this.datalist.currentDirection;\n      this.hideBorder = this.datalist.hideBorder;\n\n      this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n      this.datalist = null;\n    }\n  }\n\n  async componentWillLoad() {\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\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--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n    };\n\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\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=\"tiny\"\n          aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n          iconOnly={true}\n          icon={this.icon}\n          onClick={this.actionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton)}\n              </div>\n            </Fragment>\n          }\n          <Item\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": 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          >\n            {this.href &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            }\n\n            {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\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\n            {(!this.href && this.icon) &&\n              (this.iconTooltip ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton())\n            }\n          </Item>\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"]}
+{"version":3,"file":"stzh-datalist-item.js","sourceRoot":"","sources":["../../../src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\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  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\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 and default to link icon) */\n  @Prop() icon: string;\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  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop() meta: string = \"\";\n\n  /** Status Label */\n  @Prop() statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Hide border lines */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\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  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private actionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n    this.hideBorder = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Fragment>\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        >\n          {this.label}\n        </Item>\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-controls={this.a11yControls}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n        >\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n          <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n            <slot name=\"value\"></slot>\n          </stzh-richtext>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this.meta ? 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        >\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 && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n        </Item>\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      >\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 connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.direction = this.datalist.currentDirection;\n      this.hideBorder = this.datalist.hideBorder;\n\n      this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n      this.datalist = null;\n    }\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !this.href && 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--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n    };\n\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\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=\"tiny\"\n          aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n          iconOnly={true}\n          icon={this.icon}\n          onClick={this.actionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton)}\n              </div>\n            </Fragment>\n          }\n          <Item\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\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n          >\n            {this.href &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            }\n\n            {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\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\n            {hasActionButton &&\n              (this.iconTooltip ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton())\n            }\n          </Item>\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"]}

package/dist/collection/components/stzh-datatable/stzh-datatable.css

@@ -127,6 +127,7 @@ stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
 
 .stzh-datatable {
   /* Has sorted */
+  /* Showing list on mikro */
   /* Scroll left/right shadow variant */
 }
 .stzh-datatable__header {
@@ -203,6 +204,13 @@ stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
   overflow-x: auto;
   max-height: var(--max-height);
 }
+.stzh-datatable__pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+.stzh-datatable__pagination-wrapper:not(:empty) {
+  margin-top: var(--stzh-space-medium);
+}
 .stzh-datatable__sort-button {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
@@ -347,6 +355,19 @@ stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
 .stzh-datatable__cell.has-sorted-desc .stzh-datatable__sort-icon {
   transform: rotate(180deg);
 }
+.stzh-datatable.has-list .stzh-datatable__outer-wrapper {
+  display: none;
+}
+@media screen and (min-width: 600px) {
+  .stzh-datatable.has-list .stzh-datatable__outer-wrapper {
+    display: block;
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-datatable.has-list .stzh-datatable__list-wrapper {
+    display: none;
+  }
+}
 .stzh-datatable.has-scroll-left-shadow .stzh-datatable__outer-wrapper::before, .stzh-datatable.has-scroll-right-shadow .stzh-datatable__outer-wrapper::after {
   opacity: 1;
 }

package/dist/collection/components/stzh-datatable/stzh-datatable.js

@@ -54,12 +54,20 @@ export class StzhDatatable {
     this.onInputChange = () => {
       this.query = this.input.value;
     };
+    this.onPaginationChange = (event) => {
+      if (event.detail.component === "stzh-pagination") {
+        this.page = event.detail.page;
+      }
+    };
     this.localization = undefined;
     this.label = "";
     this.sortBy = "";
     this.sortDirection = "asc";
     this.tokenize = "forward";
     this.idField = "id";
+    this.showList = false;
+    this.page = 1;
+    this.pageSize = null;
     this.disableMinWidth = false;
     this.rows = [];
     this.columns = [];
@@ -72,6 +80,7 @@ export class StzhDatatable {
   }
   /** Toggle sort by a given column key like when clicking on a column header */
   async toggleSort(columnKey) {
+    this.page = 1;
     if (columnKey === this.sortBy) {
       this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
     }
@@ -131,7 +140,8 @@ export class StzhDatatable {
     this.updateScrollStates();
   }
   componentWillRender() {
-    this._rowsManaged = [];
+    this._rowsShown = [];
+    this._rowsFiltered = [];
     if (this.query) {
       let resultIds = [];
       this.searchIndex.search(this.query).forEach((result) => {
@@ -142,19 +152,26 @@ export class StzhDatatable {
       });
       this._rows.forEach((row) => {
         if (resultIds.indexOf(row[this.idField]) > -1) {
-          this._rowsManaged.push(row);
+          this._rowsFiltered.push(row);
         }
       });
     }
     else {
-      this._rowsManaged = [...this._rows];
+      this._rowsFiltered = [...this._rows];
     }
     if (this.sortBy) {
-      this._rowsManaged.sort((rowA, rowB) => {
+      this._rowsFiltered.sort((rowA, rowB) => {
         const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy]);
         return this.sortDirection === "asc" ? comparison : comparison / -1;
       });
     }
+    if (this.pageSize !== null) {
+      const pageEnd = this.page * this.pageSize;
+      this._rowsShown = this._rowsFiltered.slice(pageEnd - this.pageSize, pageEnd);
+    }
+    else {
+      this._rowsShown = [...this._rowsFiltered];
+    }
   }
   connectedCallback() {
     this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -172,8 +189,10 @@ export class StzhDatatable {
       "has-scroll-left": this.hasScrollLeft,
       "has-scroll-right": this.hasScrollRight,
       "has-scroll-left-shadow": this.hasScrollLeft && this.cellsStickyLeft.length === 0,
-      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0
+      "has-scroll-right-shadow": this.hasScrollRight && this.cellsStickyRight.length === 0,
+      "has-list": this.showList,
     };
+    const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);
     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" }, h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-datatable__search", size: "small", name: "stzh-datatable-search", onStzhChange: this.onInputChange, label: this.localization.searchLabel }), 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" }, h("thead", { class: "stzh-datatable__thead" }, h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, this._columns.map((column, index) => h("th", { class: {
         "stzh-datatable__cell stzh-datatable__cell--head": true,
         "is-sticky-left": column.fixed === "left",
@@ -188,7 +207,7 @@ export class StzhDatatable {
       } }, column.sort ?
       h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: () => this.toggleSort(column.key), "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", null, this._rowsManaged.map((row) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body" }, this._columns.map((column, index) => {
+        h("span", null, column.text))))), h("tbody", null, this._rowsShown.map((row) => h("tr", { class: "stzh-datatable__row stzh-datatable__row--body" }, this._columns.map((column, index) => {
       var _a, _b, _c, _d, _e;
       return h("td", { innerHTML: ((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.text) || row[column.key] || "", class: {
           "stzh-datatable__cell stzh-datatable__cell--body": true,
@@ -202,7 +221,12 @@ export class StzhDatatable {
           [`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
         } });
-    }))))))))));
+    }))))))), this.showList &&
+      h("div", { class: "stzh-datatable__list-wrapper" }, h("stzh-card-list", null, this._rowsShown.map((row) => h("stzh-card", null, h("stzh-datalist", { slot: "content", direction: "horizontal" }, this._columns.map((column) => {
+        var _a;
+        return h("stzh-datalist-item", { label: column.text, value: ((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.text) || row[column.key] || "" });
+      })))))), this.pageSize !== null && totalPages > 1 &&
+      h("div", { class: "stzh-datatable__pagination-wrapper" }, h("stzh-pagination", { value: this.page, total: totalPages, onStzhChange: this.onPaginationChange })))));
   }
   static get is() { return "stzh-datatable"; }
   static get originalStyleUrls() {
@@ -327,6 +351,60 @@ export class StzhDatatable {
         "reflect": false,
         "defaultValue": "\"id\""
       },
+      "showList": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to show table data as list on mikro breakpoint"
+        },
+        "attribute": "show-list",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "page": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current page"
+        },
+        "attribute": "page",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "pageSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If pagination should be shown, set a number of items to be shown by each page."
+        },
+        "attribute": "page-size",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "disableMinWidth": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-datatable/stzh-datatable.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-datatable.js","sourceRoot":"","sources":["../../../src/components/stzh-datatable/stzh-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { Document } from 'flexsearch/dist/flexsearch.bundle.js';\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhDatatableLocalizedText } from './stzh-datatable.localization';\n\n/**\n * @slot action-button - Slot for action `stzh-button` element\n */\n@Component({\n  tag: \"stzh-datatable\",\n  styleUrl: \"stzh-datatable.scss\"\n})\nexport class StzhDatatable {\n  /** Translation strings */\n  @Prop() localization: StzhDatatableLocalizedText;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Sort by given column key */\n  @Prop({ mutable: true }) sortBy: string = \"\";\n\n  /** Sort direction */\n  @Prop({ mutable: true }) sortDirection: \"asc\" | \"desc\" = \"asc\";\n\n  /** Tokenize type */\n  @Prop() tokenize: \"strict\" | \"forward\" | \"reverse\" | \"full\" = \"forward\";\n\n  /** ID field */\n  @Prop() idField = \"id\";\n\n  /**\n   * Whether to disable min-width of the table.\n   *\n   * If `false`, the default `min-width` is `700px`\n   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n   *\n   * You can also overwrite the min-width via CSS with the custom property `--min-width`.\n   */\n  @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n  /** Rows */\n  @Prop() rows: any[] | string = [];\n  private _rows: any[];\n  private _rowsManaged: any[];\n\n  /** Columns */\n  @Prop() columns: any[] | string = [];\n  private _columns: any[];\n\n  @State() query: string = \"\";\n  @State() hasScrollLeft: boolean = false;\n  @State() hasScrollRight: boolean = false;\n  @State() isScrollable: boolean = false;\n  @State() cellsStickyLeft: number[] = [];\n  @State() cellsStickyRight: number[] = [];\n\n  @Element() element: HTMLStzhDatatableElement;\n\n  /** Toggle sort by a given column key like when clicking on a column header */\n  @Method()\n  async toggleSort(columnKey: string) {\n    if (columnKey === this.sortBy) {\n      this.sortDirection = this.sortDirection === \"asc\" ? \"desc\" : \"asc\";\n    } else {\n      this.sortDirection = \"asc\";\n      this.sortBy = columnKey;\n    }\n  }\n\n  @Watch(\"rows\")\n  rowsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._rows = JSON.parse(newValue);\n    } else {\n      this._rows = newValue;\n    }\n\n    this.buildSearchIndex();\n  }\n\n  @Watch(\"columns\")\n  columnsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._columns = JSON.parse(newValue);\n    } else {\n      this._columns = newValue;\n    }\n\n    this.buildSearchIndex();\n  }\n\n  private input: HTMLStzhInputElement;\n  private searchIndex: Document;\n  private tableWrapper: HTMLDivElement;\n  private debounceScroll: number;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private updateScrollStates = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n    const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n    const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n    this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n    this.hasScrollLeft = wrapperScrollLeft > 0;\n    this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    const firstRow = rows[0];\n\n    if (!firstRow) {\n      return;\n    }\n\n    this.cellsStickyLeft = [];\n    this.cellsStickyRight = [];\n    const cells: Element[] = Array.from(firstRow.children);\n\n    cells.forEach((cell: HTMLTableCellElement, index: number) => {\n      const offsetLeft = cell.offsetLeft;\n      const offsetRight = offsetLeft + cell.offsetWidth;\n\n      if (\n        this.hasScrollLeft\n        && this._columns[index].fixed === \"left\"\n        && Math.ceil(wrapperScrollLeft) >= offsetLeft\n      ) {\n        this.cellsStickyLeft.push(index);\n      }\n\n      if (\n        this.hasScrollRight\n        && this._columns[index].fixed === \"right\"\n        && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n      ) {\n        this.cellsStickyRight.push(index);\n      }\n    });\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private buildSearchIndex() {\n    if (!this._rows || this._rows.length === 0\n      || !this._columns || this._columns.length === 0\n    ) {\n      return;\n    }\n\n    this.searchIndex = new Document({\n      tokenize: this.tokenize,\n      matcher: {\n        '[äà]': 'a',\n        '[öó]': 'o',\n        '[üûúù]': 'u',\n        '[éè]': 'e'\n      },\n      document: {\n        id: this.idField,\n        index: this._columns.map(column => column.key)\n      }\n    });\n\n    this._rows.forEach(row => {\n      this.searchIndex.add(row);\n    });\n  }\n\n  private onInputChange = () => {\n    this.query = this.input.value;\n  }\n\n  async componentWillLoad() {\n    this.columnsWatcher(this.columns);\n    this.rowsWatcher(this.rows);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datatable\");\n    }\n  }\n\n  componentDidLoad() {\n    this.updateScrollStates();\n  }\n\n  componentWillRender() {\n    this._rowsManaged = [];\n\n    if (this.query) {\n      let resultIds = [];\n\n      this.searchIndex.search(this.query).forEach((result) => {\n        resultIds = [...resultIds, ...result.result];\n      });\n\n      resultIds = resultIds.filter(function (item, pos) {\n        return resultIds.indexOf(item) === pos;\n      });\n\n      this._rows.forEach((row) => {\n        if (resultIds.indexOf(row[this.idField]) > -1) {\n          this._rowsManaged.push(row);\n        }\n      });\n    } else {\n      this._rowsManaged = [...this._rows];\n    }\n\n    if (this.sortBy) {\n      this._rowsManaged.sort((rowA, rowB) => {\n        const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy])\n        return this.sortDirection === \"asc\" ? comparison : comparison / -1;\n      });\n    }\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\n  render() {\n    const classes = {\n      \"stzh-datatable\": true,\n      \"is-scrollable\": this.isScrollable,\n      \"has-scroll-left\": this.hasScrollLeft,\n      \"has-scroll-right\": this.hasScrollRight,\n      \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n      \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datatable__header\">\n            <div class=\"stzh-datatable__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n          <div class=\"stzh-datatable__sub-header\">\n            <stzh-input\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              class=\"stzh-datatable__search\"\n              size=\"small\"\n              name=\"stzh-datatable-search\"\n              onStzhChange={this.onInputChange}\n              label={this.localization.searchLabel}\n            ></stzh-input>\n            <div class=\"stzh-datatable__action-button\">\n              <slot name=\"action-button\"></slot>\n            </div>\n          </div>\n\n          </div>\n          <div class=\"stzh-datatable__outer-wrapper\">\n            <div\n              ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n              class=\"stzh-datatable__wrapper\"\n              onScroll={this.handleScroll}\n            >\n              <table class=\"stzh-datatable__table\">\n                <thead class=\"stzh-datatable__thead\">\n                  <tr class=\"stzh-datatable__row stzh-datatable__row--head\">\n                    {this._columns.map((column, index) =>\n                      <th\n                        class={{\n                          \"stzh-datatable__cell stzh-datatable__cell--head\": true,\n                          \"is-sticky-left\": column.fixed === \"left\",\n                          \"is-sticky-right\": column.fixed === \"right\",\n                          \"is-sortable\": column.sort,\n                          \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,\n                          \"has-sorted\": column.key === this.sortBy,\n                          \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n                          \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n                          [`align-${column.align}`]: column.align,\n                          [`valign-${column.valign}`]: column.valign\n                        }}\n                      >\n                        {column.sort ?\n                          <button\n                            class=\"stzh-datatable__sort-button\"\n                            type=\"button\"\n                            onClick={() => this.toggleSort(column.key)}\n                            s-object-id={column.analyticsId || `${column.text} ${this.localization.columnSort}`}\n                          >\n                            <span>{column.text}</span>\n                            <stzh-icon name=\"arrow-up\" class=\"stzh-datatable__sort-icon\" a11yTitle={this.localization.columnSort}></stzh-icon>\n                          </button>\n                          :\n                          <span>{column.text}</span>\n                        }\n                      </th>\n                    )}\n                  </tr>\n                </thead>\n                <tbody>\n                  {this._rowsManaged.map((row) =>\n                    <tr class=\"stzh-datatable__row stzh-datatable__row--body\">\n                      {this._columns.map((column, index) =>\n                        <td\n                          innerHTML={row[column.key]?.text || row[column.key] || \"\"}\n                          class={{\n                            \"stzh-datatable__cell stzh-datatable__cell--body\": true,\n                            \"is-sticky-left\": column.fixed === \"left\",\n                            \"is-sticky-right\": column.fixed === \"right\",\n                            \"is-sortable\": column.sort,\n                            \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,\n                            \"has-sorted\": column.key === this.sortBy,\n                            \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n                            \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n                            [`align-${row[column.key]?.align || column.align}`]: row[column.key]?.align || column.align,\n                            [`valign-${row[column.key]?.valign || column.valign}`]: row[column.key]?.valign || column.valign\n                          }}\n                        ></td>\n                      )}\n                    </tr>\n                  )}\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-datatable.js","sourceRoot":"","sources":["../../../src/components/stzh-datatable/stzh-datatable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhPaginationChangeEvent\n} from \"../../index\";\n\nimport { Document } from 'flexsearch/dist/flexsearch.bundle.js';\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhDatatableLocalizedText } from './stzh-datatable.localization';\n\n/**\n * @slot action-button - Slot for action `stzh-button` element\n */\n@Component({\n  tag: \"stzh-datatable\",\n  styleUrl: \"stzh-datatable.scss\"\n})\nexport class StzhDatatable {\n  /** Translation strings */\n  @Prop() localization: StzhDatatableLocalizedText;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Sort by given column key */\n  @Prop({ mutable: true }) sortBy: string = \"\";\n\n  /** Sort direction */\n  @Prop({ mutable: true }) sortDirection: \"asc\" | \"desc\" = \"asc\";\n\n  /** Tokenize type */\n  @Prop() tokenize: \"strict\" | \"forward\" | \"reverse\" | \"full\" = \"forward\";\n\n  /** ID field */\n  @Prop() idField = \"id\";\n\n  /** Whether to show table data as list on mikro breakpoint */\n  @Prop({ reflect: true }) showList = false;\n\n  /** Current page */\n  @Prop({ mutable: true }) page: number = 1;\n\n  /** If pagination should be shown, set a number of items to be shown by each page. */\n  @Prop() pageSize: number = null;\n\n  /**\n   * Whether to disable min-width of the table.\n   *\n   * If `false`, the default `min-width` is `700px`\n   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n   *\n   * You can also overwrite the min-width via CSS with the custom property `--min-width`.\n   */\n  @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n  /** Rows */\n  @Prop() rows: any[] | string = [];\n  private _rows: any[];\n  private _rowsShown: any[];\n  private _rowsFiltered: any[];\n\n  /** Columns */\n  @Prop() columns: any[] | string = [];\n  private _columns: any[];\n\n  @State() query: string = \"\";\n  @State() hasScrollLeft: boolean = false;\n  @State() hasScrollRight: boolean = false;\n  @State() isScrollable: boolean = false;\n  @State() cellsStickyLeft: number[] = [];\n  @State() cellsStickyRight: number[] = [];\n\n  @Element() element: HTMLStzhDatatableElement;\n\n  /** Toggle sort by a given column key like when clicking on a column header */\n  @Method()\n  async toggleSort(columnKey: string) {\n    this.page = 1;\n\n    if (columnKey === this.sortBy) {\n      this.sortDirection = this.sortDirection === \"asc\" ? \"desc\" : \"asc\";\n    } else {\n      this.sortDirection = \"asc\";\n      this.sortBy = columnKey;\n    }\n  }\n\n  @Watch(\"rows\")\n  rowsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._rows = JSON.parse(newValue);\n    } else {\n      this._rows = newValue;\n    }\n\n    this.buildSearchIndex();\n  }\n\n  @Watch(\"columns\")\n  columnsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._columns = JSON.parse(newValue);\n    } else {\n      this._columns = newValue;\n    }\n\n    this.buildSearchIndex();\n  }\n\n  private input: HTMLStzhInputElement;\n  private searchIndex: Document;\n  private tableWrapper: HTMLDivElement;\n  private debounceScroll: number;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private updateScrollStates = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n    const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n    const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n    this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n    this.hasScrollLeft = wrapperScrollLeft > 0;\n    this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    const firstRow = rows[0];\n\n    if (!firstRow) {\n      return;\n    }\n\n    this.cellsStickyLeft = [];\n    this.cellsStickyRight = [];\n    const cells: Element[] = Array.from(firstRow.children);\n\n    cells.forEach((cell: HTMLTableCellElement, index: number) => {\n      const offsetLeft = cell.offsetLeft;\n      const offsetRight = offsetLeft + cell.offsetWidth;\n\n      if (\n        this.hasScrollLeft\n        && this._columns[index].fixed === \"left\"\n        && Math.ceil(wrapperScrollLeft) >= offsetLeft\n      ) {\n        this.cellsStickyLeft.push(index);\n      }\n\n      if (\n        this.hasScrollRight\n        && this._columns[index].fixed === \"right\"\n        && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n      ) {\n        this.cellsStickyRight.push(index);\n      }\n    });\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private buildSearchIndex() {\n    if (!this._rows || this._rows.length === 0\n      || !this._columns || this._columns.length === 0\n    ) {\n      return;\n    }\n\n    this.searchIndex = new Document({\n      tokenize: this.tokenize,\n      matcher: {\n        '[äà]': 'a',\n        '[öó]': 'o',\n        '[üûúù]': 'u',\n        '[éè]': 'e'\n      },\n      document: {\n        id: this.idField,\n        index: this._columns.map(column => column.key)\n      }\n    });\n\n    this._rows.forEach(row => {\n      this.searchIndex.add(row);\n    });\n  }\n\n  private onInputChange = () => {\n    this.query = this.input.value;\n  }\n\n  private onPaginationChange = (event: CustomEvent<StzhPaginationChangeEvent>) => {\n    if (event.detail.component === \"stzh-pagination\") {\n      this.page = event.detail.page;\n    }\n  }\n\n  async componentWillLoad() {\n    this.columnsWatcher(this.columns);\n    this.rowsWatcher(this.rows);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"datatable\");\n    }\n  }\n\n  componentDidLoad() {\n    this.updateScrollStates();\n  }\n\n  componentWillRender() {\n    this._rowsShown = [];\n    this._rowsFiltered = [];\n\n    if (this.query) {\n      let resultIds = [];\n\n      this.searchIndex.search(this.query).forEach((result) => {\n        resultIds = [...resultIds, ...result.result];\n      });\n\n      resultIds = resultIds.filter(function (item, pos) {\n        return resultIds.indexOf(item) === pos;\n      });\n\n      this._rows.forEach((row) => {\n        if (resultIds.indexOf(row[this.idField]) > -1) {\n          this._rowsFiltered.push(row);\n        }\n      });\n    } else {\n      this._rowsFiltered = [...this._rows];\n    }\n\n    if (this.sortBy) {\n      this._rowsFiltered.sort((rowA, rowB) => {\n        const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy])\n        return this.sortDirection === \"asc\" ? comparison : comparison / -1;\n      });\n    }\n\n    if (this.pageSize !== null) {\n      const pageEnd = this.page * this.pageSize;\n      this._rowsShown = this._rowsFiltered.slice(pageEnd - this.pageSize, pageEnd);\n    } else {\n      this._rowsShown = [...this._rowsFiltered];\n    }\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\n  render() {\n    const classes = {\n      \"stzh-datatable\": true,\n      \"is-scrollable\": this.isScrollable,\n      \"has-scroll-left\": this.hasScrollLeft,\n      \"has-scroll-right\": this.hasScrollRight,\n      \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n      \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n      \"has-list\": this.showList,\n    };\n\n    const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datatable__header\">\n            <div class=\"stzh-datatable__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-datatable__sub-header\">\n              <stzh-input\n                ref={(el) => (this.input = el as HTMLStzhInputElement)}\n                class=\"stzh-datatable__search\"\n                size=\"small\"\n                name=\"stzh-datatable-search\"\n                onStzhChange={this.onInputChange}\n                label={this.localization.searchLabel}\n              ></stzh-input>\n              <div class=\"stzh-datatable__action-button\">\n                <slot name=\"action-button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"stzh-datatable__outer-wrapper\">\n            <div\n              ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n              class=\"stzh-datatable__wrapper\"\n              onScroll={this.handleScroll}\n            >\n              <table class=\"stzh-datatable__table\">\n                <thead class=\"stzh-datatable__thead\">\n                  <tr class=\"stzh-datatable__row stzh-datatable__row--head\">\n                    {this._columns.map((column, index) =>\n                      <th\n                        class={{\n                          \"stzh-datatable__cell stzh-datatable__cell--head\": true,\n                          \"is-sticky-left\": column.fixed === \"left\",\n                          \"is-sticky-right\": column.fixed === \"right\",\n                          \"is-sortable\": column.sort,\n                          \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,\n                          \"has-sorted\": column.key === this.sortBy,\n                          \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n                          \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n                          [`align-${column.align}`]: column.align,\n                          [`valign-${column.valign}`]: column.valign\n                        }}\n                      >\n                        {column.sort ?\n                          <button\n                            class=\"stzh-datatable__sort-button\"\n                            type=\"button\"\n                            onClick={() => this.toggleSort(column.key)}\n                            s-object-id={column.analyticsId || `${column.text} ${this.localization.columnSort}`}\n                          >\n                            <span>{column.text}</span>\n                            <stzh-icon name=\"arrow-up\" class=\"stzh-datatable__sort-icon\" a11yTitle={this.localization.columnSort}></stzh-icon>\n                          </button>\n                          :\n                          <span>{column.text}</span>\n                        }\n                      </th>\n                    )}\n                  </tr>\n                </thead>\n                <tbody>\n                  {this._rowsShown.map((row) =>\n                    <tr class=\"stzh-datatable__row stzh-datatable__row--body\">\n                      {this._columns.map((column, index) =>\n                        <td\n                          innerHTML={row[column.key]?.text || row[column.key] || \"\"}\n                          class={{\n                            \"stzh-datatable__cell stzh-datatable__cell--body\": true,\n                            \"is-sticky-left\": column.fixed === \"left\",\n                            \"is-sticky-right\": column.fixed === \"right\",\n                            \"is-sortable\": column.sort,\n                            \"has-sticked\": this.cellsStickyLeft.indexOf(index) > -1 || this.cellsStickyRight.indexOf(index) > -1,\n                            \"has-sorted\": column.key === this.sortBy,\n                            \"has-sorted-asc\": column.key === this.sortBy && this.sortDirection === \"asc\",\n                            \"has-sorted-desc\": column.key === this.sortBy && this.sortDirection === \"desc\",\n                            [`align-${row[column.key]?.align || column.align}`]: row[column.key]?.align || column.align,\n                            [`valign-${row[column.key]?.valign || column.valign}`]: row[column.key]?.valign || column.valign\n                          }}\n                        ></td>\n                      )}\n                    </tr>\n                  )}\n                </tbody>\n              </table>\n            </div>\n          </div>\n\n          {this.showList &&\n            <div class=\"stzh-datatable__list-wrapper\">\n              <stzh-card-list>\n                {this._rowsShown.map((row) =>\n                  <stzh-card>\n                    <stzh-datalist slot=\"content\" direction={\"horizontal\"}>\n                      {this._columns.map((column) =>\n                        <stzh-datalist-item\n                          label={column.text}\n                          value={row[column.key]?.text || row[column.key] || \"\"}\n                        ></stzh-datalist-item>\n                      )}\n                    </stzh-datalist>\n                  </stzh-card>\n                )}\n              </stzh-card-list>\n            </div>\n          }\n\n          {this.pageSize !== null && totalPages > 1 &&\n            <div class=\"stzh-datatable__pagination-wrapper\">\n              <stzh-pagination\n                value={this.page}\n                total={totalPages}\n                onStzhChange={this.onPaginationChange}\n              ></stzh-pagination>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-datatable/stzh-datatable.stories.js

@@ -36,21 +36,24 @@ export default {
   ]
 };
 
+const rows = [
+  { "id": 1, "theme": "AOZ", "text": "Laboris <strong>laborum</strong> aute id laboris", "text2": "Laboris <strong>laborum</strong> aute id laboris" },
+  { "id": 2, "theme": "PKZH", "text": "Culpa esse <em>aliquip</em> nisi anim velit", "text2": "Culpa esse <em>aliquip</em> nisi anim velit" },
+  { "id": 3, "theme": "VBZ", "text": "Minim sunt <a href='#'>eiusmod</a> do laborum amet", "text2": "Minim sunt <a href='#'>eiusmod</a> do laborum amet" },
+  { "id": 4, "theme": "UVZ", "text": "Labore dolore id nostrud enim", "text2": "Labore dolore id nostrud enim" },
+  { "id": 5, "theme": "Microsite", "text": "Labore dolore id nostrud enim", "text2": "Labore dolore id nostrud enim" },
+];
+
 export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     columns: [
       { "key": "id", "text": "ID", "align": "right" },
-      { "key": "department", "text": "Department", "sort": true },
+      { "key": "theme", "text": "Theme", "sort": true },
       { "key": "text", "text": "Text" },
       { "key": "text2", "text": "Text 2" }
     ],
-    rows: [
-      { "id": 1, "department": "AOZ", "text": "Laboris <b>laborum</b> aute id laboris", "text2": "Laboris <b>laborum</ aute id laboris" },
-      { "id": 2, "department": "PKZH", "text": "Culpa esse <i>aliquip</i> nisi anim velit", "text2": "Culpa esse <i>aliquip</i> nisi anim velit" },
-      { "id": 3, "department": "VBZ", "text": "Minim sunt <a href='#'>eiusmod</a> do laborum amet", "text2": "Minim sunt <a href='#'>eiusmod</a> do laborum amet" },
-      { "id": 4, "department": "UVZ", "text": "Labore dolore id nostrud enim", "text2": "Labore dolore id nostrud enim" }
-    ]
+    rows
   }
 };
 
@@ -59,15 +62,39 @@ export const FixedCols = {
   args: {
     columns: [
       { "key": "id", "text": "ID", "align": "right" },
-      { "key": "department", "text": "Department", "sort": true, "fixed": "left" },
+      { "key": "theme", "text": "Theme", "sort": true, "fixed": "left" },
       { "key": "text", "text": "Text" },
       { "key": "text2", "text": "Text 2", "fixed": "right" }
     ],
-    rows: [
-      { "id": 1, "department": "AOZ", "text": "Laboris <b>laborum</b> aute id laboris", "text2": "Laboris <b>laborum</ aute id laboris" },
-      { "id": 2, "department": "PKZH", "text": "Culpa esse <i>aliquip</i> nisi anim velit", "text2": "Culpa esse <i>aliquip</i> nisi anim velit" },
-      { "id": 3, "department": "VBZ", "text": "Minim sunt <a href='#'>eiusmod</a> do laborum amet", "text2": "Minim sunt <a href='#'>eiusmod</a> do laborum amet" },
-      { "id": 4, "department": "UVZ", "text": "Labore dolore id nostrud enim", "text2": "Labore dolore id nostrud enim" }
-    ]
+    rows
+  }
+};
+
+export const WithList = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    'show-list': true,
+    columns: [
+      { "key": "id", "text": "ID", "align": "right" },
+      { "key": "theme", "text": "Theme", "sort": true, "fixed": "left" },
+      { "key": "text", "text": "Text" },
+      { "key": "text2", "text": "Text 2" }
+    ],
+    rows
+  }
+};
+
+export const WithPagination = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    page: 1,
+    'page-size': 2,
+    columns: [
+      { "key": "id", "text": "ID", "align": "right" },
+      { "key": "theme", "text": "Theme", "sort": true, "fixed": "left" },
+      { "key": "text", "text": "Text" },
+      { "key": "text2", "text": "Text 2" }
+    ],
+    rows
   }
 };

package/dist/collection/components/stzh-datepicker/stzh-datepicker.js

@@ -48,6 +48,7 @@ export class StzhDatepicker {
     this.name = "";
     this.value = "";
     this.label = "";
+    this.labelHidden = false;
     this.readonly = false;
     this.disabled = false;
     this.description = undefined;
@@ -96,10 +97,10 @@ export class StzhDatepicker {
     }
     try {
       const valueAsDate = parseISODate(this.value);
-      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
+      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
     }
     catch (err) {
-      this.buttonLabel = this.localization.buttonLabel;
+      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;
     }
   }
   connectedCallback() {
@@ -123,7 +124,7 @@ export class StzhDatepicker {
     };
     return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
       h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
-      h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
+      h("stzh-input", { label: this.label, labelHidden: this.labelHidden, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
   }
   static get is() { return "stzh-datepicker"; }
   static get encapsulation() { return "scoped"; }
@@ -250,6 +251,24 @@ export class StzhDatepicker {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "labelHidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether label is visually hidden."
+        },
+        "attribute": "label-hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "readonly": {
         "type": "boolean",
         "mutable": false,