@oiz/stzh-components 2.9.0-alpha → 2.9.0-beta

package/dist/cjs/stzh-datatable.cjs.entry.js

@@ -41,11 +41,42 @@ 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;}(_commonjsHelpers.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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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);--search-input-width:var(--stzh-table-search-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 .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-datatable .stzh-fylingfocus-focused{outline-style:none !important}stzh-datatable .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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(--search-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 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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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);--search-input-width:var(--stzh-table-search-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 .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-datatable .stzh-fylingfocus-focused{outline-style:none !important}stzh-datatable .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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;margin-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__header .stzh-datatable__search{width:var(--search-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-datatable__action-button{-ms-flex-negative:0;flex-shrink:0;margin-left:auto}.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__table.has-layout-fixed{table-layout:fixed}.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 = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.stzhRowClick = index.createEvent(this, "stzhRowClick", 7);
+    this.stzhCellClick = index.createEvent(this, "stzhCellClick", 7);
+    this.stzhHeadingCellClick = index.createEvent(this, "stzhHeadingCellClick", 7);
+    this.stzhSortClick = index.createEvent(this, "stzhSortClick", 7);
+    this.stzhSortByChange = index.createEvent(this, "stzhSortByChange", 7);
+    this.stzhSortDirectionChange = index.createEvent(this, "stzhSortDirectionChange", 7);
+    this.handleRowClick = (event, row) => {
+      this.stzhRowClick.emit({
+        component: "stzh-datatable",
+        row,
+        originalEvent: event
+      });
+    };
+    this.handleCellClick = (event, row, column, cellIndex, rowIndex) => {
+      this.stzhCellClick.emit({
+        component: "stzh-datatable",
+        row,
+        column,
+        cellIndex,
+        rowIndex,
+        originalEvent: event
+      });
+    };
+    this.handleSortClick = (event, column) => {
+      this.stzhSortClick.emit({
+        component: "stzh-datatable",
+        column,
+        originalEvent: event
+      });
+      this.toggleSort(column.key);
+    };
     this.updateScrollStates = () => {
       if (!this.tableWrapper) {
         return;
@@ -99,12 +130,14 @@ const StzhDatatable = class {
         this.page = event.detail.page;
       }
     };
+    this.tableLayout = "auto";
     this.localization = undefined;
     this.label = "";
     this.sortBy = "";
     this.sortDirection = "asc";
     this.tokenize = "forward";
     this.idField = "id";
+    this.hideSearch = false;
     this.showList = false;
     this.page = 1;
     this.pageSize = null;
@@ -147,6 +180,28 @@ const StzhDatatable = class {
     }
     this.buildSearchIndex();
   }
+  sortByWatcher(value, oldValue) {
+    this.stzhSortByChange.emit({
+      component: "stzh-datatable",
+      value,
+      oldValue
+    });
+  }
+  sortDirectionWatcher(value, oldValue) {
+    this.stzhSortDirectionChange.emit({
+      component: "stzh-datatable",
+      value,
+      oldValue
+    });
+  }
+  handleHeadingCellClick(event, column, index) {
+    this.stzhHeadingCellClick.emit({
+      component: "stzh-datatable",
+      column,
+      index,
+      originalEvent: event
+    });
+  }
   buildSearchIndex() {
     if (!this._rows || this._rows.length === 0
       || !this._columns || this._columns.length === 0) {
@@ -180,6 +235,7 @@ const StzhDatatable = class {
     this.updateScrollStates();
   }
   componentWillRender() {
+    var _a, _b;
     this._rowsShown = [];
     this._rowsFiltered = [];
     if (this.query) {
@@ -200,9 +256,22 @@ const StzhDatatable = class {
       this._rowsFiltered = [...this._rows];
     }
     if (this.sortBy) {
+      const columnConfig = this._columns.find((column) => column.key === this.sortBy);
+      const column = ((_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.sort) === null || _a === void 0 ? void 0 : _a.field) || this.sortBy;
+      const type = (_b = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig.sort) === null || _b === void 0 ? void 0 : _b.type;
       this._rowsFiltered.sort((rowA, rowB) => {
-        const comparison = rowA[this.sortBy].localeCompare(rowB[this.sortBy]);
-        return this.sortDirection === "asc" ? comparison : comparison / -1;
+        if (type === "numerical") {
+          if (this.sortDirection === "asc") {
+            return Number(rowA[column]) - Number(rowB[column]);
+          }
+          else {
+            return Number(rowB[column]) - Number(rowA[column]);
+          }
+        }
+        else {
+          const comparison = rowA[column].localeCompare(rowB[column]);
+          return this.sortDirection === "asc" ? comparison : comparison / -1;
+        }
       });
     }
     if (this.pageSize !== null) {
@@ -233,7 +302,11 @@ const StzhDatatable = class {
       "has-list": this.showList,
     };
     const totalPages = Math.ceil(this._rowsFiltered.length / this.pageSize);
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-datatable__header" }, index.h("div", { class: "stzh-datatable__heading" }, index.h("slot", { name: "heading" })), index.h("div", { class: "stzh-datatable__sub-header" }, index.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 }), index.h("div", { class: "stzh-datatable__action-button" }, index.h("slot", { name: "action-button" })))), index.h("div", { class: "stzh-datatable__outer-wrapper" }, index.h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-datatable__wrapper", onScroll: this.handleScroll }, index.h("table", { class: "stzh-datatable__table" }, index.h("thead", { class: "stzh-datatable__thead" }, index.h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, this._columns.map((column, index$1) => index.h("th", { class: {
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-datatable__header" }, index.h("div", { class: "stzh-datatable__heading" }, index.h("slot", { name: "heading" })), index.h("div", { class: "stzh-datatable__sub-header" }, !this.hideSearch &&
+      index.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 }), index.h("div", { class: "stzh-datatable__action-button" }, index.h("slot", { name: "action-button" })))), index.h("div", { class: "stzh-datatable__outer-wrapper" }, index.h("div", { ref: (el) => (this.tableWrapper = el), class: "stzh-datatable__wrapper", onScroll: this.handleScroll }, index.h("table", { class: {
+        "stzh-datatable__table": true,
+        "has-layout-fixed": this.tableLayout === "fixed",
+      } }, index.h("thead", { class: "stzh-datatable__thead" }, index.h("tr", { class: "stzh-datatable__row stzh-datatable__row--head" }, this._columns.map((column, index$1) => index.h("th", { onClick: (event) => this.handleHeadingCellClick(event, column, index$1), style: column.style, class: {
         "stzh-datatable__cell stzh-datatable__cell--head": true,
         "is-sticky-left": column.fixed === "left",
         "is-sticky-right": column.fixed === "right",
@@ -245,11 +318,11 @@ const StzhDatatable = class {
         [`align-${column.align}`]: column.align,
         [`valign-${column.valign}`]: column.valign
       } }, column.sort ?
-      index.h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: () => this.toggleSort(column.key), "s-object-id": column.analyticsId || `${column.text} ${this.localization.columnSort}` }, index.h("span", null, column.text), index.h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon", a11yTitle: this.localization.columnSort }))
+      index.h("button", { class: "stzh-datatable__sort-button", type: "button", onClick: (event) => this.handleSortClick(event, column), "s-object-id": column.analyticsId || `${column.text} ${this.localization.columnSort}` }, index.h("span", null, column.text), index.h("stzh-icon", { name: "arrow-up", class: "stzh-datatable__sort-icon", a11yTitle: this.localization.columnSort }))
       :
-        index.h("span", null, column.text))))), index.h("tbody", null, this._rowsShown.map((row) => index.h("tr", { class: "stzh-datatable__row stzh-datatable__row--body" }, this._columns.map((column, index$1) => {
+        index.h("span", null, column.text))))), index.h("tbody", null, this._rowsShown.map((row, rowIndex) => index.h("tr", { class: "stzh-datatable__row stzh-datatable__row--body", onClick: (event) => this.handleRowClick(event, row) }, this._columns.map((column, index$1) => {
       var _a, _b, _c, _d, _e;
-      return index.h("td", { innerHTML: ((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.text) || row[column.key] || "", class: {
+      return index.h("td", { onClick: (event) => this.handleCellClick(event, row, column, index$1, rowIndex), innerHTML: ((_a = row[column.key]) === null || _a === void 0 ? void 0 : _a.text) || row[column.key] || "", style: column.style, class: {
           "stzh-datatable__cell stzh-datatable__cell--body": true,
           "is-sticky-left": column.fixed === "left",
           "is-sticky-right": column.fixed === "right",
@@ -271,7 +344,9 @@ const StzhDatatable = class {
   get element() { return index.getElement(this); }
   static get watchers() { return {
     "rows": ["rowsWatcher"],
-    "columns": ["columnsWatcher"]
+    "columns": ["columnsWatcher"],
+    "sortBy": ["sortByWatcher"],
+    "sortDirection": ["sortDirectionWatcher"]
   }; }
 };
 StzhDatatable.style = stzhDatatableCss;