@digital-realty/ix-grid 1.0.34 → 1.0.36

package/demo/index.html

@@ -24,6 +24,7 @@
     import '@digital-realty/theme';
     import '@digital-realty/ix-button/ix-button.js';
     import '../dist/ix-grid.js';
+    import '../dist/components/ix-grid-nav.js';
     import { contacts } from './contacts.js';
     import { columns } from './columns.js';
 
@@ -88,8 +89,25 @@
             @download=${e => console.log(e)}
           >
             <div slot="header">
-              <ix-button>Sites</ix-button>
-              <ix-button>Locations</ix-button>
+              <ix-grid-nav
+              class="reports-grid-nav"
+              .buttons=${[
+                {
+                  path: '/reports/security',
+                  text: 'Security Reports',
+                  disabled: true,
+                },
+                {
+                  path: '/reports/dcim',
+                  text: 'DCIM Reports',
+                },
+                {
+                  path: '/reports/maintenance',
+                  text: 'Site Maintenance',
+                  selected: true,
+                },
+              ]}
+            ></ix-grid-nav>
             </div>
           </ix-grid>
         </div>

package/dist/IxGrid.js

@@ -206,16 +206,18 @@ export class IxGrid extends LitElement {
               theme="no-border"
               @mouseup=${this.reorderColumnsFromTable}
             >
-              ${(_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
-                ? html `<vaadin-grid-column
-                      ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
-                      ${columnBodyRenderer(column.bodyRenderer, [])}
-                      resizable
-                      width=${ifDefined(column.width)}
-                      ?hidden=${column.hidden}
-                      ?frozen-to-end=${column.frozenToEnd}
-                    ></vaadin-grid-column>`
-                : nothing)}
+              ${this._columns.some(col => !col.hidden)
+                ? (_a = this._columns) === null || _a === void 0 ? void 0 : _a.map((column) => column.name
+                    ? html `<vaadin-grid-column
+                          ${columnHeaderRenderer(() => this.renderColumnHeader(column), this.sortDirection)}
+                          ${columnBodyRenderer(column.bodyRenderer, [])}
+                          resizable
+                          width=${ifDefined(column.width)}
+                          ?hidden=${column.hidden}
+                          ?frozen-to-end=${column.frozenToEnd}
+                        ></vaadin-grid-column>`
+                    : nothing)
+                : html `<vaadin-grid-column></vaadin-grid-column>`}
             </vaadin-grid>`
             : nothing}
         ${this.rowLimit > 0

package/dist/IxGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n  [key: string]: string;\n}\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: (row: Row) => any;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  @query('vaadin-grid') grid!: HTMLElement;\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: Array }) rows: Row[] = [];\n\n  @property({ type: String }) defaultEmptyText = 'No data to display';\n\n  @property({ type: String }) sortedColumn = '';\n\n  @property({ type: String }) sortDirection = '';\n\n  @property({ type: Boolean }) hideHeader = false;\n\n  @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n  @property({ type: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @property({ type: Boolean }) showDownload = true;\n\n  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n    true;\n\n  @state() private filters: Filter[] = [];\n\n  @state() _columns: Column[] = [];\n\n  @state() isLoading = false;\n\n  @state() isExpanded = false;\n\n  get columnNames() {\n    return this._columns.map((column: Column) => column.name);\n  }\n\n  private async updatePage() {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\n    );\n\n    if (this.addParamsToURL) {\n      const urlParams: { [key: string]: string } = {\n        sort: this.sortedColumn,\n        order: this.sortDirection,\n        page: this.page.toString(),\n        size: this.pageSize.toString(),\n        ...filters,\n      };\n\n      const url = new URL(window.location.href);\n      const searchParams = new URLSearchParams(urlParams);\n      url.search = searchParams.toString();\n      window.history.replaceState(null, '', url.toString());\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          columnName: this.sortedColumn,\n          sortOrder: this.sortDirection,\n          page: this.page,\n          pageSize: this.pageSize,\n          filters,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  handleSort(column: string = '') {\n    if (this.sortedColumn !== column) {\n      this.sortDirection = 'asc';\n    } else {\n      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    }\n    this.sortedColumn = column;\n\n    this.updatePage();\n  }\n\n  private renderColumnHeader = (column: Column) => html`\n    <div\n      @click=${() => column.sortable && this.handleSort(column.name)}\n      @keyDown=${() => column.sortable && this.handleSort(column.name)}\n      class=\"header\"\n    >\n      ${column.header}\n      ${column.sortable\n        ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n            >${this.sortDirection === 'desc' &&\n            this.sortedColumn === column.name\n              ? `arrow_upward`\n              : `arrow_downward`}</ix-icon\n          >`\n        : nothing}\n    </div>\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._columns = this.columns;\n  }\n\n  async reorderColumnsFromTable() {\n    // calulate column order from table header flex order\n    const headerNodes = Array.from(\n      this.grid?.shadowRoot?.querySelectorAll('th') || []\n    );\n    if (headerNodes.length) {\n      const columnOrder = headerNodes\n        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n        .sort((a, b) => a.flexPosition - b.flexPosition)\n        .map(el => el.id);\n      headerNodes.forEach((el, id) => {\n        this._columns[id].width = el.style.width;\n      });\n      const columnsCorrectlyOrdered = columnOrder.every(\n        (x, i) => i === 0 || x > columnOrder[i - 1]\n      );\n      if (!columnsCorrectlyOrdered) {\n        const reorderedColumns = columnOrder.map(id => this._columns[id]);\n        this._columns = [...reorderedColumns];\n        this.isLoading = true;\n        await this.updateComplete;\n        this.isLoading = false;\n      }\n    }\n  }\n\n  async reorderColumnsFromFilter(e: CustomEvent) {\n    this._columns = [...e.detail.reorderedColumns];\n    this.isLoading = true;\n    await this.updateComplete;\n    this.isLoading = false;\n  }\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <slot name=\"header\"><div class=\"empty\"></div></slot>\n      ${this.hideFilters\n        ? nothing\n        : html`<div class=\"grid-menu\">\n            <ix-grid-column-filter\n              .columns=${this._columns}\n              localStorageID=${ifDefined(this.localStorageID)}\n              @columnFilter=${(e: CustomEvent) => {\n                e.detail.columns.forEach((column: Column, id: number) => {\n                  this._columns[id].hidden = column.hidden;\n                });\n                this.updatePage();\n              }}\n              @reorderColumns=${this.reorderColumnsFromFilter}\n            ></ix-grid-column-filter>\n            ${this.showDownload\n              ? html`<ix-grid-download-menu></ix-grid-download-menu>`\n              : nothing}\n            <ix-grid-row-filter\n              .columns=${this._columns}\n              @rowFilter=${(e: CustomEvent) => {\n                this.filters = e.detail.filters;\n                this.updatePage();\n              }}\n            ></ix-grid-row-filter>\n          </div>`}\n    </div>\n    <div class=\"touch-edge\">\n      <slot name=\"under-header\"></slot>\n    </div>\n  `;\n\n  private renderRowLimitControls = () => {\n    if (this.rows.length <= this.rowLimit) return nothing;\n\n    return html`\n      <div class=\"row-limit\">\n        <ix-button\n          appearance=\"text\"\n          @click=${() => {\n            this.isExpanded = !this.isExpanded;\n          }}\n          has-icon\n        >\n          ${this.isExpanded ? copy.viewLess : copy.viewMore}\n          <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n        </ix-button>\n      </div>\n    `;\n  };\n\n  private renderPaginationControls = () => html`\n    <ix-pagination\n      .page=${this.page}\n      .pageSize=${this.pageSize}\n      .pageSizes=${this.pageSizes}\n      .recordCount=${this.recordCount}\n      @updatePagination=${(e: CustomEvent) => {\n        this.page = e.detail.page;\n        this.pageSize = e.detail.pageSize;\n        this.updatePage();\n      }}\n    ></ix-pagination>\n  `;\n\n  render() {\n    return html`\n      <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        ${!this.isLoading\n          ? html`<vaadin-grid\n              .items=${this.rowLimit > 0 && !this.isExpanded\n                ? this.rows.slice(0, this.rowLimit)\n                : this.rows}\n              all-rows-visible\n              column-reordering-allowed\n              theme=\"no-border\"\n              @mouseup=${this.reorderColumnsFromTable}\n            >\n              ${this._columns?.map((column: Column) =>\n                column.name\n                  ? html`<vaadin-grid-column\n                      ${columnHeaderRenderer(\n                        () => this.renderColumnHeader(column),\n                        this.sortDirection\n                      )}\n                      ${columnBodyRenderer(column.bodyRenderer, [])}\n                      resizable\n                      width=${ifDefined(column.width)}\n                      ?hidden=${column.hidden}\n                      ?frozen-to-end=${column.frozenToEnd}\n                    ></vaadin-grid-column>`\n                  : nothing\n              )}\n            </vaadin-grid>`\n          : nothing}\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGrid.js","sourceRoot":"","sources":["../src/IxGrid.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,kDAAkD,CAAC;AAC1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,8BAA8B,CAAC;AACtC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAiBzC,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAK6B,YAAO,GAAa,EAAE,CAAC;QAEvB,SAAI,GAAU,EAAE,CAAC;QAEhB,qBAAgB,GAAG,oBAAoB,CAAC;QAExC,iBAAY,GAAG,EAAE,CAAC;QAElB,kBAAa,GAAG,EAAE,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAEQ,gBAAW,GAAG,KAAK,CAAC;QAEhD,aAAQ,GAAW,CAAC,CAAC;QAErB,SAAI,GAAG,CAAC,CAAC;QAET,aAAQ,GAAG,EAAE,CAAC;QAEf,cAAS,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAEtC,gBAAW,GAAG,CAAC,CAAC;QAEhB,mBAAc,GAAuB,SAAS,CAAC;QAE9C,iBAAY,GAAG,IAAI,CAAC;QAEY,mBAAc,GACzE,IAAI,CAAC;QAEU,YAAO,GAAa,EAAE,CAAC;QAE/B,aAAQ,GAAa,EAAE,CAAC;QAExB,cAAS,GAAG,KAAK,CAAC;QAElB,eAAU,GAAG,KAAK,CAAC;QAwDpB,uBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA;;eAExC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;iBACnD,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC;;;QAG9D,MAAM,CAAC,MAAM;QACb,MAAM,CAAC,QAAQ;YACf,CAAC,CAAC,IAAI,CAAA;eACC,IAAI,CAAC,aAAa,KAAK,MAAM;gBAChC,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI;gBAC/B,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,gBAAgB;YACpB;YACJ,CAAC,CAAC,OAAO;;GAEd,CAAC;QAwCM,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;QAG3B,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;yBAEW,IAAI,CAAC,QAAQ;+BACP,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;8BAC/B,CAAC,CAAc,EAAE,EAAE;gBACjC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAc,EAAE,EAAU,EAAE,EAAE;oBACtD,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;gBAC3C,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;gCACiB,IAAI,CAAC,wBAAwB;;cAE/C,IAAI,CAAC,YAAY;gBACjB,CAAC,CAAC,IAAI,CAAA,iDAAiD;gBACvD,CAAC,CAAC,OAAO;;yBAEE,IAAI,CAAC,QAAQ;2BACX,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;gBAChC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;;iBAEE;;;;;GAKd,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,OAAO,CAAC;YAEtD,OAAO,IAAI,CAAA;;;;mBAII,GAAG,EAAE;gBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACrC,CAAC;;;YAGC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;iCAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;;KAG9D,CAAC;QACJ,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEjC,IAAI,CAAC,IAAI;kBACL,IAAI,CAAC,QAAQ;mBACZ,IAAI,CAAC,SAAS;qBACZ,IAAI,CAAC,WAAW;0BACX,CAAC,CAAc,EAAE,EAAE;YACrC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC;YAClC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;;GAEJ,CAAC;IAyCJ,CAAC;IAxNC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5D,CAAC;IAEO,KAAK,CAAC,UAAU;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CACjC,CAAC,aAAwC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACrE,GAAG,aAAa;YAChB,CAAC,WAAW,CAAC,EAAE,KAAK;SACrB,CAAC,EACF,EAAE,CACH,CAAC;QAEF,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,MAAM,SAAS,GAA8B;gBAC3C,IAAI,EAAE,IAAI,CAAC,YAAY;gBACvB,KAAK,EAAE,IAAI,CAAC,aAAa;gBACzB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;gBAC9B,GAAG,OAAO;aACX,CAAC;YAEF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC1C,MAAM,YAAY,GAAG,IAAI,eAAe,CAAC,SAAS,CAAC,CAAC;YACpD,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;YACrC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;SACvD;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,YAAY;gBAC7B,SAAS,EAAE,IAAI,CAAC,aAAa;gBAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO;aACR;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,SAAiB,EAAE;QAC5B,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;YAChC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE;QACD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAE3B,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAoBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,KAAK,CAAC,uBAAuB;;QAC3B,qDAAqD;QACrD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAC5B,CAAA,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,0CAAE,gBAAgB,CAAC,IAAI,CAAC,KAAI,EAAE,CACpD,CAAC;QACF,IAAI,WAAW,CAAC,MAAM,EAAE;YACtB,MAAM,WAAW,GAAG,WAAW;iBAC5B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;iBAC/D,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC;iBAC/C,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACpB,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;gBAC7B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC;YAC3C,CAAC,CAAC,CAAC;YACH,MAAM,uBAAuB,GAAG,WAAW,CAAC,KAAK,CAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAC5C,CAAC;YACF,IAAI,CAAC,uBAAuB,EAAE;gBAC5B,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;gBAClE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,gBAAgB,CAAC,CAAC;gBACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,MAAM,IAAI,CAAC,cAAc,CAAC;gBAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB;SACF;IACH,CAAC;IAED,KAAK,CAAC,wBAAwB,CAAC,CAAc;QAC3C,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAqED,MAAM;;QACJ,OAAO,IAAI,CAAA;mBACI,kBAAkB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;UAC5D,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/C,CAAC,IAAI,CAAC,SAAS;YACf,CAAC,CAAC,IAAI,CAAA;uBACO,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;gBAC5C,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;gBACnC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;yBAIF,IAAI,CAAC,uBAAuB;;gBAErC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;gBACtC,CAAC,CAAC,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CACpC,MAAM,CAAC,IAAI;oBACT,CAAC,CAAC,IAAI,CAAA;4BACA,oBAAoB,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,EACrC,IAAI,CAAC,aAAa,CACnB;4BACC,kBAAkB,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,CAAC;;kCAErC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;oCACrB,MAAM,CAAC,MAAM;2CACN,MAAM,CAAC,WAAW;+CACd;oBACzB,CAAC,CAAC,OAAO,CACZ;gBACH,CAAC,CAAC,IAAI,CAAA,2CAA2C;2BACtC;YACjB,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,QAAQ,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAC,wBAAwB,EAAE;;KAEtC,CAAC;IACJ,CAAC;;AAlQe,aAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAEtB;IAArB,KAAK,CAAC,aAAa,CAAC;oCAAoB;AAEd;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCAAwB;AAEvB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oCAAkB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyC;AAExC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAoB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAoB;AAEQ;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CAAqB;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAe;AAEf;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCAAwC;AAEtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgD;AAE9C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAqB;AAEY;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;8CACrD;AAEE;IAAR,KAAK,EAAE;uCAAgC;AAE/B;IAAR,KAAK,EAAE;wCAAyB;AAExB;IAAR,KAAK,EAAE;yCAAmB;AAElB;IAAR,KAAK,EAAE;0CAAoB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@vaadin/grid';\nimport { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport './components/IxGridDownloadMenu.js';\nimport './components/IxPagination.js';\nimport './components/IxGridColumnFilter.js';\nimport './components/IxGridRowFilter.js';\nimport type { Filter } from './components/IxGridRowFilter.js';\nimport { IxGridViewStyles } from './grid-view-styles.js';\nimport { copy } from './ix-grid-copy.js';\n\nexport interface Row {\n  [key: string]: string;\n}\n\nexport interface Column {\n  name: string;\n  header: string;\n  bodyRenderer: (row: Row) => any;\n  width?: string;\n  sortable?: boolean;\n  filterable?: boolean;\n  hidden?: boolean;\n  frozenToEnd?: boolean;\n}\n\nexport class IxGrid extends LitElement {\n  static readonly styles = [IxGridViewStyles];\n\n  @query('vaadin-grid') grid!: HTMLElement;\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @property({ type: Array }) rows: Row[] = [];\n\n  @property({ type: String }) defaultEmptyText = 'No data to display';\n\n  @property({ type: String }) sortedColumn = '';\n\n  @property({ type: String }) sortDirection = '';\n\n  @property({ type: Boolean }) hideHeader = false;\n\n  @property({ type: Boolean, attribute: 'hide-filters' }) hideFilters = false;\n\n  @property({ type: Number }) rowLimit: number = 0;\n\n  @property({ type: Number }) page = 1;\n\n  @property({ type: Number }) pageSize = 10;\n\n  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];\n\n  @property({ type: Number }) recordCount = 0;\n\n  @property({ type: String }) localStorageID: string | undefined = undefined;\n\n  @property({ type: Boolean }) showDownload = true;\n\n  @property({ type: Boolean, attribute: 'add-params-to-url' }) addParamsToURL =\n    true;\n\n  @state() private filters: Filter[] = [];\n\n  @state() _columns: Column[] = [];\n\n  @state() isLoading = false;\n\n  @state() isExpanded = false;\n\n  get columnNames() {\n    return this._columns.map((column: Column) => column.name);\n  }\n\n  private async updatePage() {\n    const filters = this.filters.reduce(\n      (columnFilters: { [key: string]: string }, { columnField, value }) => ({\n        ...columnFilters,\n        [columnField]: value,\n      }),\n      {}\n    );\n\n    if (this.addParamsToURL) {\n      const urlParams: { [key: string]: string } = {\n        sort: this.sortedColumn,\n        order: this.sortDirection,\n        page: this.page.toString(),\n        size: this.pageSize.toString(),\n        ...filters,\n      };\n\n      const url = new URL(window.location.href);\n      const searchParams = new URLSearchParams(urlParams);\n      url.search = searchParams.toString();\n      window.history.replaceState(null, '', url.toString());\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          columnName: this.sortedColumn,\n          sortOrder: this.sortDirection,\n          page: this.page,\n          pageSize: this.pageSize,\n          filters,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  handleSort(column: string = '') {\n    if (this.sortedColumn !== column) {\n      this.sortDirection = 'asc';\n    } else {\n      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    }\n    this.sortedColumn = column;\n\n    this.updatePage();\n  }\n\n  private renderColumnHeader = (column: Column) => html`\n    <div\n      @click=${() => column.sortable && this.handleSort(column.name)}\n      @keyDown=${() => column.sortable && this.handleSort(column.name)}\n      class=\"header\"\n    >\n      ${column.header}\n      ${column.sortable\n        ? html`<ix-icon title=\"Sort\" class=\"header-sort-icon\"\n            >${this.sortDirection === 'desc' &&\n            this.sortedColumn === column.name\n              ? `arrow_upward`\n              : `arrow_downward`}</ix-icon\n          >`\n        : nothing}\n    </div>\n  `;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._columns = this.columns;\n  }\n\n  async reorderColumnsFromTable() {\n    // calulate column order from table header flex order\n    const headerNodes = Array.from(\n      this.grid?.shadowRoot?.querySelectorAll('th') || []\n    );\n    if (headerNodes.length) {\n      const columnOrder = headerNodes\n        .map((el, id) => ({ id, flexPosition: Number(el.style.order) }))\n        .sort((a, b) => a.flexPosition - b.flexPosition)\n        .map(el => el.id);\n      headerNodes.forEach((el, id) => {\n        this._columns[id].width = el.style.width;\n      });\n      const columnsCorrectlyOrdered = columnOrder.every(\n        (x, i) => i === 0 || x > columnOrder[i - 1]\n      );\n      if (!columnsCorrectlyOrdered) {\n        const reorderedColumns = columnOrder.map(id => this._columns[id]);\n        this._columns = [...reorderedColumns];\n        this.isLoading = true;\n        await this.updateComplete;\n        this.isLoading = false;\n      }\n    }\n  }\n\n  async reorderColumnsFromFilter(e: CustomEvent) {\n    this._columns = [...e.detail.reorderedColumns];\n    this.isLoading = true;\n    await this.updateComplete;\n    this.isLoading = false;\n  }\n\n  private renderHeader = () => html`\n    <div class=\"grid-header\">\n      <slot name=\"header\"><div class=\"empty\"></div></slot>\n      ${this.hideFilters\n        ? nothing\n        : html`<div class=\"grid-menu\">\n            <ix-grid-column-filter\n              .columns=${this._columns}\n              localStorageID=${ifDefined(this.localStorageID)}\n              @columnFilter=${(e: CustomEvent) => {\n                e.detail.columns.forEach((column: Column, id: number) => {\n                  this._columns[id].hidden = column.hidden;\n                });\n                this.updatePage();\n              }}\n              @reorderColumns=${this.reorderColumnsFromFilter}\n            ></ix-grid-column-filter>\n            ${this.showDownload\n              ? html`<ix-grid-download-menu></ix-grid-download-menu>`\n              : nothing}\n            <ix-grid-row-filter\n              .columns=${this._columns}\n              @rowFilter=${(e: CustomEvent) => {\n                this.filters = e.detail.filters;\n                this.updatePage();\n              }}\n            ></ix-grid-row-filter>\n          </div>`}\n    </div>\n    <div class=\"touch-edge\">\n      <slot name=\"under-header\"></slot>\n    </div>\n  `;\n\n  private renderRowLimitControls = () => {\n    if (this.rows.length <= this.rowLimit) return nothing;\n\n    return html`\n      <div class=\"row-limit\">\n        <ix-button\n          appearance=\"text\"\n          @click=${() => {\n            this.isExpanded = !this.isExpanded;\n          }}\n          has-icon\n        >\n          ${this.isExpanded ? copy.viewLess : copy.viewMore}\n          <ix-icon slot=\"icon\">${this.isExpanded ? 'remove' : 'add'}</ix-icon>\n        </ix-button>\n      </div>\n    `;\n  };\n\n  private renderPaginationControls = () => html`\n    <ix-pagination\n      .page=${this.page}\n      .pageSize=${this.pageSize}\n      .pageSizes=${this.pageSizes}\n      .recordCount=${this.recordCount}\n      @updatePagination=${(e: CustomEvent) => {\n        this.page = e.detail.page;\n        this.pageSize = e.detail.pageSize;\n        this.updatePage();\n      }}\n    ></ix-pagination>\n  `;\n\n  render() {\n    return html`\n      <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>\n        ${this.hideHeader ? nothing : this.renderHeader()}\n        ${!this.isLoading\n          ? html`<vaadin-grid\n              .items=${this.rowLimit > 0 && !this.isExpanded\n                ? this.rows.slice(0, this.rowLimit)\n                : this.rows}\n              all-rows-visible\n              column-reordering-allowed\n              theme=\"no-border\"\n              @mouseup=${this.reorderColumnsFromTable}\n            >\n              ${this._columns.some(col => !col.hidden)\n                ? this._columns?.map((column: Column) =>\n                    column.name\n                      ? html`<vaadin-grid-column\n                          ${columnHeaderRenderer(\n                            () => this.renderColumnHeader(column),\n                            this.sortDirection\n                          )}\n                          ${columnBodyRenderer(column.bodyRenderer, [])}\n                          resizable\n                          width=${ifDefined(column.width)}\n                          ?hidden=${column.hidden}\n                          ?frozen-to-end=${column.frozenToEnd}\n                        ></vaadin-grid-column>`\n                      : nothing\n                  )\n                : html`<vaadin-grid-column></vaadin-grid-column>`}\n            </vaadin-grid>`\n          : nothing}\n        ${this.rowLimit > 0\n          ? this.renderRowLimitControls()\n          : this.renderPaginationControls()}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/components/IxGridNav.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
 import '@digital-realty/ix-button';
 export interface IGridNavButton {
     path?: string;
+    selected?: boolean;
     disabled?: boolean;
     onClick?: () => void;
     text: string;
@@ -9,6 +10,6 @@ export interface IGridNavButton {
 export declare class IxGridNavigation extends LitElement {
     buttons: IGridNavButton[];
     static styles: import("lit").CSSResult;
-    renderButton: ({ path, text, onClick, disabled }: IGridNavButton) => import("lit").TemplateResult<1>;
+    renderButton: ({ path, text, onClick, disabled, selected, }: IGridNavButton) => import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/IxGridNav.js

@@ -8,10 +8,11 @@ export class IxGridNavigation extends LitElement {
         super(...arguments);
         this.buttons = [];
         // eslint-disable-next-line class-methods-use-this
-        this.renderButton = ({ path, text, onClick, disabled }) => html `
+        this.renderButton = ({ path, text, onClick, disabled, selected, }) => html `
       <ix-button
         ?disabled=${disabled}
-        href=${ifDefined(path)}
+        appearance=${selected ? 'filled' : 'text'}
+        href=${ifDefined(selected ? undefined : path)}
         @click=${onClick}
         class="button"
         ><div class="button-text">${text}</div></ix-button

package/dist/components/IxGridNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/components/IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;AASnC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAC+C,YAAO,GAAqB,EAAE,CAAC;QA+C5E,kDAAkD;QAClD,iBAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAkB,EAAE,EAAE,CACnE,IAAI,CAAA;;oBAEY,QAAQ;eACb,SAAS,CAAC,IAAI,CAAC;iBACb,OAAO;;oCAEY,IAAI;;KAEnC,CAAC;IASN,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;;KAE1D,CAAC;IACJ,CAAC;;AA/DM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,CAAC;AA7C2C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@digital-realty/ix-button';\n\nexport interface IGridNavButton {\n  path?: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  text: string;\n}\n\nexport class IxGridNavigation extends LitElement {\n  @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];\n\n  static styles = css`\n    :host {\n      --md-filled-button-container-color: var(\n        --grid-nav-button-container-color,\n        var(--ix-text-dark, #000)\n      );\n      --md-filled-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-filled-button-leading-space: var(\n        --grid-nav-button-leading-space,\n        20px\n      );\n      --md-filled-button-trailing-space: var(\n        --grid-nav-button-trailing-space,\n        20px\n      );\n    }\n\n    [disabled] {\n      --md-filled-button-disabled-container-color: var(\n        --grid-nav-button-disabled-container-color,\n        transparent\n      );\n      --md-filled-button-disabled-label-text-color: var(\n        --grid-nav-button-disabled-container-color,\n        var(--ix-text-dark, #000)\n      );\n    }\n\n    .container {\n      display: var(--grid-nav-button-group-display, flex);\n      gap: var(--grid-nav-button-group-gap, 0.5rem);\n    }\n\n    .button {\n      margin: var(--grid-nav-button-margin, 0);\n    }\n\n    .button-text {\n      text-transform: var(--grid-nav-button-text-transform, none);\n    }\n  `;\n\n  // eslint-disable-next-line class-methods-use-this\n  renderButton = ({ path, text, onClick, disabled }: IGridNavButton) =>\n    html`\n      <ix-button\n        ?disabled=${disabled}\n        href=${ifDefined(path)}\n        @click=${onClick}\n        class=\"button\"\n        ><div class=\"button-text\">${text}</div></ix-button\n      >\n    `;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.buttons.map(button => this.renderButton(button))}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"IxGridNav.js","sourceRoot":"","sources":["../../src/components/IxGridNav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,2BAA2B,CAAC;AAUnC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAC+C,YAAO,GAAqB,EAAE,CAAC;QA+C5E,kDAAkD;QAClD,iBAAY,GAAG,CAAC,EACd,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,GACO,EAAE,EAAE,CACnB,IAAI,CAAA;;oBAEY,QAAQ;qBACP,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;iBACpC,OAAO;;oCAEY,IAAI;;KAEnC,CAAC;IASN,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;;KAE1D,CAAC;IACJ,CAAC;;AAtEM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2ClB,CAAC;AA7C2C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAgC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@digital-realty/ix-button';\n\nexport interface IGridNavButton {\n  path?: string;\n  selected?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  text: string;\n}\n\nexport class IxGridNavigation extends LitElement {\n  @property({ type: Array, attribute: false }) buttons: IGridNavButton[] = [];\n\n  static styles = css`\n    :host {\n      --md-filled-button-container-color: var(\n        --grid-nav-button-container-color,\n        var(--ix-text-dark, #000)\n      );\n      --md-filled-button-container-height: var(\n        --grid-nav-button-container-height,\n        2.5rem\n      );\n      --md-filled-button-leading-space: var(\n        --grid-nav-button-leading-space,\n        20px\n      );\n      --md-filled-button-trailing-space: var(\n        --grid-nav-button-trailing-space,\n        20px\n      );\n    }\n\n    [disabled] {\n      --md-filled-button-disabled-container-color: var(\n        --grid-nav-button-disabled-container-color,\n        transparent\n      );\n      --md-filled-button-disabled-label-text-color: var(\n        --grid-nav-button-disabled-container-color,\n        var(--ix-text-dark, #000)\n      );\n    }\n\n    .container {\n      display: var(--grid-nav-button-group-display, flex);\n      gap: var(--grid-nav-button-group-gap, 0.5rem);\n    }\n\n    .button {\n      margin: var(--grid-nav-button-margin, 0);\n    }\n\n    .button-text {\n      text-transform: var(--grid-nav-button-text-transform, none);\n    }\n  `;\n\n  // eslint-disable-next-line class-methods-use-this\n  renderButton = ({\n    path,\n    text,\n    onClick,\n    disabled,\n    selected,\n  }: IGridNavButton) =>\n    html`\n      <ix-button\n        ?disabled=${disabled}\n        appearance=${selected ? 'filled' : 'text'}\n        href=${ifDefined(selected ? undefined : path)}\n        @click=${onClick}\n        class=\"button\"\n        ><div class=\"button-text\">${text}</div></ix-button\n      >\n    `;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.buttons.map(button => this.renderButton(button))}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/ix-grid.min.js

@@ -2,4 +2,4 @@ import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";impor
       --md-filled-select-text-field-focus-trailing-icon-color
     )}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`,copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"};let 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()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){const e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p>${copy.rowsPerPage}:</p><ix-select wide-menu class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></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);const IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center;background-color:#f9f9f9}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{flex:2}.dropdown-content label ix-icon.draggable{font-size:24px;color:var(--md-sys-color-primary,#1456e0);cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;opacity:0}.dropdown-content label:hover ix-icon.draggable{opacity:1}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:2px 4px;--md-switch-track-height:12px;--md-switch-track-width:35px;--md-sys-color-primary:rgba(20, 86, 224, 0.68);--md-sys-color-on-primary:#1456e0;--md-sys-color-primary-container:#1456e0;--md-switch-handle-height:19px;--md-switch-handle-width:18px;--md-sys-color-surface-container-highest:#9e9e9e;--md-sys-color-outline:#9e9e9e;--md-switch-pressed-handle-height:19px;--md-switch-pressed-handle-width:18px;--md-switch-handle-color:#fff;--md-sys-color-on-surface-variant:white;--selected-handle-height:19px;--selected-handle-width:18px;--_pressed-handle-height:19px;--_pressed-handle-width:18px;--md-switch-selected-handle-height:19px;--md-switch-selected-handle-width:18px;margin:11px 8px 1px 0}.list{position:relative}`,triggerKeys=[" ","Enter"];let IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.localStorageID=void 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)}initializeLocalStorage(){if(this.localStorageID){var e=localStorage.getItem(this.localStorageID);if(e){const i=JSON.parse(e);this.columns.forEach((e,t)=>{i.includes(e.name)&&(this.columns[t].hidden=!0)})}this.dispatchUpdate()}}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),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.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){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.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){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default" icon="list"></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,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><ix-icon class="draggable">drag_handle</ix-icon></label></div>`)}</div>`:nothing}</span></div>`}};IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"localStorageID",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);const IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.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}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;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;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;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:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;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:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;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:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.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:99;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;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;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`;let IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var e,t,i=[];for([e,t]of new URLSearchParams(window.location.search))this.filterColumns.includes(e)&&i.push({columnField:e,operatorValue:"contains",value:t});return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){var e=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";this.filters=[...this.filters,{columnField:e,operatorValue:"contains",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())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target["value"],t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}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}renderFilterInput(t,i){const o=[t.columnField,...this.unselectedFilters];var e=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" @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: ${e.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}">${e.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: ${e.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
-                `)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(e,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><option select="select">contains</option></select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></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"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></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 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>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",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),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),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=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.addParamsToURL=!0,this.filters=[],this._columns=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=e=>html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="header">${e.header} ${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.renderHeader=()=>html`<div class="grid-header"><slot name="header"><div class="empty"></div></slot>${this.hideFilters?nothing:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this._columns}" localStorageID="${ifDefined(this.localStorageID)}" @columnFilter="${e=>{e.detail.columns.forEach((e,t)=>{this._columns[t].hidden=e.hidden}),this.updatePage()}}" @reorderColumns="${this.reorderColumnsFromFilter}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this._columns}" @rowFilter="${e=>{this.filters=e.detail.filters,this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<ix-icon slot="icon">${this.isExpanded?"remove":"add"}</ix-icon></ix-button></div>`,this.renderPaginationControls=()=>html`<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>`}get columnNames(){return this._columns.map(e=>e.name)}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}connectedCallback(){super.connectedCallback(),this._columns=this.columns}async reorderColumnsFromTable(){var e=Array.from((null==(e=null==(e=this.grid)?void 0:e.shadowRoot)?void 0:e.querySelectorAll("th"))||[]);if(e.length){const i=e.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);e.forEach((e,t)=>{this._columns[t].width=e.style.width}),i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>this._columns[e]),this._columns=[...e],this.isLoading=!0,await this.updateComplete,this.isLoading=!1)}}async reorderColumnsFromFilter(e){this._columns=[...e.detail.reorderedColumns],this.isLoading=!0,await this.updateComplete,this.isLoading=!1}render(){var e;return html`<div class="${"grid-container "+(this.isLoading?"loading":"")}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows}" all-rows-visible column-reordering-allowed theme="no-border" @mouseup="${this.reorderColumnsFromTable}">${null==(e=this._columns)?void 0:e.map(e=>e.name?html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}"></vaadin-grid-column>`:nothing)}</vaadin-grid>`} ${0<this.rowLimit?this.renderRowLimitControls():this.renderPaginationControls()}</div>`}}IxGrid.styles=[IxGridViewStyles],__decorate([query("vaadin-grid")],IxGrid.prototype,"grid",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,attribute:"add-params-to-url"})],IxGrid.prototype,"addParamsToURL",void 0),__decorate([state()],IxGrid.prototype,"filters",void 0),__decorate([state()],IxGrid.prototype,"_columns",void 0),__decorate([state()],IxGrid.prototype,"isLoading",void 0),__decorate([state()],IxGrid.prototype,"isExpanded",void 0),window.customElements.define("ix-grid",IxGrid);
+                `)}"><span>Columns</span> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${repeat(e,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><option select="select">contains</option></select></label></div></div><div class="filter-form-column filter-form-column-border filterValueField"><div class="filter-form-group"><label class="form-group-value-label"><span>Value</span> <input placeholder="Filter value" @input="${e=>this.onfilterValueChange(i,e)}" .value="${t.value}"></label></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"><button class="add-filter-button" @click="${()=>this.addFilter()}" ?disabled="${e}"><ix-icon-button icon="add"></ix-icon-button><span class="add">ADD FILTER</span></button> <button class="clear" @click="${()=>this.clearFilters()}" ?disabled="${0===this.activeFilters.length}"><span class="add">CLEAR ALL</span></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 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>`}};IxGridRowFilter.styles=[IxGridViewStyles,IxGridRowFilterStyles],__decorate([property({type:Array})],IxGridRowFilter.prototype,"columns",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),IxGridRowFilter=__decorate([customElement("ix-grid-row-filter")],IxGridRowFilter);class IxGrid extends LitElement{constructor(){super(...arguments),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=1,this.pageSize=10,this.pageSizes=[5,10,25,100],this.recordCount=0,this.localStorageID=void 0,this.showDownload=!0,this.addParamsToURL=!0,this.filters=[],this._columns=[],this.isLoading=!1,this.isExpanded=!1,this.renderColumnHeader=e=>html`<div @click="${()=>e.sortable&&this.handleSort(e.name)}" @keyDown="${()=>e.sortable&&this.handleSort(e.name)}" class="header">${e.header} ${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.renderHeader=()=>html`<div class="grid-header"><slot name="header"><div class="empty"></div></slot>${this.hideFilters?nothing:html`<div class="grid-menu"><ix-grid-column-filter .columns="${this._columns}" localStorageID="${ifDefined(this.localStorageID)}" @columnFilter="${e=>{e.detail.columns.forEach((e,t)=>{this._columns[t].hidden=e.hidden}),this.updatePage()}}" @reorderColumns="${this.reorderColumnsFromFilter}"></ix-grid-column-filter>${this.showDownload?html`<ix-grid-download-menu></ix-grid-download-menu>`:nothing}<ix-grid-row-filter .columns="${this._columns}" @rowFilter="${e=>{this.filters=e.detail.filters,this.updatePage()}}"></ix-grid-row-filter></div>`}</div><div class="touch-edge"><slot name="under-header"></slot></div>`,this.renderRowLimitControls=()=>this.rows.length<=this.rowLimit?nothing:html`<div class="row-limit"><ix-button appearance="text" @click="${()=>{this.isExpanded=!this.isExpanded}}" has-icon>${this.isExpanded?copy.viewLess:copy.viewMore}<ix-icon slot="icon">${this.isExpanded?"remove":"add"}</ix-icon></ix-button></div>`,this.renderPaginationControls=()=>html`<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>`}get columnNames(){return this._columns.map(e=>e.name)}async updatePage(){var e,t,i=this.filters.reduce((e,{columnField:t,value:i})=>({...e,[t]:i}),{});this.addParamsToURL&&(t={sort:this.sortedColumn,order:this.sortDirection,page:this.page.toString(),size:this.pageSize.toString(),...i},e=new URL(window.location.href),t=new URLSearchParams(t),e.search=t.toString(),window.history.replaceState(null,"",e.toString())),this.dispatchEvent(new CustomEvent("change",{detail:{columnName:this.sortedColumn,sortOrder:this.sortDirection,page:this.page,pageSize:this.pageSize,filters:i},bubbles:!0,composed:!0}))}handleSort(e=""){this.sortedColumn!==e?this.sortDirection="asc":this.sortDirection="asc"===this.sortDirection?"desc":"asc",this.sortedColumn=e,this.updatePage()}connectedCallback(){super.connectedCallback(),this._columns=this.columns}async reorderColumnsFromTable(){var e=Array.from((null==(e=null==(e=this.grid)?void 0:e.shadowRoot)?void 0:e.querySelectorAll("th"))||[]);if(e.length){const i=e.map((e,t)=>({id:t,flexPosition:Number(e.style.order)})).sort((e,t)=>e.flexPosition-t.flexPosition).map(e=>e.id);e.forEach((e,t)=>{this._columns[t].width=e.style.width}),i.every((e,t)=>0===t||e>i[t-1])||(e=i.map(e=>this._columns[e]),this._columns=[...e],this.isLoading=!0,await this.updateComplete,this.isLoading=!1)}}async reorderColumnsFromFilter(e){this._columns=[...e.detail.reorderedColumns],this.isLoading=!0,await this.updateComplete,this.isLoading=!1}render(){var e;return html`<div class="${"grid-container "+(this.isLoading?"loading":"")}">${this.hideHeader?nothing:this.renderHeader()} ${this.isLoading?nothing:html`<vaadin-grid .items="${0<this.rowLimit&&!this.isExpanded?this.rows.slice(0,this.rowLimit):this.rows}" all-rows-visible column-reordering-allowed theme="no-border" @mouseup="${this.reorderColumnsFromTable}">${this._columns.some(e=>!e.hidden)?null==(e=this._columns)?void 0:e.map(e=>e.name?html`<vaadin-grid-column ${columnHeaderRenderer(()=>this.renderColumnHeader(e),this.sortDirection)} ${columnBodyRenderer(e.bodyRenderer,[])} resizable width="${ifDefined(e.width)}" ?hidden="${e.hidden}" ?frozen-to-end="${e.frozenToEnd}"></vaadin-grid-column>`:nothing):html`<vaadin-grid-column></vaadin-grid-column>`}</vaadin-grid>`} ${0<this.rowLimit?this.renderRowLimitControls():this.renderPaginationControls()}</div>`}}IxGrid.styles=[IxGridViewStyles],__decorate([query("vaadin-grid")],IxGrid.prototype,"grid",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,attribute:"add-params-to-url"})],IxGrid.prototype,"addParamsToURL",void 0),__decorate([state()],IxGrid.prototype,"filters",void 0),__decorate([state()],IxGrid.prototype,"_columns",void 0),__decorate([state()],IxGrid.prototype,"isLoading",void 0),__decorate([state()],IxGrid.prototype,"isExpanded",void 0),window.customElements.define("ix-grid",IxGrid);

package/dist/test/ix-grid.test.js

@@ -16,14 +16,17 @@ const columns = [
     {
         name: 'one',
         header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
     },
     {
         name: 'two',
         header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
     },
     {
         name: 'three',
         header: 'one',
+        bodyRenderer: row => html ` <span>${row.name}</span>`,
     },
 ];
 describe('IxGrid', () => {
@@ -33,8 +36,8 @@ describe('IxGrid', () => {
     });
     it('renders the correct number of rows', async () => {
         const el = await fixture(html `<ix-grid
-      columns=${columns}
-      rows=${rows}
+      .columns=${columns}
+      .rows=${rows}
     ></ix-grid>`);
         expect(rows.length).to.equal(3);
         expect(el).to.not.be.null;

package/dist/test/ix-grid.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;KACd;CACF,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA,qBAAqB,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;gBACzB,OAAO;aACV,IAAI;gBACD,CAAC,CAAC;QAEd,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEhC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxGrid } from '../IxGrid.js';\nimport '../ix-grid.js';\n\nconst rows = [\n  {\n    name: 'one',\n  },\n  {\n    name: 'two',\n  },\n  {\n    name: 'three',\n  },\n];\n\nconst columns = [\n  {\n    name: 'one',\n    header: 'one',\n  },\n  {\n    name: 'two',\n    header: 'one',\n  },\n  {\n    name: 'three',\n    header: 'one',\n  },\n];\n\ndescribe('IxGrid', () => {\n  it('renders a grid', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders the correct number of rows', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid\n      columns=${columns}\n      rows=${rows}\n    ></ix-grid>`);\n\n    expect(rows.length).to.equal(3);\n\n    expect(el).to.not.be.null;\n  });\n});\n"]}
+{"version":3,"file":"ix-grid.test.js","sourceRoot":"","sources":["../../src/test/ix-grid.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,eAAe,CAAC;AAEvB,MAAM,IAAI,GAAG;IACX;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,KAAK;KACZ;IACD;QACE,IAAI,EAAE,OAAO;KACd;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA,UAAU,GAAG,CAAC,IAAI,SAAS;KACrD;CACF,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA,qBAAqB,CAAC,CAAC;QAE5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAS,IAAI,CAAA;iBACxB,OAAO;cACV,IAAI;gBACF,CAAC,CAAC;QAEd,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEhC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport { IxGrid } from '../IxGrid.js';\nimport '../ix-grid.js';\n\nconst rows = [\n  {\n    name: 'one',\n  },\n  {\n    name: 'two',\n  },\n  {\n    name: 'three',\n  },\n];\n\nconst columns = [\n  {\n    name: 'one',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n  {\n    name: 'two',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n  {\n    name: 'three',\n    header: 'one',\n    bodyRenderer: row => html` <span>${row.name}</span>`,\n  },\n];\n\ndescribe('IxGrid', () => {\n  it('renders a grid', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders the correct number of rows', async () => {\n    const el = await fixture<IxGrid>(html`<ix-grid\n      .columns=${columns}\n      .rows=${rows}\n    ></ix-grid>`);\n\n    expect(rows.length).to.equal(3);\n\n    expect(el).to.not.be.null;\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-grid following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "2d33661ed6512052760cbbdcd5ebbaa43cb01576"
+  "gitHead": "0b93fae7b231a1215f8c27e2b73ec82f55edfacc"
 }

package/src/IxGrid.ts

@@ -263,21 +263,23 @@ export class IxGrid extends LitElement {
               theme="no-border"
               @mouseup=${this.reorderColumnsFromTable}
             >
-              ${this._columns?.map((column: Column) =>
-                column.name
-                  ? html`<vaadin-grid-column
-                      ${columnHeaderRenderer(
-                        () => this.renderColumnHeader(column),
-                        this.sortDirection
-                      )}
-                      ${columnBodyRenderer(column.bodyRenderer, [])}
-                      resizable
-                      width=${ifDefined(column.width)}
-                      ?hidden=${column.hidden}
-                      ?frozen-to-end=${column.frozenToEnd}
-                    ></vaadin-grid-column>`
-                  : nothing
-              )}
+              ${this._columns.some(col => !col.hidden)
+                ? this._columns?.map((column: Column) =>
+                    column.name
+                      ? html`<vaadin-grid-column
+                          ${columnHeaderRenderer(
+                            () => this.renderColumnHeader(column),
+                            this.sortDirection
+                          )}
+                          ${columnBodyRenderer(column.bodyRenderer, [])}
+                          resizable
+                          width=${ifDefined(column.width)}
+                          ?hidden=${column.hidden}
+                          ?frozen-to-end=${column.frozenToEnd}
+                        ></vaadin-grid-column>`
+                      : nothing
+                  )
+                : html`<vaadin-grid-column></vaadin-grid-column>`}
             </vaadin-grid>`
           : nothing}
         ${this.rowLimit > 0

package/src/components/IxGridNav.ts

@@ -5,6 +5,7 @@ import '@digital-realty/ix-button';
 
 export interface IGridNavButton {
   path?: string;
+  selected?: boolean;
   disabled?: boolean;
   onClick?: () => void;
   text: string;
@@ -59,11 +60,18 @@ export class IxGridNavigation extends LitElement {
   `;
 
   // eslint-disable-next-line class-methods-use-this
-  renderButton = ({ path, text, onClick, disabled }: IGridNavButton) =>
+  renderButton = ({
+    path,
+    text,
+    onClick,
+    disabled,
+    selected,
+  }: IGridNavButton) =>
     html`
       <ix-button
         ?disabled=${disabled}
-        href=${ifDefined(path)}
+        appearance=${selected ? 'filled' : 'text'}
+        href=${ifDefined(selected ? undefined : path)}
         @click=${onClick}
         class="button"
         ><div class="button-text">${text}</div></ix-button

package/src/test/ix-grid.test.ts

@@ -19,14 +19,17 @@ const columns = [
   {
     name: 'one',
     header: 'one',
+    bodyRenderer: row => html` <span>${row.name}</span>`,
   },
   {
     name: 'two',
     header: 'one',
+    bodyRenderer: row => html` <span>${row.name}</span>`,
   },
   {
     name: 'three',
     header: 'one',
+    bodyRenderer: row => html` <span>${row.name}</span>`,
   },
 ];
 
@@ -39,8 +42,8 @@ describe('IxGrid', () => {
 
   it('renders the correct number of rows', async () => {
     const el = await fixture<IxGrid>(html`<ix-grid
-      columns=${columns}
-      rows=${rows}
+      .columns=${columns}
+      .rows=${rows}
     ></ix-grid>`);
 
     expect(rows.length).to.equal(3);