@oiz/stzh-components 2.7.0 → 2.8.0-alpha

package/dist/components/stzh-datatable.js

@@ -1,11 +1,25 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
 import { f as fetchTranslations } from './translation-utils.js';
-import { d as defineCustomElement$6 } from './stzh-badge2.js';
-import { d as defineCustomElement$5 } from './stzh-button2.js';
-import { d as defineCustomElement$4 } from './stzh-icon2.js';
-import { d as defineCustomElement$3 } from './stzh-input2.js';
-import { d as defineCustomElement$2 } from './stzh-popover2.js';
+import { d as defineCustomElement$k } from './stzh-actionset2.js';
+import { d as defineCustomElement$j } from './stzh-badge2.js';
+import { d as defineCustomElement$i } from './stzh-button2.js';
+import { d as defineCustomElement$h } from './stzh-buttongroup2.js';
+import { d as defineCustomElement$g } from './stzh-card2.js';
+import { d as defineCustomElement$f } from './stzh-card-list2.js';
+import { d as defineCustomElement$e } from './stzh-datalist2.js';
+import { d as defineCustomElement$d } from './stzh-datalist-item2.js';
+import { d as defineCustomElement$c } from './stzh-icon2.js';
+import { d as defineCustomElement$b } from './stzh-input2.js';
+import { d as defineCustomElement$a } from './stzh-link2.js';
+import { d as defineCustomElement$9 } from './stzh-menu2.js';
+import { d as defineCustomElement$8 } from './stzh-menu-item2.js';
+import { d as defineCustomElement$7 } from './stzh-pagination2.js';
+import { d as defineCustomElement$6 } from './stzh-popover2.js';
+import { d as defineCustomElement$5 } from './stzh-richtext2.js';
+import { d as defineCustomElement$4 } from './stzh-sortable2.js';
+import { d as defineCustomElement$3 } from './stzh-status2.js';
+import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
 
 var flexsearch_bundle = createCommonjsModule(function (module) {
 /**!
@@ -43,7 +57,7 @@ t.set=function(a,b){this.store[a]=b;return this};t.searchCache=oa;t.export=funct
 t.import=function(a,b){if(b)switch(x(b)&&(b=JSON.parse(b)),a){case "tag":this.l=b;break;case "reg":this.m=!1;this.register=b;for(let d=0,e;d<this.h.length;d++)e=this.index[this.h[d]],e.register=b,e.m=!1;break;case "store":this.store=b;break;default:a=a.split(".");const c=a[0];a=a[1];c&&a&&this.index[c].import(a,b);}};la(Q.prototype);var Ba={encode:Aa,F:!1,G:""};const Ca=[F("[\u00e0\u00e1\u00e2\u00e3\u00e4\u00e5]"),"a",F("[\u00e8\u00e9\u00ea\u00eb]"),"e",F("[\u00ec\u00ed\u00ee\u00ef]"),"i",F("[\u00f2\u00f3\u00f4\u00f5\u00f6\u0151]"),"o",F("[\u00f9\u00fa\u00fb\u00fc\u0171]"),"u",F("[\u00fd\u0177\u00ff]"),"y",F("\u00f1"),"n",F("[\u00e7c]"),"k",F("\u00df"),"s",F(" & ")," and "];function Aa(a){var b=a=""+a;b.normalize&&(b=b.normalize("NFD").replace(ea,""));return ca.call(this,b.toLowerCase(),!a.normalize&&Ca)}var Ea={encode:Da,F:!1,G:"strict"};const Fa=/[^a-z0-9]+/,Ga={b:"p",v:"f",w:"f",z:"s",x:"s","\u00df":"s",d:"t",n:"m",c:"k",g:"k",j:"k",q:"k",i:"e",y:"e",u:"o"};function Da(a){a=Aa.call(this,a).join(" ");const b=[];if(a){const c=a.split(Fa),d=c.length;for(let e=0,f,g=0;e<d;e++)if((a=c[e])&&(!this.filter||!this.filter[a])){f=a[0];let h=Ga[f]||f,k=h;for(let m=1;m<a.length;m++){f=a[m];const n=Ga[f]||f;n&&n!==k&&(h+=n,k=n);}b[g++]=h;}}return b}var Ia={encode:Ha,F:!1,G:""};const Ja=[F("ae"),"a",F("oe"),"o",F("sh"),"s",F("th"),"t",F("ph"),"f",F("pf"),"f",F("(?![aeo])h(?![aeo])"),"",F("(?!^[aeo])h(?!^[aeo])"),""];function Ha(a,b){a&&(a=Da.call(this,a).join(" "),2<a.length&&(a=E(a,Ja)),b||(1<a.length&&(a=ha(a)),a&&(a=a.split(" "))));return a||[]}var La={encode:Ka,F:!1,G:""};const Ma=F("(?!\\b)[aeo]");function Ka(a){a&&(a=Ha.call(this,a,!0),1<a.length&&(a=a.replace(Ma,"")),1<a.length&&(a=ha(a)),a&&(a=a.split(" ")));return a||[]}G["latin:default"]=ja;G["latin:simple"]=Ba;G["latin:balance"]=Ea;G["latin:advanced"]=Ia;G["latin:extra"]=La;const W=self;let Y;const Z={Index:K,Document:Q,Worker:O,registerCharset:function(a,b){G[a]=b;},registerLanguage:function(a,b){ka[a]=b;}};(Y=W.define)&&Y.amd?Y([],function(){return Z}):W.exports?W.exports=Z:W.FlexSearch=Z;}(commonjsGlobal));
 });
 
-const stzhDatatableCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-datatable{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-datatable[hidden]{display:none}stzh-datatable *,stzh-datatable *::before,stzh-datatable *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-datatable[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-datatable{}.stzh-datatable__header{border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datatable__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-datatable__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-datatable__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-datatable__header{margin-bottom:var(--stzh-space-xlarge)}}.stzh-datatable__sub-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.stzh-datatable__heading{margin-bottom:var(--stzh-space-small)}.stzh-datatable__header .stzh-datatable__search{-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-datatable__header .stzh-datatable__search{width:var(--stzh-table-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-datatable__action-button{-ms-flex-negative:0;flex-shrink:0}.stzh-datatable__action-button:not(:empty){margin-left:var(--stzh-space-medium)}.stzh-datatable__outer-wrapper{position:relative}.stzh-datatable__outer-wrapper::before,.stzh-datatable__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-datatable__outer-wrapper::before{left:0}.stzh-datatable__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-datatable__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-datatable__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-datatable__sort-button:hover,.stzh-datatable__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datatable stzh-icon.stzh-datatable__sort-icon{display:none}.stzh-datatable__table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-datatable__thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-datatable__row:hover .stzh-datatable__cell{background-color:var(--stzh-color-grey5)}.stzh-datatable__cell{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-datatable__cell a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-datatable__cell a:hover,.stzh-datatable__cell a:focus{color:var(--stzh-link-hover-color)}.stzh-datatable__cell b,.stzh-datatable__cell strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-datatable__cell i,.stzh-datatable__cell em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-datatable__cell.align-left{text-align:left}.stzh-datatable__cell.align-right{text-align:right}.stzh-datatable__cell.align-center{text-align:center}.stzh-datatable__cell.valign-auto{vertical-align:auto}.stzh-datatable__cell.valign-middle{vertical-align:middle}.stzh-datatable__cell.valign-bottom{vertical-align:bottom}.stzh-datatable__cell.nowrap{white-space:nowrap}.stzh-datatable__cell.is-sticky-left,.stzh-datatable__cell.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-datatable__cell.has-sticked{z-index:2}.stzh-datatable__cell.is-sticky-left{left:0}.stzh-datatable__cell.is-sticky-right{right:0}.stzh-datatable__cell.is-sticky-left::after,.stzh-datatable__cell.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-datatable__cell.is-sticky-left::after{right:0}.stzh-datatable__cell.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-datatable__cell.has-sticked.is-sticky-left::after,.stzh-datatable__cell.has-sticked.is-sticky-right::after{opacity:1}.stzh-datatable__cell--head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datatable__cell--head.is-sortable{padding:0}.stzh-datatable__cell.has-sorted .stzh-datatable__sort-icon{display:-ms-inline-flexbox;display:inline-flex}.stzh-datatable__cell.has-sorted-desc .stzh-datatable__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-datatable.has-scroll-left-shadow .stzh-datatable__outer-wrapper::before,.stzh-datatable.has-scroll-right-shadow .stzh-datatable__outer-wrapper::after{opacity:1}";
+const stzhDatatableCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-datatable{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-datatable[hidden]{display:none}stzh-datatable *,stzh-datatable *::before,stzh-datatable *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-datatable[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-datatable{}.stzh-datatable__header{border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-datatable__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-datatable__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-datatable__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-datatable__header{margin-bottom:var(--stzh-space-xlarge)}}.stzh-datatable__sub-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.stzh-datatable__heading{margin-bottom:var(--stzh-space-small)}.stzh-datatable__header .stzh-datatable__search{-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-datatable__header .stzh-datatable__search{width:var(--stzh-table-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-datatable__action-button{-ms-flex-negative:0;flex-shrink:0}.stzh-datatable__action-button:not(:empty){margin-left:var(--stzh-space-medium)}.stzh-datatable__outer-wrapper{position:relative}.stzh-datatable__outer-wrapper::before,.stzh-datatable__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-datatable__outer-wrapper::before{left:0}.stzh-datatable__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-datatable__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-datatable__pagination-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:end;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);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-datatable__sort-button:hover,.stzh-datatable__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-datatable stzh-icon.stzh-datatable__sort-icon{display:none}.stzh-datatable__table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-datatable__thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-datatable__row:hover .stzh-datatable__cell{background-color:var(--stzh-color-grey5)}.stzh-datatable__cell{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-datatable__cell a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-datatable__cell a:hover,.stzh-datatable__cell a:focus{color:var(--stzh-link-hover-color)}.stzh-datatable__cell b,.stzh-datatable__cell strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-datatable__cell i,.stzh-datatable__cell em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-datatable__cell.align-left{text-align:left}.stzh-datatable__cell.align-right{text-align:right}.stzh-datatable__cell.align-center{text-align:center}.stzh-datatable__cell.valign-auto{vertical-align:auto}.stzh-datatable__cell.valign-middle{vertical-align:middle}.stzh-datatable__cell.valign-bottom{vertical-align:bottom}.stzh-datatable__cell.nowrap{white-space:nowrap}.stzh-datatable__cell.is-sticky-left,.stzh-datatable__cell.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-datatable__cell.has-sticked{z-index:2}.stzh-datatable__cell.is-sticky-left{left:0}.stzh-datatable__cell.is-sticky-right{right:0}.stzh-datatable__cell.is-sticky-left::after,.stzh-datatable__cell.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-datatable__cell.is-sticky-left::after{right:0}.stzh-datatable__cell.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-datatable__cell.has-sticked.is-sticky-left::after,.stzh-datatable__cell.has-sticked.is-sticky-right::after{opacity:1}.stzh-datatable__cell--head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-datatable__cell--head.is-sortable{padding:0}.stzh-datatable__cell.has-sorted .stzh-datatable__sort-icon{display:-ms-inline-flexbox;display:inline-flex}.stzh-datatable__cell.has-sorted-desc .stzh-datatable__sort-icon{-webkit-transform:rotate(180deg);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}";
 
 const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable extends HTMLElement {
   constructor() {
@@ -97,12 +111,20 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     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 = [];
@@ -115,6 +137,7 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
   }
   /** 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";
     }
@@ -174,7 +197,8 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     this.updateScrollStates();
   }
   componentWillRender() {
-    this._rowsManaged = [];
+    this._rowsShown = [];
+    this._rowsFiltered = [];
     if (this.query) {
       let resultIds = [];
       this.searchIndex.search(this.query).forEach((result) => {
@@ -185,19 +209,26 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       });
       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);
@@ -215,8 +246,10 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       "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",
@@ -231,7 +264,7 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
       } }, 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,
@@ -245,7 +278,12 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
           [`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 })))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -260,6 +298,9 @@ const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable ext
     "sortDirection": [1025, "sort-direction"],
     "tokenize": [1],
     "idField": [1, "id-field"],
+    "showList": [516, "show-list"],
+    "page": [1026],
+    "pageSize": [2, "page-size"],
     "disableMinWidth": [516, "disable-min-width"],
     "rows": [1],
     "columns": [1],
@@ -275,34 +316,104 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-datatable", "stzh-badge", "stzh-button", "stzh-icon", "stzh-input", "stzh-popover"];
+  const components = ["stzh-datatable", "stzh-actionset", "stzh-badge", "stzh-button", "stzh-buttongroup", "stzh-card", "stzh-card-list", "stzh-datalist", "stzh-datalist-item", "stzh-icon", "stzh-input", "stzh-link", "stzh-menu", "stzh-menu-item", "stzh-pagination", "stzh-popover", "stzh-richtext", "stzh-sortable", "stzh-status", "stzh-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-datatable":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, StzhDatatable$1);
       }
       break;
+    case "stzh-actionset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
     case "stzh-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$j();
       }
       break;
     case "stzh-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$i();
+      }
+      break;
+    case "stzh-buttongroup":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "stzh-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "stzh-card-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "stzh-datalist":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "stzh-datalist-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
       }
       break;
     case "stzh-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$c();
       }
       break;
     case "stzh-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$b();
+      }
+      break;
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "stzh-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "stzh-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "stzh-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
       }
       break;
     case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-richtext":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-sortable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-status":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }