@freshworks/crayons/dist/esm-es5/fw-data-table.entry.js

Crayons Web Components library

var __awaiter=this&&this.__awaiter||function(t,e,n,i){function a(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,s){function o(t){try{l(i.next(t))}catch(e){s(e)}}function r(t){try{l(i["throw"](t))}catch(e){s(e)}}function l(t){t.done?n(t.value):a(t.value).then(o,r)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,a,s,o;return o={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function r(t){return function(e){return l([t,e])}}function l(o){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,a&&(s=o[0]&2?a["return"]:o[0]?a["throw"]||((s=a["return"])&&s.call(a),0):a.next)&&!(s=s.call(a,o[1])).done)return s;if(a=0,s)o=[o[0]&2,s.value];switch(o[0]){case 0:case 1:s=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;a=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(s=n.trys,s=s.length>0&&s[s.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!s||o[1]>s[0]&&o[1]<s[3])){n.label=o[1];break}if(o[0]===6&&n.label<s[1]){n.label=s[1];s=o;break}if(s&&n.label<s[2]){n.label=s[2];n.ops.push(o);break}if(s[2])n.ops.pop();n.trys.pop();continue}o=e.call(t,n)}catch(r){o=[6,r];a=0}finally{i=s=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,i=e.length,a=t.length;n<i;n++,a++)t[a]=e[n];return t};import{r as registerInstance,c as createEvent,h,i as getElement}from"./index-25bc21e4.js";import{T as TranslationController}from"./Translation-f65767b0.js";import{c as createPopper}from"./popper-cec7308d.js";var dataTableCss=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}div.fw-data-table-container{position:relative;width:100%;height:100%;overflow:visible}div.fw-data-table-container div.fw-data-table-scrollable{position:relative;display:block;width:100%;height:100%;overflow:auto}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table{table-layout:fixed;border-collapse:collapse;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:100%;width:-webkit-max-content;width:-moz-max-content;width:max-content}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead{position:-webkit-sticky;position:sticky;top:0;width:100%;border-radius:4px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th{color:#475867;font-size:12px;line-height:20px;padding:12px 8px;font-weight:600;letter-spacing:0.2px;text-overflow:ellipsis;text-align:left;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:40px;max-width:1000px;background:#f5f7f9;overflow-wrap:anywhere;word-break:break-word;white-space:normal}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th:first-of-type{padding-left:16px;border-radius:4px 0px 0px 0px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th:last-of-type{padding-right:16px;border-radius:0px 4px 0px 0px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th.data-grid-sm{padding:4px 8px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th.data-grid-md{padding:12px 8px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th.data-grid-lg{padding:16px 8px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table thead tr th.hidden{display:none}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody{width:100%;background:#fff}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr{width:100%;border-bottom:1px solid #ebeff3}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr:hover,div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr:focus{background:#f5f7f9}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr.active{background:#e5f2fd}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr:last-child{border-bottom:0px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td{color:#12344d;font-size:14px;line-height:20px;padding:12px 8px;text-overflow:ellipsis;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:0;height:64px;overflow-wrap:anywhere;word-break:break-word;white-space:normal}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.data-grid-checkbox{text-align:center;width:20px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.data-grid-sm{padding:4px 8px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.data-grid-md{padding:12px 8px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.data-grid-lg{padding:16px 8px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td:first-child{padding-left:16px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td:last-child{padding-right:16px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.row-actions{width:1px;white-space:nowrap}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.row-actions fw-button{margin-right:5px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.row-actions fw-tooltip:last-child fw-button{margin-right:0px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr td.hidden{display:none}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr.loading{cursor:not-allowed}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr.loading td{position:relative;opacity:0.65}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody tr.loading td::after{content:"";position:absolute;top:0px;left:0px;bottom:0px;right:0px}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table tbody fw-skeleton{display:block;height:10px;padding:4px 0px;-webkit-box-sizing:content-box;box-sizing:content-box}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table.is-selectable td:first-child,div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table.is-selectable th:first-child{text-align:center}div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table.is-selectable td:first-child fw-checkbox,div.fw-data-table-container div.fw-data-table-scrollable table.fw-data-table.is-selectable th:first-child fw-checkbox{display:block;width:16px;height:20px}div.fw-data-table-container div.fw-data-table-scrollable.loading{opacity:0.65}div.fw-data-table-container div.fw-data-table-scrollable.shimmer{overflow:hidden}div.fw-data-table-container .fw-data-table--loading{position:absolute;top:0px;left:0px;width:100%;height:100%}div.fw-data-table-container .table-settings{position:absolute;right:0px;top:0px}div.fw-data-table-container .table-settings .table-settings-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end}div.fw-data-table-container .table-settings .table-settings-container .table-settings-button{width:40px;min-height:44px;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #ebeff3;border-radius:0px 4px 0px 0px;margin:0px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-button:focus,div.fw-data-table-container .table-settings .table-settings-container .table-settings-button:hover{cursor:pointer}div.fw-data-table-container .table-settings .table-settings-container .table-settings-button:disabled{cursor:default;opacity:0.65}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options{z-index:99;width:500px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1px solid #ebeff3;border-radius:4px;-webkit-box-shadow:-15px 20px 40px rgba(0, 0, 0, 0.04);box-shadow:-15px 20px 40px rgba(0, 0, 0, 0.04);padding:22px 0px 0px 0px;display:none;-webkit-animation:appear 0.3s;animation:appear 0.3s}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options.show{display:block}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-header{display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:600;-ms-flex-align:end;align-items:flex-end;padding:0px 22px;margin-bottom:16px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-header span.title{-ms-flex-positive:1;flex-grow:1;font-size:16px;line-height:24px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-header button.reset{-ms-flex-positive:0;flex-grow:0;color:#2c5cc5;font-size:14px;font-weight:600;text-decoration:none;line-height:17px;padding-right:4px;margin:0px;background:#fff;border:0px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-header button.reset:focus,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-header button.reset:hover{cursor:pointer}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content{display:-ms-flexbox;display:flex;width:100%;height:342px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0px 22px;gap:14px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;width:220px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left .table-settings-content-title{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:5px;padding-left:5px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left .table-settings-content-search{position:relative;top:-3px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left .table-settings-content-choose{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;margin-top:14px;overflow-y:hidden;-webkit-transform:translateX(-3px);transform:translateX(-3px);width:calc(100% + 5px)}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left .table-settings-content-choose .table-settings-content-checkboxes{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;padding-left:5px;padding-right:5px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left .table-settings-content-choose .table-settings-content-checkboxes div{margin:5px 0px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-left .table-settings-content-choose .table-settings-content-checkboxes div fw-checkbox{width:100%;overflow-wrap:break-word}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:220px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#ebeff3;border-radius:4px 4px 0px 0px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-title{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 12px 3px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable{width:100%;-ms-flex-positive:1;flex-grow:1;padding:0px 12px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow-y:auto}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item{display:-ms-flexbox;display:flex;background:#fff;border-radius:4px;-webkit-box-shadow:0px 2px 4px rgba(18, 52, 77, 0.06);box-shadow:0px 2px 4px rgba(18, 52, 77, 0.06);border:1px solid #ebeff3;padding:7px 8px 7px 14px;margin:8px 0px;font-size:14px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-icon,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-close{width:16px;-ms-flex-positive:0;flex-grow:0;text-align:center}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-icon:focus,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-icon:hover,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-close:focus,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-close:hover{cursor:pointer}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-icon.non-drag:hover,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-icon.non-drag:focus{cursor:default}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-icon{width:9px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-close{background:#fff;border:0px;padding:0px;margin:0px}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-text{-ms-flex-positive:1;flex-grow:1;color:#12344d;padding:0px 11px;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-text:hover,div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-right .table-settings-content-draggable .table-settings-drag-item .table-settings-drag-item-text:focus{cursor:default}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-content .table-settings-content-title{font-size:14px;line-height:20px;color:#475867;font-weight:600}div.fw-data-table-container .table-settings .table-settings-container .table-settings-options .table-settings-footer{display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:#f5f7f9;padding:12px 16px;gap:12px;-ms-flex-pack:end;justify-content:flex-end}@media (prefers-reduced-motion){div.fw-data-table-container .table-settings .table-settings-container .table-settings-options{-webkit-animation:none;animation:none}}div.fw-data-table-container .table-settings .table-settings-overlay{position:fixed;width:100vw;height:100vh;top:0px;left:0px;z-index:95}@-webkit-keyframes appear{from{opacity:0}to{opacity:1}}@keyframes appear{from{opacity:0}to{opacity:1}}';var PREDEFINED_VARIANTS_META={anchor:{componentName:"fw-custom-cell-anchor",isFocusable:true},user:{componentName:"fw-custom-cell-user",isFocusable:false,skipTextAlign:true},icon:{componentName:"fw-custom-cell-icon",isFocusable:false},paragraph:{componentName:"fw-custom-cell-paragraph",isFocusable:true}};var TABLE_POPPER_CONFIG={strategy:"fixed",placement:"bottom-end",modifiers:[{name:"offset",options:{offset:[0,2]}}]};var localStorage=null;try{if(window.localStorage){localStorage=window.localStorage}}catch(error){console.warn("Cannot save table settings to localStorage")}var DataTable=function(){function t(t){registerInstance(this,t);this.fwSelectionChange=createEvent(this,"fwSelectionChange",7);this.fwSelectAllChange=createEvent(this,"fwSelectAllChange",7);this.label="";this.rowActions=[];this.rows=[];this.columns=[];this.isSelectable=false;this.isAllSelectable=false;this.showSettings=false;this.autoSaveSettings=false;this.isLoading=false;this.shimmerCount=4;this.orderedColumns=[];this.selected=[];this.rowsLoading={};this.columnsDragSetting=[];this.columnsHideSetting=[];this.isSettingsOpen=false;this.settingSearchText="";this.disabledColumnHide=false;this.showShimmer=true;this.ifAutoCalculatedWidth=false;this.renderPromiseResolve=null;this.popperInstance=null;this.settingsButton=null;this.settingsUpdateButton=null;this.settingsResetButton=null;this.settingsInput=null;this.settingsDragContainer=null;this.settings=null;this.tableContainer=null;this.selectColumnHeader=null;this.lastColumnHeader=null}t.prototype.componentWillLoad=function(){this.columnOrdering(this.columns);if(localStorage&&this.autoSaveSettings){var t=this.el.id?"-"+this.el.id:"";var e=localStorage.getItem("fw-table"+t);e&&this.setTableSettings(JSON.parse(e))}this.rows.length&&this.hideShimmer()};t.prototype.componentDidLoad=function(){if(this.showSettings){if(this.settingsButton){this.settingsButton.style.height=this.el.shadowRoot.querySelector("thead").offsetHeight+"px"}this.popperInstance=createPopper(this.settingsButton,this.settings,TABLE_POPPER_CONFIG)}};t.prototype.componentDidRender=function(){if(this.renderPromiseResolve){this.renderPromiseResolve();this.renderPromiseResolve=null}if(this.selectColumnHeader){if(parseInt(window.getComputedStyle(this.selectColumnHeader).width)>40&&!this.ifAutoCalculatedWidth){this.ifAutoCalculatedWidth=true}}};t.prototype.disconnectedCallback=function(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()};t.prototype.keyDownHandler=function(t){if(t.key==="Escape"){this.toggleSettings(false)}else{this.arrowNavigate(t)}};t.prototype.showSettingsHandler=function(t){var e=this;if(t){this.waitForNextRender().then((function(){e.settingsButton.style.height=e.el.shadowRoot.querySelector("thead").offsetHeight+"px";if(!e.popperInstance){e.popperInstance=createPopper(e.settingsButton,e.settings,TABLE_POPPER_CONFIG)}}))}};t.prototype.columnsChangeHandler=function(t){this.columnOrdering(t)};t.prototype.rowsChangeHandler=function(t){t.length&&this.hideShimmer()};t.prototype.loadingHandler=function(){if(this.isSettingsOpen){this.toggleSettings(false)}};t.prototype.selectRow=function(t,e){if(e===void 0){e=true}if(e){if(this.selected.indexOf(t)<0){this.selected=__spreadArray(__spreadArray([],this.selected),[t])}}else{var n=this.selected.filter((function(e){return e!==t}));this.selected=__spreadArray([],n)}this.fwSelectionChange.emit({rowId:t,checked:e,selected:this.selected});return this.selected};t.prototype.selectAllRows=function(t){if(t===void 0){t=true}return __awaiter(this,void 0,void 0,(function(){var e;var n=this;return __generator(this,(function(i){if(t===true){e=this.rows.filter((function(t){return!n.selected.includes(t.id)})).map((function(t){return t.id}));this.selected=__spreadArray(__spreadArray([],this.selected),e)}else{this.selected=[]}this.fwSelectAllChange.emit({checked:t,selected:this.selected});return[2,this.selected]}))}))};t.prototype.getSelectedRows=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){return[2,this.rows.filter((function(e){return t.selected.includes(e.id)}))]}))}))};t.prototype.getSelectedIds=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.selected]}))}))};t.prototype.getTableSettings=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){t={};this.orderedColumns.map((function(e){if(!t[e.key]){t[e.key]={}}t[e.key].position=e.position;t[e.key].hide=e.hide||false;t[e.key].lock=e.lock||false}));return[2,t]}))}))};t.prototype.setTableSettings=function(t){return __awaiter(this,void 0,void 0,(function(){var e,n,i,a;return __generator(this,(function(s){try{e=__spreadArray([],this.orderedColumns);for(n in t){if(Object.prototype.hasOwnProperty.call(t,n)){i=t[n];a=this.getColumnsState(e,n,i);e=a}}this.orderedColumns=__spreadArray([],e)}catch(error){console.warn("Save table settings was not applied")}return[2,this.orderedColumns]}))}))};t.prototype.loadTable=function(t){if(t===void 0){t=true}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.isLoading=t;return[2,this.isLoading]}))}))};t.prototype.hideShimmer=function(){if(this.showShimmer){this.showShimmer=false}};t.prototype.getColumnsState=function(t,e,n){var i=t.findIndex((function(t){return t.key===e}));var a=t[i];var s=Object.assign(Object.assign({},a),n);var o=t.filter((function(t){return t.key!==e}));var r=o.slice(0,i);var l=o.slice(i,o.length);if(s.position!==a.position){for(var d=0;d<r.length;d++){var c=r[d];if(c.position>=s.position&&c.position<=a.position){c.position=c.position+1}}for(var d=0;d<l.length;d++){var b=l[d];if(b.position<=s.position&&b.position>=a.position){b.position=b.position-1}}}var g=__spreadArray(__spreadArray(__spreadArray([],r),[s]),l).sort((function(t,e){return t.position-e.position}));return g};t.prototype.lockFocusInsideSettings=function(){var t=this;var e=function(e){e.stopPropagation();if(e.shiftKey===false&&e.key==="Tab"){t.settingsResetButton.focus()}};var n=function(e){e.stopPropagation();if(e.shiftKey===true&&e.key==="Tab"){t.settingsUpdateButton.setFocus()}};this.settingsUpdateButton.addEventListener("keydown",e);this.settingsResetButton.addEventListener("keydown",n)};t.prototype.toggleSettings=function(t){if(t===void 0){t=true}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.resetSettings()];case 1:e.sent();this.isSettingsOpen=t;return[4,this.waitForNextRender()];case 2:e.sent();this.popperInstance.update();if(t){this.settingsInput.setFocus();this.lockFocusInsideSettings()}return[2,t]}}))}))};t.prototype.resetSettings=function(){return __awaiter(this,void 0,void 0,(function(){var t,e;var n=this;return __generator(this,(function(i){this.settingSearchText="";this.settingsInput.value="";this.columnsDragSetting=[];this.columnsHideSetting=[];t=this.orderedColumns.map((function(t){var e={};e.key=t.key;e.text=t.text;e.position=t.position;e.hide=t.hide||false;e.lock=t.lock;return e}));this.columnsDragSetting=t;e=this.columns.map((function(t){var e={};var i=n.orderedColumns.filter((function(e){return e.key===t.key}))[0];e.key=t.key;e.text=t.text;e.hide=i.hide;e.lock=i.lock;return e}));this.columnsHideSetting=e;return[2]}))}))};t.prototype.applySettings=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,n;var i=this;return __generator(this,(function(a){switch(a.label){case 0:this.columnsDragSetting.forEach((function(t){var e=i.getColumnsState(i.orderedColumns,t.key,{hide:t.hide,position:t.position});i.orderedColumns=__spreadArray([],e)}));if(!(localStorage&&this.autoSaveSettings))return[3,6];a.label=1;case 1:a.trys.push([1,5,,6]);t=this.el.id?"-"+this.el.id:null;if(!t)return[3,3];return[4,this.getTableSettings()];case 2:e=a.sent();localStorage.setItem("fw-table"+t,JSON.stringify(e));return[3,4];case 3:throw new Error("Table must have an 'id' attribute to autosave settings");case 4:return[3,6];case 5:n=a.sent();console.log(n.message);return[3,6];case 6:this.toggleSettings(false);this.ifAutoCalculatedWidth=false;return[2]}}))}))};t.prototype.arrowNavigate=function(t){var e=this.getEventPath(t)[0];var n=this.closestTableCell(this.getEventPath(t));if(n){var i=false;if(e!==n){i=this.arrowNavigateCellComponents(t.code,e)}else{i=true}if(i){this.arrowNavigateCell(t.code,n)}}};t.prototype.arrowNavigateCellComponents=function(t,e){var n,i,a,s,o;var r=false;var l=null;switch(t){case"ArrowRight":if(e.parentElement.nodeName==="FW-TOOLTIP"){if(e.parentElement.nextElementSibling){if((n=e.parentElement.nextElementSibling.children[0])===null||n===void 0?void 0:n.getAttribute("tabindex")){l=e.parentElement.nextElementSibling.children[0]}}else{r=true}}else if((i=e.nextElementSibling)===null||i===void 0?void 0:i.getAttribute("tabIndex")){l=e.nextElementSibling}else{r=true}break;case"ArrowLeft":if(e.parentElement.nodeName==="FW-TOOLTIP"){if((a=e.parentElement.previousElementSibling)===null||a===void 0?void 0:a.getAttribute("tabIndex")){if((s=e.parentElement.previousElementSibling.children[0])===null||s===void 0?void 0:s.getAttribute("tabindex")){l=e.parentElement.previousElementSibling.children[0]}}else{r=true}}else if((o=e.previousElementSibling)===null||o===void 0?void 0:o.getAttribute("tabIndex")){l=e.previousElementSibling}else{r=true}break;default:r=true;break}if(l){l.setAttribute("tabIndex","0");l.focus()}return r};t.prototype.arrowNavigateCell=function(t,e){var n=+e.parentElement.getAttribute("aria-rowIndex");var i=+e.getAttribute("aria-colIndex");var a;var s;var o=this.orderedColumns.length;o=this.isSelectable?o+1:o;o=this.rowActions.length?o+1:o;switch(t){case"ArrowDown":a=n+1;s=i;break;case"ArrowUp":a=n-1;s=i;break;case"ArrowRight":{var r=function(t,e){if(e!==o){a=t;s=e+1}else{a=t+1;s=1}return{nextRowIndex:a,nextColIndex:s}};var l=false;do{var d=r(n,i);var c=this.tableContainer.querySelector('th[aria-colIndex="'+s+'"]');l=c.classList.contains("hidden");if(l){n=d.nextRowIndex;i=d.nextColIndex}else{a=d.nextRowIndex;s=d.nextColIndex}}while(l)}break;case"ArrowLeft":{var b=function(t,e){if(e!==1){a=t;s=e-1}else{a=t-1;s=o}return{nextRowIndex:a,nextColIndex:s}};var l=false;do{var g=b(n,i);var c=this.tableContainer.querySelector('th[aria-colIndex="'+s+'"]');l=c.classList.contains("hidden");if(l){n=g.nextRowIndex;i=g.nextColIndex}else{a=g.nextRowIndex;s=g.nextColIndex}}while(l)}break}var f=this.tableContainer.querySelector('[aria-rowIndex="'+a+'"] > [aria-colIndex="'+s+'"]');if(f){this.removeFocusCell(e);this.focusCell(f,t)}};t.prototype.getEventPath=function(t){return t.path?t.path:t.composedPath()};t.prototype.waitForNextRender=function(){var t=this;return new Promise((function(e){return t.renderPromiseResolve=e}))};t.prototype.removeFocusCell=function(t){t.setAttribute("tabIndex","-1")};t.prototype.focusCell=function(t,e){if(e===void 0){e="ArrowRight"}if(t.dataset.hasFocusableChild&&t.dataset.hasFocusableChild==="true"){t.removeAttribute("tabIndex");var n=null;switch(e){case"ArrowLeft":n=t.children[t.children.length-1];break;default:n=t.children[0];break}if(n.nodeName==="FW-TOOLTIP"){n=n.children[0]}n.setAttribute("tabIndex","0");n.focus()}else{t.setAttribute("tabIndex","0");t.focus()}};t.prototype.hasFocusableComponent=function(t){var e=false;if(t.hasFocusableComponent){e=true}else if(t.variant&&PREDEFINED_VARIANTS_META[t.variant].isFocusable){e=true}return e};t.prototype.closestTableCell=function(t){var e;for(var n=0;n<t.length;n++){var i=t[n];if(i.nodeName==="TD"){e=i;break}}return e};t.prototype.columnOrdering=function(t){this.orderedColumns=__spreadArray([],t).sort((function(t,e){var n=0;if(t.lock&&!e.lock){n=-1}else if(!t.lock&&e.lock){n=1}else if(!t.lock&&!e.lock||t.lock&&e.lock){if(t.position&&e.position){n=t.position-e.position}else if(t.position&&!e.position){n=-1}else if(!t.position&&e.position){n=1}}return n}));this.orderedColumns.map((function(t,e){t.position=e+1}))};t.prototype.performRowAction=function(t,e){return __awaiter(this,void 0,void 0,(function(){var n,i;var a;return __generator(this,(function(s){switch(s.label){case 0:n=this.el.shadowRoot.querySelector("fw-checkbox#select-all");if(n&&!n.disabled){n.disabled=true}this.rowsLoading=Object.assign(Object.assign({},this.rowsLoading),(a={},a[e.id]=true,a));s.label=1;case 1:s.trys.push([1,3,,4]);return[4,t.handler(e)];case 2:s.sent();return[3,4];case 3:i=s.sent();console.log(i.message);return[3,4];case 4:delete this.rowsLoading[e.id];this.rowsLoading=Object.assign({},this.rowsLoading);if(n&&Object.keys(this.rowsLoading).length===0){n.disabled=false}return[2]}}))}))};t.prototype.settingsSearch=function(t){this.settingSearchText=t.toLowerCase()};t.prototype.settingsColumnToggle=function(t,e,n){return __awaiter(this,void 0,void 0,(function(){var i,a,s,o,r,l,d,c,c;return __generator(this,(function(b){switch(b.label){case 0:if(e){a=1;this.columnsDragSetting.forEach((function(t,e){return!t.hide&&(a=e+1)}));i={hide:!e,position:a+1}}else{if(this.disabledColumnHide){if(n){n.currentTarget.checked=true}return[2]}s=this.columnsDragSetting.length;i={hide:!e,position:s}}o=this.getColumnsState(this.columnsDragSetting,t,i);r=this.getColumnsState(this.columnsHideSetting,t,{hide:!e});this.columnsDragSetting=__spreadArray([],o);this.columnsHideSetting=__spreadArray([],r);if(!n)return[3,2];if(!(n.currentTarget.classList.contains("table-settings-drag-item-close")&&n.key==="Enter"))return[3,2];l=n.currentTarget.parentElement.previousSibling;d=n.currentTarget.parentElement.nextSibling;return[4,this.waitForNextRender()];case 1:b.sent();if(l||d){c=(l||d).querySelector(".table-settings-drag-item-close");c.focus()}else{c=this.tableContainer.querySelector(".table-settings-content-checkboxes div:last-child fw-checkbox");c.focus()}b.label=2;case 2:this.disabledColumnHide=this.columnsHideSetting.filter((function(t){return!t.hide})).length===1;return[2,this.columnsDragSetting]}}))}))};t.prototype.settingsColumnDrop=function(t,e){return __awaiter(this,void 0,void 0,(function(){var n,i;return __generator(this,(function(a){n=this.columnsDragSetting.filter((function(t){return t.lock})).length;i=this.getColumnsState(this.columnsDragSetting,t,{position:e+1+n});this.columnsDragSetting=__spreadArray([],i);return[2,i]}))}))};t.prototype.renderWebComponent=function(t,e){var n;if(window.customElements.get(t)){var i=""+t;var a=void 0;if(e.slotText){a=e.slotText;delete e.slotText}n=h(i,Object.assign({},e),a)}else{n=null}return n};t.prototype.renderCustomTemplate=function(t,e){return t(h,e)};t.prototype.renderPredefinedVariant=function(t,e){var n;if(t==="anchor"){n=h("fw-custom-cell-anchor",Object.assign({},e))}else if(t==="user"){n=h("fw-custom-cell-user",Object.assign({},e))}else if(t==="icon"){n=h("fw-custom-cell-icon",Object.assign({},e))}else if(t==="paragraph"){n=h("fw-custom-cell-paragraph",Object.assign({},e))}else{n=null}return n};t.prototype.renderTableCell=function(t,e){var n;if(t.variant){n=this.renderPredefinedVariant(t.variant,e)}else if(t.customTemplate){n=this.renderCustomTemplate(t.customTemplate,e)}else{n=t.formatData?t.formatData(e):e}return n};t.prototype.renderTableHeader=function(){var t=this;var e;var n=this.rows.length&&this.rows.every((function(e){return t.selected.includes(e.id)}));var i=this.orderedColumns.filter((function(t){return!t.hide&&t.variant!=="paragraph"}));var a=(e=i[i.length-1])===null||e===void 0?void 0:e.key;return this.orderedColumns.filter((function(t){return!t.hide})).length?h("tr",{role:"row"},this.orderedColumns.length&&this.isSelectable&&h("th",{ref:function(e){return t.selectColumnHeader=e},key:"isSelectable","aria-colindex":1,style:{width:"40px"}},this.isAllSelectable&&h("fw-checkbox",{id:"select-all",value:"select-all",checked:n,onFwChange:function(e){var n,i;return t.selectAllRows((i=(n=e.detail)===null||n===void 0?void 0:n.meta)===null||i===void 0?void 0:i.checked)}})),this.orderedColumns.map((function(e,n){var i=null;if(e.textAlign&&!(e.variant&&PREDEFINED_VARIANTS_META[e.variant].skipTextAlign)){i=e.textAlign}var s=Object.assign({},e.widthProperties&&!(e.key===a&&t.ifAutoCalculatedWidth)?e.widthProperties:{},i?{textAlign:i}:{});var o={};if(e.key===a){o.ref=function(e){return t.lastColumnHeader=e}}return h("th",Object.assign({role:"columnheader",key:e.key,"aria-colindex":t.isSelectable?n+2:n+1,class:{hidden:e.hide},style:s},o),e.customHeader?t.renderCustomTemplate(e.customHeader,e.text):e.text)})),this.rowActions.length!==0&&h("th",{class:"row-actions",role:"columnheader","aria-colindex":this.isSelectable?this.orderedColumns.length+2:this.orderedColumns.length+1},TranslationController.t("datatable.actions"))):null};t.prototype.renderTableBody=function(){var t=this;return this.orderedColumns.filter((function(t){return!t.hide})).length?this.rows.map((function(e,n){return h("tr",{key:e.id,role:"row",class:{active:t.selected.includes(e.id),loading:t.rowsLoading[e.id]?true:false},"aria-rowindex":n+1},t.orderedColumns.length&&t.isSelectable&&h("td",{class:"data-table-checkbox","aria-colindex":1,"data-has-focusable-child":"true"},h("fw-checkbox",{value:e.id?e.id:"",checked:t.selected.includes(e.id),onFwChange:function(e){var n,i;return t.selectRow(e.detail.value,(i=(n=e.detail)===null||n===void 0?void 0:n.meta)===null||i===void 0?void 0:i.checked)}})),t.orderedColumns.map((function(i,a){var s={};var o=t.hasFocusableComponent(i)?true:false;if(!o){s.tabindex=!t.isSelectable&&n===0&&a===0?"0":"-2"}s["aria-colindex"]=t.isSelectable?a+2:a+1;s["data-has-focusable-child"]=o?"true":"false";var r=null;if(i.textAlign&&!(i.variant&&PREDEFINED_VARIANTS_META[i.variant].skipTextAlign)){r=i.textAlign}var l=Object.assign({},r?{textAlign:r}:{});return h("td",Object.assign({role:"gridcell",class:{hidden:i.hide},style:l},s),t.renderTableCell(i,e[i.key]))})),t.rowActions.length!==0&&h("td",{class:"row-actions","data-has-focusable-child":"true","aria-colindex":t.isSelectable?t.orderedColumns.length+2:t.orderedColumns.length+1},t.rowActions.map((function(n){var i=null;if(!n.hideForRowIds||n.hideForRowIds&&!n.hideForRowIds.includes(e.id)){var a=n.iconName?"icon-small":"small";i=h("fw-tooltip",{content:n.name,distance:"5"},h("fw-button",{tabIndex:0,size:a,color:"secondary",onKeyUp:function(i){return(i.code==="Space"||i.code==="Enter")&&t.performRowAction(n,e)},onClick:function(){return t.performRowAction(n,e)},"aria-label":n.name},n.iconName?h("fw-icon",{name:n.iconName,library:n.iconLibrary?n.iconLibrary:"crayons",size:10}):n.name))}return i}))))})):null};t.prototype.renderTableSettings=function(){var t=this;return h("div",{class:"table-settings"},h("div",{class:"table-settings-container"},h("button",{class:"table-settings-button",tabIndex:0,ref:function(e){return t.settingsButton=e},onClick:function(){return t.toggleSettings(!t.isSettingsOpen)},onKeyDown:function(e){return e.key==="Enter"&&t.toggleSettings(!t.isSettingsOpen)},disabled:this.isLoading},h("fw-icon",{name:"settings",library:"system",size:16})),h("div",{ref:function(e){return t.settings=e},class:{"table-settings-options":true,show:this.isSettingsOpen}},h("div",{class:"table-settings-header"},h("span",{class:"title"},"Customize columns"),h("button",{class:"reset",tabIndex:0,ref:function(e){return t.settingsResetButton=e},onClick:function(){t.resetSettings()}},"Reset")),h("div",{class:"table-settings-content"},h("div",{class:"table-settings-content-left"},h("div",{class:"table-settings-content-search"},h("fw-input",{"icon-left":"search",placeholder:"Search",ref:function(e){return t.settingsInput=e},onFwInput:function(e){return t.settingsSearch(e.detail.value)},onFwInputClear:function(e){return t.settingsSearch(e.detail.value)},"clear-input":true})),h("div",{class:"table-settings-content-choose"},h("div",{class:"table-settings-content-title"},TranslationController.t("datatable.chooseColumns")),h("div",{class:"table-settings-content-checkboxes"},this.columnsHideSetting.map((function(e){var n=null;var i=true;if(t.settingSearchText.trim()!==""){i=e.text.toLowerCase().includes(t.settingSearchText)}if(i){n=h("div",{key:e.key},h("fw-checkbox",{value:e.key,onFwChange:function(n){var i,a;return t.settingsColumnToggle(e.key,(a=(i=n.detail)===null||i===void 0?void 0:i.meta)===null||a===void 0?void 0:a.checked,n)},checked:!e.hide,disabled:e.lock},e.text))}return n}))))),h("div",{class:"table-settings-content-right"},h("div",{class:"table-settings-content-title"},h("span",null,"Selected columns "),h("span",null,"(",this.columnsDragSetting.filter((function(t){return!t.hide})).length,")")),h("div",{class:"table-settings-content-draggable"},this.columnsDragSetting.filter((function(t){return t.lock})).map((function(t){var e=null;e=h("div",{key:t.key,class:"table-settings-drag-item","data-column-key":t.key},h("div",{class:"table-settings-drag-item-icon non-drag"},h("fw-icon",{name:"lock",size:11})),h("div",{class:"table-settings-drag-item-text",title:t.text},t.text));return e})),h("fw-drag-container",{ref:function(e){return t.settingsDragContainer=e},onFwDrop:function(e){return t.settingsColumnDrop(e.detail.droppedElement.dataset.columnKey,e.detail.droppedIndex)}},this.columnsDragSetting.filter((function(t){return!t.lock})).map((function(e){var n=null;if(!e.hide){n=h("div",{key:e.key,class:"table-settings-drag-item","data-column-key":e.key,draggable:true},h("div",{class:"table-settings-drag-item-icon"},h("fw-icon",{library:"system",name:"drag",size:11})),h("div",{class:"table-settings-drag-item-text",title:e.text},e.text),h("button",{class:"table-settings-drag-item-close",tabIndex:0,onKeyDown:function(n){return n.key==="Enter"&&t.settingsColumnToggle(e.key,false,n)},onClick:function(){return t.settingsColumnToggle(e.key,false)}},h("fw-icon",{library:"system",name:"cross-big",size:7})))}return n})))))),h("div",{class:"table-settings-footer"},h("fw-button",{color:"secondary",tabIndex:0,id:"close-settings",onClick:function(){t.resetSettings();t.toggleSettings(false)}},"Cancel"),h("fw-button",{color:"primary",tabIndex:0,id:"apply-settings",ref:function(e){return t.settingsUpdateButton=e},onClick:function(){return t.applySettings()}},"Update")))),this.isSettingsOpen&&h("div",{role:"presentation",class:"table-settings-overlay",onClick:function(){return t.toggleSettings(false)}}))};t.prototype.renderTableShimmer=function(){var t=[];var e=this.rows.length||this.shimmerCount;var n=this.orderedColumns.filter((function(t){return!t.hide})).length;if(n){n=this.isSelectable?n+1:n;if(this.rowActions&&this.rowActions.length){n=n+1}for(var i=1;i<=e;i++){t.push(h("tr",null,Array(n).fill(1).map((function(){return h("td",null,h("fw-skeleton",{height:"12px"}))}))))}}return t};t.prototype.render=function(){var t=this;return h("div",{class:"fw-data-table-container"},h("div",{class:{"fw-data-table-scrollable":true,loading:this.isLoading||this.showShimmer,shimmer:this.showShimmer},ref:function(e){return t.tableContainer=e}},h("table",{class:{"fw-data-table":true,"is-selectable":this.isSelectable},role:"grid","aria-colcount":this.orderedColumns.length,"aria-label":this.label},h("thead",null,this.renderTableHeader()),h("tbody",null,this.showShimmer?this.renderTableShimmer():this.renderTableBody()))),this.showSettings&&this.renderTableSettings(),(this.isLoading||this.showShimmer)&&h("div",{class:"fw-data-table--loading"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{showSettings:["showSettingsHandler"],columns:["columnsChangeHandler"],rows:["rowsChangeHandler"],isLoading:["loadingHandler"]}},enumerable:false,configurable:true});return t}();DataTable.style=dataTableCss;export{DataTable as fw_data_table};