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

package/src/grid-view-styles.js

@@ -0,0 +1,283 @@
+import { css } from 'lit';
+export const IxGridViewStyles = css `
+  :host {
+    --_ix-grid-cell-padding: var(--ix-grid-cell-padding, 1rem);
+    --lumo-primary-color-50pct: transparent;
+  }
+
+  vaadin-grid::part(first-frozen-to-end-cell) {
+    border-left: 0.063rem solid var(--_lumo-grid-border-color);
+    box-shadow: -0.375rem 0 0.375rem -0.375rem #0000001a;
+  }
+
+  * {
+    font-family: inherit;
+  }
+
+  vaadin-grid::part(cell) {
+    cursor: var(--ix-grid-cell-pointer, pointer);
+  }
+
+  vaadin-grid::part(header-cell) {
+    cursor: default;
+    --vaadin-grid-cell-background: #fff;
+  }
+
+  vaadin-grid::part(row):hover {
+    --vaadin-grid-cell-background: #f5f5f5;
+  }
+
+  vaadin-grid-cell-content {
+    font-size: 14px;
+    --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);
+  }
+
+  .hide-column-headers::part(header-cell) {
+    display: none;
+  }
+
+  vaadin-grid::part(ix-disabled-cell) {
+    cursor: default;
+    color: var(--cp-neutral-blue-60p);
+    --vaadin-grid-cell-background: var(--cp-neutral-blue-12p);
+  }
+
+  ix-grid-download-menu {
+    width: 38px;
+    margin-right: 2px;
+  }
+
+  ix-grid-column-filter {
+    width: 36px;
+  }
+
+  .grid-container {
+    background-color: var(--clr-surface-container-lowest, #ffffff);
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+      #e1e4e8 0px 0px 0px 1px inset;
+    box-sizing: border-box;
+    padding: 2px;
+  }
+
+  .touch-edge {
+    margin: 0 -3px;
+  }
+
+  .grid-header {
+    display: flex;
+    -webkit-box-pack: justify;
+    place-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 1rem;
+    flex-wrap: wrap;
+    gap: 18px;
+  }
+
+  .grid-menu {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .grid-menu ix-button {
+    --md-text-button-leading-space: 4px;
+    --md-text-button-trailing-space: 4px;
+  }
+
+  .grid-menu span {
+    color: var(--clr-primary, #1456e0);
+    cursor: pointer;
+  }
+
+  .header {
+    font-weight: bold;
+    display: flex;
+    user-select: none;
+    align-items: center;
+    padding-right: calc(var(--_ix-grid-cell-padding) + 2px);
+    position: relative;
+
+    &:not(.frozen):not(.last).border::after {
+      content: '';
+      display: block;
+      position: absolute;
+      border: 0;
+      border-right-width: var(--ix-grid-header-border-width, 2px);
+      border-color: var(
+        --ix-grid-header-border-color,
+        var(--clr-outline, #0922411f)
+      );
+      border-style: solid;
+      margin-right: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    .header-label {
+      position: relative;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      flex-grow: 1;
+      z-index: 2;
+      padding-left: 0.25rem;
+    }
+  }
+
+  .header .header-sort-icon {
+    background: #fff;
+    display: none;
+    padding-left: 5px;
+    font-size: 17px;
+    color: rgba(0, 0, 0, 0.54);
+    cursor: pointer;
+    height: 18px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+  }
+
+  .header:hover .header-sort-icon {
+    display: block;
+  }
+
+  .columns-reordering {
+    opacity: 0.25;
+  }
+
+  .progress-container {
+    position: relative;
+    top: 60px;
+    z-index: 1;
+  }
+
+  span .disabled {
+    color: var(--clr-on-surface-variant, rgba(9, 34, 65, 0.7));
+  }
+
+  .disable-cursor {
+    cursor: default !important;
+  }
+
+  .accounts {
+    display: flex;
+    align-items: center;
+  }
+
+  .account-name {
+    margin: 0 8px 0 3px;
+  }
+
+  vaadin-grid-cell-content {
+    font-family: var(--text-small-font, sans-serif);
+    font-size: var(--text-small-size, 0.875rem);
+    letter-spacing: var(--text-small-letter-spacing, 0.0275em);
+    line-height: var(--text-small-line-height, 1.42857143em);
+    font-weight: var(--text-small-weight, normal);
+    text-decoration: var(--text-small-decoration, none);
+    text-transform: var(--text-small-transform, none);
+    --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);
+  }
+
+  vaadin-grid-cell-content > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .row-controls {
+    border-top: solid 1px var(--clr-border-outline, #0922411f);
+  }
+
+  .row-limit {
+    display: flex;
+    padding: 8px;
+  }
+
+  .remove-all-button {
+    margin-left: auto;
+  }
+
+  /* launchpad variant */
+  .launchpad vaadin-grid {
+    --_lumo-grid-border-width: 0;
+    --lumo-size-xl: auto;
+  }
+
+  .launchpad vaadin-grid-cell-content {
+    padding: 11px 24px;
+    border-bottom: 0;
+  }
+
+  .launchpad vaadin-grid::part(body-row) {
+    border-bottom: 1px solid var(--clr-border-outline, rgba(9, 34, 65, 0.12));
+  }
+
+  .launchpad .grid-header {
+    padding: 0.5rem 18px 0;
+  }
+
+  .launchpad .header {
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+  }
+
+  .launchpad .grid-header h2 {
+    font-family: var(--text-page-title-font, sans-serif);
+    font-size: var(--text-page-title-size, 2.125rem);
+    letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);
+    line-height: var(--text-page-title-line-height, 1.17647059em);
+    font-weight: var(--text-page-title-weight, bold);
+    text-decoration: var(--text-page-title-decoration, none);
+    text-transform: var(--text-page-title-transform, none);
+  }
+
+  vaadin-grid-cell-content {
+    height: var(--ix-grid-cell-height, 52px);
+  }
+
+  @media only screen and (max-width: 840px) {
+    .grid-header {
+      display: flex;
+      flex-direction: row;
+      padding: 1rem;
+      justify-content: space-between;
+    }
+    .grid-menu {
+      padding-left: 0;
+      margin-left: -4px;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    .grid-header {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 1rem;
+      gap: 12px;
+    }
+    .grid-container {
+      border-radius: 0;
+      box-shadow: none;
+      padding: 0;
+      overflow: hidden;
+    }
+  }
+  .column-max-width-set {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+`;

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid-view-styles.js","sourceRoot":"","sources":["grid-view-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyRlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridViewStyles = css`\n  :host {\n    --_ix-grid-cell-padding: var(--ix-grid-cell-padding, 1rem);\n    --lumo-primary-color-50pct: transparent;\n  }\n\n  vaadin-grid::part(first-frozen-to-end-cell) {\n    border-left: 0.063rem solid var(--_lumo-grid-border-color);\n    box-shadow: -0.375rem 0 0.375rem -0.375rem #0000001a;\n  }\n\n  * {\n    font-family: inherit;\n  }\n\n  vaadin-grid::part(cell) {\n    cursor: var(--ix-grid-cell-pointer, pointer);\n  }\n\n  vaadin-grid::part(header-cell) {\n    cursor: default;\n    --vaadin-grid-cell-background: #fff;\n  }\n\n  vaadin-grid::part(row):hover {\n    --vaadin-grid-cell-background: #f5f5f5;\n  }\n\n  vaadin-grid-cell-content {\n    font-size: 14px;\n    --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);\n  }\n\n  .hide-column-headers::part(header-cell) {\n    display: none;\n  }\n\n  vaadin-grid::part(ix-disabled-cell) {\n    cursor: default;\n    color: var(--cp-neutral-blue-60p);\n    --vaadin-grid-cell-background: var(--cp-neutral-blue-12p);\n  }\n\n  ix-grid-download-menu {\n    width: 38px;\n    margin-right: 2px;\n  }\n\n  ix-grid-column-filter {\n    width: 36px;\n  }\n\n  .grid-container {\n    background-color: var(--clr-surface-container-lowest, #ffffff);\n    border-radius: 8px;\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: 2px;\n  }\n\n  .touch-edge {\n    margin: 0 -3px;\n  }\n\n  .grid-header {\n    display: flex;\n    -webkit-box-pack: justify;\n    place-content: space-between;\n    -webkit-box-align: center;\n    align-items: center;\n    padding: 1rem;\n    flex-wrap: wrap;\n    gap: 18px;\n  }\n\n  .grid-menu {\n    display: flex;\n    align-items: center;\n    margin-left: auto;\n  }\n\n  .grid-menu ix-button {\n    --md-text-button-leading-space: 4px;\n    --md-text-button-trailing-space: 4px;\n  }\n\n  .grid-menu span {\n    color: var(--clr-primary, #1456e0);\n    cursor: pointer;\n  }\n\n  .header {\n    font-weight: bold;\n    display: flex;\n    user-select: none;\n    align-items: center;\n    padding-right: calc(var(--_ix-grid-cell-padding) + 2px);\n    position: relative;\n\n    &:not(.frozen):not(.last).border::after {\n      content: '';\n      display: block;\n      position: absolute;\n      border: 0;\n      border-right-width: var(--ix-grid-header-border-width, 2px);\n      border-color: var(\n        --ix-grid-header-border-color,\n        var(--clr-outline, #0922411f)\n      );\n      border-style: solid;\n      margin-right: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 1;\n    }\n\n    .header-label {\n      position: relative;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      flex-grow: 1;\n      z-index: 2;\n      padding-left: 0.25rem;\n    }\n  }\n\n  .header .header-sort-icon {\n    background: #fff;\n    display: none;\n    padding-left: 5px;\n    font-size: 17px;\n    color: rgba(0, 0, 0, 0.54);\n    cursor: pointer;\n    height: 18px;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 3;\n  }\n\n  .header:hover .header-sort-icon {\n    display: block;\n  }\n\n  .columns-reordering {\n    opacity: 0.25;\n  }\n\n  .progress-container {\n    position: relative;\n    top: 60px;\n    z-index: 1;\n  }\n\n  span .disabled {\n    color: var(--clr-on-surface-variant, 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\n  .account-name {\n    margin: 0 8px 0 3px;\n  }\n\n  vaadin-grid-cell-content {\n    font-family: var(--text-small-font, sans-serif);\n    font-size: var(--text-small-size, 0.875rem);\n    letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n    line-height: var(--text-small-line-height, 1.42857143em);\n    font-weight: var(--text-small-weight, normal);\n    text-decoration: var(--text-small-decoration, none);\n    text-transform: var(--text-small-transform, none);\n    --_cell-padding: var(--ix-grid-cell-padding, 14px 10px);\n  }\n\n  vaadin-grid-cell-content > div {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .row-controls {\n    border-top: solid 1px var(--clr-border-outline, #0922411f);\n  }\n\n  .row-limit {\n    display: flex;\n    padding: 8px;\n  }\n\n  .remove-all-button {\n    margin-left: auto;\n  }\n\n  /* launchpad variant */\n  .launchpad vaadin-grid {\n    --_lumo-grid-border-width: 0;\n    --lumo-size-xl: auto;\n  }\n\n  .launchpad vaadin-grid-cell-content {\n    padding: 11px 24px;\n    border-bottom: 0;\n  }\n\n  .launchpad vaadin-grid::part(body-row) {\n    border-bottom: 1px solid var(--clr-border-outline, rgba(9, 34, 65, 0.12));\n  }\n\n  .launchpad .grid-header {\n    padding: 0.5rem 18px 0;\n  }\n\n  .launchpad .header {\n    font-family: var(--text-caption-font, sans-serif);\n    font-size: var(--text-caption-size, 0.75rem);\n    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n    line-height: var(--text-caption-line-height, 1.33333333em);\n    font-weight: var(--text-caption-weight, normal);\n    text-transform: var(--text-caption-transform, none);\n    text-decoration: var(--text-caption-decoration, none);\n  }\n\n  .launchpad .grid-header h2 {\n    font-family: var(--text-page-title-font, sans-serif);\n    font-size: var(--text-page-title-size, 2.125rem);\n    letter-spacing: var(--text-page-title-letter-spacing, 0.01029412em);\n    line-height: var(--text-page-title-line-height, 1.17647059em);\n    font-weight: var(--text-page-title-weight, bold);\n    text-decoration: var(--text-page-title-decoration, none);\n    text-transform: var(--text-page-title-transform, none);\n  }\n\n  vaadin-grid-cell-content {\n    height: var(--ix-grid-cell-height, 52px);\n  }\n\n  @media only screen and (max-width: 840px) {\n    .grid-header {\n      display: flex;\n      flex-direction: row;\n      padding: 1rem;\n      justify-content: space-between;\n    }\n    .grid-menu {\n      padding-left: 0;\n      margin-left: -4px;\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .grid-header {\n      display: flex;\n      align-items: flex-start;\n      flex-direction: column;\n      padding: 1rem;\n      gap: 12px;\n    }\n    .grid-container {\n      border-radius: 0;\n      box-shadow: none;\n      padding: 0;\n      overflow: hidden;\n    }\n  }\n  .column-max-width-set {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display: block;\n  }\n`;\n"]}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export { IxGrid } from './IxGrid.js';
+export { IxGridNavigation } from './components/IxGridNav.js';
+export { IxGridNoRows } from './components/IxGridNoRows.js';

package/src/index.js

@@ -0,0 +1,3 @@
+export { IxGrid } from './IxGrid.js';
+export { IxGridNavigation } from './components/IxGridNav.js';
+export { IxGridNoRows } from './components/IxGridNoRows.js';

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC","sourcesContent":["export { IxGrid } from './IxGrid.js';\nexport { IxGridNavigation } from './components/IxGridNav.js';\nexport { IxGridNoRows } from './components/IxGridNoRows.js';\n"]}

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

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

package/src/ix-grid-copy.js

@@ -0,0 +1,12 @@
+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',
+    add: 'ADD',
+    removeAll: 'REMOVE ALL',
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-copy.js","sourceRoot":"","sources":["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;IACrB,GAAG,EAAE,KAAK;IACV,SAAS,EAAE,YAAY;CACxB,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  add: 'ADD',\n  removeAll: 'REMOVE ALL',\n};\n"]}

package/src/ix-grid-nav.d.ts

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

package/src/ix-grid-nav.js

@@ -0,0 +1,2 @@
+import { IxGridNavigation } from './components/IxGridNav.js';
+window.customElements.define('ix-grid-nav', IxGridNavigation);

package/src/ix-grid-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-nav.js","sourceRoot":"","sources":["ix-grid-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["import { IxGridNavigation } from './components/IxGridNav.js';\n\nwindow.customElements.define('ix-grid-nav', IxGridNavigation);\n"]}

package/src/ix-grid-no-rows.d.ts

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

package/src/ix-grid-no-rows.js

@@ -0,0 +1,2 @@
+import { IxGridNoRows } from './components/IxGridNoRows.js';
+window.customElements.define('ix-grid-no-rows', IxGridNoRows);

package/src/ix-grid-no-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-no-rows.js","sourceRoot":"","sources":["ix-grid-no-rows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { IxGridNoRows } from './components/IxGridNoRows.js';\n\nwindow.customElements.define('ix-grid-no-rows', IxGridNoRows);\n"]}

package/src/ix-grid.d.ts

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

package/src/ix-grid.js

@@ -0,0 +1,2 @@
+import { IxGrid } from './IxGrid.js';
+window.customElements.define('ix-grid', IxGrid);

package/src/ix-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid.js","sourceRoot":"","sources":["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/src/models/IxGridDownloadMenuItemModel.d.ts

@@ -0,0 +1,7 @@
+export interface IxGridDownloadMenuItemModel {
+    name: string;
+    label: string;
+    onClick: (name: string) => void;
+    disabled?: boolean;
+    hidden?: boolean;
+}

package/src/models/IxGridDownloadMenuItemModel.js

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

package/src/models/IxGridDownloadMenuItemModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxGridDownloadMenuItemModel.js","sourceRoot":"","sources":["IxGridDownloadMenuItemModel.ts"],"names":[],"mappings":"","sourcesContent":["export interface IxGridDownloadMenuItemModel {\n  name: string;\n  label: string;\n  onClick: (name: string) => void;\n  disabled?: boolean;\n  hidden?: boolean;\n}\n"]}

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

@@ -0,0 +1,41 @@
+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,
+    },
+    {
+        name: 'email',
+        header: 'Email',
+        hidden: false,
+        filterable: 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);
+    });
+});