@mapsindoors/map-template 1.95.0 → 1.95.2

package/dist/mi-data-table.entry.js

@@ -1,302 +1,322 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e9696f3.js';
-import { i as isNullOrUndefined, a as isNumber } from './utils-ae714467.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BZQHyS7V.js';
+import { i as isNullOrUndefined, a as isNumber } from './utils-DNHzysQ6.js';
 
-const dataTableCss = "a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=tel]{font-size:1rem;padding:8px;border-style:solid;border-width:1px;border-color:#8d98aa;border-radius:4px}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=range],.mi-input[type=tel]{display:block}.mi-input[type=radio],.mi-input[type=checkbox]{margin:0px;transform:scale(1.2, 1.2)}.mi-input[type=search]{padding-left:32px;background:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6267 8.43836C14.6267 11.8561 11.8561 14.6267 8.43836 14.6267C5.02062 14.6267 2.25 11.8561 2.25 8.43836C2.25 5.02062 5.02062 2.25 8.43836 2.25C11.8561 2.25 14.6267 5.02062 14.6267 8.43836Z' stroke='%23aeb9cb' stroke-width='2.5'/%3E%3Crect x='15.0979' y='14.1614' width='7.34678' height='1.32449' rx='0.662244' transform='rotate(45 15.0979 14.1614)' fill='%23aeb9cb' stroke='%23aeb9cb'/%3E%3Crect x='13.7847' y='13.2916' width='1.05276' height='0.697347' transform='rotate(45 13.7847 13.2916)' stroke='%23aeb9cb' stroke-width='0.697346'/%3E%3C/svg%3E%0A\") no-repeat scroll 8px center, white}.mi-input:disabled{opacity:0.48;cursor:not-allowed}.mi-select{display:block;padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:32px;border-radius:4px;border-width:1px;border-style:solid;border-color:#c8d0e0;color:#1e2025;font-size:1rem;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=\") 96%/24px no-repeat, linear-gradient(#f5f7fa, #ebeff5)}.mi-select:disabled{opacity:0.48;cursor:not-allowed}.mi-select:not(:disabled):hover{background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=\") 96%/24px no-repeat, linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-select:not(:disabled):active{background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=\") 96%/24px no-repeat, linear-gradient(#dee3ed, #ebeff5)}.mi-toggle{margin:0}.mi-toggle:disabled{cursor:not-allowed}.mi-toggle+.mi-label{margin-left:8px}@supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none){.mi-toggle{padding:2px;box-sizing:border-box;appearance:none;-moz-appearance:none;-webkit-appearance:none;width:48px;height:24px;border-radius:9999px;background-color:#8d98aa;transition:background-color 300ms ease}.mi-toggle:disabled{opacity:0.48}.mi-toggle:checked{background-color:#2a844e}.mi-toggle::after{content:\"\";display:inline-block;width:20px;height:20px;transform:translateX(0px);border-radius:50%;background-color:#fcfcfc;box-shadow:0 1px 1px rgba(0, 0, 0, 0.125), 0 2px 2px rgba(0, 0, 0, 0.125);transition:300ms ease}.mi-toggle:checked::after{transform:translateX(24px)}}.width-none{width:0}.width-xxx-small{width:2px}.width-xx-small{width:4px}.width-x-small{width:8px}.width-small{width:12px}.width-medium{width:16px}.width-large{width:24px}.width-x-large{width:32px}.width-xx-large{width:40px}.width-xxx-large{width:48px}.width-xxxx-large{width:64px}.min-width-none{min-width:0}.min-width-xxx-small{min-width:2px}.min-width-xx-small{min-width:4px}.min-width-x-small{min-width:8px}.min-width-small{min-width:12px}.min-width-medium{min-width:16px}.min-width-large{min-width:24px}.min-width-x-large{min-width:32px}.min-width-xx-large{min-width:40px}.min-width-xxx-large{min-width:48px}.min-width-xxxx-large{min-width:64px}.max-width-none{max-width:0}.max-width-xxx-small{max-width:2px}.max-width-xx-small{max-width:4px}.max-width-x-small{max-width:8px}.max-width-small{max-width:12px}.max-width-medium{max-width:16px}.max-width-large{max-width:24px}.max-width-x-large{max-width:32px}.max-width-xx-large{max-width:40px}.max-width-xxx-large{max-width:48px}.max-width-xxxx-large{max-width:64px}.height-none{height:0}.height-xxx-small{height:2px}.height-xx-small{height:4px}.height-x-small{height:8px}.height-small{height:12px}.height-medium{height:16px}.height-large{height:24px}.height-x-large{height:32px}.height-xx-large{height:40px}.height-xxx-large{height:48px}.height-xxxx-large{height:64px}.min-height-none{min-height:0}.min-height-xxx-small{min-height:2px}.min-height-xx-small{min-height:4px}.min-height-x-small{min-height:8px}.min-height-small{min-height:12px}.min-height-medium{min-height:16px}.min-height-large{min-height:24px}.min-height-x-large{min-height:32px}.min-height-xx-large{min-height:40px}.min-height-xxx-large{min-height:48px}.min-height-xxxx-large{min-height:64px}.max-height-none{max-height:0}.max-height-xxx-small{max-height:2px}.max-height-xx-small{max-height:4px}.max-height-x-small{max-height:8px}.max-height-small{max-height:12px}.max-height-medium{max-height:16px}.max-height-large{max-height:24px}.max-height-x-large{max-height:32px}.max-height-xx-large{max-height:40px}.max-height-xxx-large{max-height:48px}.max-height-xxxx-large{max-height:64px}.debug *{outline:1px solid gold}.flex{display:flex;flex:1}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.text-decoration-none{text-decoration:none}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.margin-auto{margin-left:auto;margin-right:auto}*{box-sizing:border-box}.table{width:100%;border-collapse:collapse;font-family:Figtree, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background-color:#ffffff;border-style:solid;border-width:1px;border-color:#d1d5db;border-top:none}.table__header-cell{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:48px;font-weight:500;font-size:1rem;line-height:1.25rem;color:#ffffff;background-color:#374151;padding-top:16px;padding-bottom:16px;padding-left:8px;padding-right:8px}.table__header-cell::before,.table__header-cell::after{content:\"\";display:block;position:absolute;right:16px;top:50%;border:7px solid transparent}.table__header-cell::before{border-bottom-color:#6b7280;margin-top:-15px}.table__header-cell::after{border-top-color:#6b7280;margin-top:3px}.table__header-cell.desc::after{border-top-color:#f9fafb}.table__header-cell.asc::before{border-bottom-color:#f9fafb}.table__header-cell--no-sort::before,.table__header-cell--no-sort::after{border:none}.table__header-cell:not(.table__header-cell--no-sort){padding-right:46px;cursor:pointer}.table__header-cell--fit-content{white-space:nowrap;width:1px}.table__header-cell--align-left{text-align:left}.table__header-cell--align-center{text-align:center}.table__header-cell--align-right{text-align:right}.table__header-cell--sticky{position:sticky;top:0;z-index:1}.table__row:nth-child(even):hover{background-color:#f3f4f6}.table__row:nth-child(odd){background-color:#f9fafb}.table__row:nth-child(odd):hover{background-color:#f3f4f6}.table__data{font-size:1rem;padding-left:8px;padding-right:8px;height:56px;border-right:1px solid #d1d5db}.table__data:last-child{border-right:none}.table__data--fit-content{white-space:nowrap;width:1px}.table__data--align-left{text-align:left}.table__data--align-center{text-align:center}.table__data--align-right{text-align:right}.table__data--monospace-font{font-family:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace}.empty-page{display:flex;align-items:center;flex-direction:column;margin-top:72px;height:345px}.empty-page>*{margin:0}.empty-page__header{font-size:2.25rem}.empty-page__subheader{margin-top:32px;font-size:1.5rem}";
+const dataTableCss = () => `a.mi-button{cursor:default}.mi-button{border-radius:4px;border-width:1px;border-style:solid;font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:1rem;font-weight:500;padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px;display:inline-flex;align-items:center}.mi-button:disabled{opacity:0.48;cursor:not-allowed}.mi-button object{filter:invert(9%) sepia(13%) saturate(692%) hue-rotate(185deg) brightness(98%) contrast(91%);width:16px;height:16px}.mi-button--small{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:0.875rem;height:32px}.mi-button--small object{width:16px;height:16px}.mi-button--large{padding-left:16px;padding-right:16px;font-size:1.25rem}.mi-button--large object{width:20px;height:20px}.mi-button--full-width{width:100%;justify-content:center}.mi-button--icon-left{padding-left:12px}.mi-button--icon-left object{margin-right:8px}.mi-button--icon-right{padding-right:12px}.mi-button--icon-right object{margin-left:8px}.mi-button--icon-both{padding-top:12px;padding-bottom:12px}.mi-button--icon-both object:first-of-type{margin-right:8px}.mi-button--icon-both object:last-of-type{margin-left:8px}.mi-button--base{background:linear-gradient(#f5f7fa, #ebeff5);color:#1e2025;border-color:#c8d0e0}.mi-button--base:not(:disabled):hover{background:linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-button--base:not(:disabled):active{background:linear-gradient(#dee3ed, #ebeff5)}.mi-button--primary{color:#ffffff;border-color:#20693e;background:linear-gradient(#3ba064, #2a844e)}.mi-button--primary object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--primary:not(:disabled):hover{background:linear-gradient(#2a844e, #20693e)}.mi-button--primary:not(:disabled):active{background:linear-gradient(#20693e, #2a844e)}.mi-button--delete{background:linear-gradient(#f55151, #de1b1b);color:#ffffff;border-color:#ba0d0d}.mi-button--delete object{filter:invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%)}.mi-button--delete:not(:disabled):hover{background:linear-gradient(#de1b1b, #ba0d0d)}.mi-button--delete:not(:disabled):active{background:linear-gradient(#ba0d0d, #de1b1b)}.mi-button--outline{color:#3071d9;border-color:#3071d9;background-color:transparent}.mi-button--outline object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--outline:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--outline:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-button--link{color:#3071d9;border-style:none;background-color:transparent;cursor:pointer}.mi-button--link object{filter:invert(38%) sepia(97%) saturate(742%) hue-rotate(188deg) brightness(86%) contrast(97%)}.mi-button--link:not(:disabled):hover{color:#1d5bbf;border-color:#1d5bbf;background-color:#eef4fc}.mi-button--link:disabled:hover{cursor:not-allowed}.mi-button--link:not(:disabled):active{color:#1d5bbf;border-color:#1d5bbf;background-color:#cfe0fc}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=tel]{font-size:1rem;padding:8px;border-style:solid;border-width:1px;border-color:#8d98aa;border-radius:4px}.mi-input[type=text],.mi-input[type=search],.mi-input[type=number],.mi-input[type=password],.mi-input[type=range],.mi-input[type=tel]{display:block}.mi-input[type=radio],.mi-input[type=checkbox]{margin:0px;transform:scale(1.2, 1.2)}.mi-input[type=search]{padding-left:32px;background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.6267 8.43836C14.6267 11.8561 11.8561 14.6267 8.43836 14.6267C5.02062 14.6267 2.25 11.8561 2.25 8.43836C2.25 5.02062 5.02062 2.25 8.43836 2.25C11.8561 2.25 14.6267 5.02062 14.6267 8.43836Z' stroke='%23aeb9cb' stroke-width='2.5'/%3E%3Crect x='15.0979' y='14.1614' width='7.34678' height='1.32449' rx='0.662244' transform='rotate(45 15.0979 14.1614)' fill='%23aeb9cb' stroke='%23aeb9cb'/%3E%3Crect x='13.7847' y='13.2916' width='1.05276' height='0.697347' transform='rotate(45 13.7847 13.2916)' stroke='%23aeb9cb' stroke-width='0.697346'/%3E%3C/svg%3E%0A") no-repeat scroll 8px center, white}.mi-input:disabled{opacity:0.48;cursor:not-allowed}.mi-select{display:block;padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:32px;border-radius:4px;border-width:1px;border-style:solid;border-color:#c8d0e0;color:#1e2025;font-size:1rem;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#f5f7fa, #ebeff5)}.mi-select:disabled{opacity:0.48;cursor:not-allowed}.mi-select:not(:disabled):hover{background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#ebeff5, #dee3ed);border-color:#aeb9cb}.mi-select:not(:disabled):active{background:url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0QjU1JyBoZWlnaHQ9JzI0JyB2aWV3Qm94PScwIDAgMjQgMjQnIHdpZHRoPScyNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KPHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz4KPHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPgo8L3N2Zz4=") 96%/24px no-repeat, linear-gradient(#dee3ed, #ebeff5)}.mi-toggle{margin:0}.mi-toggle:disabled{cursor:not-allowed}.mi-toggle+.mi-label{margin-left:8px}@supports (appearance: none) or (-moz-appearance: none) or (-webkit-appearance: none){.mi-toggle{padding:2px;box-sizing:border-box;appearance:none;-moz-appearance:none;-webkit-appearance:none;width:48px;height:24px;border-radius:9999px;background-color:#8d98aa;transition:background-color 300ms ease}.mi-toggle:disabled{opacity:0.48}.mi-toggle:checked{background-color:#2a844e}.mi-toggle::after{content:"";display:inline-block;width:20px;height:20px;transform:translateX(0px);border-radius:50%;background-color:#fcfcfc;box-shadow:0 1px 1px rgba(0, 0, 0, 0.125), 0 2px 2px rgba(0, 0, 0, 0.125);transition:300ms ease}.mi-toggle:checked::after{transform:translateX(24px)}}.width-none{width:0}.width-xxx-small{width:2px}.width-xx-small{width:4px}.width-x-small{width:8px}.width-small{width:12px}.width-medium{width:16px}.width-large{width:24px}.width-x-large{width:32px}.width-xx-large{width:40px}.width-xxx-large{width:48px}.width-xxxx-large{width:64px}.min-width-none{min-width:0}.min-width-xxx-small{min-width:2px}.min-width-xx-small{min-width:4px}.min-width-x-small{min-width:8px}.min-width-small{min-width:12px}.min-width-medium{min-width:16px}.min-width-large{min-width:24px}.min-width-x-large{min-width:32px}.min-width-xx-large{min-width:40px}.min-width-xxx-large{min-width:48px}.min-width-xxxx-large{min-width:64px}.max-width-none{max-width:0}.max-width-xxx-small{max-width:2px}.max-width-xx-small{max-width:4px}.max-width-x-small{max-width:8px}.max-width-small{max-width:12px}.max-width-medium{max-width:16px}.max-width-large{max-width:24px}.max-width-x-large{max-width:32px}.max-width-xx-large{max-width:40px}.max-width-xxx-large{max-width:48px}.max-width-xxxx-large{max-width:64px}.height-none{height:0}.height-xxx-small{height:2px}.height-xx-small{height:4px}.height-x-small{height:8px}.height-small{height:12px}.height-medium{height:16px}.height-large{height:24px}.height-x-large{height:32px}.height-xx-large{height:40px}.height-xxx-large{height:48px}.height-xxxx-large{height:64px}.min-height-none{min-height:0}.min-height-xxx-small{min-height:2px}.min-height-xx-small{min-height:4px}.min-height-x-small{min-height:8px}.min-height-small{min-height:12px}.min-height-medium{min-height:16px}.min-height-large{min-height:24px}.min-height-x-large{min-height:32px}.min-height-xx-large{min-height:40px}.min-height-xxx-large{min-height:48px}.min-height-xxxx-large{min-height:64px}.max-height-none{max-height:0}.max-height-xxx-small{max-height:2px}.max-height-xx-small{max-height:4px}.max-height-x-small{max-height:8px}.max-height-small{max-height:12px}.max-height-medium{max-height:16px}.max-height-large{max-height:24px}.max-height-x-large{max-height:32px}.max-height-xx-large{max-height:40px}.max-height-xxx-large{max-height:48px}.max-height-xxxx-large{max-height:64px}.debug *{outline:1px solid gold}.flex{display:flex;flex:1}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.display-block{display:block}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.text-decoration-none{text-decoration:none}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}.margin-auto{margin-left:auto;margin-right:auto}*{box-sizing:border-box}.table{width:100%;border-collapse:collapse;font-family:Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";background-color:#ffffff;border-style:solid;border-width:1px;border-color:#d1d5db;border-top:none}.table__header-cell{position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:48px;font-weight:500;font-size:1rem;line-height:1.25rem;color:#ffffff;background-color:#374151;padding-top:16px;padding-bottom:16px;padding-left:8px;padding-right:8px}.table__header-cell::before,.table__header-cell::after{content:"";display:block;position:absolute;right:16px;top:50%;border:7px solid transparent}.table__header-cell::before{border-bottom-color:#6b7280;margin-top:-15px}.table__header-cell::after{border-top-color:#6b7280;margin-top:3px}.table__header-cell.desc::after{border-top-color:#f9fafb}.table__header-cell.asc::before{border-bottom-color:#f9fafb}.table__header-cell--no-sort::before,.table__header-cell--no-sort::after{border:none}.table__header-cell:not(.table__header-cell--no-sort){padding-right:46px;cursor:pointer}.table__header-cell--fit-content{white-space:nowrap;width:1px}.table__header-cell--align-left{text-align:left}.table__header-cell--align-center{text-align:center}.table__header-cell--align-right{text-align:right}.table__header-cell--sticky{position:sticky;top:0;z-index:1}.table__row:nth-child(even):hover{background-color:#f3f4f6}.table__row:nth-child(odd){background-color:#f9fafb}.table__row:nth-child(odd):hover{background-color:#f3f4f6}.table__data{font-size:1rem;padding-left:8px;padding-right:8px;height:56px;border-right:1px solid #d1d5db}.table__data:last-child{border-right:none}.table__data--fit-content{white-space:nowrap;width:1px}.table__data--align-left{text-align:left}.table__data--align-center{text-align:center}.table__data--align-right{text-align:right}.table__data--monospace-font{font-family:Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace}.empty-page{display:flex;align-items:center;flex-direction:column;margin-top:72px;height:345px}.empty-page>*{margin:0}.empty-page__header{font-size:2.25rem}.empty-page__subheader{margin-top:32px;font-size:1.5rem}`;
 
 const DataTable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectionChanged = createEvent(this, "selectionChanged", 7);
-    this.columns = [];
-    this.numberOfSelectedRows = undefined;
-    this.rows = [];
-    this.maxRows = undefined;
-    this.page = undefined;
-    this.selectable = false;
-    this.selected = new Set();
-    this.emptyPageHeader = 'No results found';
-    this.emptyPageSubheader = undefined;
-    this.isHeaderSticky = true;
-    this.tableRows = [];
-    this.currentPage = 1;
-    this.sortByColumn = null;
-  }
-  onSelectionChangedHandler() {
-    this.selectionChanged.emit(this.selected);
-  }
-  /**
-   * When the rows is set from outside of the components the table sorting is reset and the rows are assigned to the internal tabelRows property.
-   */
-  onRowsChangedHandler() {
-    this.tableRows = Array.from(this.rows);
-    this.setHeaderCheckboxState();
-  }
-  /**
-   * When the page is set from outside of the components the table needs to show the newly specified page of rows.
-   */
-  onPageChangedHandler() {
-    this.currentPage = this.page;
-    this.renderTableContent();
-  }
-  connectedCallback() {
-    const miColumns = this.el.querySelectorAll('mi-column');
-    this.columns = Array.from(miColumns).map((miColumn) => {
-      const column = {
-        alignContent: miColumn.alignContent,
-        monospace: miColumn.monospace,
-        label: !isNullOrUndefined(miColumn.label) ? miColumn.label : miColumn.binding,
-        binding: miColumn.binding || null,
-        sortable: miColumn.sortable,
-        fitContent: !!miColumn.fitContent,
-        /* All HTML comments are removed from the template to avoid the issues with the table not displaying any data in IE11  */
-        template: miColumn.innerHTML.replace(/<!--[\s\S]*?-->/g, ''),
-        columnElement: miColumn,
-        width: miColumn.width
-      };
-      /* If the mi-column has the sort attribute, then the initial sort state is set. */
-      if (miColumn.sort && !this.sortByColumn) {
-        this.sortByColumn = { column: column, sortOrder: miColumn.sort === 'asc' ? 'asc' : 'desc' };
-      }
-      return column;
-    });
-  }
-  /**
-   * Column header click handler.
-   * If the column is sortable the sort order is reversed.
-   *
-   * @private
-   * @param {MouseEvent} event
-   * @param {any} column
-   */
-  columnHeaderClickHandler(event, column) {
-    var _a, _b;
-    if (!isNullOrUndefined(column.sortable)) {
-      let sortOrder = 'asc';
-      if (column === ((_a = this.sortByColumn) === null || _a === void 0 ? void 0 : _a.column)) {
-        // TODO: Use SortOrder enum in MICMS-1353
-        sortOrder = ((_b = this.sortByColumn) === null || _b === void 0 ? void 0 : _b.sortOrder) === 'asc' ? 'desc' : 'asc';
-      }
-      /* When a column that is sortable is clicked then the sort state is updated. */
-      this.sortByColumn = { column: column, sortOrder: sortOrder };
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectionChanged = createEvent(this, "selectionChanged", 7);
+        /**
+         * Array of objects for each row in the table.
+         */
+        this.rows = [];
+        /**
+         * The selectable attribute specifies whether the first column in the table should be checkboxes. The header will be a select all or none checkbox.
+         */
+        this.selectable = false;
+        /**
+         * The selected property contains a Set of all selected rows. This property is only relevant if the selectable attribute is present.
+         */
+        this.selected = new Set();
+        /**
+         * Guiding message when presented with a table that has no rows.
+         */
+        this.emptyPageHeader = 'No results found';
+        /**
+         * Whether or not the table header should be sticky.
+         */
+        this.isHeaderSticky = true;
+        this.tableRows = [];
+        this.currentPage = 1;
+        /**
+         * State to keep track of the table sorting.
+         */
+        this.sortByColumn = null;
+        this.columns = [];
     }
-  }
-  /**
-   * Sorts table rows.
-   *
-   * @private
-   * @return {Array<any>}
-   */
-  sortTableRows() {
-    var _a, _b, _c;
-    //Check if the table has any rows.
-    if (this.tableRows.length > 0 && this.sortByColumn) {
-      let sortMethod;
-      const sortByColumn = (_a = this.sortByColumn) === null || _a === void 0 ? void 0 : _a.column;
-      const sortOrder = (_b = this.sortByColumn) === null || _b === void 0 ? void 0 : _b.sortOrder;
-      if (sortByColumn && sortOrder) {
-        if (((_c = sortByColumn.sortable) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'date') {
-          sortMethod = sortOrder === 'desc' ? dateDesc(sortByColumn.binding) : dateAsc(sortByColumn.binding);
+    onSelectionChangedHandler() {
+        this.selectionChanged.emit(this.selected);
+    }
+    /**
+     * When the rows is set from outside of the components the table sorting is reset and the rows are assigned to the internal tabelRows property.
+     */
+    onRowsChangedHandler() {
+        this.tableRows = Array.from(this.rows);
+        this.setHeaderCheckboxState();
+    }
+    /**
+     * When the page is set from outside of the components the table needs to show the newly specified page of rows.
+     */
+    onPageChangedHandler() {
+        this.currentPage = this.page;
+        this.renderTableContent();
+    }
+    connectedCallback() {
+        const miColumns = this.el.querySelectorAll('mi-column');
+        this.columns = Array.from(miColumns).map((miColumn) => {
+            const column = {
+                alignContent: miColumn.alignContent,
+                monospace: miColumn.monospace,
+                label: !isNullOrUndefined(miColumn.label) ? miColumn.label : miColumn.binding,
+                binding: miColumn.binding || null,
+                sortable: miColumn.sortable,
+                fitContent: !!miColumn.fitContent,
+                /* All HTML comments are removed from the template to avoid the issues with the table not displaying any data in IE11  */
+                template: miColumn.innerHTML.replace(/<!--[\s\S]*?-->/g, ''),
+                columnElement: miColumn,
+                width: miColumn.width
+            };
+            /* If the mi-column has the sort attribute, then the initial sort state is set. */
+            if (miColumn.sort && !this.sortByColumn) {
+                this.sortByColumn = { column: column, sortOrder: miColumn.sort === 'asc' ? 'asc' : 'desc' };
+            }
+            return column;
+        });
+    }
+    /**
+     * Column header click handler.
+     * If the column is sortable the sort order is reversed.
+     *
+     * @private
+     * @param {MouseEvent} event
+     * @param {any} column
+     */
+    columnHeaderClickHandler(event, column) {
+        var _a, _b;
+        if (!isNullOrUndefined(column.sortable)) {
+            let sortOrder = 'asc';
+            if (column === ((_a = this.sortByColumn) === null || _a === void 0 ? void 0 : _a.column)) {
+                // TODO: Use SortOrder enum in MICMS-1353
+                sortOrder = ((_b = this.sortByColumn) === null || _b === void 0 ? void 0 : _b.sortOrder) === 'asc' ? 'desc' : 'asc';
+            }
+            /* When a column that is sortable is clicked then the sort state is updated. */
+            this.sortByColumn = { column: column, sortOrder: sortOrder };
         }
-        else {
-          sortMethod = sortOrder === 'desc' ? desc(sortByColumn.binding) : asc(sortByColumn.binding);
+    }
+    /**
+     * Sorts table rows.
+     *
+     * @private
+     * @return {Array<any>}
+     */
+    sortTableRows() {
+        var _a, _b, _c;
+        //Check if the table has any rows.
+        if (this.tableRows.length > 0 && this.sortByColumn) {
+            let sortMethod;
+            const sortByColumn = (_a = this.sortByColumn) === null || _a === void 0 ? void 0 : _a.column;
+            const sortOrder = (_b = this.sortByColumn) === null || _b === void 0 ? void 0 : _b.sortOrder;
+            if (sortByColumn && sortOrder) {
+                if (((_c = sortByColumn.sortable) === null || _c === void 0 ? void 0 : _c.toLowerCase()) === 'date') {
+                    sortMethod = sortOrder === 'desc' ? dateDesc(sortByColumn.binding) : dateAsc(sortByColumn.binding);
+                }
+                else {
+                    sortMethod = sortOrder === 'desc' ? desc(sortByColumn.binding) : asc(sortByColumn.binding);
+                }
+                return [...this.tableRows.sort(sortMethod)];
+            }
+        }
+        return this.tableRows;
+    }
+    /**
+     * Replace template variables (eg. "{id}") with the corresponding value from the data.
+     *
+     * @private
+     * @param {string} template
+     * @param {object} data
+     * @returns {string}
+     */
+    replaceVars(template, data) {
+        return template.replace(/\{(.*?)\}/g, (match, capture) => {
+            const path = capture.split('.');
+            // Traverse the input object until a given key is found.
+            return path.reduce((object, key) => {
+                return object ? object[key] : null;
+            }, data);
+        });
+    }
+    /**
+     * Remove boolean HTML attributes (eg. checked) that will have a false value based on data. This is necessary since
+     * the very presence of the attribute will give it a truthy value.
+     *
+     * @private
+     * @param {string} template
+     * @param {array} data
+     * @returns {string}
+     */
+    removeFalseBooleanAttributes(template, data) {
+        return template.replace(/ (checked|disabled|hidden|selected)="\{(.*?)\}"/, (match, attributeName, binding) => {
+            return data[binding] === false ? '' : attributeName;
+        });
+    }
+    /**
+     * React to clicks on table rows and emits the internal cellContentClicked event to
+     * the column component if clicked on content within a cell.
+     *
+     * @private
+     * @param {MouseEvent} event
+     * @param {any} tableRow
+     */
+    tableRowClicked(event, tableRow) {
+        var _a;
+        const element = event.target;
+        const cellIndex = element.closest('td').cellIndex;
+        const columnClickedIndex = this.selectable ? cellIndex - 1 : cellIndex;
+        if (element.tagName.toLowerCase() !== 'td' && this.columns[columnClickedIndex]) {
+            const eventPayload = { detail: tableRow };
+            (_a = this.columns[columnClickedIndex]) === null || _a === void 0 ? void 0 : _a.columnElement.dispatchEvent(new CustomEvent('cellContentClicked', eventPayload));
         }
-        return [...this.tableRows.sort(sortMethod)];
-      }
     }
-    return this.tableRows;
-  }
-  /**
-   * Replace template variables (eg. "{id}") with the corresponding value from the data.
-   *
-   * @private
-   * @param {string} template
-   * @param {object} data
-   * @returns {string}
-   */
-  replaceVars(template, data) {
-    return template.replace(/\{(.*?)\}/g, (match, capture) => {
-      const path = capture.split('.');
-      // Traverse the input object until a given key is found.
-      return path.reduce((object, key) => {
-        return object ? object[key] : null;
-      }, data);
-    });
-  }
-  /**
-   * Remove boolean HTML attributes (eg. checked) that will have a false value based on data. This is necessary since
-   * the very presence of the attribute will give it a truthy value.
-   *
-   * @private
-   * @param {string} template
-   * @param {array} data
-   * @returns {string}
-   */
-  removeFalseBooleanAttributes(template, data) {
-    return template.replace(/ (checked|disabled|hidden|selected)="\{(.*?)\}"/, (match, attributeName, binding) => {
-      return data[binding] === false ? '' : attributeName;
-    });
-  }
-  /**
-   * React to clicks on table rows and emits the internal cellContentClicked event to
-   * the column component if clicked on content within a cell.
-   *
-   * @private
-   * @param {MouseEvent} event
-   * @param {any} tableRow
-   */
-  tableRowClicked(event, tableRow) {
-    var _a;
-    const element = event.target;
-    const cellIndex = element.closest('td').cellIndex;
-    const columnClickedIndex = this.selectable ? cellIndex - 1 : cellIndex;
-    if (element.tagName.toLowerCase() !== 'td' && this.columns[columnClickedIndex]) {
-      const eventPayload = { detail: tableRow };
-      (_a = this.columns[columnClickedIndex]) === null || _a === void 0 ? void 0 : _a.columnElement.dispatchEvent(new CustomEvent('cellContentClicked', eventPayload));
+    async componentWillLoad() {
+        if (this.rows.length > 0) {
+            this.tableRows = Array.from(this.rows);
+        }
+    }
+    render() {
+        return (h(Host, { key: '5f33c379fd4a1726cad525f3674e6a4e8c5e90e0' }, h("table", { key: '852a27330cd0208c9f8d2bcab8589c44e809c713', class: "table" }, h("thead", { key: 'a111f00a7d2e84678b21bea62ad3b999b5dbabf0' }, h("tr", { key: '0550d95de2276ecd673389c0b7eac6421a80a2b7' }, this.renderSelectHeader(), this.columns.map(column => {
+            var _a;
+            const width = !column.fitContent ? column.width || 'auto' : '';
+            const sortOrder = ((_a = this.sortByColumn) === null || _a === void 0 ? void 0 : _a.column) === column ? this.sortByColumn.sortOrder : null;
+            return h("th", { "data-binding": column.binding, style: { 'width': width, 'max-width': width, 'min-width': width }, onClick: (event) => this.columnHeaderClickHandler(event, column), class: `table__header-cell ${this.isHeaderSticky ? 'table__header-cell--sticky' : ''} ${isNullOrUndefined(column.sortable) ? 'table__header-cell--no-sort' : ''} ${isNullOrUndefined(sortOrder) ? '' : sortOrder} ${column.fitContent ? 'table__header-cell--fit-content' : ''}` }, column.label);
+        }))), h("tbody", { key: '230d8604fd9f43ea6264bf3ecebc3acb09d230ed' }, this.renderTableContent())), this.tableRows.length === 0 ? this.renderEmptyPage() : null));
     }
-  }
-  async componentWillLoad() {
-    if (this.rows.length > 0) {
-      this.tableRows = Array.from(this.rows);
+    /**
+     * If the table is selectable then renderSelectHeader will render the th element with the checkbox to check or uncheck all items in the table.
+     *
+     * @private
+     * @returns {JSX.Element}
+     */
+    renderSelectHeader() {
+        if (this.selectable) {
+            return (h("th", { class: `table__header-cell ${this.isHeaderSticky ? 'table__header-cell--sticky' : ''} table__header-cell--fit-content table__header-cell--no-sort table__header-cell--align-center` }, h("input", { type: "checkbox", class: "mi-input", ref: (el) => this.selectAllCheckbox = el, onChange: () => this.selectHeaderOnChangeHandler() })));
+        }
+    }
+    /**
+     * If the table is selectable then this method will render the td for each row in the item to select or unselect the row.
+     *
+     * @private
+     * @param {object} row
+     * @returns {JSX.Element}
+     */
+    renderSelectRow(row) {
+        if (this.selectable) {
+            return (h("td", { class: "table__data table__data--align-center" }, h("input", { class: "mi-input", type: "checkbox", checked: this.selected.has(row), onChange: event => this.selectOnChangeHandler(event, row) })));
+        }
     }
-  }
-  render() {
-    return (h(Host, null, h("table", { class: "table" }, h("thead", null, h("tr", null, this.renderSelectHeader(), this.columns.map(column => {
-      var _a;
-      const width = !column.fitContent ? column.width || 'auto' : '';
-      const sortOrder = ((_a = this.sortByColumn) === null || _a === void 0 ? void 0 : _a.column) === column ? this.sortByColumn.sortOrder : null;
-      return h("th", { "data-binding": column.binding, style: { 'width': width, 'max-width': width, 'min-width': width }, onClick: (event) => this.columnHeaderClickHandler(event, column), class: `table__header-cell ${this.isHeaderSticky ? 'table__header-cell--sticky' : ''} ${isNullOrUndefined(column.sortable) ? 'table__header-cell--no-sort' : ''} ${isNullOrUndefined(sortOrder) ? '' : sortOrder} ${column.fitContent ? 'table__header-cell--fit-content' : ''}` }, column.label);
-    }))), h("tbody", null, this.renderTableContent())), this.tableRows.length === 0 ? this.renderEmptyPage() : null));
-  }
-  /**
-   * If the table is selectable then renderSelectHeader will render the th element with the checkbox to check or uncheck all items in the table.
-   *
-   * @private
-   * @returns {JSX.Element}
-   */
-  renderSelectHeader() {
-    if (this.selectable) {
-      return (h("th", { class: `table__header-cell ${this.isHeaderSticky ? 'table__header-cell--sticky' : ''} table__header-cell--fit-content table__header-cell--no-sort table__header-cell--align-center` }, h("input", { type: "checkbox", class: "mi-input", ref: (el) => this.selectAllCheckbox = el, onChange: () => this.selectHeaderOnChangeHandler() })));
+    /**
+     * Helper method to render the tables content.
+     *
+     * @private
+     * @returns {[JSX.Element]}
+     */
+    renderTableContent() {
+        let tableRows = this.sortTableRows();
+        tableRows = isNumber(this.maxRows) && this.maxRows > 0 ?
+            tableRows.slice(this.maxRows * (this.currentPage - 1), this.maxRows * this.currentPage)
+            : tableRows;
+        return tableRows.map(row => this.renderTableRow(row));
     }
-  }
-  /**
-   * If the table is selectable then this method will render the td for each row in the item to select or unselect the row.
-   *
-   * @private
-   * @param {object} row
-   * @returns {JSX.Element}
-   */
-  renderSelectRow(row) {
-    if (this.selectable) {
-      return (h("td", { class: "table__data table__data--align-center" }, h("input", { class: "mi-input", type: "checkbox", checked: this.selected.has(row), onChange: event => this.selectOnChangeHandler(event, row) })));
+    /**
+     * Helper method to render a table row.
+     *
+     * @private
+     * @param {*} tableRow
+     * @returns {JSX.Element}
+     */
+    renderTableRow(tableRow) {
+        const rowData = [];
+        for (const column of this.columns) {
+            let template = column.template;
+            if (template > '') {
+                template = this.removeFalseBooleanAttributes(template, tableRow);
+                template = this.replaceVars(template, tableRow);
+                rowData.push(template);
+            }
+            else {
+                rowData.push(tableRow[column.binding]);
+            }
+        }
+        return h("tr", { class: "table__row", onClick: e => this.tableRowClicked(e, tableRow) }, this.renderSelectRow(tableRow), rowData.map((cellContent, cellIndex) => h("td", { class: `table__data ${this.columns[cellIndex].fitContent ? 'table__data--fit-content' : ''} table__data--align-${this.columns[cellIndex].alignContent || 'left'} ${this.columns[cellIndex].monospace ? 'table__data--monospace-font' : ''}`, innerHTML: cellContent })));
     }
-  }
-  /**
-   * Helper method to render the tables content.
-   *
-   * @private
-   * @returns {[JSX.Element]}
-   */
-  renderTableContent() {
-    let tableRows = this.sortTableRows();
-    tableRows = isNumber(this.maxRows) && this.maxRows > 0 ?
-      tableRows.slice(this.maxRows * (this.currentPage - 1), this.maxRows * this.currentPage)
-      : tableRows;
-    return tableRows.map(row => this.renderTableRow(row));
-  }
-  /**
-   * Helper method to render a table row.
-   *
-   * @private
-   * @param {*} tableRow
-   * @returns {JSX.Element}
-   */
-  renderTableRow(tableRow) {
-    const rowData = [];
-    for (const column of this.columns) {
-      let template = column.template;
-      if (template > '') {
-        template = this.removeFalseBooleanAttributes(template, tableRow);
-        template = this.replaceVars(template, tableRow);
-        rowData.push(template);
-      }
-      else {
-        rowData.push(tableRow[column.binding]);
-      }
+    /**
+     * Renders en empty page with error message when no table rows are available.
+     *
+     * @private
+     * @returns {JSX.Element}
+     */
+    renderEmptyPage() {
+        const emptyPage = (h("div", { class: "empty-page" }, h("p", { class: "empty-page__header" }, this.emptyPageHeader), h("p", { class: "empty-page__subheader" }, this.emptyPageSubheader)));
+        return emptyPage;
     }
-    return h("tr", { class: "table__row", onClick: e => this.tableRowClicked(e, tableRow) }, this.renderSelectRow(tableRow), rowData.map((cellContent, cellIndex) => h("td", { class: `table__data ${this.columns[cellIndex].fitContent ? 'table__data--fit-content' : ''} table__data--align-${this.columns[cellIndex].alignContent || 'left'} ${this.columns[cellIndex].monospace ? 'table__data--monospace-font' : ''}`, innerHTML: cellContent })));
-  }
-  /**
-   * Renders en empty page with error message when no table rows are available.
-   *
-   * @private
-   * @returns {JSX.Element}
-   */
-  renderEmptyPage() {
-    const emptyPage = (h("div", { class: "empty-page" }, h("p", { class: "empty-page__header" }, this.emptyPageHeader), h("p", { class: "empty-page__subheader" }, this.emptyPageSubheader)));
-    return emptyPage;
-  }
-  /**
-   * The event handler for the onchange event for the checkboxes in the selectable column.
-   *
-   * @private
-   * @param {EventData} event
-   * @param {object} row
-   */
-  selectOnChangeHandler(event, row) {
-    event.target.checked ? this.selected.add(row) : this.selected.delete(row);
-    this.setHeaderCheckboxState();
-    //The selectedRows is updated to force a rerendering of the table with the correct state.
-    this.numberOfSelectedRows = this.selected.size;
-    event.stopPropagation();
-  }
-  /**
-   * Set the state of the checkbox in the table header.
-   * The state can be either checked, unchecked or indeterminate.
-   */
-  setHeaderCheckboxState() {
-    if (this.selectAllCheckbox && this.selectable) {
-      this.selectAllCheckbox.checked = this.selected.size === this.rows.length;
-      this.selectAllCheckbox.indeterminate = this.selected.size > 0 && this.selected.size < this.rows.length;
+    /**
+     * The event handler for the onchange event for the checkboxes in the selectable column.
+     *
+     * @private
+     * @param {EventData} event
+     * @param {object} row
+     */
+    selectOnChangeHandler(event, row) {
+        event.target.checked ? this.selected.add(row) : this.selected.delete(row);
+        this.setHeaderCheckboxState();
+        //The selectedRows is updated to force a rerendering of the table with the correct state.
+        this.numberOfSelectedRows = this.selected.size;
+        event.stopPropagation();
     }
-  }
-  /**
-   * The event handler for the onchange event for the checkbox in the selectable column header.
-   *
-   * @private
-   * @param {EventData} event
-   */
-  selectHeaderOnChangeHandler() {
-    if (this.selected.size > 0 && this.selected.size <= this.rows.length) {
-      this.selected.clear();
-      this.selectAllCheckbox.checked = false;
+    /**
+     * Set the state of the checkbox in the table header.
+     * The state can be either checked, unchecked or indeterminate.
+     */
+    setHeaderCheckboxState() {
+        if (this.selectAllCheckbox && this.selectable) {
+            this.selectAllCheckbox.checked = this.selected.size === this.rows.length;
+            this.selectAllCheckbox.indeterminate = this.selected.size > 0 && this.selected.size < this.rows.length;
+        }
     }
-    else {
-      this.rows.forEach(row => this.selected.add(row));
-      this.selectAllCheckbox.checked = true;
+    /**
+     * The event handler for the onchange event for the checkbox in the selectable column header.
+     *
+     * @private
+     * @param {EventData} event
+     */
+    selectHeaderOnChangeHandler() {
+        if (this.selected.size > 0 && this.selected.size <= this.rows.length) {
+            this.selected.clear();
+            this.selectAllCheckbox.checked = false;
+        }
+        else {
+            this.rows.forEach(row => this.selected.add(row));
+            this.selectAllCheckbox.checked = true;
+        }
+        this.numberOfSelectedRows = this.selected.size;
     }
-    this.numberOfSelectedRows = this.selected.size;
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "numberOfSelectedRows": ["onSelectionChangedHandler"],
-    "rows": ["onRowsChangedHandler"],
-    "page": ["onPageChangedHandler"]
-  }; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "numberOfSelectedRows": [{
+                "onSelectionChangedHandler": 0
+            }],
+        "rows": [{
+                "onRowsChangedHandler": 0
+            }],
+        "page": [{
+                "onPageChangedHandler": 0
+            }]
+    }; }
 };
 const asc = (value) => (a, b) => `${a[value] || ''}`
-  .localeCompare(`${(b[value] || '')}`.trimStart().toLowerCase(), undefined, { numeric: true });
+    .localeCompare(`${(b[value] || '')}`.trimStart().toLowerCase(), undefined, { numeric: true });
 const desc = (value) => (a, b) => `${b[value] || ''}`
-  .localeCompare(`${(a[value] || '')}`.trimStart().toLowerCase(), undefined, { numeric: true });
+    .localeCompare(`${(a[value] || '')}`.trimStart().toLowerCase(), undefined, { numeric: true });
 const dateAsc = (value) => (a, b) => {
-  const aAsDate = Date.parse(a[value]);
-  const bAsDate = Date.parse(b[value]);
-  return aAsDate > bAsDate ? 1 : aAsDate < bAsDate ? -1 : 0;
+    const aAsDate = Date.parse(a[value]);
+    const bAsDate = Date.parse(b[value]);
+    return aAsDate > bAsDate ? 1 : aAsDate < bAsDate ? -1 : 0;
 };
 const dateDesc = (value) => (b, a) => {
-  const aAsDate = Date.parse(a[value]);
-  const bAsDate = Date.parse(b[value]);
-  return aAsDate > bAsDate ? 1 : aAsDate < bAsDate ? -1 : 0;
+    const aAsDate = Date.parse(a[value]);
+    const bAsDate = Date.parse(b[value]);
+    return aAsDate > bAsDate ? 1 : aAsDate < bAsDate ? -1 : 0;
 };
-DataTable.style = dataTableCss;
+DataTable.style = dataTableCss();
 
 export { DataTable as mi_data_table };