@digital-realty/ix-grid 1.0.6

package/dist/grid-view-styles.js

@@ -0,0 +1,265 @@
+import { css } from 'lit';
+export const IxGridViewStyles = css `
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
+      format('truetype');
+  }
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+  ix-dialog {
+    --md-dialog-container-color: #fff;
+  }
+  ix-textbox {
+    --md-sys-color-on-surface-variant: #b8bfc8;
+  }
+  ix-button {
+    --md-outlined-button-outline-color: var(--md-sys-color-primary);
+    --md-outlined-select-text-field-outline-color: #ddd;
+  }
+  ix-button .button-label {
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1.25px;
+  }
+  .btn_primary {
+    --md-filled-button-container-color: var(--md-sys-color-primary);
+  }
+  .btn_primary ix-icon {
+    color: var(--md-sys-color-on-primary);
+  }
+  .btn_secondary {
+    --md-filled-button-container-color: var(--md-sys-color-secondary);
+  }
+  .btn_secondary ix-icon {
+    color: var(--md-sys-color-on-secondary);
+  }
+  .btn_tertiary {
+    --md-filled-button-container-color: var(--md-sys-color-tertiary);
+  }
+  .btn_tertiary ix-icon {
+    color: var(--md-sys-color-on-tertiary);
+  }
+  .btn_danger {
+    --md-filled-button-container-color: var(--md-sys-color-error);
+  }
+  .btn_danger ix-icon {
+    color: var(--md-sys-color-on-error);
+  }
+  .icon-btn_primary ix-icon {
+    color: var(--md-sys-color-primary);
+  }
+  .icon-btn_secondary ix-icon {
+    color: var(--md-sys-color-secondary);
+  }
+  .icon-btn_tertiary ix-icon {
+    color: var(--md-sys-color-tertiary);
+  }
+  .icon-btn_danger ix-icon {
+    color: var(--md-sys-color-error);
+  }
+  .dialog__headline {
+    margin: 0px;
+    font-family: 'Red Hat Display', sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    padding: 24px;
+  }
+  .dialog-form {
+    min-width: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 8px 24px 20px;
+  }
+  .dialog-form .textfield {
+    width: 100%;
+  }
+  .dialog-form.sm {
+    min-width: 560px;
+  }
+  .dialog-form__info {
+    margin: 0px;
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 28px;
+    letter-spacing: 0.44px;
+    color: rgba(9, 34, 65, 0.7);
+  }
+  .dialog-form__textbox {
+    padding-top: 1rem;
+  }
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 15px 8px 20px;
+  }
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+  .material-icons.delete {
+    color: #6d758c;
+  }
+  .material-icons.info {
+    color: orange;
+    font-size: 48px;
+  }
+  .material-icons.check_circle {
+    color: green;
+  }
+  .material-icons.mail {
+    color: #ff9800;
+  }
+  .material-icons.warning {
+    color: #db0028;
+  }
+  .material-icons.do_not_disturb_on {
+    color: #6d758c;
+  }
+  ix-dialog {
+    --md-dialog-container-color: #fff;
+  }
+  .grid-container {
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+      #e1e4e8 0px 0px 0px 1px inset;
+    box-sizing: border-box;
+    padding: 3px;
+  }
+  .grid-header {
+    display: flex;
+    -webkit-box-pack: justify;
+    place-content: center space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 0px 11px 0px 24px;
+    flex-wrap: wrap;
+    gap: 18px;
+    height: 64px;
+  }
+  .grid-header h2 {
+    margin: 0px;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    color: #092241;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: 'Red Hat Display', sans-serif;
+  }
+  .grid-menu {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .grid-menu span {
+    color: #1456e0;
+    cursor: pointer;
+  }
+  .grid-empty-content {
+    height: 73vh;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 54px;
+  }
+  .grid-empty-content h2 {
+    font-weight: 900;
+    font-size: 22px;
+    font-family: 'Red Hat Display', sans-serif;
+    color: black;
+  }
+
+  .header {
+    font-weight: bold;
+    display: flex;
+    user-select: none;
+    align-items: center;
+  }
+  .header .header-sort-icon {
+    padding-left: 5px;
+    opacity: 0;
+    font-size: 17px;
+    color: rgba(0, 0, 0, 0.54);
+    cursor: pointer;
+    height: 18px;
+  }
+  .header:hover .header-sort-icon {
+    opacity: 1;
+  }
+  .loading {
+    opacity: 0.25;
+  }
+
+  span .disabled {
+    color: rgba(9, 34, 65, 0.7);
+  }
+
+  .disable-cursor {
+    cursor: default !important;
+  }
+
+  .accounts {
+    display: flex;
+    align-items: center;
+  }
+  .account-name {
+    margin: 0 8px 0 3px;
+  }
+
+  ix-icon-button {
+    --md-icon-button-icon-color: rgb(20, 86, 224);
+    --md-icon-button-icon-size: 28px;
+  }
+
+  .header ix-icon-button {
+    padding-left: 5px;
+    opacity: 0;
+    cursor: pointer;
+    height: 18px;
+    --md-icon-button-icon-color: rgba(0, 0, 0, 0.54);
+    --md-icon-button-icon-size: 18px;
+  }
+
+  vaadin-grid-cell-content {
+    font-family: 'Red Hat Display', sans-serif;
+    font-size: 14px;
+    --_cell-padding: 1rem;
+  }
+
+  .row-limit {
+    display: flex;
+    padding: 8px;
+  }
+`;
+//# sourceMappingURL=grid-view-styles.js.map

