@digital-realty/ix-grid 1.0.6

package/dist/components/IxGridRowFilter.js

@@ -0,0 +1,317 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';
+import { copy } from '../ix-grid-copy.js';
+let IxGridRowFilter = class IxGridRowFilter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.isDropdownVisible = false;
+        this.filters = [];
+        this.filterableColumns = [];
+        this.filterColumns = [];
+        this.activeFilters = [];
+        this.mapSelect = false;
+        this.closeOnOuterClick = (e) => {
+            if (!e.composedPath().includes(this)) {
+                this.isDropdownVisible = false;
+            }
+        };
+    }
+    updateActiveFilters() {
+        this.activeFilters = this.filters.filter(filter => filter.value.length > 0);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.closeOnOuterClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.closeOnOuterClick);
+    }
+    firstUpdated() {
+        this.filterableColumns = this.columns.filter(column => column.filterable);
+        this.filterColumns = this.filterableColumns.map(column => column.name);
+        this.filters = this.parseFilterQueryString();
+        if (!this.filters.length) {
+            this.addFilter();
+        }
+        this.updateActiveFilters();
+    }
+    get filterNames() {
+        return this.filters.map(filter => filter.columnField);
+    }
+    get unselectedFilters() {
+        return this.filterColumns.filter(f => !this.filterNames.includes(f));
+    }
+    parseFilterQueryString() {
+        const params = new URLSearchParams(window.location.search);
+        const filters = [];
+        for (const [key, value] of params) {
+            if (this.filterColumns.includes(key)) {
+                filters.push({
+                    columnField: key,
+                    operatorValue: 'contains',
+                    value,
+                });
+            }
+        }
+        return filters;
+    }
+    dispatchUpdate() {
+        this.dispatchEvent(new CustomEvent('rowFilter', {
+            detail: {
+                filters: this.filters.filter(filter => filter.value.length >= 3),
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addFilter() {
+        const nextFilter = this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
+            '';
+        this.filters = [
+            ...this.filters,
+            {
+                columnField: nextFilter,
+                operatorValue: 'contains',
+                value: '',
+            },
+        ];
+        this.updateActiveFilters();
+    }
+    clearFilters() {
+        this.filters = [];
+        this.addFilter();
+        this.dispatchUpdate();
+    }
+    removeFilter(index) {
+        this.filters = this.filters.filter((_, i) => i !== index);
+        this.dispatchUpdate();
+        if (this.filters.length === 0) {
+            this.isDropdownVisible = false;
+            this.addFilter();
+        }
+    }
+    onfilterColumnChange(index, e) {
+        const selectedValue = e.target.value;
+        this.filters[index].columnField = selectedValue;
+        this.filters = [...this.filters];
+        if (this.filters[index].value.length >= 3) {
+            this.dispatchUpdate();
+        }
+    }
+    onfilterValueChange(index, e) {
+        const oldValueLength = this.filters[index].value.length;
+        const { value } = e.target;
+        this.filters[index].value = value;
+        const newValueLength = this.filters[index].value.length;
+        if (this.filters[index].columnField.length > 0 &&
+            (newValueLength >= 3 || newValueLength < oldValueLength)) {
+            this.dispatchUpdate();
+        }
+        this.updateActiveFilters();
+    }
+    renderToolTip() {
+        if (this.isDropdownVisible) {
+            return copy.hideFilters;
+        }
+        if (!this.activeFilters.length) {
+            return copy.showFilters;
+        }
+        return html ` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
+      <ul>
+        ${this.activeFilters.map(filter => html `<li>
+            ${filter.columnField} ${filter.operatorValue} ${filter.value}
+          </li>`)}
+      </ul>`;
+    }
+    renderFilterInput(value, index) {
+        const options = [value.columnField, ...this.unselectedFilters];
+        const filterOptions = this.filterableColumns.filter(column => options.includes(column.name));
+        return html `
+      <div class="filter-form">
+        <div class="filter-remove filter-form-column">
+          <div class="form-group">
+            <span
+              class="close material-icons"
+              @click=${() => this.removeFilter(index)}
+              @keyDown=${(e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.removeFilter(index);
+            }
+        }}
+              >close</span
+            >
+          </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: ${value.columnField}, options: ${filterOptions.map(column => `value=${column.name}, selected=${column.name === value.columnField}, ${column.header}
+                `)}"
+                  >Columns</label
+                >
+
+                <select
+                  @change=${(e) => this.onfilterColumnChange(index, e)}
+                  .value=${value.columnField}
+                  data-v=${value.columnField}
+                >
+                  ${filterOptions.map(column => html `
+                      <option
+                        value=${column.name}
+                        ?selected=${column.name === value.columnField}
+                      >
+                        ${column.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: ${value.columnField}, options: ${filterOptions.map(column => `value=${column.name}, selected=${column.name === value.columnField}, ${column.header}
+                `)}"
+              ><span>Columns</span>
+              <select
+                @change=${(e) => this.onfilterColumnChange(index, e)}
+                .value=${value.columnField}
+                data-v=${value.columnField}
+              >
+                ${repeat(filterOptions, (column) => column.name, (column) => html `
+                    <option
+                      value=${column.name}
+                      ?selected=${column.name === value.columnField}
+                    >
+                      ${column.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(index, e)}
+                .value=${value.value}
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderDropdown() {
+        const disableAddButton = 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((filter, index) => this.renderFilterInput(filter, index))}
+      </div>
+      <div class="filter-footer">
+        <button
+          class="add-filter-button"
+          @click="${() => this.addFilter()}"
+          ?disabled=${disableAddButton}
+        >
+          <span class="add material-icons">add </span>
+          <span class="add">ADD FILTER</span>
+        </button>
+        <button
+          class="clear"
+          @click="${() => this.clearFilters()}"
+          ?disabled=${this.activeFilters.length === 0}
+        >
+          <span class="add">CLEAR ALL</span>
+        </button>
+      </div>
+    </div>`;
+    }
+    render() {
+        return html ` <div class="grid-menu">
+      <div class="filter-container tooltip-container">
+        <button
+          class="filter_list filter-button"
+          @click=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
+        }}
+          @keyDown=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
+        }}
+        >
+          ${this.activeFilters.length > 0
+            ? html `<span class="filter-superscript"
+                >${this.activeFilters.length}</span
+              >`
+            : nothing}
+          <ix-icon-button icon="filter_list"></ix-icon-button>
+          <span class="filter">${copy.filters}</span>
+        </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);
+export { IxGridRowFilter };
+//# sourceMappingURL=IxGridRowFilter.js.map

package/dist/components/IxGridRowFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGridRowFilter.js","sourceRoot":"","sources":["../../src/components/IxGridRowFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { IxGridViewStyles } from '../grid-view-styles.js';\nimport { IxGridRowFilterStyles } from './grid-row-filter-styles.js';\nimport type { Column } from '../IxGrid.js';\nimport { copy } from '../ix-grid-copy.js';\n\nexport interface Filter {\n  columnField: string;\n  operatorValue: string;\n  value: string;\n}\n\n@customElement('ix-grid-row-filter')\nexport class IxGridRowFilter extends LitElement {\n  static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];\n\n  @property({ type: Array }) columns: Column[] = [];\n\n  @state() private isDropdownVisible: boolean = false;\n\n  @state() private filters: Filter[] = [];\n\n  @state() private filterableColumns: Column[] = [];\n\n  @state() private filterColumns: string[] = [];\n\n  @state() private activeFilters: Filter[] = [];\n\n  @state() private mapSelect: boolean = false;\n\n  updateActiveFilters() {\n    this.activeFilters = this.filters.filter(filter => filter.value.length > 0);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.closeOnOuterClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.closeOnOuterClick);\n  }\n\n  firstUpdated() {\n    this.filterableColumns = this.columns.filter(column => column.filterable);\n    this.filterColumns = this.filterableColumns.map(column => column.name);\n    this.filters = this.parseFilterQueryString();\n    if (!this.filters.length) {\n      this.addFilter();\n    }\n    this.updateActiveFilters();\n  }\n\n  get filterNames() {\n    return this.filters.map(filter => filter.columnField);\n  }\n\n  get unselectedFilters() {\n    return this.filterColumns.filter(f => !this.filterNames.includes(f));\n  }\n\n  closeOnOuterClick = (e: Event) => {\n    if (!e.composedPath().includes(this)) {\n      this.isDropdownVisible = false;\n    }\n  };\n\n  parseFilterQueryString(): Filter[] {\n    const params = new URLSearchParams(window.location.search);\n    const filters: Filter[] = [];\n\n    for (const [key, value] of params) {\n      if (this.filterColumns.includes(key)) {\n        filters.push({\n          columnField: key,\n          operatorValue: 'contains',\n          value,\n        });\n      }\n    }\n\n    return filters;\n  }\n\n  dispatchUpdate() {\n    this.dispatchEvent(\n      new CustomEvent('rowFilter', {\n        detail: {\n          filters: this.filters.filter(filter => filter.value.length >= 3),\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  addFilter() {\n    const nextFilter =\n      this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||\n      '';\n    this.filters = [\n      ...this.filters,\n      {\n        columnField: nextFilter,\n        operatorValue: 'contains',\n        value: '',\n      },\n    ];\n    this.updateActiveFilters();\n  }\n\n  clearFilters() {\n    this.filters = [];\n    this.addFilter();\n    this.dispatchUpdate();\n  }\n\n  removeFilter(index: number) {\n    this.filters = this.filters.filter((_, i) => i !== index);\n    this.dispatchUpdate();\n    if (this.filters.length === 0) {\n      this.isDropdownVisible = false;\n      this.addFilter();\n    }\n  }\n\n  private onfilterColumnChange(index: number, e: Event) {\n    const selectedValue = (e.target as HTMLSelectElement).value;\n    this.filters[index].columnField = selectedValue;\n\n    this.filters = [...this.filters];\n\n    if (this.filters[index].value.length >= 3) {\n      this.dispatchUpdate();\n    }\n  }\n\n  private onfilterValueChange(index: number, e: Event) {\n    const oldValueLength = this.filters[index].value.length;\n    const { value } = e.target as HTMLInputElement;\n    this.filters[index].value = value;\n\n    const newValueLength = this.filters[index].value.length;\n    if (\n      this.filters[index].columnField.length > 0 &&\n      (newValueLength >= 3 || newValueLength < oldValueLength)\n    ) {\n      this.dispatchUpdate();\n    }\n    this.updateActiveFilters();\n  }\n\n  renderToolTip() {\n    if (this.isDropdownVisible) {\n      return copy.hideFilters;\n    }\n    if (!this.activeFilters.length) {\n      return copy.showFilters;\n    }\n    return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>\n      <ul>\n        ${this.activeFilters.map(\n          filter => html`<li>\n            ${filter.columnField} ${filter.operatorValue} ${filter.value}\n          </li>`\n        )}\n      </ul>`;\n  }\n\n  renderFilterInput(value: Filter, index: number) {\n    const options = [value.columnField, ...this.unselectedFilters];\n    const filterOptions = this.filterableColumns.filter(column =>\n      options.includes(column.name)\n    );\n    return html`\n      <div class=\"filter-form\">\n        <div class=\"filter-remove filter-form-column\">\n          <div class=\"form-group\">\n            <span\n              class=\"close material-icons\"\n              @click=${() => this.removeFilter(index)}\n              @keyDown=${(e: KeyboardEvent) => {\n                if (e.key === ' ' || e.key === 'Enter') {\n                  this.removeFilter(index);\n                }\n              }}\n              >close</span\n            >\n          </div>\n        </div>\n        ${this.mapSelect\n          ? html`<div\n              class=\"filter-form-column filter-form-column-border filterColumnField\"\n            >\n              <div class=\"form-group\">\n                <label\n                  class=\"form-group-column-label\"\n                  title=\"select: ${value.columnField}, options: ${filterOptions.map(\n                    column => `value=${column.name}, selected=${\n                      column.name === value.columnField\n                    }, ${column.header}\n                `\n                  )}\"\n                  >Columns</label\n                >\n\n                <select\n                  @change=${(e: Event) => this.onfilterColumnChange(index, e)}\n                  .value=${value.columnField}\n                  data-v=${value.columnField}\n                >\n                  ${filterOptions.map(\n                    column => html`\n                      <option\n                        value=${column.name}\n                        ?selected=${column.name === value.columnField}\n                      >\n                        ${column.header}\n                      </option>\n                    `\n                  )}\n                </select>\n              </div>\n            </div>`\n          : nothing}\n\n        <div\n          class=\"filter-form-column filter-form-column-border filterColumnField\"\n        >\n          <div class=\"filter-form-group\">\n            <label\n              class=\"form-group-column-label\"\n              title=\"select: ${value.columnField}, options: ${filterOptions.map(\n                column => `value=${column.name}, selected=${\n                  column.name === value.columnField\n                }, ${column.header}\n                `\n              )}\"\n              ><span>Columns</span>\n              <select\n                @change=${(e: Event) => this.onfilterColumnChange(index, e)}\n                .value=${value.columnField}\n                data-v=${value.columnField}\n              >\n                ${repeat(\n                  filterOptions,\n                  (column: Column) => column.name,\n                  (column: Column) => html`\n                    <option\n                      value=${column.name}\n                      ?selected=${column.name === value.columnField}\n                    >\n                      ${column.header}\n                    </option>\n                  `\n                )}\n              </select>\n            </label>\n          </div>\n        </div>\n\n        <div\n          class=\"filter-form-column filter-form-column-border filterOperatorField\"\n        >\n          <div class=\"filter-form-group\">\n            <label class=\"form-group-operator-label\"\n              ><span>Operator</span>\n              <select>\n                <option select=\"select\">contains</option>\n              </select>\n            </label>\n          </div>\n        </div>\n        <div\n          class=\"filter-form-column filter-form-column-border filterValueField\"\n        >\n          <div class=\"filter-form-group\">\n            <label class=\"form-group-value-label\"\n              ><span>Value</span>\n              <input\n                placeholder=\"Filter value\"\n                @input=${(e: Event) => this.onfilterValueChange(index, e)}\n                .value=${value.value}\n              />\n            </label>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  renderDropdown() {\n    const disableAddButton =\n      this.filters.length >= this.filterColumns.length ||\n      this.activeFilters.length < this.filters.length;\n    return html` <div class=\"filter-dropdown-content\">\n      <div class=\"filter-body\">\n        ${this.filters.map((filter, index) =>\n          this.renderFilterInput(filter, index)\n        )}\n      </div>\n      <div class=\"filter-footer\">\n        <button\n          class=\"add-filter-button\"\n          @click=\"${() => this.addFilter()}\"\n          ?disabled=${disableAddButton}\n        >\n          <span class=\"add material-icons\">add </span>\n          <span class=\"add\">ADD FILTER</span>\n        </button>\n        <button\n          class=\"clear\"\n          @click=\"${() => this.clearFilters()}\"\n          ?disabled=${this.activeFilters.length === 0}\n        >\n          <span class=\"add\">CLEAR ALL</span>\n        </button>\n      </div>\n    </div>`;\n  }\n\n  render() {\n    return html` <div class=\"grid-menu\">\n      <div class=\"filter-container tooltip-container\">\n        <button\n          class=\"filter_list filter-button\"\n          @click=${() => {\n            this.isDropdownVisible = !this.isDropdownVisible;\n          }}\n          @keyDown=${() => {\n            this.isDropdownVisible = !this.isDropdownVisible;\n          }}\n        >\n          ${this.activeFilters.length > 0\n            ? html`<span class=\"filter-superscript\"\n                >${this.activeFilters.length}</span\n              >`\n            : nothing}\n          <ix-icon-button icon=\"filter_list\"></ix-icon-button>\n          <span class=\"filter\">${copy.filters}</span>\n        </button>\n        <div class=\"tool-tip\">${this.renderToolTip()}</div>\n        ${this.isDropdownVisible ? this.renderDropdown() : nothing}\n      </div>\n    </div>`;\n  }\n}\n"]}

package/dist/components/IxPagination.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+export declare class IxPagination extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    recordCount: number;
+    page: number;
+    pageSize: number;
+    pageSizes: number[];
+    private changePage;
+    updatePagination(page?: number, pageSize?: number): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/IxPagination.js

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { PaginationStyles } from './pagination-styles.js';
+import { copy } from '../ix-grid-copy.js';
+let IxPagination = class IxPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.recordCount = 0;
+        this.page = 1;
+        this.pageSize = 10;
+        this.pageSizes = [5, 10, 25, 100];
+    }
+    changePage(offset) {
+        this.page += offset;
+        this.updatePagination();
+    }
+    updatePagination(page = this.page, pageSize = this.pageSize) {
+        this.dispatchEvent(new CustomEvent('updatePagination', {
+            detail: {
+                page,
+                pageSize,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const back = this.page > 1;
+        const next = 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) => {
+            const el = e.target;
+            this.pageSize = Number(el.value);
+            this.updatePagination();
+        }}
+        selected-index=${this.pageSizes.indexOf(this.pageSize)}
+        filled
+      >
+        ${this.pageSizes.map(option => html `
+            <ix-select-option class="select-option" value=${option}>
+              <div slot="headline">${option}</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=${!back}
+          @click=${() => back && this.changePage(-1)}
+          icon="chevron_left"
+        >
+        </ix-icon-button>
+        <ix-icon-button
+          ?disabled=${!next}
+          @click=${() => next && this.changePage(+1)}
+          icon="chevron_right"
+        >
+        </ix-icon-button>
+      </div>
+    </div>`;
+    }
+};
+IxPagination.styles = [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);
+export { IxPagination };
+//# sourceMappingURL=IxPagination.js.map

package/dist/components/IxPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxPagination.js","sourceRoot":"","sources":["../../src/components/IxPagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-select/ix-select.js';\nimport { PaginationStyles } from './pagination-styles.js';\nimport { copy } from '../ix-grid-copy.js';\n\n@customElement('ix-pagination')\nexport class IxPagination extends LitElement {\n  static readonly styles = [PaginationStyles];\n\n  @property({ type: Number }) recordCount = 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  private changePage(offset: number) {\n    this.page += offset;\n    this.updatePagination();\n  }\n\n  updatePagination(page = this.page, pageSize = this.pageSize) {\n    this.dispatchEvent(\n      new CustomEvent('updatePagination', {\n        detail: {\n          page,\n          pageSize,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    const back = this.page > 1;\n    const next = this.recordCount > this.page * this.pageSize;\n    return html` <div class=\"pagination\">\n      <p>${copy.rowsPerPage}:</p>\n      <ix-select\n        wide-menu\n        class=\"pagination__select-input\"\n        @request-selection=${(e: Event) => {\n          const el = e.target as HTMLInputElement;\n          this.pageSize = Number(el.value);\n          this.updatePagination();\n        }}\n        selected-index=${this.pageSizes.indexOf(this.pageSize)}\n        filled\n      >\n        ${this.pageSizes.map(\n          option => html`\n            <ix-select-option class=\"select-option\" value=${option}>\n              <div slot=\"headline\">${option}</div>\n            </ix-select-option>\n          `\n        )}\n      </ix-select>\n      <p>\n        ${(this.page - 1) * this.pageSize + 1} -\n        ${this.page * this.pageSize > this.recordCount\n          ? html`${this.recordCount}`\n          : html`${this.page * this.pageSize}`}\n        of ${this.recordCount}\n      </p>\n      <div class=\"pagination-nav\">\n        <ix-icon-button\n          ?disabled=${!back}\n          @click=${() => back && this.changePage(-1)}\n          icon=\"chevron_left\"\n        >\n        </ix-icon-button>\n        <ix-icon-button\n          ?disabled=${!next}\n          @click=${() => next && this.changePage(+1)}\n          icon=\"chevron_right\"\n        >\n        </ix-icon-button>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/dist/components/grid-column-filter-styles.d.ts

@@ -0,0 +1 @@
+export declare const IxGridColumnFilterStyles: import("lit").CSSResult;

package/dist/components/grid-column-filter-styles.js

@@ -0,0 +1,71 @@
+import { css } from 'lit';
+export const IxGridColumnFilterStyles = css `
+  .dropdown-content {
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 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: 0px;
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0.25px;
+    color: #092241;
+    display: block;
+    cursor: pointer;
+  }
+  .dropdown-content span:hover {
+    background-color: #f1f1f1;
+  }
+  .dropdown-content label {
+    display: flex;
+    align-items: center;
+  }
+  .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 0px;
+  }
+  .list {
+    position: relative;
+  }
+`;
+//# sourceMappingURL=grid-column-filter-styles.js.map

package/dist/components/grid-column-filter-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-filter-styles.js","sourceRoot":"","sources":["../../src/components/grid-column-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE1C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridColumnFilterStyles = css`\n  .dropdown-content {\n    position: absolute;\n    background-color: #f9f9f9;\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n    z-index: 1;\n    -webkit-box-align: center;\n    align-items: center;\n    cursor: pointer;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    padding: 10px;\n  }\n  .dropdown-content > div {\n    margin: 0px;\n    font-family: 'Open Sans', sans-serif;\n    font-style: normal;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    letter-spacing: 0.25px;\n    color: #092241;\n    display: block;\n    cursor: pointer;\n  }\n  .dropdown-content span:hover {\n    background-color: #f1f1f1;\n  }\n  .dropdown-content label {\n    display: flex;\n    align-items: center;\n  }\n  .active {\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 8px;\n    width: 8px;\n    background-color: #db0028;\n    border-radius: 50%;\n  }\n  ix-switch {\n    padding: 2px 4px;\n    --md-switch-track-height: 12px;\n    --md-switch-track-width: 35px;\n    --md-sys-color-primary: rgba(20, 86, 224, 0.68);\n    --md-sys-color-on-primary: #1456e0;\n    --md-sys-color-primary-container: #1456e0;\n    --md-switch-handle-height: 19px;\n    --md-switch-handle-width: 18px;\n    --md-sys-color-surface-container-highest: #9e9e9e;\n    --md-sys-color-outline: #9e9e9e;\n    --md-switch-pressed-handle-height: 19px;\n    --md-switch-pressed-handle-width: 18px;\n    --md-switch-handle-color: #fff;\n    --md-sys-color-on-surface-variant: white;\n    --selected-handle-height: 19px;\n    --selected-handle-width: 18px;\n    --_pressed-handle-height: 19px;\n    --_pressed-handle-width: 18px;\n    --md-switch-selected-handle-height: 19px;\n    --md-switch-selected-handle-width: 18px;\n    margin: 11px 8px 1px 0px;\n  }\n  .list {\n    position: relative;\n  }\n`;\n"]}

package/dist/components/grid-row-filter-styles.d.ts

@@ -0,0 +1 @@
+export declare const IxGridRowFilterStyles: import("lit").CSSResult;