@digital-realty/ix-grid 1.4.1-alpha.2 → 1.4.1

package/dist/ix-grid.min.js

@@ -1,26 +1,1217 @@
-import{__decorate}from"tslib";import"@digital-realty/grid";import{columnHeaderRenderer}from"@digital-realty/grid/lit.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-progress/ix-progress.js";import{css,svg,LitElement,nothing,html,render}from"lit";import{query,property,state,customElement}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{formatDate}from"date-fns";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-select/ix-select.js";let IxGridViewStyles=css`:host{--_ix-grid-cell-padding:var(--ix-grid-cell-padding, 1rem);--lumo-primary-color-50pct:transparent}vaadin-grid::part(first-frozen-to-end-cell){border-left:.063rem solid var(--_lumo-grid-border-color);box-shadow:-.375rem 0 .375rem -.375rem #0000001a}*{font-family:inherit}vaadin-grid::part(cell){cursor:var(--ix-grid-cell-pointer,pointer)}vaadin-grid::part(header-cell){cursor:default;--vaadin-grid-cell-background:#fff}vaadin-grid::part(row):hover{--vaadin-grid-cell-background:#f5f5f5}vaadin-grid-cell-content{font-size:14px;--_cell-padding:var(--ix-grid-cell-padding, 14px 10px)}.hide-column-headers::part(header-cell){display:none}vaadin-grid::part(ix-disabled-cell){cursor:default;color:var(--cp-neutral-blue-60p);--vaadin-grid-cell-background:var(--cp-neutral-blue-12p)}ix-grid-download-menu{width:38px;margin-right:2px}ix-grid-column-filter{width:36px}.grid-container{background-color:var(--clr-surface-container-lowest,#fff);border-radius:8px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;box-sizing:border-box;padding:2px}.touch-edge{margin:0 -3px}.grid-header{display:flex;-webkit-box-pack:justify;place-content:space-between;-webkit-box-align:center;align-items:center;padding:1rem;flex-wrap:wrap;gap:18px}.grid-menu{display:flex;align-items:center;margin-left:auto}.grid-menu ix-button{--md-text-button-leading-space:4px;--md-text-button-trailing-space:4px}.grid-menu span{color:var(--clr-primary,#1456e0);cursor:pointer}.header{font-weight:700;display:flex;user-select:none;align-items:center;padding-right:calc(var(--_ix-grid-cell-padding) + 2px);position:relative;text-overflow:ellipsis;overflow:hidden;flex-grow:1;z-index:2;padding-left:.25rem}.header:hover .header-sort-icon{display:block}.columns-reordering{opacity:.25}.progress-container{position:relative;top:60px;z-index:1}span .disabled{color:var(--clr-on-surface-variant,rgba(9,34,65,.7))}.disable-cursor{cursor:default!important}.accounts{display:flex;align-items:center}.account-name{margin:0 8px 0 3px}vaadin-grid-cell-content{font-family:var(--text-small-font,sans-serif);font-size:var(--text-small-size,.875rem);letter-spacing:var(--text-small-letter-spacing,.0275em);line-height:var(--text-small-line-height,1.42857143em);font-weight:var(--text-small-weight,normal);text-decoration:var(--text-small-decoration,none);text-transform:var(--text-small-transform,none);--_cell-padding:var(--ix-grid-cell-padding, 14px 10px)}vaadin-grid-cell-content>div{overflow:hidden;text-overflow:ellipsis}.row-controls{border-top:solid 1px var(--clr-border-outline,#0922411f)}.row-limit{display:flex;padding:8px}.remove-all-button{margin-left:auto}.launchpad vaadin-grid{--_lumo-grid-border-width:0;--lumo-size-xl:auto}.launchpad vaadin-grid-cell-content{padding:11px 24px;border-bottom:0}.launchpad vaadin-grid::part(body-row){border-bottom:1px solid var(--clr-border-outline,rgba(9,34,65,.12))}.launchpad .grid-header{padding:.5rem 18px 0}.launchpad .header{font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none)}.launchpad .grid-header h2{font-family:var(--text-page-title-font,sans-serif);font-size:var(--text-page-title-size,2.125rem);letter-spacing:var(--text-page-title-letter-spacing,.01029412em);line-height:var(--text-page-title-line-height,1.17647059em);font-weight:var(--text-page-title-weight,bold);text-decoration:var(--text-page-title-decoration,none);text-transform:var(--text-page-title-transform,none)}vaadin-grid-cell-content{height:var(--ix-grid-cell-height,52px)}@media only screen and (max-width:840px){.grid-header{display:flex;flex-direction:row;padding:1rem;justify-content:space-between}.grid-menu{padding-left:0;margin-left:-4px}}@media only screen and (max-width:600px){.grid-header{display:flex;align-items:flex-start;flex-direction:column;padding:1rem;gap:12px}.grid-container{border-radius:0;box-shadow:none;padding:0;overflow:hidden}}.column-max-width-set{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}`,IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:var(--clr-surface-container-lowest,#fff);min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:9;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px;width:247px;left:-100px;border-radius:16px}.dropdown-content>div{margin:0;color:var(--clr-on-surface,#092241);font-family:var(--text-small-font,sans-serif);font-size:var(--text-small-size,.875rem);letter-spacing:var(--text-small-letter-spacing,.0275em);line-height:var(--text-small-line-height,1.42857143em);font-weight:var(--text-small-weight,normal);text-decoration:var(--text-small-decoration,none);text-transform:var(--text-small-transform,none);display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{width:158px}.dropdown-content label .draggable{font-size:24px;cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.dropdown-content label .draggable path{fill:var(--clr-primary,#1456e0)}.active{position:absolute;right:8px;top:8px;height:8px;width:8px;background-color:var(--clr-critical,#db0028);border-radius:50%}ix-switch{padding:0 0 0 6px;display:flex;width:48px}.list{position:relative}@media only screen and (max-width:840px){.dropdown-content{left:0}}`,triggerKeys=[" ","Enter"],handleIcon=svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0"/></svg>`,IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.columnReorderingAllowed=!1,this.refreshDataOnColumnVisibilityChange=!0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return e=this.columnsLocalStorageKey?JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]"):e}initializeLocalStorage(){0<this.preservedColumns.length&&(this.disabledColumns=this.preservedColumns.filter(t=>t.hidden&&this.columns.some(e=>e.name===t.name)).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}update(e){super.update(e),e.has("columnsLocalStorageKey")&&this.initializeLocalStorage()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden!==!(null!=e&&e.checked)&&this.dispatchEvent(new CustomEvent("columnVisibilityChange",{detail:{column:this.columns[t]},bubbles:!0,composed:!0})),this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){this.columnReorderingAllowed&&(e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id")),this.dragEvent.startId=e)}dragend(){var e,t;this.columnReorderingAllowed&&(this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1})}dragenter(e){this.columnReorderingAllowed&&(e=e.target).classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}handleDropdownToggle(e){e instanceof KeyboardEvent&&!triggerKeys.includes(e.key)||e.composedPath().includes(this.dropdown)||(this.isDropdownVisible=!this.isDropdownVisible)}render(){return html`<div class="grid-menu"><span @click="${this.handleDropdownToggle}" @keyDown="${this.handleDropdownToggle}" class="list list-dropdown"><ix-icon-button appearance="default"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z" fill="#1456E0"/></svg></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns.filter(e=>!1!==e.filterable),e=>e.name,(e,t)=>html`<div><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="${this.columnReorderingAllowed}" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p>${this.columnReorderingAllowed?html`<div class="draggable">${handleIcon}</div>`:nothing}</label></div>`)}</div>`:nothing}</span></div>`}},IxGridDownloadMenu=(IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([query(".dropdown-content")],IxGridColumnFilter.prototype,"dropdown",void 0),__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"columnsLocalStorageKey",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:Boolean})],IxGridColumnFilter.prototype,"refreshDataOnColumnVisibilityChange",void 0),__decorate([property({attribute:!1})],IxGridColumnFilter.prototype,"requestGridUpdate",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter),class extends LitElement{constructor(){super(...arguments),this.items=[],this.isDownloading=!1}toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}renderMenuItems(){var e;return 0===(null==(e=this.items)?void 0:e.length)?html`<ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}"><div slot="headline">Download All Records</div></ix-menu-item><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}"><div slot="headline">Download Current Filter</div></ix-menu-item>`:this.items.filter(e=>!e.hidden).map(e=>html`<ix-menu-item .disabled="${e.disabled}" @click="${()=>e.onClick(e.name)}"><div slot="headline">${e.label}</div></ix-menu-item>`)}render(){return this.isDownloading?html`<ix-progress .indeterminate="${!0}" .linear="${!1}" style="--md-circular-progress-size:1.75REM;text-align:center"></ix-progress>`:html`<div style="position:relative"><ix-icon-button id="anchor" @click="${this.toggleMenu}"><svg slot="default" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z" fill="#1456E0"/></svg></ix-icon-button><ix-menu id="menu" anchor="anchor" has-overflow>${this.renderMenuItems()}</ix-menu></div>`}}),copy=(IxGridDownloadMenu.styles=[IxGridViewStyles],__decorate([query("#menu")],IxGridDownloadMenu.prototype,"downloadMenu",void 0),__decorate([query("#anchor")],IxGridDownloadMenu.prototype,"downloadMenuAnchor",void 0),__decorate([property({type:Array})],IxGridDownloadMenu.prototype,"items",void 0),__decorate([property({type:Boolean})],IxGridDownloadMenu.prototype,"isDownloading",void 0),IxGridDownloadMenu=__decorate([customElement("ix-grid-download-menu")],IxGridDownloadMenu),{activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",viewMore:"VIEW MORE",viewLess:"VIEW LESS",add:"ADD",removeAll:"REMOVE ALL"}),IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:var(--clr-primary,#1456e0);margin-right:5px}.grid-menu ix-button .filter{margin-top:2px}.filter-form{white-space:nowrap;padding:9px;color:var(--clr-on-surface-variant,#092241b3)}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:var(--clr-on-surface-variant,#092241b3)}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff;z-index:10}.filter-form input,.filter-form option,.filter-form select{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);border-radius:0;cursor:pointer;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:var(--text-default-font,sans-serif)}.form-group label{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:var(--text-default-font,sans-serif)}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.filter-footer{padding:9px;display:flex;justify-content:space-between}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:1;display:flex;align-items:center;justify-content:center;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);padding:0;height:16px;width:16px;border-radius:50%;background-color:var(--clr-primary,#1456e0);color:var(--clr-on-primary,#fff)}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.form-group-operator-label{width:100%}.filter-form .filterOperatorInput{min-width:96px}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:var(--clr-on-secondary,#fff);overflow-wrap:break-word;border-radius:3px;background-color:var(--clr-secondary,#071454);padding:5px 8px;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;overflow-wrap:break-word;border-radius:3px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0}.grid-menu ix-button{align-items:center;display:flex}@media only screen and (max-width:840px){.filter-dropdown-content{right:inherit;top:0}}@media only screen and (max-width:600px){.grid-menu ix-button .filter{display:none}.grid-menu ix-button{--md-text-button-leading-space:6px;--md-text-button-trailing-space:0;margin-left:4px}}`,IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.filterValueChangeDebounceTime=300,this.readParamsFromURL=!1,this.maxDate=formatDate(new Date,"yyyy-MM-dd"),this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.fromDateErrorText="",this.oldValueLength=0,this.debouncedOnFilterValueChange=()=>{},this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)},this.handlePopState=()=>{this.filters=this.parseFilterQueryString(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter()),this.updateActiveFilters()}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick),window.addEventListener("popstate",this.handlePopState)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick),window.removeEventListener("popstate",this.handlePopState)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.readParamsFromURL&&(this.filters=this.parseFilterQueryString()),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate(!1),this.debouncedOnFilterValueChange=(e,t)=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(()=>this.onfilterValueChange.bind(this)(e,t),this.filterValueChangeDebounceTime)}}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){let r=new URLSearchParams(window.location.search),o=[];return this.filterableColumns.forEach(i=>{var e;null!=(e=i.filterOperators)&&e.forEach(e=>{var t=i.name+"_"+e;r.has(t)&&o.push({columnField:i.name,operatorValue:e,dataType:i.dataType,value:null!=(e=r.get(t))?e:""})})}),o}dispatchUpdate(e=!0){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>e.value.length),resetPage:e},bubbles:!0,composed:!0}))}addFilter(){let e,t,i=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";var r=(null==(e=this.filterableColumns.find(e=>e.name===i))?void 0:e.filterOperators)||["contains"],o=(null==(t=this.filterableColumns.find(e=>e.name===i))?void 0:t.dataType)||"string";this.filters=[...this.filters,{columnField:i,operatorValue:r[0],dataType:o,value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter()),this.updateActiveFilters()}onfilterColumnChange(e,t){let i,r=t.target.value;t=this.filterableColumns.find(e=>e.name===r);this.filters[e].columnField=r,this.filters[e].dataType=null==t?void 0:t.dataType,this.filters[e].operatorValue=(null==(i=null==t?void 0:t.filterOperators)?void 0:i[0])||"contains",this.filters=[...this.filters],this.dispatchUpdate()}onfilterOperatorChange(e,t){t=t.target.value;this.filters[e].operatorValue=t,this.filters=[...this.filters],this.dispatchUpdate()}onDatefilterValueChange(e,t){this.filters[e].value=t,this.dispatchUpdate(),this.updateActiveFilters()}onfilterValueChange(e,t){t=t.value,this.filters[e].value=t,t=this.filters[e].value.length;0<this.filters[e].columnField.length&&(3<=t||t<this.oldValueLength)&&this.dispatchUpdate(),this.updateActiveFilters(),this.oldValueLength=t}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderStringInput(e,t){return html`<label class="form-group-operator-label"><span>Value</span> <input data-testid="${"filterValueInput-"+t}" placeholder="Filter value" @input="${e=>this.debouncedOnFilterValueChange(t,e.target)}" .value="${e.value}"></label>`}renderDateInput(e,t){return html`<ix-date data-testid="${"filterValueInput-"+t}" .value="${e.value}" max="${this.maxDate}" name="${e.columnField}-valueDate" .errorText="${this.fromDateErrorText}" .onChanged="${e=>this.onDatefilterValueChange(t,e)}"></ix-date>`}renderFilterInputControl(e,t){switch(e.dataType){case"string":case void 0:return this.renderStringInput(e,t);case"dateTime":return this.renderDateInput(e,t);default:return nothing}}renderFilterInput(t,i){let e,r,o=[t.columnField,...this.unselectedFilters];var a=this.filterableColumns.filter(e=>o.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" data-testid="clearFilterButton" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${a.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
-                `)}">Columns</label> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${a.map(e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></div></div>`:nothing}<div class="filter-form-column filter-form-column-border filterColumnField"><div class="filter-form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${a.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
-                `)}"><span>Columns</span> <select data-testid="${"filterColumnInput-"+i}" @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(a,e=>e.name,e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterOperatorField"><div class="filter-form-group"><label class="form-group-operator-label"><span>Operator</span> <select data-testid="${"filterOperatorInput-"+i}" class="filterOperatorInput" @change="${e=>this.onfilterOperatorChange(i,e)}" .value="${t.operatorValue}" data-v="${t.operatorValue}">${repeat(null!=(r=null==(e=a.find(e=>e.name===t.columnField))?void 0:e.filterOperators)?r:["contains"],e=>html`<option value="${e}" ?selected="${e===t.operatorValue}">${e}</option>`)}</select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group">${this.renderFilterInputControl(t,i)}</div></div></div>`}renderDropdown(){var e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return html`<div class="filter-dropdown-content"><div class="filter-body">${this.filters.map((e,t)=>this.renderFilterInput(e,t))}</div><div class="filter-footer"><ix-button data-testid="addFilterButton" class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}" appearance="text"><ix-icon slot="icon">add</ix-icon>Add filter</ix-button><ix-button data-testid="clearAllFiltersButton" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}" appearance="text">Clear all</ix-button></div></div>`}render(){return html`<div class="grid-menu"><div class="filter-container tooltip-container">${0<this.activeFilters.length?html`<span class="filter-superscript">${this.activeFilters.length}</span>`:nothing}<ix-button data-testid="showFiltersButton" appearance="text" class="filter_list filter-button" @click="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}" @keyDown="${()=>{this.isDropdownVisible=!this.isDropdownVisible}}"><div class="slot-wrap"><ix-icon appearance="default" class="filter-icon">filter_list</ix-icon><span class="filter">${copy.filters}</span></div></ix-button><div class="tool-tip">${this.renderToolTip()}</div>${this.isDropdownVisible?this.renderDropdown():nothing}</div></div>`}},PaginationStyles=(IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",void 0),__decorate([property({type:Number})],IxGridRowFilter.prototype,"filterValueChangeDebounceTime",void 0),__decorate([property({type:Boolean})],IxGridRowFilter.prototype,"readParamsFromURL",void 0),__decorate([property({type:String})],IxGridRowFilter.prototype,"maxDate",void 0),__decorate([state()],IxGridRowFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridRowFilter.prototype,"filters",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterableColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"filterColumns",void 0),__decorate([state()],IxGridRowFilter.prototype,"activeFilters",void 0),__decorate([state()],IxGridRowFilter.prototype,"mapSelect",void 0),__decorate([state()],IxGridRowFilter.prototype,"fromDateErrorText",void 0),__decorate([state()],IxGridRowFilter.prototype,"oldValueLength",void 0),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter),css`:host{--md-filled-select-text-field-input-text-size:var(
+import{__decorate as e}from"tslib";import"@digital-realty/grid";import{columnHeaderRenderer as t}from"@digital-realty/grid/lit.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-progress/ix-progress.js";import{css as i,svg as o,LitElement as r,nothing as a,html as n,render as s}from"lit";import{query as l,property as d,state as p,customElement as c}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{ifDefined as u}from"lit/directives/if-defined.js";import{formatDate as m,format as g}from"date-fns/format.js";import{repeat as f}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-button/ix-button.js";import"@digital-realty/ix-date/ix-date.js";import"@digital-realty/ix-date-next/ix-date-next.js";import"@digital-realty/ix-select/ix-select.js";const v=i`
+  :host {
+    --_ix-grid-cell-padding: var(--ix-grid-cell-padding, 1rem);
+    --lumo-primary-color-50pct: transparent;
+  }
+
+  vaadin-grid::part(first-frozen-to-end-cell) {
+    border-left: 0.063rem solid var(--_lumo-grid-border-color);
+    box-shadow: -0.375rem 0 0.375rem -0.375rem #0000001a;
+  }
+
+  * {
+    font-family: inherit;
+  }
+
+  vaadin-grid::part(cell) {
+    cursor: var(--ix-grid-cell-pointer, pointer);
+  }
+
+  vaadin-grid::part(header-cell) {
+    cursor: default;
+    --vaadin-grid-cell-background: #fff;
+  }
+
+  vaadin-grid::part(row):hover {
+    --vaadin-grid-cell-background: var(--ix-grid-hover-background, #f5f5f5);
+  }
+
+  vaadin-grid-cell-content {
+    font-size: 14px;
+    --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);
+  }
+
+  .hide-column-headers::part(header-cell) {
+    display: none;
+  }
+
+  vaadin-grid::part(ix-disabled-cell) {
+    cursor: default;
+    color: var(--cp-neutral-blue-60p);
+    --vaadin-grid-cell-background: var(--cp-neutral-blue-12p);
+  }
+
+  ix-grid-download-menu {
+    width: 38px;
+    margin-right: 2px;
+  }
+
+  ix-grid-column-filter {
+    width: 36px;
+  }
+
+  .grid-container {
+    background-color: var(--clr-surface-container-lowest, #ffffff);
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+      #e1e4e8 0px 0px 0px 1px inset;
+    box-sizing: border-box;
+    padding: 2px;
+  }
+
+  .touch-edge {
+    margin: 0 -3px;
+  }
+
+  .grid-header {
+    display: flex;
+    -webkit-box-pack: justify;
+    place-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 1rem;
+    flex-wrap: wrap;
+    gap: 18px;
+  }
+
+  .grid-menu {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .grid-menu ix-button {
+    --md-text-button-leading-space: 4px;
+    --md-text-button-trailing-space: 4px;
+  }
+
+  .grid-menu span {
+    color: var(--clr-primary, #1456e0);
+    cursor: pointer;
+  }
+
+  .header {
+    font-weight: bold;
+    display: flex;
+    user-select: none;
+    align-items: center;
+    padding-right: calc(var(--_ix-grid-cell-padding) + 2px);
+    position: relative;
+
+    &:not(.frozen):not(.last).border::after {
+      content: '';
+      display: block;
+      position: absolute;
+      border: 0;
+      border-right-width: var(--ix-grid-header-border-width, 2px);
+      border-color: var(
+        --ix-grid-header-border-color,
+        var(--clr-outline, #0922411f)
+      );
+      border-style: solid;
+      margin-right: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    .header-label {
+      position: relative;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      flex-grow: 1;
+      z-index: 2;
+      padding-left: 0.25rem;
+    }
+  }
+
+  .header .header-sort-icon {
+    background: #fff;
+    display: none;
+    padding-left: 5px;
+    font-size: 17px;
+    color: rgba(0, 0, 0, 0.54);
+    cursor: pointer;
+    height: 18px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+  }
+
+  .header:hover .header-sort-icon {
+    display: block;
+  }
+
+  .columns-reordering {
+    opacity: 0.25;
+  }
+
+  .progress-container {
+    position: relative;
+    top: var(--progress-bar-top, 60px);
+    z-index: 1;
+  }
+
+  span .disabled {
+    color: var(--clr-on-surface-variant, rgba(9, 34, 65, 0.7));
+  }
+
+  .disable-cursor {
+    cursor: default !important;
+  }
+
+  .accounts {
+    display: flex;
+    align-items: center;
+  }
+
+  .account-name {
+    margin: 0 8px 0 3px;
+  }
+
+  vaadin-grid-cell-content {
+    font-family: var(--text-small-font, sans-serif);
+    font-size: var(--text-small-size, 0.875rem);
+    letter-spacing: var(--text-small-letter-spacing, 0.0275em);
+    line-height: var(--text-small-line-height, 1.42857143em);
+    font-weight: var(--text-small-weight, normal);
+    text-decoration: var(--text-small-decoration, none);
+    text-transform: var(--text-small-transform, none);
+    --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);
+  }
+
+  vaadin-grid-cell-content > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .row-controls {
+    border-top: solid 1px var(--clr-border-outline, #0922411f);
+    padding: 8px;
+  }
+
+  .more-pagination {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .pagination {
+    flex-grow: 1;
+  }
+
+  .row-limit {
+    display: flex;
+    padding: 8px;
+  }
+
+  .remove-all-button {
+    margin-left: auto;
+  }
+
+  /* launchpad variant */
+  .launchpad vaadin-grid {
+    --lumo-size-xl: auto;
+  }
+
+  .launchpad {
+    --ix-grid-cell-height: 44px;
+    --ix-grid-cell-padding: 14px 24px;
+  }
+
+  .launchpad .grid-header {
+    padding: 0.5rem 18px 0;
+  }
+
+  .launchpad .header {
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+  }
+
+  .launchpad .grid-header h2 {
+    font-family: var(--text-page-title-font, sans-serif);
+    font-size: var(--text-page-title-size, 2.125rem);
+    letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);
+    line-height: var(--text-page-title-line-height, 1.17647059em);
+    font-weight: var(--text-page-title-weight, bold);
+    text-decoration: var(--text-page-title-decoration, none);
+    text-transform: var(--text-page-title-transform, none);
+  }
+
+  vaadin-grid-cell-content {
+    height: var(--ix-grid-cell-height, 52px);
+  }
+
+  @media only screen and (max-width: 840px) {
+    .grid-header {
+      display: flex;
+      flex-direction: row;
+      padding: 1rem;
+      justify-content: space-between;
+    }
+    .grid-menu {
+      padding-left: 0;
+      margin-left: -4px;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    .grid-header {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 1rem;
+      gap: 12px;
+    }
+    .grid-container {
+      border-radius: 0;
+      box-shadow: none;
+      padding: 0;
+      overflow: hidden;
+    }
+  }
+  .column-max-width-set {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`,x=i`
+  .dropdown-content {
+    position: absolute;
+    background-color: var(--clr-surface-container-lowest, #fff);
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 9;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+    padding: 10px;
+    width: 247px;
+    left: -100px;
+    border-radius: 16px;
+  }
+
+  .dropdown-content > div {
+    margin: 0px;
+    color: var(--clr-on-surface, #092241);
+    font-family: var(--text-small-font, sans-serif);
+    font-size: var(--text-small-size, 0.875rem);
+    letter-spacing: var(--text-small-letter-spacing, 0.0275em);
+    line-height: var(--text-small-line-height, 1.42857143em);
+    font-weight: var(--text-small-weight, normal);
+    text-decoration: var(--text-small-decoration, none);
+    text-transform: var(--text-small-transform, none);
+    display: block;
+    cursor: pointer;
+  }
+
+  .dropdown-content span:hover {
+    background-color: #f1f1f1;
+  }
+
+  .dropdown-content label {
+    display: flex;
+    align-items: center;
+  }
+
+  .dropdown-content label.dragOrigin {
+    background: #ff000017;
+    outline: 1px #ff9d9d dashed;
+  }
+
+  .dropdown-content label p {
+    width: 158px;
+  }
+
+  .dropdown-content label .draggable {
+    font-size: 24px;
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+  }
+
+  .dropdown-content label .draggable path {
+    fill: var(--clr-primary, #1456e0);
+  }
+
+  .active {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    height: 8px;
+    width: 8px;
+    background-color: var(--clr-critical, #db0028);
+    border-radius: 50%;
+  }
+
+  ix-switch {
+    padding: 0 0 0 6px;
+    display: flex;
+    width: 48px;
+  }
+
+  .list {
+    position: relative;
+  }
+
+  @media only screen and (max-width: 840px) {
+    .dropdown-content {
+      left: 0;
+    }
+  }
+`,b=[" ","Enter"],w=o`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM7 12C7 10.9 7.9 10 9 10C10.1 10 11 10.9 11 12C11 13.1 10.1 14 9 14C7.9 14 7 13.1 7 12ZM9 20C10.1 20 11 19.1 11 18C11 16.9 10.1 16 9 16C7.9 16 7 16.9 7 18C7 19.1 7.9 20 9 20ZM17 6C17 7.1 16.1 8 15 8C13.9 8 13 7.1 13 6C13 4.9 13.9 4 15 4C16.1 4 17 4.9 17 6ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM13 18C13 16.9 13.9 16 15 16C16.1 16 17 16.9 17 18C17 19.1 16.1 20 15 20C13.9 20 13 19.1 13 18Z" fill="#1456e0" />
+</svg>`;let y=class extends r{constructor(){super(...arguments),this.columns=[],this.columnsLocalStorageKey=void 0,this.columnReorderingAllowed=!1,this.refreshDataOnColumnVisibilityChange=!0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}get preservedColumns(){let e=[];return this.columnsLocalStorageKey&&(e=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]")),e}initializeLocalStorage(){this.preservedColumns.length>0&&(this.disabledColumns=this.preservedColumns.filter(e=>e.hidden&&this.columns.some(t=>t.name===e.name)).map(e=>e.name),this.columns.forEach((e,t)=>{this.disabledColumns.includes(e.name)&&(this.columns[t].hidden=!0)})),this.dispatchUpdate()}update(e){super.update(e),e.has("columnsLocalStorageKey")&&this.initializeLocalStorage()}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}updateColumn(e,t){var i;const o=null===(i=e.target.shadowRoot)||void 0===i?void 0:i.querySelector("input");this.columns[t].hidden!==!(null==o?void 0:o.checked)&&this.dispatchEvent(new CustomEvent("columnVisibilityChange",{detail:{column:this.columns[t]},bubbles:!0,composed:!0})),this.columns[t].hidden=!(null==o?void 0:o.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),this.columnsLocalStorageKey&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify([...this.columns])),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){if(this.columnReorderingAllowed){const t=e.target;this.dragEvent.sourceEl=t,t.style.opacity="0.3";const i=Number(t.getAttribute("data-id"));this.dragEvent.startId=i}}dragend(){var e;if(this.columnReorderingAllowed){if(this.dragEvent.startId!==this.dragEvent.targetId){const e=[...this.columns],t=e.splice(this.dragEvent.startId,1)[0];e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))}null===(e=this.dragEvent.sourceEl)||void 0===e||e.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}}dragenter(e){if(this.columnReorderingAllowed){const t=e.target;if(t.classList.contains("drag-target")){const e=Number(t.getAttribute("data-id"));this.dragEvent.targetId=e}}}handleDropdownToggle(e){if(e instanceof KeyboardEvent&&!b.includes(e.key))return;e.composedPath().includes(this.dropdown)||(this.isDropdownVisible=!this.isDropdownVisible)}render(){return n`<div class="grid-menu">
+      <span
+        @click=${this.handleDropdownToggle}
+        @keyDown=${this.handleDropdownToggle}
+        class="list list-dropdown"
+      >
+        <ix-icon-button appearance="default">
+          <svg
+            slot="default"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M3 9H7V5H3V9ZM7 14H3V10H7V14ZM7 19H3V15H7V19ZM20 14H8V10H20V14ZM8 19H20V15H8V19ZM8 9V5H20V9H8Z"
+              fill="#1456E0"
+            />
+          </svg>
+        </ix-icon-button>
+        ${this.disabledColumns.length>0?n`<div class="active"></div>`:a}
+        ${this.isDropdownVisible?n` <div
+              class="dropdown-content"
+              @dragover=${e=>e.preventDefault()}
+              @dragstart=${this.dragstart}
+              @dragend=${this.dragend}
+              @dragenter=${this.dragenter}
+            >
+              ${f(this.columns.filter(e=>!1!==e.filterable),e=>e.name,(e,t)=>n`<div>
+                  <label
+                    class=${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}
+                    draggable=${this.columnReorderingAllowed}
+                    data-id=${t}
+                  >
+                    <ix-switch
+                      .selected=${!e.hidden}
+                      @change=${e=>this.updateColumn(e,t)}
+                    >
+                    </ix-switch>
+                    <p>${e.header}</p>
+                    ${this.columnReorderingAllowed?n`<div class="draggable">${w}</div>`:a}
+                  </label>
+                </div>`)}
+            </div>`:a}
+      </span>
+    </div>`}};y.styles=[v,x],e([l(".dropdown-content")],y.prototype,"dropdown",void 0),e([d({type:Array})],y.prototype,"columns",void 0),e([d({type:String})],y.prototype,"columnsLocalStorageKey",void 0),e([d({type:Boolean})],y.prototype,"columnReorderingAllowed",void 0),e([d({type:Boolean})],y.prototype,"refreshDataOnColumnVisibilityChange",void 0),e([d({attribute:!1})],y.prototype,"requestGridUpdate",void 0),e([p()],y.prototype,"isDropdownVisible",void 0),e([p()],y.prototype,"disabledColumns",void 0),e([p()],y.prototype,"dragEvent",void 0),y=e([c("ix-grid-column-filter")],y);let C=class extends r{constructor(){super(...arguments),this.items=[],this.isDownloading=!1}toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}renderMenuItems(){var e;return 0===(null===(e=this.items)||void 0===e?void 0:e.length)?n` <ix-menu-item
+          @click=${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}
+        >
+          <div slot="headline">Download All Records</div>
+        </ix-menu-item>
+        <ix-menu-item
+          @click=${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}
+        >
+          <div slot="headline">Download Current Filter</div>
+        </ix-menu-item>`:this.items.filter(e=>!e.hidden).map(e=>n` <ix-menu-item
+          .disabled=${e.disabled}
+          @click=${()=>e.onClick(e.name)}
+        >
+          <div slot="headline">${e.label}</div>
+        </ix-menu-item>`)}render(){return this.isDownloading?n`<ix-progress
+        .indeterminate=${!0}
+        .linear=${!1}
+        style="--md-circular-progress-size: 1.75REM;
+              text-align: center;"
+      ></ix-progress>`:n` <div style="position: relative">
+      <ix-icon-button id="anchor" @click=${this.toggleMenu}>
+        <svg
+          slot="default"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z"
+            fill="#1456E0"
+          />
+        </svg>
+      </ix-icon-button>
+      <ix-menu id="menu" anchor="anchor" has-overflow>
+        ${this.renderMenuItems()}
+      </ix-menu>
+    </div>`}};C.styles=[v],e([l("#menu")],C.prototype,"downloadMenu",void 0),e([l("#anchor")],C.prototype,"downloadMenuAnchor",void 0),e([d({type:Array})],C.prototype,"items",void 0),e([d({type:Boolean})],C.prototype,"isDownloading",void 0),C=e([c("ix-grid-download-menu")],C);const S="active filter",$="Filters",F="Hide Filters",z="Show Filters",D="Rows per page",L="VIEW MORE",k="VIEW LESS",E="ADD",P="REMOVE ALL",V=i`
+  .slot-wrap {
+    display: flex;
+  }
+
+  .slot-wrap ix-icon {
+    --ix-icon-font-size: 24px;
+    color: var(--clr-primary, #1456e0);
+    margin-right: 5px;
+  }
+
+  .grid-menu ix-button .filter {
+    margin-top: 2px;
+  }
+
+  .filter-form {
+    white-space: nowrap;
+    padding: 9px;
+    color: var(--clr-on-surface-variant, #092241b3);
+  }
+
+  .filter-form-column {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .filter-remove span {
+    margin-right: 0px;
+    color: var(--clr-on-surface-variant, #092241b3);
+  }
+
+  .filter-dropdown-content {
+    position: absolute;
+    display: inline;
+    right: 0;
+    top: 78%;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 3;
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 12px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+    background-color: #ffffff;
+    z-index: 10;
+  }
+
+  .filter-form input,
+  .filter-form select,
+  .filter-form option {
+    font-family: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
+    border-radius: 0px;
+    cursor: pointer;
+    box-sizing: content-box;
+    background: none;
+    height: 1.4375em;
+    margin: 0px;
+    animation-name: mui-auto-fill-cancel;
+    animation-duration: 10ms;
+    border: none;
+    border-image: initial;
+    box-sizing: border-box;
+    cursor: text;
+    user-select: none;
+    color: currentcolor;
+    -webkit-tap-highlight-color: transparent;
+    display: block;
+    min-width: 0px;
+    width: 100%;
+    height: 25px;
+    border-bottom: 1px solid black;
+  }
+
+  .filter-form option {
+    -webkit-tap-highlight-color: #9ca6b2;
+  }
+
+  .filter-form input:hover,
+  .filter-form select:hover {
+    outline: none !important;
+    border-bottom: 2px solid black;
+  }
+
+  .filter-form input:focus,
+  .filter-form select:focus {
+    outline: none !important;
+    border-bottom: 2px solid #1456e0;
+  }
+
+  .filter-form select:focus {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    height: 54px;
+    justify-content: flex-end;
+    font-family: var(--text-default-font, sans-serif);
+  }
+
+  .form-group label {
+    font-family: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
+    padding: 0px;
+    color: #092241;
+    display: block;
+    transform-origin: left top;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 133%;
+    transform: translate(0px, -1.5px) scale(0.75);
+    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  }
+
+  .filter-form-group label span {
+    font-family: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
+    padding: 0px;
+    color: #092241;
+    display: block;
+    transform-origin: left top;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 133%;
+    transform: translate(0px, -1.5px) scale(0.75);
+    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  }
+
+  .filter-form-group label:focus-within span {
+    color: #1456e0;
+  }
+
+  .filter-form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    height: 54px;
+    justify-content: space-between;
+    font-family: var(--text-default-font, sans-serif);
+    white-space: wrap;
+
+    ix-date-next,
+    ix-date {
+      margin-top: 10px;
+    }
+  }
+
+  option {
+    font-weight: normal;
+    display: block;
+    min-height: 1.2em;
+    padding: 0px 2px 1px;
+    white-space: nowrap;
+  }
+
+  .filter-footer {
+    padding: 9px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .no-display {
+    display: none;
+  }
+
+  .filter-local-operator-empty {
+    width: 54px;
+    border: none;
+  }
+
+  .grid-menu span.filter-superscript {
+    position: absolute;
+    top: 6px;
+    left: 14px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+    padding: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background-color: var(--clr-primary, #1456e0);
+    color: var(--clr-on-primary, #fff);
+  }
+
+  .filterlist {
+    width: 40px;
+  }
+
+  .filterColumnField {
+    width: var(--ix-grid-filter-column-width, 150px);
+  }
+
+  .filterValueField {
+    width: 190px;
+  }
+
+  .filterOperatorField {
+    width: 120px;
+  }
+
+  .form-group-operator-label {
+    width: 100%;
+  }
+
+  .filter-form .filterOperatorInput {
+    min-width: 96px;
+  }
+
+  select:hover {
+    cursor: pointer;
+  }
+
+  input:hover {
+    cursor: text;
+  }
+
+  .tooltip-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tool-tip {
+    color: var(--clr-on-secondary, #fff);
+    overflow-wrap: break-word;
+    border-radius: 3px;
+    background-color: var(--clr-secondary, #071454);
+    padding: 5px 8px;
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+
+    position: absolute;
+    top: 42px;
+    right: 0;
+    z-index: 3;
+    white-space: nowrap;
+    display: none;
+  }
+
+  .filter-button:hover ~ .tool-tip {
+    display: block;
+  }
+
+  .tool-tip li {
+    margin-left: -21px;
+    overflow-wrap: break-word;
+    border-radius: 3px;
+    max-width: 250px;
+    min-width: 200px;
+    white-space: wrap;
+  }
+
+  .tool-tip p {
+    margin: 0;
+    padding: 0;
+  }
+
+  .grid-menu ix-button {
+    align-items: center;
+    display: flex;
+  }
+
+  @media only screen and (max-width: 840px) {
+    .filter-dropdown-content {
+      right: inherit;
+      top: 0;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    .grid-menu ix-button .filter {
+      display: none;
+    }
+    .grid-menu ix-button {
+      --md-text-button-leading-space: 6px;
+      --md-text-button-trailing-space: 0;
+      margin-left: 4px;
+    }
+  }
+`;let R=class extends r{constructor(){super(...arguments),this.columns=[],this.filterValueChangeDebounceTime=300,this.readParamsFromURL=!1,this.useNewDatePicker=!1,this.maxDate=m(new Date,"yyyy-MM-dd"),this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.fromDateErrorText="",this.oldValueLength=0,this.debouncedOnFilterValueChange=()=>{},this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)},this.handlePopState=()=>{this.filters=this.parseFilterQueryString(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter()),this.updateActiveFilters()}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>e.value.length>0)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick),window.addEventListener("popstate",this.handlePopState)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick),window.removeEventListener("popstate",this.handlePopState)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.readParamsFromURL&&(this.filters=this.parseFilterQueryString()),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate(!1),this.debouncedOnFilterValueChange=(e,t)=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(()=>this.onfilterValueChange.bind(this)(e,t),this.filterValueChangeDebounceTime)}}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){const e=new URLSearchParams(window.location.search),t=[];return this.filterableColumns.forEach(i=>{var o;null===(o=i.filterOperators)||void 0===o||o.forEach(o=>{var r;const a=`${i.name}_${o}`;e.has(a)&&t.push({columnField:i.name,operatorValue:o,dataType:i.dataType,value:null!==(r=e.get(a))&&void 0!==r?r:""})})}),t}dispatchUpdate(e=!0){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>e.value.length),resetPage:e},bubbles:!0,composed:!0}))}addFilter(){var e,t;const i=this.filterColumns.find(e=>!this.filterNames.includes(e))||"",o=(null===(e=this.filterableColumns.find(e=>e.name===i))||void 0===e?void 0:e.filterOperators)||["contains"],r=(null===(t=this.filterableColumns.find(e=>e.name===i))||void 0===t?void 0:t.dataType)||"string";this.filters=[...this.filters,{columnField:i,operatorValue:o[0],dataType:r,value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(e){this.filters=this.filters.filter((t,i)=>i!==e),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter()),this.updateActiveFilters()}onfilterColumnChange(e,t){var i;const o=t.target.value,r=this.filterableColumns.find(e=>e.name===o);this.filters[e].columnField=o,this.filters[e].dataType=null==r?void 0:r.dataType,this.filters[e].operatorValue=(null===(i=null==r?void 0:r.filterOperators)||void 0===i?void 0:i[0])||"contains",this.filters=[...this.filters],this.dispatchUpdate()}onfilterOperatorChange(e,t){const i=t.target.value;this.filters[e].operatorValue=i,this.filters=[...this.filters],this.dispatchUpdate()}onDatefilterValueChange(e,t){this.filters[e].value=t,this.dispatchUpdate(),this.updateActiveFilters()}onfilterValueChange(e,t){const{value:i}=t;this.filters[e].value=i;const o=this.filters[e].value.length;this.filters[e].columnField.length>0&&(o>=3||o<this.oldValueLength)&&this.dispatchUpdate(),this.updateActiveFilters(),this.oldValueLength=o}formatCamelCaseToEnglish(e){const t=e.replace(/([A-Z])/g," $1").toLowerCase();return t.charAt(0).toUpperCase()+t.slice(1)}renderToolTip(){return this.isDropdownVisible?F:this.activeFilters.length?n` <p>${this.activeFilters.length} ${S}</p>
+      <ul>
+        ${this.activeFilters.map(e=>{var t,i;let o=e.value;if("dateTime"===e.dataType&&this.useNewDatePicker){const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("ix-date-next");o=g(o,e.format)}const r=this.filterableColumns.find(t=>t.name===e.columnField),a=null!==(i=null==r?void 0:r.header)&&void 0!==i?i:this.formatCamelCaseToEnglish(e.columnField);return n`<li>
+            ${a} ${e.operatorValue} ${o}
+          </li>`})}
+      </ul>`:z}renderStringInput(e,t){return n`<label class="form-group-operator-label">
+      <span>Value</span>
+      <input
+        data-testid=${`filterValueInput-${t}`}
+        placeholder="Filter value"
+        @input=${e=>this.debouncedOnFilterValueChange(t,e.target)}
+        .value=${e.value}
+      />
+    </label>`}renderDateInput(e,t){return this.useNewDatePicker?n`<ix-date-next
+          data-testid=${`filterValueInput-${t}`}
+          .value=${e.value}
+          max=${this.maxDate}
+          name="${e.columnField}-valueDate"
+          showCalendarOnMouseDown="true"
+          .errorText=${this.fromDateErrorText}
+          .onChanged=${e=>this.onDatefilterValueChange(t,e)}
+        >
+        </ix-date-next>`:n`<ix-date
+          data-testid=${`filterValueInput-${t}`}
+          .value=${e.value}
+          max=${this.maxDate}
+          name="${e.columnField}-valueDate"
+          .errorText=${this.fromDateErrorText}
+          .onChanged=${e=>this.onDatefilterValueChange(t,e)}
+        >
+        </ix-date>`}renderFilterInputControl(e,t){switch(e.dataType){case"string":case void 0:return this.renderStringInput(e,t);case"dateTime":return this.renderDateInput(e,t);default:return a}}renderFilterInput(e,t){var i,o;const r=[e.columnField,...this.unselectedFilters],s=this.filterableColumns.filter(e=>r.includes(e.name));return n`
+      <div class="filter-form">
+        <div class="filter-remove filter-form-column">
+          <div class="form-group">
+            <ix-icon-button
+              icon="close"
+              data-testid="clearFilterButton"
+              @click=${()=>this.removeFilter(t)}
+              @keyDown=${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(t)}}
+            ></ix-icon-button>
+          </div>
+        </div>
+        ${this.mapSelect?n`<div
+              class="filter-form-column filter-form-column-border filterColumnField"
+            >
+              <div class="form-group">
+                <label
+                  class="form-group-column-label"
+                  title="select: ${e.columnField}, options: ${s.map(t=>`value=${t.name}, selected=${t.name===e.columnField}, ${t.header}\n                `)}"
+                  >Columns</label
+                >
+
+                <select
+                  @change=${e=>this.onfilterColumnChange(t,e)}
+                  .value=${e.columnField}
+                  data-v=${e.columnField}
+                >
+                  ${s.map(t=>n`
+                      <option
+                        value=${t.name}
+                        ?selected=${t.name===e.columnField}
+                      >
+                        ${t.header}
+                      </option>
+                    `)}
+                </select>
+              </div>
+            </div>`:a}
+
+        <div
+          class="filter-form-column filter-form-column-border filterColumnField"
+        >
+          <div class="filter-form-group">
+            <label class="form-group-column-label"
+              ><span>Columns</span>
+              <select
+                data-testid=${`filterColumnInput-${t}`}
+                @change=${e=>this.onfilterColumnChange(t,e)}
+                .value=${e.columnField}
+                data-v=${e.columnField}
+              >
+                ${f(s,e=>e.name,t=>n`
+                    <option
+                      value=${t.name}
+                      ?selected=${t.name===e.columnField}
+                    >
+                      ${t.header}
+                    </option>
+                  `)}
+              </select>
+            </label>
+          </div>
+        </div>
+
+        <div
+          class="filter-form-column filter-form-column-border filterOperatorField"
+        >
+          <div class="filter-form-group">
+            <label class="form-group-operator-label"
+              ><span>Operator</span>
+              <select
+                data-testid=${`filterOperatorInput-${t}`}
+                class="filterOperatorInput"
+                @change=${e=>this.onfilterOperatorChange(t,e)}
+                .value=${e.operatorValue}
+                data-v=${e.operatorValue}
+              >
+                ${f(null!==(o=null===(i=s.find(t=>t.name===e.columnField))||void 0===i?void 0:i.filterOperators)&&void 0!==o?o:["contains"],t=>n`
+                    <option
+                      value=${t}
+                      ?selected=${t===e.operatorValue}
+                    >
+                      ${t}
+                    </option>
+                  `)}
+              </select>
+            </label>
+          </div>
+        </div>
+        <div
+          class="filter-form-column filter-form-column-border filterValueField"
+        >
+          <div class="filter-form-group">
+            ${this.renderFilterInputControl(e,t)}
+          </div>
+        </div>
+      </div>
+    `}renderDropdown(){const e=this.filters.length>=this.filterColumns.length||this.activeFilters.length<this.filters.length;return n` <div class="filter-dropdown-content">
+      <div class="filter-body">
+        ${this.filters.map((e,t)=>this.renderFilterInput(e,t))}
+      </div>
+      <div class="filter-footer">
+        <ix-button
+          data-testid="addFilterButton"
+          class="add-filter-button"
+          @click="${()=>this.addFilter()}"
+          ?disabled=${e}
+          appearance="text"
+        >
+          <ix-icon slot="icon">add</ix-icon>
+          Add filter
+        </ix-button>
+        <ix-button
+          data-testid="clearAllFiltersButton"
+          @click="${()=>this.clearFilters()}"
+          ?disabled=${0===this.activeFilters.length}
+          appearance="text"
+        >
+          Clear all
+        </ix-button>
+      </div>
+    </div>`}render(){return n` <div class="grid-menu">
+      <div class="filter-container tooltip-container">
+        ${this.activeFilters.length>0?n`<span class="filter-superscript"
+              >${this.activeFilters.length}</span
+            >`:a}
+        <ix-button
+          data-testid="showFiltersButton"
+          appearance="text"
+          class="filter_list filter-button"
+          @click=${()=>{this.isDropdownVisible=!this.isDropdownVisible}}
+          @keyDown=${()=>{this.isDropdownVisible=!this.isDropdownVisible}}
+        >
+          <div class="slot-wrap">
+            <ix-icon appearance="default" class="filter-icon"
+              >filter_list</ix-icon
+            >
+            <span class="filter">${$}</span>
+          </div>
+        </ix-button>
+        <div class="tool-tip">${this.renderToolTip()}</div>
+        ${this.isDropdownVisible?this.renderDropdown():a}
+      </div>
+    </div>`}};R.styles=[v,V],e([d({type:Array})],R.prototype,"columns",void 0),e([d({type:Number})],R.prototype,"filterValueChangeDebounceTime",void 0),e([d({type:Boolean})],R.prototype,"readParamsFromURL",void 0),e([d({type:Boolean})],R.prototype,"useNewDatePicker",void 0),e([d({type:String})],R.prototype,"maxDate",void 0),e([p()],R.prototype,"isDropdownVisible",void 0),e([p()],R.prototype,"filters",void 0),e([p()],R.prototype,"filterableColumns",void 0),e([p()],R.prototype,"filterColumns",void 0),e([p()],R.prototype,"activeFilters",void 0),e([p()],R.prototype,"mapSelect",void 0),e([p()],R.prototype,"fromDateErrorText",void 0),e([p()],R.prototype,"oldValueLength",void 0),R=e([c("ix-grid-row-filter")],R);const B=i`
+  :host {
+    --md-filled-select-text-field-input-text-size: var(
       --ix-filled-select-text-field-input-text-size,
       12px
-    )}.pagination{display:flex;align-items:center;justify-content:end;gap:0;font-family:var(--text-caption-font,sans-serif);font-size:var(--text-caption-size,.75rem);letter-spacing:var(--text-caption-letter-spacing,.03333333em);line-height:var(--text-caption-line-height,1.33333333em);font-weight:var(--text-caption-weight,normal);text-transform:var(--text-caption-transform,none);text-decoration:var(--text-caption-decoration,none);margin:1.25rem .5rem 1.25rem 1rem}.pagination>div{display:flex;align-items:center;gap:.5rem}.pagination p{margin:0}.pagination-nav{display:flex;margin-left:1.5rem;height:1.5rem;gap:.5rem}.pagination-nav>ix-icon-button{margin-top:-.5rem}.rows-per-page{color:var(--clr-on-surface,#092241)}ix-select{--md-menu-container-color:var(--bg-surface-container-lowest, #fff);--md-filled-select-text-field-container-color:var(
+    );
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 0;
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+    margin: 1.25rem 0.5rem 1.25rem 1rem;
+  }
+
+  .pagination.simple {
+    margin: 0;
+  }
+
+  .pagination > div {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .pagination p {
+    margin: 0;
+  }
+
+  .pagination-nav {
+    display: flex;
+    margin-left: 1.5rem;
+    height: 1.5rem;
+    gap: 0.5rem;
+  }
+
+  .pagination-nav > ix-icon-button {
+    margin-top: -0.5rem;
+  }
+
+  .rows-per-page {
+    color: var(--clr-on-surface, #092241);
+  }
+
+  ix-select {
+    --md-menu-container-color: var(--bg-surface-container-lowest, #fff);
+    --md-filled-select-text-field-container-color: var(
       --bg-surface-container-lowest,
       #fff
-    );--md-filled-select-text-field-active-indicator-height:0px;--md-filled-select-text-field-hover-indicator-height:0px;--md-filled-field-hover-active-indicator-height:0px;--md-filled-field-focus-active-indicator-height:0px;--md-filled-field-bottom-space:4px;--md-filled-field-top-space:4px;--md-filled-select-text-field-focus-trailing-icon-color:var(
+    );
+    --md-filled-select-text-field-active-indicator-height: 0px;
+    --md-filled-select-text-field-hover-indicator-height: 0px;
+    --md-filled-field-hover-active-indicator-height: 0px;
+    --md-filled-field-focus-active-indicator-height: 0px;
+    --md-filled-field-bottom-space: 4px;
+    --md-filled-field-top-space: 4px;
+
+    --md-filled-select-text-field-focus-trailing-icon-color: var(
       --clr-primary,
       #1456e0
-    );--md-filled-select-text-field-focus-active-indicator-color:var(
+    );
+    --md-filled-select-text-field-focus-active-indicator-color: var(
       --md-filled-select-text-field-focus-trailing-icon-color
-    )}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}@media only screen and (max-width:600px){.pagination{justify-content:space-between}.pagination>div{gap:0}}`),IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}handlePageSizeSelection(e){var e=e.target,e=Number(e.value),t=(this.page-1)*this.pageSize+1,t=Math.ceil(t/e);this.updatePagination(t,e)}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){let e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><div><p class="rows-per-page">${copy.rowsPerPage}:</p><ix-select wide-menu menu-positioning="fixed" class="pagination__select-input" @request-selection="${this.handlePageSizeSelection}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}" ?selected="${e===this.pageSize}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select></div><div><p>${0<this.recordCount?(this.page-1)*this.pageSize+1:0} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${0<this.recordCount?this.recordCount:0}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left" data-testid="ix-pagination-prev"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right" data-testid="ix-pagination-next"></ix-icon-button></div></div></div>`}};IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination);class IxGrid extends LitElement{constructor(){super(...arguments),this.defaultPageSize=10,this.defaultPage=1,this.originalSearchParams=void 0,this.columnReorderingAllowed=!1,this.variantClass="",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=this.defaultPage,this.pageSize=this.defaultPageSize,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.isDownloading=!1,this.isLoading=!1,this.downloadMenuItems=[],this.addParamsToURL=!0,this.readParamsFromURL=!1,this.refreshDataOnColumnVisibilityChange=!0,this.filterValueChangeDebounceTime=300,this.hideColumnHeaders=!1,this.preservedQueryParamKeys=[],this.filterMaxDate=formatDate(new Date,"yyyy-MM-dd"),this.hashedTableState="",this.hideViewMoreLessButtonIcon=!0,this.showAddButton=!1,this.disableAddButton=!1,this.addButtonLabel=copy.add,this.showRemoveAllButton=!1,this.disableRemoveAllButton=!1,this.removeAllButtonLabel=copy.removeAll,this.filters=[],this.isColumnsReordering=!1,this.isExpanded=!1,this.displayColumns=[],this.defaultFilterKeys=["sort","order","page","size"],this.initialised=!1,this.handlePopState=()=>{this.updateSearchParamsFromUri(!0),this.dispatchChangeEvent()},this.dispatchChangeEvent=()=>{var e=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:e,filtersOperators:this.filters.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))},this.renderColumnHeader=(e,t,i,r)=>{i=classMap({header:!0,frozen:!!e.frozenToEnd,first:0===i,last:i===r-1,border:!(null!=t&&t.frozenToEnd)});return html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="${i}"><span class="header-label">${e.header}</span> ${e.sortable?html`<ix-icon title="Sort" class="header-sort-icon">${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon>`:nothing}</div>`},this.columnRenderer=(e,t,i,r)=>{render(nothing,t);r=e.bodyRenderer(r.item,r,i);let o=r;i=!!e.maxWidth;let a="column-max-width-set";i&&(o=html`<div class="${a}" style="max-width:${e.maxWidth}">${r}</div>`),render(o,t),i&&requestAnimationFrame(()=>{let e,i=t.querySelector("."+a);if(i&&i.scrollWidth>i.clientWidth&&!i.querySelector(".custom-tooltip")&&null!=(e=i.textContent)&&e.trim()){let t=document.createElement("div");t.className="custom-tooltip",t.style.cssText=`
-              background-color: #092241;
-              font-size: 0.75rem;
-              color: white;
-              text-align: left;
-              padding: 0.313rem 0.5rem;
-              border-radius: 0.188rem;
-              max-height: 31.25rem;
-              overflow: hidden;
-              position: absolute;
-              z-index: 1000;
-              display: none;
-            `,t.textContent=i.textContent,i.addEventListener("mouseenter",()=>{t.style.display="flex";var e=i.getBoundingClientRect();t.style.left=e.left+"px",t.style.top=e.bottom+window.scrollY+4+"px",document.body.appendChild(t)}),i.addEventListener("mouseleave",()=>{t.remove()})}})},this.renderHeader=()=>html`<div class="grid-header"><slot name="header"><div class="empty"></div></slot>${this.hideFilters?nothing:html`<div class="grid-menu"><slot name="filters"><div class="empty"></div></slot><ix-grid-column-filter .columns="${this.arrangedColumns}" columnsLocalStorageKey="${ifDefined(this.columnsLocalStorageKey)}" @columnFilter="${e=>this.handleOnColumnFilter(e)}" @reorderColumns="${this.reorderColumnsFromFilter}" .columnReorderingAllowed="${this.columnReorderingAllowed}" .refreshDataOnColumnVisibilityChange="${this.refreshDataOnColumnVisibilityChange}" .requestGridUpdate="${()=>this.requestUpdate()}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu .items="${this.downloadMenuItems}" .isDownloading="${this.isDownloading}"></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this.displayColumns}" .filterValueChangeDebounceTime="${this.filterValueChangeDebounceTime}" .readParamsFromURL="${this.readParamsFromURL}" .maxDate="${this.filterMaxDate}" @rowFilter="${e=>{this.filters=e.detail.filters,e.detail.resetPage&&(this.page=this.defaultPage),this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowControls=()=>!1===this.showAddButton&&!1===this.showRemoveAllButton&&!1===this.showViewMoreLessButton?nothing:html`<div class="row-controls row-limit">${this.renderAddNewButton()} ${this.renderViewMoreLessButton()} ${this.renderRemoveAllButton()}</div>`,this.renderPaginationControls=()=>html`<div class="row-controls pagination"><ix-pagination .page="${this.page}" .pageSize="${this.pageSize}" .pageSizes="${this.pageSizes}" .recordCount="${this.recordCount}" @updatePagination="${e=>{this.page=e.detail.page,this.pageSize=e.detail.pageSize,this.updatePage()}}"></ix-pagination></div>`}get isPersistable(){return!!this.localStorageID}get columnNames(){return this.columns.map(e=>e.name)}get columnsLocalStorageKey(){if(""===this.hashedTableState){var e=this.columns.map(({bodyRenderer:e,hidden:t,...i})=>i),i=JSON.stringify(e);let t=0;for(let e=0;e<i.length;e+=1)t=31*t+i.charCodeAt(e)>>>0;this.hashedTableState=t.toString(36)}return`ix-grid-${this.localStorageID}-${this.hashedTableState}-columns`}get arrangedColumns(){let e=[];return(e=0===(e=this.getColumnsToDisplayFromLocalStorage()).length?[...this.columns]:e).filter(e=>e).map(e=>({...e,width:e.width||void 0}))}connectedCallback(){var e;null!=(e=super.connectedCallback)&&e.call(this),window.addEventListener("popstate",this.handlePopState)}disconnectedCallback(){var e;window.removeEventListener("popstate",this.handlePopState),null!=(e=super.disconnectedCallback)&&e.call(this)}updateSearchParamsFromUri(e=!1){var t,i,r,o,a;this.readParamsFromURL&&(t=new URL(window.location.href),t=new URLSearchParams(t.search),[i,r,o,a]=this.defaultFilterKeys,i=t.get(i),r=t.get(r),o=t.get(o),a=t.get(a),i&&r&&(this.sortedColumn=i,this.sortDirection=r),o&&(this.page=parseInt(o,10)||this.defaultPage),a&&(this.pageSize=parseInt(a,10)||this.defaultPageSize),e)&&this.rebuildFiltersFromUri(t)}rebuildFiltersFromUri(e){var t,i,r=[];for([t,i]of e.entries()){var o=this.defaultFilterKeys.includes(t),[a,l]=t.split("_");!o&&a&&l&&r.push({columnField:a,operatorValue:l,value:i})}this.filters=r}update(e){!this.initialised&&0<this.columns.length&&(this.displayColumns=[...this.columns],this.checkLocalStorageUpdate(),this.initialised=!0),super.update(e)}firstUpdated(){this.updateSearchParamsFromUri(),this.removeOldLocalStorageValues()}checkLocalStorageUpdate(){if(this.isPersistable){let i=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]");if(0<i.length){let e=!1;i.length!==this.columns.length&&(e=!0);var t=this.columns.every(t=>i.some(e=>e.name===t.name))&&i.every(t=>this.columns.some(e=>e.name===t.name));(e=t?e:!0)&&this.setColumnsToLocalStorage(this.columns)}}}buildQueryFromFilters(){let t=new URLSearchParams;return this.filters.forEach(e=>{t.append(e.columnField+"_"+e.operatorValue,e.value)}),Object.fromEntries(t)}rebuildQueryFromMatchingQuerystringParams(){let i=new URLSearchParams;var e;return 0===this.preservedQueryParamKeys.length?{}:(e=new URL(window.location.href),new URLSearchParams(e.search).forEach((e,t)=>{this.preservedQueryParamKeys.includes(t)&&i.append(t,e)}),Object.fromEntries(i))}getColumnsToDisplayFromLocalStorage(){let e=[];var t;return e=this.isPersistable&&0<(t=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]")).length?this.mapColumnsWithPersistedSettings(t):e}mapColumnsWithPersistedSettings(o){let i=new Map(o.map(e=>[e.name,e]));var e=this.columns.map(e=>{var t=i.get(e.name);return t?{...e,hidden:t.hidden,frozenToEnd:t.frozenToEnd,width:t.width||void 0}:{...e}});return e.sort((t,i)=>{var e=o.findIndex(e=>e.name===t.name),r=o.findIndex(e=>e.name===i.name);return-1===e&&-1===r?0:-1===e?1:-1===r?-1:e-r}),e}removeOldLocalStorageValues(){var t=this.findMatchingLocalStorageKeys(`ix-grid-${this.localStorageID}-`,"-columns",this.hashedTableState);for(let e=0;e<=t.length;e+=1)localStorage.removeItem(t[e])}findMatchingLocalStorageKeys(t,i,e){var r=[],o=t+e+i;for(let e=0;e<localStorage.length;e+=1){var a=localStorage.key(e);a&&a.startsWith(t)&&a.endsWith(i)&&a!==o&&r.push(a)}return r}async updatePage(e=!0){var t,i;this.dispatchChangeEvent(),this.addParamsToURL&&e&&(e={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...this.buildQueryFromFilters(),...this.rebuildQueryFromMatchingQuerystringParams()},t=new URL(window.location.href),e=new URLSearchParams(e),this.originalSearchParams||this.saveOriginalSearchParams(e),i=new URLSearchParams([...null!=(i=this.originalSearchParams)?i:[],...e]),t.search=i.toString(),window.history.pushState(null,"",t.toString()))}saveOriginalSearchParams(e){var t=new URL(window.location.href);let i=new URLSearchParams(t.search);this.filters.forEach(e=>{i.delete(e.columnField+"_"+e.operatorValue)}),e.forEach((e,t)=>{i.delete(t)}),this.originalSearchParams=i}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}setColumnsToLocalStorage(e){this.isPersistable&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify(e))}async reorderColumnsFromTable(){var e=[...this.arrangedColumns],t=e.filter(e=>!0!==e.hidden),r=e.filter(e=>!0===e.hidden),e=e.filter(e=>!0===e.frozenToEnd);let o=[...t.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...e];t=Array.from((null==(t=null==(t=this.grid)?void 0:t.shadowRoot)?void 0:t.querySelectorAll("th"))||[]);if(t.length){let i=t.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);t=[];i.every((e,t)=>0===t||e>i[t-1])||(t=i.map(e=>o[e]),this.displayColumns=[...t.filter(e=>!0!==e.hidden&&!0!==(null==e?void 0:e.frozenToEnd)),...r.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...e],this.isColumnsReordering=!0,await this.updateComplete,this.isColumnsReordering=!1,this.setColumnsToLocalStorage(this.displayColumns))}}async reorderColumnsFromFilter(e){this.displayColumns=[...e.detail.reorderedColumns],this.setColumnsToLocalStorage([...this.displayColumns]),this.isColumnsReordering=!0,await this.updateComplete,this.isColumnsReordering=!1}handleOnColumnFilter(e){e.detail.columns.forEach((e,t)=>{this.displayColumns[t]&&(this.displayColumns[t].hidden=null==e?void 0:e.hidden)}),this.displayColumns=[...this.displayColumns],this.updatePage(!1)}cellPartNameGenerator(e,t){let i="";return t.item.disabled&&(i+=" ix-disabled-cell"),i}renderAddNewButton(){return this.showAddButton?html`<ix-button name="add-new-button" appearance="text" has-icon ?disabled="${this.disableAddButton}" @click="${()=>this.onAddButtonClick()}"><ix-icon slot="icon">add</ix-icon><span>${this.addButtonLabel}</span></ix-button>`:nothing}get showViewMoreLessButton(){return 0<this.rowLimit&&this.rows.length>this.rowLimit}renderViewMoreLessButton(){return this.showViewMoreLessButton?html`<ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore} ${this.hideViewMoreLessButtonIcon?nothing:html`<ix-icon slot="icon">${this.isExpanded?"remove":"add"}</ix-icon>`}</ix-button>`:nothing}renderRemoveAllButton(){return this.showRemoveAllButton?html`<ix-button class="remove-all-button" name="remove-all-button" appearance="text" ?disabled="${this.disableRemoveAllButton}" @click="${()=>this.onRemoveAllButtonClick()}"><span>${this.removeAllButtonLabel}</span></ix-button>`:nothing}renderColumns(){let t=[...this.arrangedColumns];return 0<t.length?html`${t.map((r,e)=>!0===r.hidden?nothing:html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(r,t[e+1],e,t.length),this.sortDirection)} .renderer="${(e,t,i)=>this.columnRenderer(r,e,t,i)}" resizable width="${ifDefined(r.width)}" min-width="${ifDefined(r.minWidth)}" .responsive="${r.responsive}" ?hidden="${r.hidden}" ?frozen-to-end="${r.frozenToEnd}" path="${r.name}" ?auto-width="${r.autoWidth}" flex-grow="${ifDefined(r.flexGrow)}"></vaadin-grid-column>`)}`:html`<vaadin-grid-column></vaadin-grid-column>`}renderLoading(){return html`<div class="progress-container" style="display:${this.isLoading?"":"none"}"><ix-progress .indeterminate="${!0}"></ix-progress></div>`}renderGrid(){var e,t;return this.isColumnsReordering?nothing:(e=this.displayColumns.find(e=>!0!==e.hidden),t=0<this.rowLimit&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows,html`<vaadin-grid class="${this.hideColumnHeaders?"hide-column-headers":""}" .items="${e?t:[]}" all-rows-visible ?column-reordering-allowed="${this.columnReorderingAllowed}" theme="no-border" .cellPartNameGenerator="${this.cellPartNameGenerator}" @mouseup="${this.reorderColumnsFromTable}">${this.renderColumns()}<div slot="empty-state"><slot name="no-rows"></slot></div></vaadin-grid>`)}render(){return html`<div class="${`grid-container ${this.isColumnsReordering?"columns-reordering":""} `+this.variantClass}">${this.hideHeader?nothing:this.renderHeader()} ${this.renderLoading()} ${this.renderGrid()} ${this.renderRowControls()} ${0<this.rowLimit?nothing:this.renderPaginationControls()}<slot name="footer"></slot></div>`}}IxGrid.styles=[IxGridViewStyles],__decorate([query("vaadin-grid")],IxGrid.prototype,"grid",void 0),__decorate([property({type:Boolean,attribute:"column-reordering-allowed"})],IxGrid.prototype,"columnReorderingAllowed",void 0),__decorate([property({type:String})],IxGrid.prototype,"variantClass",void 0),__decorate([property({type:Array})],IxGrid.prototype,"columns",void 0),__decorate([property({type:Array})],IxGrid.prototype,"rows",void 0),__decorate([property({type:String})],IxGrid.prototype,"defaultEmptyText",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortedColumn",void 0),__decorate([property({type:String})],IxGrid.prototype,"sortDirection",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"hideHeader",void 0),__decorate([property({type:Boolean,attribute:"hide-filters"})],IxGrid.prototype,"hideFilters",void 0),__decorate([property({type:Number})],IxGrid.prototype,"rowLimit",void 0),__decorate([property({type:Number})],IxGrid.prototype,"page",void 0),__decorate([property({type:Number})],IxGrid.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxGrid.prototype,"pageSizes",void 0),__decorate([property({type:Number})],IxGrid.prototype,"recordCount",void 0),__decorate([property({type:String})],IxGrid.prototype,"localStorageID",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"showDownload",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"isDownloading",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"isLoading",void 0),__decorate([property({type:Array})],IxGrid.prototype,"downloadMenuItems",void 0),__decorate([property({type:Boolean,attribute:"add-params-to-url"})],IxGrid.prototype,"addParamsToURL",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"readParamsFromURL",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"refreshDataOnColumnVisibilityChange",void 0),__decorate([property({type:Number})],IxGrid.prototype,"filterValueChangeDebounceTime",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"hideColumnHeaders",void 0),__decorate([property({type:Array})],IxGrid.prototype,"preservedQueryParamKeys",void 0),__decorate([property({type:String})],IxGrid.prototype,"filterMaxDate",void 0),__decorate([property({type:String})],IxGrid.prototype,"hashedTableState",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"hideViewMoreLessButtonIcon",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"showAddButton",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"disableAddButton",void 0),__decorate([property({type:String})],IxGrid.prototype,"addButtonLabel",void 0),__decorate([property({type:Function})],IxGrid.prototype,"onAddButtonClick",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"showRemoveAllButton",void 0),__decorate([property({type:Boolean})],IxGrid.prototype,"disableRemoveAllButton",void 0),__decorate([property({type:String})],IxGrid.prototype,"removeAllButtonLabel",void 0),__decorate([property({type:Function})],IxGrid.prototype,"onRemoveAllButtonClick",void 0),__decorate([state()],IxGrid.prototype,"filters",void 0),__decorate([state()],IxGrid.prototype,"isColumnsReordering",void 0),__decorate([state()],IxGrid.prototype,"isExpanded",void 0),__decorate([state()],IxGrid.prototype,"displayColumns",void 0),window.customElements.define("ix-grid",IxGrid);
+    );
+  }
+
+  ix-select-option {
+    --md-menu-item-selected-container-color: rgba(20, 86, 224, 0.1);
+  }
+
+  @media only screen and (max-width: 600px) {
+    .pagination {
+      justify-content: space-between;
+    }
+    .pagination > div {
+      gap: 0;
+    }
+  }
+`;let A=class extends r{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.isSimple=!1}changePage(e){this.page+=e,this.updatePagination()}handlePageSizeSelection(e){const t=e.target,i=Number(t.value),o=(this.page-1)*this.pageSize+1,r=Math.ceil(o/i);this.updatePagination(r,i)}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){const e=this.page>1,t=this.recordCount>this.page*this.pageSize;return n` <div class="pagination ${this.isSimple?"simple":""}">
+      <div ?hidden=${this.isSimple}>
+        <p class="rows-per-page" data-testid="ix-pagination-rows-per-page">
+          ${D}:
+        </p>
+        <ix-select
+          wide-menu
+          menu-positioning="fixed"
+          class="pagination__select-input"
+          @request-selection=${this.handlePageSizeSelection}
+          selected-index=${this.pageSizes.indexOf(this.pageSize)}
+          filled
+        >
+          ${this.pageSizes.map(e=>n`
+              <ix-select-option
+                class="select-option"
+                value=${e}
+                ?selected=${e===this.pageSize}
+              >
+                <div slot="headline">${e}</div>
+              </ix-select-option>
+            `)}
+        </ix-select>
+      </div>
+      <div>
+        <p data-testid="ix-pagination-page-of-page">
+          ${this.recordCount>0?(this.page-1)*this.pageSize+1:0} -
+          ${this.page*this.pageSize>this.recordCount?n`${this.recordCount}`:n`${this.page*this.pageSize}`}
+          of ${this.recordCount>0?this.recordCount:0}
+        </p>
+        <div class="pagination-nav">
+          <ix-icon-button
+            ?disabled=${!e}
+            @click=${()=>e&&this.changePage(-1)}
+            icon="chevron_left"
+            data-testid="ix-pagination-prev"
+          >
+          </ix-icon-button>
+          <ix-icon-button
+            ?disabled=${!t}
+            @click=${()=>t&&this.changePage(1)}
+            icon="chevron_right"
+            data-testid="ix-pagination-next"
+          >
+          </ix-icon-button>
+        </div>
+      </div>
+    </div>`}};A.styles=[v,B],e([d({type:Number})],A.prototype,"recordCount",void 0),e([d({type:Number})],A.prototype,"page",void 0),e([d({type:Number})],A.prototype,"pageSize",void 0),e([d({type:Array})],A.prototype,"pageSizes",void 0),e([d({type:Boolean,attribute:"simple"})],A.prototype,"isSimple",void 0),A=e([c("ix-pagination")],A);class T extends r{constructor(){super(...arguments),this.defaultPageSize=10,this.defaultPage=1,this.originalSearchParams=void 0,this.columnReorderingAllowed=!1,this.variantClass="",this.hasSimplePagination=!1,this.theme="no-border",this.columns=[],this.rows=[],this.defaultEmptyText="No data to display",this.sortedColumn="",this.sortDirection="",this.hideHeader=!1,this.hideFilters=!1,this.rowLimit=0,this.page=this.defaultPage,this.pageSize=this.defaultPageSize,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.isDownloading=!1,this.isLoading=!1,this.downloadMenuItems=[],this.addParamsToURL=!0,this.readParamsFromURL=!1,this.refreshDataOnColumnVisibilityChange=!0,this.filterValueChangeDebounceTime=300,this.hideColumnHeaders=!1,this.preservedQueryParamKeys=[],this.filterMaxDate=m(new Date,"yyyy-MM-dd"),this.hashedTableState="",this.hideViewMoreLessButtonIcon=!0,this.showAddButton=!1,this.disableAddButton=!1,this.showViewMore=!1,this.addButtonLabel=E,this.showRemoveAllButton=!1,this.disableRemoveAllButton=!1,this.removeAllButtonLabel=P,this.sessionStorageKey=void 0,this.useNewDatePicker=!1,this.filters=[],this.isColumnsReordering=!1,this.isExpanded=!1,this.displayColumns=[],this.sessionStorageData=void 0,this.defaultFilterKeys=["sort","order","page","size"],this.initialised=!1,this.handlePopState=()=>{this.updateSearchParamsFromUri(!0),this.dispatchChangeEvent()},this.handleUnload=()=>{sessionStorage.removeItem("urlPageSizeRead")},this.dispatchChangeEvent=()=>{var e;const t=null!==(e=this.filters)&&void 0!==e?e:[],i=t.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i,filtersOperators:t.map(e=>({columnField:e.columnField,operator:e.operatorValue}))},bubbles:!0,composed:!0}))},this.renderColumnHeader=(e,t,i,o)=>{const r=h({header:!0,frozen:!!e.frozenToEnd,first:0===i,last:i===o-1,border:!(null==t?void 0:t.frozenToEnd)});return n`
+      <div
+        @click=${()=>e.sortable&&this.handleSort(e.name)}
+        @keyDown=${()=>e.sortable&&this.handleSort(e.name)}
+        class=${r}
+      >
+        <span class="header-label">${e.header}</span>
+        ${e.sortable?n`<ix-icon title="Sort" class="header-sort-icon"
+              >${"desc"===this.sortDirection&&this.sortedColumn===e.name?"arrow_upward":"arrow_downward"}</ix-icon
+            >`:a}
+      </div>
+    `},this.columnRenderer=(e,t,i,o)=>{s(a,t);const r=e.bodyRenderer(o.item,o,i);let l=r;const d=!!e.maxWidth,p="column-max-width-set";d&&(l=n`
+        <div class="${p}" style="max-width: ${e.maxWidth}">
+          ${r}
+        </div>
+      `),s(l,t),d&&requestAnimationFrame(()=>{var e;const i=t.querySelector(`.${p}`);if(i&&i.scrollWidth>i.clientWidth&&!i.querySelector(".custom-tooltip")&&(null===(e=i.textContent)||void 0===e?void 0:e.trim())){const e=document.createElement("div");e.className="custom-tooltip",e.style.cssText="\n              background-color: #092241;\n              font-size: 0.75rem;\n              color: white;\n              text-align: left;\n              padding: 0.313rem 0.5rem;\n              border-radius: 0.188rem;\n              max-height: 31.25rem;\n              overflow: hidden;\n              position: absolute;\n              z-index: 1000;\n              display: none;\n            ",e.textContent=i.textContent,i.addEventListener("mouseenter",()=>{e.style.display="flex";const t=i.getBoundingClientRect();e.style.left=`${t.left}px`,e.style.top=`${t.bottom+window.scrollY+4}px`,document.body.appendChild(e)}),i.addEventListener("mouseleave",()=>{e.remove()})}})},this.renderHeader=()=>n`
+    <div class="grid-header">
+      <slot name="header"><div class="empty"></div></slot>
+      ${this.hideFilters?a:n`<div class="grid-menu">
+            <slot name="filters"><div class="empty"></div></slot>
+            <ix-grid-column-filter
+              .columns=${this.arrangedColumns}
+              columnsLocalStorageKey=${u(this.columnsLocalStorageKey)}
+              @columnFilter=${e=>this.handleOnColumnFilter(e)}
+              @reorderColumns=${this.reorderColumnsFromFilter}
+              .columnReorderingAllowed=${this.columnReorderingAllowed}
+              .refreshDataOnColumnVisibilityChange=${this.refreshDataOnColumnVisibilityChange}
+              .requestGridUpdate=${()=>this.requestUpdate()}
+            ></ix-grid-column-filter>
+            ${this.showDownload?n`<ix-grid-download-menu
+                  .items=${this.downloadMenuItems}
+                  .isDownloading=${this.isDownloading}
+                ></ix-grid-download-menu>`:a}
+            <ix-grid-row-filter
+              .columns=${this.displayColumns}
+              .filterValueChangeDebounceTime=${this.filterValueChangeDebounceTime}
+              .readParamsFromURL=${this.readParamsFromURL}
+              .maxDate=${this.filterMaxDate}
+              .useNewDatePicker=${this.useNewDatePicker}
+              @rowFilter=${e=>{var t;this.filters=null!==(t=e.detail.filters)&&void 0!==t?t:[],e.detail.resetPage&&(this.page=this.defaultPage),this.updatePage()}}
+            ></ix-grid-row-filter>
+          </div>`}
+    </div>
+    <div class="touch-edge">
+      <slot name="under-header"></slot>
+    </div>
+  `,this.renderRowControls=()=>!1===this.showAddButton&&!1===this.showRemoveAllButton&&!1===this.showViewMoreLessButton?a:n` <div class="row-controls row-limit">
+      ${this.renderAddNewButton()} ${this.renderViewMoreLessButton()}
+      ${this.renderRemoveAllButton()}
+    </div>`,this.renderPaginationControls=()=>this.rowLimit>0?a:n`
+      <ix-pagination
+        ?simple=${this.hasSimplePagination}
+        class="pagination"
+        .page=${this.page}
+        .pageSize=${this.pageSize}
+        .pageSizes=${this.pageSizes}
+        .recordCount=${this.recordCount}
+        @updatePagination=${e=>{this.page=e.detail.page,this.pageSize=e.detail.pageSize,this.updateSessionStorage({pageSize:this.pageSize}),this.updatePage()}}
+      ></ix-pagination>
+    `}get isPersistable(){return!!this.localStorageID}get columnNames(){return this.columns.map(e=>e.name)}get columnsLocalStorageKey(){if(""===this.hashedTableState){const e=this.columns.map(({bodyRenderer:e,hidden:t,...i})=>i),t=JSON.stringify(e);let i=0;for(let e=0;e<t.length;e+=1)i=31*i+t.charCodeAt(e)>>>0;this.hashedTableState=i.toString(36)}return`ix-grid-${this.localStorageID}-${this.hashedTableState}-columns`}get arrangedColumns(){let e=[];return e=this.getColumnsToDisplayFromLocalStorage(),0===e.length&&(e=[...this.columns]),e.filter(e=>e).map(e=>({...e,width:e.width?e.width:void 0}))}connectedCallback(){var e;null===(e=super.connectedCallback)||void 0===e||e.call(this),window.addEventListener("popstate",this.handlePopState),window.addEventListener("beforeunload",this.handleUnload)}disconnectedCallback(){var e;window.removeEventListener("popstate",this.handlePopState),window.removeEventListener("beforeunload",this.handleUnload),null===(e=super.disconnectedCallback)||void 0===e||e.call(this)}updateSearchParamsFromUri(e=!1){if(0!==this.grid.getBoundingClientRect().width&&this.readParamsFromURL){const t=new URL(window.location.href),i=new URLSearchParams(t.search),[o,r,a,n]=this.defaultFilterKeys,s=i.get(o),l=i.get(r),d=i.get(a),p=i.get(n);s&&l&&(this.sortedColumn=s,this.sortDirection=l),d&&(this.page=parseInt(d,10)||this.defaultPage),p&&(!this.getSessionStorageData()||!sessionStorage.getItem("urlPageSizeRead")&&this.grid.getBoundingClientRect().width>0)&&(sessionStorage.setItem("urlPageSizeRead",(!0).toString()),this.pageSize=parseInt(p,10)||this.defaultPageSize,this.updateSessionStorage({pageSize:this.pageSize})),e&&this.rebuildFiltersFromUri(i)}}rebuildFiltersFromUri(e){const t=[];for(const[i,o]of e.entries()){const e=this.defaultFilterKeys.includes(i),[r,a]=i.split("_");!e&&r&&a&&t.push({columnField:r,operatorValue:a,value:o})}this.filters=t}update(e){if(!this.initialised&&this.columns.length>0&&(this.displayColumns=[...this.columns],this.checkLocalStorageUpdate(),this.initialised=!0),e.has("sessionStorageData")&&this.sessionStorageData){const e=this.sessionStorageData.pageSize||this.defaultPageSize;this.pageSize!==e&&(this.pageSize=e)}super.update(e)}firstUpdated(){this.updateSearchParamsFromUri(),this.removeOldLocalStorageValues(),this.sessionStorageData=this.getSessionStorageData()}getSessionStorageData(){if(this.sessionStorageKey){const e=sessionStorage.getItem(`grid-${this.sessionStorageKey}`);if(e)return JSON.parse(e)}}updateSessionStorage(e){const t=this.getSessionStorageData()||{};if(this.sessionStorageKey&&e){const i={...t,...e};sessionStorage.setItem(`grid-${this.sessionStorageKey}`,JSON.stringify(i)),this.sessionStorageData=i}}checkLocalStorageUpdate(){if(this.isPersistable){const e=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]");if(e.length>0){let t=!1;e.length!==this.columns.length&&(t=!0);this.columns.every(t=>e.some(e=>e.name===t.name))&&e.every(e=>this.columns.some(t=>t.name===e.name))||(t=!0),t&&this.setColumnsToLocalStorage(this.columns)}}}buildQueryFromFilters(){const e=new URLSearchParams;return this.filters.forEach(t=>{e.append(`${t.columnField}_${t.operatorValue}`,t.value)}),Object.fromEntries(e)}rebuildQueryFromMatchingQuerystringParams(){const e=new URLSearchParams;if(0===this.preservedQueryParamKeys.length)return{};const t=new URL(window.location.href);return new URLSearchParams(t.search).forEach((t,i)=>{this.preservedQueryParamKeys.includes(i)&&e.append(i,t)}),Object.fromEntries(e)}getColumnsToDisplayFromLocalStorage(){let e=[];if(this.isPersistable){const t=JSON.parse(localStorage.getItem(this.columnsLocalStorageKey)||"[]");t.length>0&&(e=this.mapColumnsWithPersistedSettings(t))}return e}mapColumnsWithPersistedSettings(e){const t=new Map(e.map(e=>[e.name,e])),i=this.columns.map(e=>{const i=t.get(e.name);return i?{...e,hidden:i.hidden,frozenToEnd:i.frozenToEnd,width:i.width||void 0}:{...e}});return i.sort((t,i)=>{const o=e.findIndex(e=>e.name===t.name),r=e.findIndex(e=>e.name===i.name);return-1===o&&-1===r?0:-1===o?1:-1===r?-1:o-r}),i}removeOldLocalStorageValues(){const e=this.findMatchingLocalStorageKeys(`ix-grid-${this.localStorageID}-`,"-columns",this.hashedTableState);for(let t=0;t<=e.length;t+=1)localStorage.removeItem(e[t])}findMatchingLocalStorageKeys(e,t,i){const o=[],r=e+i+t;for(let i=0;i<localStorage.length;i+=1){const a=localStorage.key(i);a&&a.startsWith(e)&&a.endsWith(t)&&a!==r&&o.push(a)}return o}async updatePage(e=!0){var t;if(this.dispatchChangeEvent(),this.addParamsToURL&&e){const e={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...this.buildQueryFromFilters(),...this.rebuildQueryFromMatchingQuerystringParams()},i=new URL(window.location.href),o=new URLSearchParams(e);this.originalSearchParams||this.saveOriginalSearchParams(o);const r=new URLSearchParams([...null!==(t=this.originalSearchParams)&&void 0!==t?t:[],...o]);i.search=r.toString(),window.history.pushState(null,"",i.toString())}}saveOriginalSearchParams(e){const t=new URL(window.location.href),i=new URLSearchParams(t.search);this.filters.forEach(e=>{i.delete(`${e.columnField}_${e.operatorValue}`)}),e.forEach((e,t)=>{i.delete(t)}),this.originalSearchParams=i}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}setColumnsToLocalStorage(e){this.isPersistable&&localStorage.setItem(this.columnsLocalStorageKey,JSON.stringify(e))}async reorderColumnsFromTable(){var e,t;const i=[...this.arrangedColumns],o=i.filter(e=>!0!==e.hidden),r=i.filter(e=>!0===e.hidden),a=i.filter(e=>!0===e.frozenToEnd),n=[...o.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...r.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...a],s=Array.from((null===(t=null===(e=this.grid)||void 0===e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelectorAll("th"))||[]);if(s.length){const e=s.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);let t=[];e.every((t,i)=>0===i||t>e[i-1])||(t=e.map(e=>n[e]),this.displayColumns=[...t.filter(e=>!0!==e.hidden&&!0!==(null==e?void 0:e.frozenToEnd)),...r.filter(e=>!0!==(null==e?void 0:e.frozenToEnd)),...a],this.isColumnsReordering=!0,await this.updateComplete,this.isColumnsReordering=!1,this.setColumnsToLocalStorage(this.displayColumns))}}async reorderColumnsFromFilter(e){this.displayColumns=[...e.detail.reorderedColumns],this.setColumnsToLocalStorage([...this.displayColumns]),this.isColumnsReordering=!0,await this.updateComplete,this.isColumnsReordering=!1}handleOnColumnFilter(e){e.detail.columns.forEach((e,t)=>{this.displayColumns[t]&&(this.displayColumns[t].hidden=null==e?void 0:e.hidden)}),this.displayColumns=[...this.displayColumns],this.updatePage(!1)}cellPartNameGenerator(e,t){let i="";return t.item.disabled&&(i+=" ix-disabled-cell"),i}renderAddNewButton(){return this.showAddButton?n`<ix-button
+      name="add-new-button"
+      appearance="text"
+      has-icon
+      ?disabled=${this.disableAddButton}
+      @click=${()=>this.onAddButtonClick()}
+    >
+      <ix-icon slot="icon">add</ix-icon>
+      <span>${this.addButtonLabel}</span>
+    </ix-button>`:a}renderViewMore(){return this.showViewMore?n` <div class="view-more">
+      <slot name="viewMore"></slot>
+    </div>`:a}get showViewMoreLessButton(){return!this.showViewMore&&this.rowLimit>0&&this.rows.length>this.rowLimit}renderViewMoreLessButton(){return this.showViewMoreLessButton?n`
+      <ix-button
+        appearance="text"
+        @click=${()=>{this.isExpanded=!this.isExpanded}}
+        has-icon
+      >
+        ${this.isExpanded?k:L}
+        ${this.hideViewMoreLessButtonIcon?a:n`<ix-icon slot="icon"
+              >${this.isExpanded?"remove":"add"}</ix-icon
+            >`}
+      </ix-button>
+    `:a}renderRemoveAllButton(){return this.showRemoveAllButton?n`<ix-button
+      class="remove-all-button"
+      name="remove-all-button"
+      appearance="text"
+      ?disabled=${this.disableRemoveAllButton}
+      @click=${()=>this.onRemoveAllButtonClick()}
+    >
+      <span>${this.removeAllButtonLabel}</span>
+    </ix-button>`:a}renderColumns(){const e=[...this.arrangedColumns];return e.length>0?n`${e.map((i,o)=>!0===i.hidden?a:n`<vaadin-grid-column
+            ${t(()=>this.renderColumnHeader(i,e[o+1],o,e.length),this.sortDirection)}
+            .renderer=${(e,t,o)=>this.columnRenderer(i,e,t,o)}
+            resizable
+            width=${u(i.width)}
+            min-width=${u(i.minWidth)}
+            .responsive=${i.responsive}
+            ?hidden=${i.hidden}
+            ?frozen-to-end=${i.frozenToEnd}
+            path=${i.name}
+            ?auto-width=${i.autoWidth}
+            flex-grow=${u(i.flexGrow)}
+          ></vaadin-grid-column>`)}`:n`<vaadin-grid-column></vaadin-grid-column>`}renderLoading(){return n` <div
+      class="progress-container"
+      style="display: ${this.isLoading?"":"none"}"
+    >
+      <ix-progress .indeterminate=${!0}></ix-progress>
+    </div>`}renderGrid(){if(this.isColumnsReordering)return a;const e=this.displayColumns.find(e=>!0!==e.hidden),t=this.rowLimit>0&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows;return n`<vaadin-grid
+      class=${this.hideColumnHeaders?"hide-column-headers":""}
+      .items=${e?t:[]}
+      all-rows-visible
+      theme=${this.theme}
+      .cellPartNameGenerator=${this.cellPartNameGenerator}
+      @mouseup=${this.reorderColumnsFromTable}
+    >
+      ${this.renderColumns()}
+      <div slot="empty-state"><slot name="no-rows"></slot></div>
+    </vaadin-grid>`}render(){return n`
+      <div
+        class=${`grid-container ${this.isColumnsReordering?"columns-reordering":""} ${this.variantClass}`}
+      >
+        ${this.hideHeader?a:this.renderHeader()}
+        ${this.renderLoading()} ${this.renderGrid()} ${this.renderRowControls()}
+        <div class="row-controls more-pagination">
+          ${this.renderViewMore()} ${this.renderPaginationControls()}
+        </div>
+        <slot name="footer"></slot>
+      </div>
+    `}}T.styles=[v],e([l("vaadin-grid")],T.prototype,"grid",void 0),e([d({type:Boolean,attribute:"column-reordering-allowed"})],T.prototype,"columnReorderingAllowed",void 0),e([d({type:String})],T.prototype,"variantClass",void 0),e([d({type:Boolean,attribute:"simple-pagination"})],T.prototype,"hasSimplePagination",void 0),e([d({type:String})],T.prototype,"theme",void 0),e([d({type:Array})],T.prototype,"columns",void 0),e([d({type:Array})],T.prototype,"rows",void 0),e([d({type:String})],T.prototype,"defaultEmptyText",void 0),e([d({type:String})],T.prototype,"sortedColumn",void 0),e([d({type:String})],T.prototype,"sortDirection",void 0),e([d({type:Boolean})],T.prototype,"hideHeader",void 0),e([d({type:Boolean,attribute:"hide-filters"})],T.prototype,"hideFilters",void 0),e([d({type:Number})],T.prototype,"rowLimit",void 0),e([d({type:Number})],T.prototype,"page",void 0),e([d({type:Number})],T.prototype,"pageSize",void 0),e([d({type:Array})],T.prototype,"pageSizes",void 0),e([d({type:Number})],T.prototype,"recordCount",void 0),e([d({type:String})],T.prototype,"localStorageID",void 0),e([d({type:Boolean})],T.prototype,"showDownload",void 0),e([d({type:Boolean})],T.prototype,"isDownloading",void 0),e([d({type:Boolean})],T.prototype,"isLoading",void 0),e([d({type:Array})],T.prototype,"downloadMenuItems",void 0),e([d({type:Boolean,attribute:"add-params-to-url"})],T.prototype,"addParamsToURL",void 0),e([d({type:Boolean})],T.prototype,"readParamsFromURL",void 0),e([d({type:Boolean})],T.prototype,"refreshDataOnColumnVisibilityChange",void 0),e([d({type:Number})],T.prototype,"filterValueChangeDebounceTime",void 0),e([d({type:Boolean})],T.prototype,"hideColumnHeaders",void 0),e([d({type:Array})],T.prototype,"preservedQueryParamKeys",void 0),e([d({type:String})],T.prototype,"filterMaxDate",void 0),e([d({type:String})],T.prototype,"hashedTableState",void 0),e([d({type:Boolean})],T.prototype,"hideViewMoreLessButtonIcon",void 0),e([d({type:Boolean})],T.prototype,"showAddButton",void 0),e([d({type:Boolean})],T.prototype,"disableAddButton",void 0),e([d({type:Boolean,attribute:"show-view-more"})],T.prototype,"showViewMore",void 0),e([d({type:String})],T.prototype,"addButtonLabel",void 0),e([d({type:Function})],T.prototype,"onAddButtonClick",void 0),e([d({type:Boolean})],T.prototype,"showRemoveAllButton",void 0),e([d({type:Boolean})],T.prototype,"disableRemoveAllButton",void 0),e([d({type:String})],T.prototype,"removeAllButtonLabel",void 0),e([d({type:Function})],T.prototype,"onRemoveAllButtonClick",void 0),e([d({type:String,attribute:"session-storage-key"})],T.prototype,"sessionStorageKey",void 0),e([d({type:Boolean})],T.prototype,"useNewDatePicker",void 0),e([p()],T.prototype,"filters",void 0),e([p()],T.prototype,"isColumnsReordering",void 0),e([p()],T.prototype,"isExpanded",void 0),e([p()],T.prototype,"displayColumns",void 0),e([p()],T.prototype,"sessionStorageData",void 0),window.customElements.define("ix-grid",T);