package/dist/grid-view-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-view-styles.js","sourceRoot":"","sources":["../src/grid-view-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridViewStyles = css`\n  @font-face {\n    font-family: 'Material Icons';\n    font-style: normal;\n    font-weight: 400;\n    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)\n      format('truetype');\n  }\n  .material-icons {\n    font-family: 'Material Icons';\n    font-weight: normal;\n    font-style: normal;\n    font-size: 24px;\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    display: inline-block;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n  }\n  ix-dialog {\n    --md-dialog-container-color: #fff;\n  }\n  ix-textbox {\n    --md-sys-color-on-surface-variant: #b8bfc8;\n  }\n  ix-button {\n    --md-outlined-button-outline-color: var(--md-sys-color-primary);\n    --md-outlined-select-text-field-outline-color: #ddd;\n  }\n  ix-button .button-label {\n    text-transform: uppercase;\n    font-weight: bold;\n    letter-spacing: 1.25px;\n  }\n  .btn_primary {\n    --md-filled-button-container-color: var(--md-sys-color-primary);\n  }\n  .btn_primary ix-icon {\n    color: var(--md-sys-color-on-primary);\n  }\n  .btn_secondary {\n    --md-filled-button-container-color: var(--md-sys-color-secondary);\n  }\n  .btn_secondary ix-icon {\n    color: var(--md-sys-color-on-secondary);\n  }\n  .btn_tertiary {\n    --md-filled-button-container-color: var(--md-sys-color-tertiary);\n  }\n  .btn_tertiary ix-icon {\n    color: var(--md-sys-color-on-tertiary);\n  }\n  .btn_danger {\n    --md-filled-button-container-color: var(--md-sys-color-error);\n  }\n  .btn_danger ix-icon {\n    color: var(--md-sys-color-on-error);\n  }\n  .icon-btn_primary ix-icon {\n    color: var(--md-sys-color-primary);\n  }\n  .icon-btn_secondary ix-icon {\n    color: var(--md-sys-color-secondary);\n  }\n  .icon-btn_tertiary ix-icon {\n    color: var(--md-sys-color-tertiary);\n  }\n  .icon-btn_danger ix-icon {\n    color: var(--md-sys-color-error);\n  }\n  .dialog__headline {\n    margin: 0px;\n    font-family: 'Red Hat Display', sans-serif;\n    font-style: normal;\n    font-weight: bold;\n    font-size: 20px;\n    line-height: 24px;\n    letter-spacing: 0.15px;\n    padding: 24px;\n  }\n  .dialog-form {\n    min-width: 500px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 8px 24px 20px;\n  }\n  .dialog-form .textfield {\n    width: 100%;\n  }\n  .dialog-form.sm {\n    min-width: 560px;\n  }\n  .dialog-form__info {\n    margin: 0px;\n    font-family: 'Open Sans', sans-serif;\n    font-style: normal;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 28px;\n    letter-spacing: 0.44px;\n    color: rgba(9, 34, 65, 0.7);\n  }\n  .dialog-form__textbox {\n    padding-top: 1rem;\n  }\n  .dialog-actions {\n    display: flex;\n    justify-content: flex-end;\n    padding: 8px 15px 8px 20px;\n  }\n  .material-icons {\n    font-family: 'Material Icons';\n    font-weight: normal;\n    font-style: normal;\n    font-size: 24px;\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    display: inline-block;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n  }\n  .material-icons.delete {\n    color: #6d758c;\n  }\n  .material-icons.info {\n    color: orange;\n    font-size: 48px;\n  }\n  .material-icons.check_circle {\n    color: green;\n  }\n  .material-icons.mail {\n    color: #ff9800;\n  }\n  .material-icons.warning {\n    color: #db0028;\n  }\n  .material-icons.do_not_disturb_on {\n    color: #6d758c;\n  }\n  ix-dialog {\n    --md-dialog-container-color: #fff;\n  }\n  .grid-container {\n    background-color: #ffffff;\n    border-radius: 12px;\n    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n      #e1e4e8 0px 0px 0px 1px inset;\n    box-sizing: border-box;\n    padding: 3px;\n  }\n  .grid-header {\n    display: flex;\n    -webkit-box-pack: justify;\n    place-content: center space-between;\n    -webkit-box-align: center;\n    align-items: center;\n    padding: 0px 11px 0px 24px;\n    flex-wrap: wrap;\n    gap: 18px;\n    height: 64px;\n  }\n  .grid-header h2 {\n    margin: 0px;\n    font-style: normal;\n    font-weight: bold;\n    font-size: 20px;\n    line-height: 24px;\n    letter-spacing: 0.15px;\n    color: #092241;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-family: 'Red Hat Display', sans-serif;\n  }\n  .grid-menu {\n    display: flex;\n    gap: 0.5rem;\n  }\n  .grid-menu span {\n    color: #1456e0;\n    cursor: pointer;\n  }\n  .grid-empty-content {\n    height: 73vh;\n    justify-content: center;\n    align-items: flex-start;\n    padding-top: 54px;\n  }\n  .grid-empty-content h2 {\n    font-weight: 900;\n    font-size: 22px;\n    font-family: 'Red Hat Display', sans-serif;\n    color: black;\n  }\n\n  .header {\n    font-weight: bold;\n    display: flex;\n    user-select: none;\n    align-items: center;\n  }\n  .header .header-sort-icon {\n    padding-left: 5px;\n    opacity: 0;\n    font-size: 17px;\n    color: rgba(0, 0, 0, 0.54);\n    cursor: pointer;\n    height: 18px;\n  }\n  .header:hover .header-sort-icon {\n    opacity: 1;\n  }\n  .loading {\n    opacity: 0.25;\n  }\n\n  span .disabled {\n    color: rgba(9, 34, 65, 0.7);\n  }\n\n  .disable-cursor {\n    cursor: default !important;\n  }\n\n  .accounts {\n    display: flex;\n    align-items: center;\n  }\n  .account-name {\n    margin: 0 8px 0 3px;\n  }\n\n  ix-icon-button {\n    --md-icon-button-icon-color: rgb(20, 86, 224);\n    --md-icon-button-icon-size: 28px;\n  }\n\n  .header ix-icon-button {\n    padding-left: 5px;\n    opacity: 0;\n    cursor: pointer;\n    height: 18px;\n    --md-icon-button-icon-color: rgba(0, 0, 0, 0.54);\n    --md-icon-button-icon-size: 18px;\n  }\n\n  vaadin-grid-cell-content {\n    font-family: 'Red Hat Display', sans-serif;\n    font-size: 14px;\n    --_cell-padding: 1rem;\n  }\n\n  .row-limit {\n    display: flex;\n    padding: 8px;\n  }\n`;\n"]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { IxGrid } from './IxGrid.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { IxGrid } from './IxGrid.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { IxGrid } from './IxGrid.js';\n"]}

package/dist/ix-grid-copy.d.ts

@@ -0,0 +1,10 @@
+export declare const copy: {
+    activeFilter: string;
+    filters: string;
+    hideFilters: string;
+    showFilters: string;
+    rowsPerPage: string;
+    user: string;
+    viewMore: string;
+    viewLess: string;
+};

package/dist/ix-grid-copy.js

@@ -0,0 +1,11 @@
+export const copy = {
+    activeFilter: 'active filter',
+    filters: 'Filters',
+    hideFilters: 'Hide Filters',
+    showFilters: 'Show Filters',
+    rowsPerPage: 'Rows per page',
+    user: 'user',
+    viewMore: 'VIEW MORE',
+    viewLess: 'VIEW LESS',
+};
+//# sourceMappingURL=ix-grid-copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-copy.js","sourceRoot":"","sources":["../src/ix-grid-copy.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,cAAc;IAC3B,WAAW,EAAE,cAAc;IAC3B,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;CACtB,CAAC","sourcesContent":["export const copy = {\n  activeFilter: 'active filter',\n  filters: 'Filters',\n  hideFilters: 'Hide Filters',\n  showFilters: 'Show Filters',\n  rowsPerPage: 'Rows per page',\n  user: 'user',\n  viewMore: 'VIEW MORE',\n  viewLess: 'VIEW LESS',\n};\n"]}

package/dist/ix-grid.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ix-grid.js

@@ -0,0 +1,3 @@
+import { IxGrid } from './IxGrid.js';
+window.customElements.define('ix-grid', IxGrid);
+//# sourceMappingURL=ix-grid.js.map

package/dist/ix-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid.js","sourceRoot":"","sources":["../src/ix-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC","sourcesContent":["import { IxGrid } from './IxGrid.js';\n\nwindow.customElements.define('ix-grid', IxGrid);\n"]}

package/dist/test/ix-grid-column-filter.test.d.ts

@@ -0,0 +1 @@
+import '../components/IxGridColumnFilter.js';

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

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import { fixture, expect, elementUpdated } from '@open-wc/testing';
+import '../components/IxGridColumnFilter.js';
+const columns = [
+    {
+        name: 'firstName',
+        header: 'First name',
+        hidden: false,
+    },
+    {
+        name: 'lastName',
+        header: 'Last name',
+        hidden: true,
+    },
+    {
+        name: 'middleName',
+        header: 'Middle name',
+        hidden: false,
+    },
+];
+describe('IxGridColumnFilter', () => {
+    it('renders the grid column filter component', async () => {
+        const el = await fixture(html `<ix-grid-column-filter></ix-grid-column-filter>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders the grid column filters list', async () => {
+        var _a, _b;
+        const el = await fixture(html `<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`);
+        const list = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list');
+        list.click();
+        await elementUpdated(el);
+        const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('ix-switch');
+        expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
+    });
+});
+//# sourceMappingURL=ix-grid-column-filter.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-column-filter.test.js","sourceRoot":"","sources":["../../src/test/ix-grid-column-filter.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,qCAAqC,CAAC;AAE7C,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,YAAY;QACpB,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE,IAAI;KACb;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE,KAAK;KACd;CACF,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACxD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,iDAAiD,CACtD,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,mCAAmC,OAAO,2BAA2B,CAC1E,CAAC;QAEF,MAAM,IAAI,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAqB,CAAC;QAEvE,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAE7D,MAAM,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect, elementUpdated } from '@open-wc/testing';\nimport '../components/IxGridColumnFilter.js';\n\nconst columns = [\n  {\n    name: 'firstName',\n    header: 'First name',\n    hidden: false,\n  },\n  {\n    name: 'lastName',\n    header: 'Last name',\n    hidden: true,\n  },\n  {\n    name: 'middleName',\n    header: 'Middle name',\n    hidden: false,\n  },\n];\n\ndescribe('IxGridColumnFilter', () => {\n  it('renders the grid column filter component', async () => {\n    const el = await fixture(\n      html`<ix-grid-column-filter></ix-grid-column-filter>`\n    );\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders the grid column filters list', async () => {\n    const el = await fixture(\n      html`<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`\n    );\n\n    const list = el.shadowRoot?.querySelector('.list') as HTMLInputElement;\n\n    list.click();\n\n    await elementUpdated(el);\n\n    const options = el.shadowRoot?.querySelectorAll('ix-switch');\n\n    expect(options?.length).to.equal(3);\n  });\n});\n"]}

package/dist/test/ix-grid-row-filter.test.d.ts

@@ -0,0 +1 @@
+import '../components/IxGridRowFilter.js';

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

@@ -0,0 +1,37 @@
+import { html } from 'lit';
+import { fixture, expect, elementUpdated } from '@open-wc/testing';
+import '../components/IxGridRowFilter.js';
+const columns = [
+    {
+        name: 'firstName',
+        header: 'First name',
+        filterable: true,
+    },
+    {
+        name: 'lastName',
+        header: 'Last name',
+        filterable: true,
+    },
+    {
+        name: 'middleName',
+        header: 'Middle name',
+        filterable: false,
+    },
+    {
+        name: 'email',
+        header: 'Email',
+        filterable: true,
+    },
+];
+describe('IxGridRowFilter', () => {
+    it('renders and popluates the grid row filter', async () => {
+        var _a, _b;
+        const el = await fixture(html `<ix-grid-row-filter .columns=${columns}></ix-grid-row-filter>`);
+        const openMenu = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.filter-button');
+        openMenu.click();
+        await elementUpdated(el);
+        const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('select[data-v="firstName"] option');
+        expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
+    });
+});
+//# sourceMappingURL=ix-grid-row-filter.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-row-filter.test.js","sourceRoot":"","sources":["../../src/test/ix-grid-row-filter.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,kCAAkC,CAAC;AAE1C,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,YAAY;QACpB,UAAU,EAAE,IAAI;KACjB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,WAAW;QACnB,UAAU,EAAE,IAAI;KACjB;IACD;QACE,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,aAAa;QACrB,UAAU,EAAE,KAAK;KAClB;IACD;QACE,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,OAAO;QACf,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;;QACzD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA,gCAAgC,OAAO,wBAAwB,CACpE,CAAC;QAEF,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAC3C,gBAAgB,CACG,CAAC;QAEtB,QAAQ,CAAC,KAAK,EAAE,CAAC;QAEjB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,OAAO,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,gBAAgB,CAC7C,mCAAmC,CACpC,CAAC;QAEF,MAAM,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect, elementUpdated } from '@open-wc/testing';\nimport '../components/IxGridRowFilter.js';\n\nconst columns = [\n  {\n    name: 'firstName',\n    header: 'First name',\n    filterable: true,\n  },\n  {\n    name: 'lastName',\n    header: 'Last name',\n    filterable: true,\n  },\n  {\n    name: 'middleName',\n    header: 'Middle name',\n    filterable: false,\n  },\n  {\n    name: 'email',\n    header: 'Email',\n    filterable: true,\n  },\n];\n\ndescribe('IxGridRowFilter', () => {\n  it('renders and popluates the grid row filter', async () => {\n    const el = await fixture(\n      html`<ix-grid-row-filter .columns=${columns}></ix-grid-row-filter>`\n    );\n\n    const openMenu = el.shadowRoot?.querySelector(\n      '.filter-button'\n    ) as HTMLInputElement;\n\n    openMenu.click();\n\n    await elementUpdated(el);\n\n    const options = el.shadowRoot?.querySelectorAll(\n      'select[data-v=\"firstName\"] option'\n    );\n\n    expect(options?.length).to.equal(3);\n  });\n});\n"]}

package/dist/test/ix-grid.test.d.ts

@@ -0,0 +1 @@
+import '../ix-grid.js';

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

@@ -0,0 +1,43 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import '../ix-grid.js';
+const rows = [
+    {
+        name: 'one',
+    },
+    {
+        name: 'two',
+    },
+    {
+        name: 'three',
+    },
+];
+const columns = [
+    {
+        name: 'one',
+        header: 'one',
+    },
+    {
+        name: 'two',
+        header: 'one',
+    },
+    {
+        name: 'three',
+        header: 'one',
+    },
+];
+describe('IxGrid', () => {
+    it('renders a grid', async () => {
+        const el = await fixture(html `<ix-grid></ix-grid>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders the correct number of rows', async () => {
+        const el = await fixture(html `<ix-grid
+      columns=${columns}
+      rows=${rows}
+    ></ix-grid>`);
+        expect(rows.length).to.equal(3);
+        expect(el).to.not.be.null;
+    });
+});
+//# sourceMappingURL=ix-grid.test.js.map

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

@@ -0,0 +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"]}

package/dist/test/ix-pagination.test.d.ts

@@ -0,0 +1 @@
+import '../components/IxPagination.js';

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

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import '../components/IxPagination.js';
+describe('IxPagination', () => {
+    it('renders pagination', async () => {
+        const el = await fixture(html `<ix-pagination></ix-pagination>`);
+        expect(el).to.not.be.null;
+    });
+    it('renders pagination page size select', async () => {
+        var _a;
+        const el = await fixture(html `<ix-pagination
+      .pageSizes=${[1, 2, 3]}
+    ></ix-pagination>`);
+        const pageSizeSelect = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ix-select-option');
+        expect(pageSizeSelect === null || pageSizeSelect === void 0 ? void 0 : pageSizeSelect.length).to.equal(3);
+    });
+    it('renders pagination range info', async () => {
+        var _a;
+        const el = await fixture(html `<ix-pagination
+      pageSize="10"
+      page="2"
+      recordCount="99"
+    ></ix-pagination>`);
+        const pageRangeInfo = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('p')[1];
+        expect(pageRangeInfo === null || pageRangeInfo === void 0 ? void 0 : pageRangeInfo.innerText).to.equal('11 - 20 of 99');
+    });
+});
+//# sourceMappingURL=ix-pagination.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-pagination.test.js","sourceRoot":"","sources":["../../src/test/ix-pagination.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAEvC,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;QAClC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA,iCAAiC,CAAC,CAAC;QAEhE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;mBACd,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;sBACN,CAAC,CAAC;QAEpB,MAAM,cAAc,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,UAAU,0CAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAE5E,MAAM,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;;QAC7C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;sBAIX,CAAC,CAAC;QAEpB,MAAM,aAAa,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,UAAU,0CAAE,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAE/D,MAAM,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { fixture, expect } from '@open-wc/testing';\nimport '../components/IxPagination.js';\n\ndescribe('IxPagination', () => {\n  it('renders pagination', async () => {\n    const el = await fixture(html`<ix-pagination></ix-pagination>`);\n\n    expect(el).to.not.be.null;\n  });\n\n  it('renders pagination page size select', async () => {\n    const el = await fixture(html`<ix-pagination\n      .pageSizes=${[1, 2, 3]}\n    ></ix-pagination>`);\n\n    const pageSizeSelect = el?.shadowRoot?.querySelectorAll('ix-select-option');\n\n    expect(pageSizeSelect?.length).to.equal(3);\n  });\n\n  it('renders pagination range info', async () => {\n    const el = await fixture(html`<ix-pagination\n      pageSize=\"10\"\n      page=\"2\"\n      recordCount=\"99\"\n    ></ix-pagination>`);\n\n    const pageRangeInfo = el?.shadowRoot?.querySelectorAll('p')[1];\n\n    expect(pageRangeInfo?.innerText).to.equal('11 - 20 of 99');\n  });\n});\n"]}

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@digital-realty/ix-grid",
+  "description": "Webcomponent ix-grid following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital Realty",
+  "version": "1.0.6",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./ix-grid.js": "./dist/src/ix-grid.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-icon": "*",
+    "@digital-realty/ix-icon-button": "^1.0.19",
+    "@digital-realty/ix-select": "*",
+    "@digital-realty/ix-switch": "*",
+    "@vaadin/grid": "^24.3.2",
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@digital-realty/theme": "*",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off",
+      "wc/guard-super-call": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "b9d0668d204a87407a723acbae1f4fd46c7e90b1"
+}