@spectrum-web-components/table 0.36.0 → 0.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -246,8 +246,11 @@ For large amounts of data, the `<sp-table>` can be virtualised to easily add tab
246
246
  return items;
247
247
  }
248
248
 
249
- const initTable = () => {
249
+ const initTable = async () => {
250
250
  const table = document.querySelector('#table-virtualized-demo');
251
+
252
+ await table.updateComplete;
253
+ await table.closest('code-example')?.updateComplete;
251
254
  table.items = initItems(50);
252
255
 
253
256
  table.renderItem = (item, index) => {
@@ -260,8 +263,10 @@ For large amounts of data, the `<sp-table>` can be virtualised to easily add tab
260
263
  return [cell1, cell2, cell3];
261
264
  }
262
265
  };
263
- customElements.whenDefined('sp-table').then(() => {
264
- initTable();
266
+ customElements.whenDefined('code-example').then(() => {
267
+ customElements.whenDefined('sp-table').then(() => {
268
+ initTable();
269
+ });
265
270
  });
266
271
  </script>
267
272
 
@@ -373,8 +378,11 @@ By default the `selected` property will surface an array of item indexes that ar
373
378
  return items;
374
379
  }
375
380
 
376
- const initTable = () => {
381
+ const initTable = async () => {
377
382
  const table = document.querySelector('#table-item-value-demo');
383
+
384
+ await table.updateComplete;
385
+ await table.closest('code-example')?.updateComplete;
378
386
  table.items = initItems(50);
379
387
  table.itemValue = (item) => item.id;
380
388
 
@@ -393,8 +401,10 @@ By default the `selected` property will surface an array of item indexes that ar
393
401
  selected.textContent = `Selected: ${JSON.stringify(event.target.selected, null, ' ')}`;
394
402
  });
395
403
  };
396
- customElements.whenDefined('sp-table').then(() => {
397
- initTable();
404
+ customElements.whenDefined('code-example').then(() => {
405
+ customElements.whenDefined('sp-table').then(() => {
406
+ initTable();
407
+ });
398
408
  });
399
409
  </script>
400
410
 
@@ -472,8 +482,11 @@ All values in the item array are assumed to be homogenous by default. This means
472
482
  return items;
473
483
  }
474
484
 
475
- const initTable = () => {
485
+ const initTable = async () => {
476
486
  const table = document.querySelector('#table-row-type-demo');
487
+
488
+ await table.updateComplete;
489
+ await table.closest('code-example')?.updateComplete;
477
490
  const items = initItems(50);
478
491
  items.splice(3, 0, {
479
492
  _$rowType$: 1,
@@ -496,8 +509,10 @@ All values in the item array are assumed to be homogenous by default. This means
496
509
  return [cell1, cell2, cell3];
497
510
  };
498
511
  };
499
- customElements.whenDefined('sp-table').then(() => {
500
- initTable();
512
+ customElements.whenDefined('code-example').then(() => {
513
+ customElements.whenDefined('sp-table').then(() => {
514
+ initTable();
515
+ });
501
516
  });
502
517
  </script>
503
518
 
@@ -591,9 +606,12 @@ For each table column you want to sort, use the `sortable` attribute in its resp
591
606
 
592
607
  let items = initItems(50);
593
608
 
594
- const initTable = () => {
609
+ const initTable = async () => {
595
610
  const table = document.querySelector('#sorted-virtualized-table');
596
611
 
612
+ await table.updateComplete;
613
+ await table.closest('code-example')?.updateComplete;
614
+
597
615
  table.items = items;
598
616
 
599
617
  table.renderItem = (item, index) => {
@@ -618,7 +636,9 @@ For each table column you want to sort, use the `sortable` attribute in its resp
618
636
  });
619
637
  };
620
638
 
621
- customElements.whenDefined('sp-table').then(() => {
622
- initTable();
639
+ customElements.whenDefined('code-example').then(() => {
640
+ customElements.whenDefined('sp-table').then(() => {
641
+ initTable();
642
+ });
623
643
  });
624
644
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/table",
3
- "version": "0.36.0",
3
+ "version": "0.38.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -116,11 +116,11 @@
116
116
  ],
117
117
  "dependencies": {
118
118
  "@lit-labs/observers": "^2.0.0",
119
- "@lit-labs/virtualizer": "^2.0.2",
120
- "@spectrum-web-components/base": "^0.36.0",
121
- "@spectrum-web-components/checkbox": "^0.36.0",
122
- "@spectrum-web-components/icon": "^0.36.0",
123
- "@spectrum-web-components/icons-ui": "^0.36.0"
119
+ "@lit-labs/virtualizer": "^2.0.6",
120
+ "@spectrum-web-components/base": "^0.38.0",
121
+ "@spectrum-web-components/checkbox": "^0.38.0",
122
+ "@spectrum-web-components/icon": "^0.38.0",
123
+ "@spectrum-web-components/icons-ui": "^0.38.0"
124
124
  },
125
125
  "devDependencies": {
126
126
  "@spectrum-css/table": "^4.0.66"
@@ -132,5 +132,5 @@
132
132
  "./elements.js",
133
133
  "./**/*.dev.js"
134
134
  ],
135
- "gitHead": "a532ff8a410abeefb54d9638a2316ae82570566e"
135
+ "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
136
136
  }
package/src/Table.dev.js CHANGED
@@ -12,6 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
12
12
  };
13
13
  import {
14
14
  html,
15
+ nothing,
15
16
  render,
16
17
  SizedMixin,
17
18
  SpectrumElement
@@ -36,7 +37,7 @@ export var RowType = /* @__PURE__ */ ((RowType2) => {
36
37
  })(RowType || {});
37
38
  export class Table extends SizedMixin(SpectrumElement, {
38
39
  validSizes: ["s", "m"],
39
- defaultSize: "m"
40
+ noDefaultSize: true
40
41
  }) {
41
42
  constructor() {
42
43
  super(...arguments);
@@ -72,7 +73,7 @@ export class Table extends SizedMixin(SpectrumElement, {
72
73
  <sp-table-checkbox-cell
73
74
  ?checked=${selected}
74
75
  ></sp-table-checkbox-cell>
75
- ` : html``}
76
+ ` : nothing}
76
77
  ${fn(item, index)}
77
78
  </sp-table-row>
78
79
  `;
@@ -134,6 +135,7 @@ export class Table extends SizedMixin(SpectrumElement, {
134
135
  this.tableHeadCheckboxCell.indeterminate = false;
135
136
  }
136
137
  manageSelects() {
138
+ var _a;
137
139
  const checkboxes = this.querySelectorAll("sp-table-checkbox-cell");
138
140
  const checkbox = document.createElement("sp-table-checkbox-cell");
139
141
  if (!!this.selects) {
@@ -155,7 +157,7 @@ export class Table extends SizedMixin(SpectrumElement, {
155
157
  this.tableHeadCheckboxCell = document.createElement(
156
158
  "sp-table-checkbox-cell"
157
159
  );
158
- this.tableHead.insertAdjacentElement(
160
+ (_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
159
161
  "afterbegin",
160
162
  this.tableHeadCheckboxCell
161
163
  );
@@ -207,14 +209,14 @@ export class Table extends SizedMixin(SpectrumElement, {
207
209
  }
208
210
  }
209
211
  manageCheckboxes() {
210
- var _a;
212
+ var _a, _b, _c;
211
213
  if (!!this.selects) {
212
214
  this.tableHeadCheckboxCell = document.createElement(
213
215
  "sp-table-checkbox-cell"
214
216
  );
215
217
  const allSelected = this.selected.length === this.tableRows.length;
216
218
  this.manageHeadCheckbox(allSelected);
217
- this.tableHead.insertAdjacentElement(
219
+ (_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
218
220
  "afterbegin",
219
221
  this.tableHeadCheckboxCell
220
222
  );
@@ -227,7 +229,7 @@ export class Table extends SizedMixin(SpectrumElement, {
227
229
  checkbox.checked = row.selected;
228
230
  });
229
231
  } else {
230
- (_a = this.tableHead.querySelector("sp-table-checkbox-cell")) == null ? void 0 : _a.remove();
232
+ (_c = (_b = this.tableHead) == null ? void 0 : _b.querySelector("sp-table-checkbox-cell")) == null ? void 0 : _c.remove();
231
233
  this.tableRows.forEach((row) => {
232
234
  var _a2;
233
235
  (_a2 = row.checkboxCells[0]) == null ? void 0 : _a2.remove();
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Table.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.dev.js'\nimport type { TableCheckboxCell } from './TableCheckboxCell.dev.js'\nimport type { TableHead } from './TableHead.dev.js'\nimport type { TableHeadCell } from './TableHeadCell.dev.js'\nimport type { TableRow } from './TableRow.dev.js'\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\n}\n\n/**\n * @element sp-table\n *\n * @fires rangeChanged - Announces a change in the range of visible cells on the table body\n * @event change - Announces a change in the `selected` property of a table row\n */\n\nexport class Table extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm'],\n defaultSize: 'm',\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n get renderItem(): (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult {\n return this._renderItem;\n }\n\n set renderItem(\n fn: (item: Record<string, unknown>, index: number) => TemplateResult\n ) {\n this._renderItem = (\n item: Record<string, unknown>,\n index: number\n ): TemplateResult => {\n const value = this.itemValue(item, index);\n const selected = this.selected.includes(value);\n const hasCheckbox = this.selects && item?._$rowType$ !== 1;\n\n return html`\n <sp-table-row\n value=${value}\n aria-rowindex=${index + 1}\n ?selected=${selected}\n >\n ${hasCheckbox\n ? html`\n <sp-table-checkbox-cell\n ?checked=${selected}\n ></sp-table-checkbox-cell>\n `\n : html``}\n ${fn(item, index)}\n </sp-table-row>\n `;\n };\n }\n\n private _renderItem: (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult = /* c8 ignore next */ () => html``;\n\n @property({ reflect: true })\n public role = 'grid';\n\n /**\n * Whether the Table allows users to select a row or rows, and thus controls whether or not the Table also renders checkboxes.\n */\n @property({ type: String, reflect: true })\n public selects: undefined | 'single' | 'multiple';\n\n /**\n * An array of <sp-row> values that have been selected.\n */\n @property({ type: Array })\n public selected: string[] = [];\n\n private selectedSet = new Set<string>();\n\n /**\n * The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).\n */\n @property({ type: Array })\n public items: Record<string, unknown>[] = [];\n\n /**\n * The value of an item. By default, it is set to the index of the sp-table-row.\n */\n @property({ type: Object })\n public itemValue = (_item: unknown, index: number): string => {\n return `${index}`;\n };\n\n /**\n * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.\n */\n @property({ type: Boolean, reflect: true })\n public scroller = false;\n\n private tableBody?: TableBody;\n\n private tableHeadCheckboxCell?: TableCheckboxCell;\n\n private get tableHead(): TableHead {\n return this.querySelector('sp-table-head') as TableHead;\n }\n\n private get tableRows(): TableRow[] {\n if (this.isVirtualized) {\n return [];\n }\n return [...this.querySelectorAll('sp-table-row')] as TableRow[];\n }\n\n private get isVirtualized(): boolean {\n return !!this.items.length;\n }\n\n public override focus(): void {\n const sortableHeadCell = this.querySelector(\n 'sp-table-head-cell[sortable]'\n ) as TableHeadCell;\n if (sortableHeadCell) {\n sortableHeadCell.focus();\n }\n }\n\n private selectAllRows(): void {\n if (this.isVirtualized) {\n this.items.forEach((item, index: number) => {\n if (item._$rowType$ !== 1) {\n this.selectedSet.add(this.itemValue(item, index));\n }\n });\n } else {\n this.tableRows.forEach((row) => {\n row.selected = true; // Visually\n this.selectedSet.add(row.value); // Prepares table state\n });\n }\n this.selected = [...this.selectedSet];\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = true;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n private deselectAllRows(): void {\n this.selectedSet.clear();\n this.selected = [];\n\n if (!this.isVirtualized) {\n const selectedRows = [\n ...this.querySelectorAll('[selected]'),\n ] as TableRow[];\n\n selectedRows.forEach((row) => {\n row.selected = false;\n });\n }\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = false;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n protected manageSelects(): void {\n const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n const checkbox = document.createElement('sp-table-checkbox-cell');\n if (!!this.selects) {\n let allSelected = false;\n if (this.isVirtualized) {\n allSelected =\n this.selected.length > 0 &&\n this.selected.length === this.items.length;\n } else {\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n checkboxes.forEach((box) => {\n box.remove();\n });\n delete this.tableHeadCheckboxCell;\n }\n }\n\n protected validateSelected(): void {\n const rowValues = new Set<string>();\n\n if (this.isVirtualized) {\n this.items.forEach((item, index) => {\n const value = this.itemValue(item, index);\n rowValues.add(value);\n });\n } else {\n this.tableRows.forEach((row) => {\n rowValues.add(row.value);\n });\n }\n\n const oldSelectedCount = this.selected.length;\n\n this.selected = this.selected.filter((selectedItem) =>\n rowValues.has(selectedItem)\n );\n if (oldSelectedCount !== this.selected.length) {\n this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n }\n this.selectedSet = new Set(this.selected);\n }\n\n protected manageSelected(): void {\n this.validateSelected();\n\n if (this.isVirtualized) return;\n\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n });\n if (this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.checked =\n this.selected.length === this.tableRows.length;\n }\n }\n\n protected manageCheckboxes(): void {\n if (!!this.selects) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n );\n const allSelected = this.selected.length === this.tableRows.length;\n\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n this.tableHead.querySelector('sp-table-checkbox-cell')?.remove();\n this.tableRows.forEach((row) => {\n row.checkboxCells[0]?.remove();\n if (this.selected.length) {\n row.selected = this.selectedSet.has(row.value);\n }\n });\n }\n }\n\n protected manageHeadCheckbox(allSelected: boolean): void {\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n\n this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n }\n\n protected handleChange(event: Event): void {\n event.stopPropagation();\n\n const previousSelectedSet = new Set(this.selectedSet);\n const previousSelected = [...this.selected];\n\n const { target } = event;\n const { parentElement: rowItem } = target as HTMLElement & {\n parentElement: TableRow;\n };\n if (!rowItem.value) {\n const { checkbox } = target as TableCheckboxCell;\n if (!checkbox) return;\n if (checkbox.checked || checkbox.indeterminate) {\n this.selectAllRows();\n } else {\n this.deselectAllRows();\n }\n } else {\n switch (this.selects) {\n case 'single': {\n this.deselectAllRows();\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n this.selected = [...this.selectedSet];\n }\n break;\n }\n case 'multiple': {\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n } else {\n this.selectedSet.delete(rowItem.value);\n }\n this.selected = [...this.selectedSet];\n\n const allSelected =\n this.selected.length === this.tableRows.length;\n\n if (!this.tableHeadCheckboxCell)\n /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n break;\n }\n default: {\n break;\n }\n }\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n this.selectedSet = previousSelectedSet;\n this.selected = previousSelected;\n }\n }\n\n public scrollToIndex(index?: number): void {\n if (index && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @change=${this.handleChange}></slot>\n `;\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.validateSelected();\n this.manageCheckboxes();\n }\n if (changed.has('selects')) {\n this.manageSelects();\n }\n\n if (changed.has('selected') && this.hasUpdated) {\n this.manageSelected();\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n }\n }\n\n protected renderVirtualizedItems(): void {\n // Rendering updates into the table while disconnected can\n // cause runaway event binding in ancestor elements.\n if (!this.isConnected) return;\n if (!this.tableBody) {\n this.tableBody = this.querySelector('sp-table-body') as TableBody;\n if (!this.tableBody) {\n this.tableBody = document.createElement('sp-table-body');\n this.append(this.tableBody);\n }\n this.tableBody.addEventListener(\n 'rangeChanged',\n (event: RangeChangedEvent) => {\n this.dispatchEvent(\n new RangeChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\n };\n render(\n html`\n ${virtualize(config)}\n `,\n this.tableBody\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.dev.js'\nimport type { TableCheckboxCell } from './TableCheckboxCell.dev.js'\nimport type { TableHead } from './TableHead.dev.js'\nimport type { TableHeadCell } from './TableHeadCell.dev.js'\nimport type { TableRow } from './TableRow.dev.js'\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\n}\n\n/**\n * @element sp-table\n *\n * @fires rangeChanged - Announces a change in the range of visible cells on the table body\n * @event change - Announces a change in the `selected` property of a table row\n */\n\nexport class Table extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n get renderItem(): (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult {\n return this._renderItem;\n }\n\n set renderItem(\n fn: (item: Record<string, unknown>, index: number) => TemplateResult\n ) {\n this._renderItem = (\n item: Record<string, unknown>,\n index: number\n ): TemplateResult => {\n const value = this.itemValue(item, index);\n const selected = this.selected.includes(value);\n const hasCheckbox = this.selects && item?._$rowType$ !== 1;\n\n return html`\n <sp-table-row\n value=${value}\n aria-rowindex=${index + 1}\n ?selected=${selected}\n >\n ${hasCheckbox\n ? html`\n <sp-table-checkbox-cell\n ?checked=${selected}\n ></sp-table-checkbox-cell>\n `\n : nothing}\n ${fn(item, index)}\n </sp-table-row>\n `;\n };\n }\n\n private _renderItem: (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult = /* c8 ignore next */ () => html``;\n\n @property({ reflect: true })\n public role = 'grid';\n\n /**\n * Whether the Table allows users to select a row or rows, and thus controls whether or not the Table also renders checkboxes.\n */\n @property({ type: String, reflect: true })\n public selects: undefined | 'single' | 'multiple';\n\n /**\n * An array of <sp-row> values that have been selected.\n */\n @property({ type: Array })\n public selected: string[] = [];\n\n private selectedSet = new Set<string>();\n\n /**\n * The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).\n */\n @property({ type: Array })\n public items: Record<string, unknown>[] = [];\n\n /**\n * The value of an item. By default, it is set to the index of the sp-table-row.\n */\n @property({ type: Object })\n public itemValue = (_item: unknown, index: number): string => {\n return `${index}`;\n };\n\n /**\n * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.\n */\n @property({ type: Boolean, reflect: true })\n public scroller = false;\n\n private tableBody?: TableBody;\n\n private tableHeadCheckboxCell?: TableCheckboxCell;\n\n private get tableHead(): TableHead {\n return this.querySelector('sp-table-head') as TableHead;\n }\n\n private get tableRows(): TableRow[] {\n if (this.isVirtualized) {\n return [];\n }\n return [...this.querySelectorAll('sp-table-row')] as TableRow[];\n }\n\n private get isVirtualized(): boolean {\n return !!this.items.length;\n }\n\n public override focus(): void {\n const sortableHeadCell = this.querySelector(\n 'sp-table-head-cell[sortable]'\n ) as TableHeadCell;\n if (sortableHeadCell) {\n sortableHeadCell.focus();\n }\n }\n\n private selectAllRows(): void {\n if (this.isVirtualized) {\n this.items.forEach((item, index: number) => {\n if (item._$rowType$ !== 1) {\n this.selectedSet.add(this.itemValue(item, index));\n }\n });\n } else {\n this.tableRows.forEach((row) => {\n row.selected = true; // Visually\n this.selectedSet.add(row.value); // Prepares table state\n });\n }\n this.selected = [...this.selectedSet];\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = true;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n private deselectAllRows(): void {\n this.selectedSet.clear();\n this.selected = [];\n\n if (!this.isVirtualized) {\n const selectedRows = [\n ...this.querySelectorAll('[selected]'),\n ] as TableRow[];\n\n selectedRows.forEach((row) => {\n row.selected = false;\n });\n }\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = false;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n protected manageSelects(): void {\n const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n const checkbox = document.createElement('sp-table-checkbox-cell');\n if (!!this.selects) {\n let allSelected = false;\n if (this.isVirtualized) {\n allSelected =\n this.selected.length > 0 &&\n this.selected.length === this.items.length;\n } else {\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n checkboxes.forEach((box) => {\n box.remove();\n });\n delete this.tableHeadCheckboxCell;\n }\n }\n\n protected validateSelected(): void {\n const rowValues = new Set<string>();\n\n if (this.isVirtualized) {\n this.items.forEach((item, index) => {\n const value = this.itemValue(item, index);\n rowValues.add(value);\n });\n } else {\n this.tableRows.forEach((row) => {\n rowValues.add(row.value);\n });\n }\n\n const oldSelectedCount = this.selected.length;\n\n this.selected = this.selected.filter((selectedItem) =>\n rowValues.has(selectedItem)\n );\n if (oldSelectedCount !== this.selected.length) {\n this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n }\n this.selectedSet = new Set(this.selected);\n }\n\n protected manageSelected(): void {\n this.validateSelected();\n\n if (this.isVirtualized) return;\n\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n });\n if (this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.checked =\n this.selected.length === this.tableRows.length;\n }\n }\n\n protected manageCheckboxes(): void {\n if (!!this.selects) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n );\n const allSelected = this.selected.length === this.tableRows.length;\n\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n this.tableHead?.querySelector('sp-table-checkbox-cell')?.remove();\n this.tableRows.forEach((row) => {\n row.checkboxCells[0]?.remove();\n if (this.selected.length) {\n row.selected = this.selectedSet.has(row.value);\n }\n });\n }\n }\n\n protected manageHeadCheckbox(allSelected: boolean): void {\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n\n this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n }\n\n protected handleChange(event: Event): void {\n event.stopPropagation();\n\n const previousSelectedSet = new Set(this.selectedSet);\n const previousSelected = [...this.selected];\n\n const { target } = event;\n const { parentElement: rowItem } = target as HTMLElement & {\n parentElement: TableRow;\n };\n if (!rowItem.value) {\n const { checkbox } = target as TableCheckboxCell;\n if (!checkbox) return;\n if (checkbox.checked || checkbox.indeterminate) {\n this.selectAllRows();\n } else {\n this.deselectAllRows();\n }\n } else {\n switch (this.selects) {\n case 'single': {\n this.deselectAllRows();\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n this.selected = [...this.selectedSet];\n }\n break;\n }\n case 'multiple': {\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n } else {\n this.selectedSet.delete(rowItem.value);\n }\n this.selected = [...this.selectedSet];\n\n const allSelected =\n this.selected.length === this.tableRows.length;\n\n if (!this.tableHeadCheckboxCell)\n /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n break;\n }\n default: {\n break;\n }\n }\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n this.selectedSet = previousSelectedSet;\n this.selected = previousSelected;\n }\n }\n\n public scrollToIndex(index?: number): void {\n if (index && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @change=${this.handleChange}></slot>\n `;\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.validateSelected();\n this.manageCheckboxes();\n }\n if (changed.has('selects')) {\n this.manageSelects();\n }\n\n if (changed.has('selected') && this.hasUpdated) {\n this.manageSelected();\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n }\n }\n\n protected renderVirtualizedItems(): void {\n // Rendering updates into the table while disconnected can\n // cause runaway event binding in ancestor elements.\n if (!this.isConnected) return;\n if (!this.tableBody) {\n this.tableBody = this.querySelector('sp-table-body') as TableBody;\n if (!this.tableBody) {\n this.tableBody = document.createElement('sp-table-body');\n this.append(this.tableBody);\n }\n this.tableBody.addEventListener(\n 'rangeChanged',\n (event: RangeChangedEvent) => {\n this.dispatchEvent(\n new RangeChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\n };\n render(\n html`\n ${virtualize(config)}\n `,\n this.tableBody\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OAEG;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,gBAAgB;AACzB,OAAO,YAAY;AAMnB;AAAA,EACI;AAAA,EAEA;AAAA,OACG;AAEP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEA,WAAK,UAAL,kBAAKA,aAAL;AACH,EAAAA,kBAAA,UAAO,KAAP;AACA,EAAAA,kBAAA,iBAAc,KAAd;AAFQ,SAAAA;AAAA,GAAA;AAgBL,aAAM,cAAc,WAAW,iBAAiB;AAAA,EACnD,YAAY,CAAC,KAAK,GAAG;AAAA,EACrB,eAAe;AACnB,CAAC,EAAE;AAAA,EAHI;AAAA;AA6CH,SAAQ;AAAA,IAGmC,MAAM;AAGjD,SAAO,OAAO;AAYd,SAAO,WAAqB,CAAC;AAE7B,SAAQ,cAAc,oBAAI,IAAY;AAMtC,SAAO,QAAmC,CAAC;AAM3C,SAAO,YAAY,CAAC,OAAgB,UAA0B;AAC1D,aAAO,GAAG,KAAK;AAAA,IACnB;AAMA,SAAO,WAAW;AAAA;AAAA,EAjFlB,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAEA,IAAI,aAGgB;AAChB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,WACA,IACF;AACE,SAAK,cAAc,CACf,MACA,UACiB;AACjB,YAAM,QAAQ,KAAK,UAAU,MAAM,KAAK;AACxC,YAAM,WAAW,KAAK,SAAS,SAAS,KAAK;AAC7C,YAAM,cAAc,KAAK,YAAW,6BAAM,gBAAe;AAEzD,aAAO;AAAA;AAAA,4BAES,KAAK;AAAA,oCACG,QAAQ,CAAC;AAAA,gCACb,QAAQ;AAAA;AAAA,sBAElB,cACI;AAAA;AAAA,6CAEmB,QAAQ;AAAA;AAAA,8BAG3B,OAAO;AAAA,sBACX,GAAG,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7B;AAAA,EACJ;AAAA,EAgDA,IAAY,YAAuB;AAC/B,WAAO,KAAK,cAAc,eAAe;AAAA,EAC7C;AAAA,EAEA,IAAY,YAAwB;AAChC,QAAI,KAAK,eAAe;AACpB,aAAO,CAAC;AAAA,IACZ;AACA,WAAO,CAAC,GAAG,KAAK,iBAAiB,cAAc,CAAC;AAAA,EACpD;AAAA,EAEA,IAAY,gBAAyB;AACjC,WAAO,CAAC,CAAC,KAAK,MAAM;AAAA,EACxB;AAAA,EAEgB,QAAc;AAC1B,UAAM,mBAAmB,KAAK;AAAA,MAC1B;AAAA,IACJ;AACA,QAAI,kBAAkB;AAClB,uBAAiB,MAAM;AAAA,IAC3B;AAAA,EACJ;AAAA,EAEQ,gBAAsB;AAC1B,QAAI,KAAK,eAAe;AACpB,WAAK,MAAM,QAAQ,CAAC,MAAM,UAAkB;AACxC,YAAI,KAAK,eAAe,GAAG;AACvB,eAAK,YAAY,IAAI,KAAK,UAAU,MAAM,KAAK,CAAC;AAAA,QACpD;AAAA,MACJ,CAAC;AAAA,IACL,OAAO;AACH,WAAK,UAAU,QAAQ,CAAC,QAAQ;AAC5B,YAAI,WAAW;AACf,aAAK,YAAY,IAAI,IAAI,KAAK;AAAA,MAClC,CAAC;AAAA,IACL;AACA,SAAK,WAAW,CAAC,GAAG,KAAK,WAAW;AAEpC,QAAI,CAAC,KAAK;AAA4C;AACtD,SAAK,sBAAsB,UAAU;AACrC,SAAK,sBAAsB,gBAAgB;AAAA,EAC/C;AAAA,EAEQ,kBAAwB;AAC5B,SAAK,YAAY,MAAM;AACvB,SAAK,WAAW,CAAC;AAEjB,QAAI,CAAC,KAAK,eAAe;AACrB,YAAM,eAAe;AAAA,QACjB,GAAG,KAAK,iBAAiB,YAAY;AAAA,MACzC;AAEA,mBAAa,QAAQ,CAAC,QAAQ;AAC1B,YAAI,WAAW;AAAA,MACnB,CAAC;AAAA,IACL;AAEA,QAAI,CAAC,KAAK;AAA4C;AACtD,SAAK,sBAAsB,UAAU;AACrC,SAAK,sBAAsB,gBAAgB;AAAA,EAC/C;AAAA,EAEU,gBAAsB;AAtNpC;AAuNQ,UAAM,aAAa,KAAK,iBAAiB,wBAAwB;AACjE,UAAM,WAAW,SAAS,cAAc,wBAAwB;AAChE,QAAI,CAAC,CAAC,KAAK,SAAS;AAChB,UAAI,cAAc;AAClB,UAAI,KAAK,eAAe;AACpB,sBACI,KAAK,SAAS,SAAS,KACvB,KAAK,SAAS,WAAW,KAAK,MAAM;AAAA,MAC5C,OAAO;AACH,aAAK,UAAU,QAAQ,CAAC,QAAQ;AAC5B,cAAI,WAAW,KAAK,YAAY,IAAI,IAAI,KAAK;AAC7C,cAAI,CAAC,IAAI,cAAc,iCAAiC,GAAG;AACvD,kBAAM,iBACF,SAAS,UAAU;AACvB,gBAAI,sBAAsB,cAAc,cAAc;AACtD,qBAAS,UAAU,IAAI;AAAA,UAC3B;AAAA,QACJ,CAAC;AACD,sBAAc,KAAK,SAAS,WAAW,KAAK,UAAU;AAAA,MAC1D;AAEA,UAAI,CAAC,KAAK,uBAAuB;AAC7B,aAAK,wBAAwB,SAAS;AAAA,UAClC;AAAA,QACJ;AACA,mBAAK,cAAL,mBAAgB;AAAA,UACZ;AAAA,UACA,KAAK;AAAA;AAAA,MAEb;AACA,WAAK,mBAAmB,WAAW;AAAA,IACvC,OAAO;AACH,iBAAW,QAAQ,CAAC,QAAQ;AACxB,YAAI,OAAO;AAAA,MACf,CAAC;AACD,aAAO,KAAK;AAAA,IAChB;AAAA,EACJ;AAAA,EAEU,mBAAyB;AAC/B,UAAM,YAAY,oBAAI,IAAY;AAElC,QAAI,KAAK,eAAe;AACpB,WAAK,MAAM,QAAQ,CAAC,MAAM,UAAU;AAChC,cAAM,QAAQ,KAAK,UAAU,MAAM,KAAK;AACxC,kBAAU,IAAI,KAAK;AAAA,MACvB,CAAC;AAAA,IACL,OAAO;AACH,WAAK,UAAU,QAAQ,CAAC,QAAQ;AAC5B,kBAAU,IAAI,IAAI,KAAK;AAAA,MAC3B,CAAC;AAAA,IACL;AAEA,UAAM,mBAAmB,KAAK,SAAS;AAEvC,SAAK,WAAW,KAAK,SAAS;AAAA,MAAO,CAAC,iBAClC,UAAU,IAAI,YAAY;AAAA,IAC9B;AACA,QAAI,qBAAqB,KAAK,SAAS,QAAQ;AAC3C,WAAK;AAAA,QACD,IAAI,MAAM,UAAU;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,UAAU;AAAA,QACd,CAAC;AAAA,MACL;AAAA,IACJ;AACA,SAAK,cAAc,IAAI,IAAI,KAAK,QAAQ;AAAA,EAC5C;AAAA,EAEU,iBAAuB;AAC7B,SAAK,iBAAiB;AAEtB,QAAI,KAAK;AAAe;AAExB,SAAK,UAAU,QAAQ,CAAC,QAAQ;AAC5B,UAAI,WAAW,KAAK,YAAY,IAAI,IAAI,KAAK;AAAA,IACjD,CAAC;AACD,QAAI,KAAK,uBAAuB;AAC5B,WAAK,sBAAsB,UACvB,KAAK,SAAS,WAAW,KAAK,UAAU;AAAA,IAChD;AAAA,EACJ;AAAA,EAEU,mBAAyB;AA3SvC;AA4SQ,QAAI,CAAC,CAAC,KAAK,SAAS;AAChB,WAAK,wBAAwB,SAAS;AAAA,QAClC;AAAA,MACJ;AACA,YAAM,cAAc,KAAK,SAAS,WAAW,KAAK,UAAU;AAE5D,WAAK,mBAAmB,WAAW;AAEnC,iBAAK,cAAL,mBAAgB;AAAA,QACZ;AAAA,QACA,KAAK;AAAA;AAGT,WAAK,UAAU,QAAQ,CAAC,QAAQ;AAC5B,cAAM,WAAW,SAAS;AAAA,UACtB;AAAA,QACJ;AACA,YAAI,sBAAsB,cAAc,QAAQ;AAChD,YAAI,WAAW,KAAK,YAAY,IAAI,IAAI,KAAK;AAC7C,iBAAS,UAAU,IAAI;AAAA,MAC3B,CAAC;AAAA,IACL,OAAO;AACH,uBAAK,cAAL,mBAAgB,cAAc,8BAA9B,mBAAyD;AACzD,WAAK,UAAU,QAAQ,CAAC,QAAQ;AAnU5C,YAAAC;AAoUgB,SAAAA,MAAA,IAAI,cAAc,CAAC,MAAnB,gBAAAA,IAAsB;AACtB,YAAI,KAAK,SAAS,QAAQ;AACtB,cAAI,WAAW,KAAK,YAAY,IAAI,IAAI,KAAK;AAAA,QACjD;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEU,mBAAmB,aAA4B;AACrD,QAAI,CAAC,KAAK;AAA4C;AAEtD,SAAK,sBAAsB,gBAAgB,KAAK,YAAY;AAC5D,SAAK,sBAAsB,UAAU;AACrC,SAAK,sBAAsB,gBACvB,KAAK,SAAS,SAAS,KAAK,CAAC;AAAA,EACrC;AAAA,EAEU,aAAa,OAAoB;AACvC,UAAM,gBAAgB;AAEtB,UAAM,sBAAsB,IAAI,IAAI,KAAK,WAAW;AACpD,UAAM,mBAAmB,CAAC,GAAG,KAAK,QAAQ;AAE1C,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,EAAE,eAAe,QAAQ,IAAI;AAGnC,QAAI,CAAC,QAAQ,OAAO;AAChB,YAAM,EAAE,SAAS,IAAI;AACrB,UAAI,CAAC;AAAU;AACf,UAAI,SAAS,WAAW,SAAS,eAAe;AAC5C,aAAK,cAAc;AAAA,MACvB,OAAO;AACH,aAAK,gBAAgB;AAAA,MACzB;AAAA,IACJ,OAAO;AACH,cAAQ,KAAK,SAAS;AAAA,QAClB,KAAK,UAAU;AACX,eAAK,gBAAgB;AACrB,cAAI,QAAQ,UAAU;AAClB,iBAAK,YAAY,IAAI,QAAQ,KAAK;AAClC,iBAAK,WAAW,CAAC,GAAG,KAAK,WAAW;AAAA,UACxC;AACA;AAAA,QACJ;AAAA,QACA,KAAK,YAAY;AACb,cAAI,QAAQ,UAAU;AAClB,iBAAK,YAAY,IAAI,QAAQ,KAAK;AAAA,UACtC,OAAO;AACH,iBAAK,YAAY,OAAO,QAAQ,KAAK;AAAA,UACzC;AACA,eAAK,WAAW,CAAC,GAAG,KAAK,WAAW;AAEpC,gBAAM,cACF,KAAK,SAAS,WAAW,KAAK,UAAU;AAE5C,cAAI,CAAC,KAAK;AACe;AACzB,eAAK,sBAAsB,UAAU;AACrC,eAAK,sBAAsB,gBACvB,KAAK,SAAS,SAAS,KAAK,CAAC;AACjC;AAAA,QACJ;AAAA,QACA,SAAS;AACL;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AACA,UAAM,eAAe,KAAK;AAAA,MACtB,IAAI,MAAM,UAAU;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,QAAI,CAAC,cAAc;AACf,YAAM,eAAe;AACrB,WAAK,cAAc;AACnB,WAAK,WAAW;AAAA,IACpB;AAAA,EACJ;AAAA,EAEO,cAAc,OAAsB;AACvC,QAAI,SAAS,CAAC,CAAC,KAAK,WAAW;AAC3B,YAAM,oBAAoB,KAAK;AAG/B,YAAM,OAAO,kBAAkB,cAAc,EAAE,QAAQ,KAAK;AAC5D,UAAI,MAAM;AACN,aAAK,eAAe;AAAA,MACxB;AAAA,IACJ;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,4BACa,KAAK,YAAY;AAAA;AAAA,EAEzC;AAAA,EAEmB,WAAW,SAAqC;AAC/D,QAAI,CAAC,KAAK,YAAY;AAClB,WAAK,iBAAiB;AACtB,WAAK,iBAAiB;AAAA,IAC1B;AACA,QAAI,QAAQ,IAAI,SAAS,GAAG;AACxB,WAAK,cAAc;AAAA,IACvB;AAEA,QAAI,QAAQ,IAAI,UAAU,KAAK,KAAK,YAAY;AAC5C,WAAK,eAAe;AAAA,IACxB;AAAA,EACJ;AAAA,EAEmB,UAAgB;AAC/B,QAAI,KAAK,MAAM,QAAQ;AACnB,WAAK,uBAAuB;AAAA,IAChC;AAAA,EACJ;AAAA,EAEU,yBAA+B;AAGrC,QAAI,CAAC,KAAK;AAAa;AACvB,QAAI,CAAC,KAAK,WAAW;AACjB,WAAK,YAAY,KAAK,cAAc,eAAe;AACnD,UAAI,CAAC,KAAK,WAAW;AACjB,aAAK,YAAY,SAAS,cAAc,eAAe;AACvD,aAAK,OAAO,KAAK,SAAS;AAAA,MAC9B;AACA,WAAK,UAAU;AAAA,QACX;AAAA,QACA,CAAC,UAA6B;AAC1B,eAAK;AAAA,YACD,IAAI,kBAAkB;AAAA,cAClB,OAAO,MAAM;AAAA,cACb,MAAM,MAAM;AAAA,YAChB,CAAC;AAAA,UACL;AAAA,QACJ;AAAA,MACJ;AACA,WAAK,UAAU;AAAA,QACX;AAAA,QACA,CAAC,UAAkC;AAC/B,eAAK;AAAA,YACD,IAAI,uBAAuB;AAAA,cACvB,OAAO,MAAM;AAAA,cACb,MAAM,MAAM;AAAA,YAChB,CAAC;AAAA,UACL;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AACA,UAAM,SAA6D;AAAA,MAC/D,OAAO,KAAK;AAAA,MACZ,YAAY,KAAK;AAAA,MACjB,UAAU,KAAK;AAAA,IACnB;AACA;AAAA,MACI;AAAA,kBACM,WAAW,MAAM,CAAC;AAAA;AAAA,MAExB,KAAK;AAAA,IACT;AAAA,EACJ;AAAA,EAEgB,uBAA6B;AACzC,UAAM,qBAAqB;AAAA,EAC/B;AACJ;AA9XW;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAlDlB,MAmDF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxDhC,MAyDF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GA9DhB,MA+DF;AAQA;AAAA,EADN,SAAS,EAAE,MAAM,MAAM,CAAC;AAAA,GAtEhB,MAuEF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5EjB,MA6EF;AAQA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApFjC,MAqFF;",
6
6
  "names": ["RowType", "_a"]
7
7
  }
package/src/Table.js CHANGED
@@ -1,19 +1,19 @@
1
- "use strict";var b=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=(h,o,e,t)=>{for(var l=t>1?void 0:t?u(o,e):o,s=h.length-1,i;s>=0;s--)(i=h[s])&&(l=(t?i(o,e,l):i(l))||l);return t&&l&&b(o,e,l),l};import{html as r,render as p,SizedMixin as m,SpectrumElement as f}from"@spectrum-web-components/base";import"@spectrum-web-components/table/sp-table-body.js";import"@spectrum-web-components/table/sp-table-row.js";import"@spectrum-web-components/table/sp-table-checkbox-cell.js";import{property as d}from"@spectrum-web-components/base/src/decorators.js";import C from"./table.css.js";import{virtualize as k,virtualizerRef as g}from"@lit-labs/virtualizer/virtualize.js";import{RangeChangedEvent as v,VisibilityChangedEvent as x}from"@lit-labs/virtualizer/events.js";export var RowType=(e=>(e[e.ITEM=0]="ITEM",e[e.INFORMATION=1]="INFORMATION",e))(RowType||{});export class Table extends m(f,{validSizes:["s","m"],defaultSize:"m"}){constructor(){super(...arguments);this._renderItem=()=>r``;this.role="grid";this.selected=[];this.selectedSet=new Set;this.items=[];this.itemValue=(e,t)=>`${t}`;this.scroller=!1}static get styles(){return[C]}get renderItem(){return this._renderItem}set renderItem(e){this._renderItem=(t,l)=>{const s=this.itemValue(t,l),i=this.selected.includes(s),n=this.selects&&(t==null?void 0:t._$rowType$)!==1;return r`
1
+ "use strict";var b=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(n,o,e,t)=>{for(var s=t>1?void 0:t?u(o,e):o,i=n.length-1,l;i>=0;i--)(l=n[i])&&(s=(t?l(o,e,s):l(s))||s);return t&&s&&b(o,e,s),s};import{html as h,nothing as p,render as m,SizedMixin as f,SpectrumElement as C}from"@spectrum-web-components/base";import"@spectrum-web-components/table/sp-table-body.js";import"@spectrum-web-components/table/sp-table-row.js";import"@spectrum-web-components/table/sp-table-checkbox-cell.js";import{property as d}from"@spectrum-web-components/base/src/decorators.js";import g from"./table.css.js";import{virtualize as k,virtualizerRef as v}from"@lit-labs/virtualizer/virtualize.js";import{RangeChangedEvent as x,VisibilityChangedEvent as S}from"@lit-labs/virtualizer/events.js";export var RowType=(e=>(e[e.ITEM=0]="ITEM",e[e.INFORMATION=1]="INFORMATION",e))(RowType||{});export class Table extends f(C,{validSizes:["s","m"],noDefaultSize:!0}){constructor(){super(...arguments);this._renderItem=()=>h``;this.role="grid";this.selected=[];this.selectedSet=new Set;this.items=[];this.itemValue=(e,t)=>`${t}`;this.scroller=!1}static get styles(){return[g]}get renderItem(){return this._renderItem}set renderItem(e){this._renderItem=(t,s)=>{const i=this.itemValue(t,s),l=this.selected.includes(i),a=this.selects&&(t==null?void 0:t._$rowType$)!==1;return h`
2
2
  <sp-table-row
3
- value=${s}
4
- aria-rowindex=${l+1}
5
- ?selected=${i}
3
+ value=${i}
4
+ aria-rowindex=${s+1}
5
+ ?selected=${l}
6
6
  >
7
- ${n?r`
7
+ ${a?h`
8
8
  <sp-table-checkbox-cell
9
- ?checked=${i}
9
+ ?checked=${l}
10
10
  ></sp-table-checkbox-cell>
11
- `:r``}
12
- ${e(t,l)}
11
+ `:p}
12
+ ${e(t,s)}
13
13
  </sp-table-row>
14
- `}}get tableHead(){return this.querySelector("sp-table-head")}get tableRows(){return this.isVirtualized?[]:[...this.querySelectorAll("sp-table-row")]}get isVirtualized(){return!!this.items.length}focus(){const e=this.querySelector("sp-table-head-cell[sortable]");e&&e.focus()}selectAllRows(){this.isVirtualized?this.items.forEach((e,t)=>{e._$rowType$!==1&&this.selectedSet.add(this.itemValue(e,t))}):this.tableRows.forEach(e=>{e.selected=!0,this.selectedSet.add(e.value)}),this.selected=[...this.selectedSet],this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!0,this.tableHeadCheckboxCell.indeterminate=!1)}deselectAllRows(){this.selectedSet.clear(),this.selected=[],this.isVirtualized||[...this.querySelectorAll("[selected]")].forEach(t=>{t.selected=!1}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!1,this.tableHeadCheckboxCell.indeterminate=!1)}manageSelects(){const e=this.querySelectorAll("sp-table-checkbox-cell"),t=document.createElement("sp-table-checkbox-cell");if(this.selects){let l=!1;this.isVirtualized?l=this.selected.length>0&&this.selected.length===this.items.length:(this.tableRows.forEach(s=>{if(s.selected=this.selectedSet.has(s.value),!s.querySelector(":scope > sp-table-checkbox-cell")){const i=t.cloneNode();s.insertAdjacentElement("afterbegin",i),t.checked=s.selected}}),l=this.selected.length===this.tableRows.length),this.tableHeadCheckboxCell||(this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell"),this.tableHead.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell)),this.manageHeadCheckbox(l)}else e.forEach(l=>{l.remove()}),delete this.tableHeadCheckboxCell}validateSelected(){const e=new Set;this.isVirtualized?this.items.forEach((l,s)=>{const i=this.itemValue(l,s);e.add(i)}):this.tableRows.forEach(l=>{e.add(l.value)});const t=this.selected.length;this.selected=this.selected.filter(l=>e.has(l)),t!==this.selected.length&&this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0})),this.selectedSet=new Set(this.selected)}manageSelected(){this.validateSelected(),!this.isVirtualized&&(this.tableRows.forEach(e=>{e.selected=this.selectedSet.has(e.value)}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=this.selected.length===this.tableRows.length))}manageCheckboxes(){var e;if(this.selects){this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell");const t=this.selected.length===this.tableRows.length;this.manageHeadCheckbox(t),this.tableHead.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell),this.tableRows.forEach(l=>{const s=document.createElement("sp-table-checkbox-cell");l.insertAdjacentElement("afterbegin",s),l.selected=this.selectedSet.has(l.value),s.checked=l.selected})}else(e=this.tableHead.querySelector("sp-table-checkbox-cell"))==null||e.remove(),this.tableRows.forEach(t=>{var l;(l=t.checkboxCells[0])==null||l.remove(),this.selected.length&&(t.selected=this.selectedSet.has(t.value))})}manageHeadCheckbox(e){this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.selectsSingle=this.selects==="single",this.tableHeadCheckboxCell.checked=e,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!e)}handleChange(e){e.stopPropagation();const t=new Set(this.selectedSet),l=[...this.selected],{target:s}=e,{parentElement:i}=s;if(i.value)switch(this.selects){case"single":{this.deselectAllRows(),i.selected&&(this.selectedSet.add(i.value),this.selected=[...this.selectedSet]);break}case"multiple":{i.selected?this.selectedSet.add(i.value):this.selectedSet.delete(i.value),this.selected=[...this.selectedSet];const c=this.selected.length===this.tableRows.length;if(!this.tableHeadCheckboxCell)return;this.tableHeadCheckboxCell.checked=c,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!c;break}default:break}else{const{checkbox:c}=s;if(!c)return;c.checked||c.indeterminate?this.selectAllRows():this.deselectAllRows()}this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(e.preventDefault(),this.selectedSet=t,this.selected=l)}scrollToIndex(e){if(e&&this.tableBody){const l=this.tableBody[g].element(e);l&&l.scrollIntoView()}}render(){return r`
14
+ `}}get tableHead(){return this.querySelector("sp-table-head")}get tableRows(){return this.isVirtualized?[]:[...this.querySelectorAll("sp-table-row")]}get isVirtualized(){return!!this.items.length}focus(){const e=this.querySelector("sp-table-head-cell[sortable]");e&&e.focus()}selectAllRows(){this.isVirtualized?this.items.forEach((e,t)=>{e._$rowType$!==1&&this.selectedSet.add(this.itemValue(e,t))}):this.tableRows.forEach(e=>{e.selected=!0,this.selectedSet.add(e.value)}),this.selected=[...this.selectedSet],this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!0,this.tableHeadCheckboxCell.indeterminate=!1)}deselectAllRows(){this.selectedSet.clear(),this.selected=[],this.isVirtualized||[...this.querySelectorAll("[selected]")].forEach(t=>{t.selected=!1}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=!1,this.tableHeadCheckboxCell.indeterminate=!1)}manageSelects(){var s;const e=this.querySelectorAll("sp-table-checkbox-cell"),t=document.createElement("sp-table-checkbox-cell");if(this.selects){let i=!1;this.isVirtualized?i=this.selected.length>0&&this.selected.length===this.items.length:(this.tableRows.forEach(l=>{if(l.selected=this.selectedSet.has(l.value),!l.querySelector(":scope > sp-table-checkbox-cell")){const a=t.cloneNode();l.insertAdjacentElement("afterbegin",a),t.checked=l.selected}}),i=this.selected.length===this.tableRows.length),this.tableHeadCheckboxCell||(this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell"),(s=this.tableHead)==null||s.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell)),this.manageHeadCheckbox(i)}else e.forEach(i=>{i.remove()}),delete this.tableHeadCheckboxCell}validateSelected(){const e=new Set;this.isVirtualized?this.items.forEach((s,i)=>{const l=this.itemValue(s,i);e.add(l)}):this.tableRows.forEach(s=>{e.add(s.value)});const t=this.selected.length;this.selected=this.selected.filter(s=>e.has(s)),t!==this.selected.length&&this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0})),this.selectedSet=new Set(this.selected)}manageSelected(){this.validateSelected(),!this.isVirtualized&&(this.tableRows.forEach(e=>{e.selected=this.selectedSet.has(e.value)}),this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.checked=this.selected.length===this.tableRows.length))}manageCheckboxes(){var e,t,s;if(this.selects){this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell");const i=this.selected.length===this.tableRows.length;this.manageHeadCheckbox(i),(e=this.tableHead)==null||e.insertAdjacentElement("afterbegin",this.tableHeadCheckboxCell),this.tableRows.forEach(l=>{const a=document.createElement("sp-table-checkbox-cell");l.insertAdjacentElement("afterbegin",a),l.selected=this.selectedSet.has(l.value),a.checked=l.selected})}else(s=(t=this.tableHead)==null?void 0:t.querySelector("sp-table-checkbox-cell"))==null||s.remove(),this.tableRows.forEach(i=>{var l;(l=i.checkboxCells[0])==null||l.remove(),this.selected.length&&(i.selected=this.selectedSet.has(i.value))})}manageHeadCheckbox(e){this.tableHeadCheckboxCell&&(this.tableHeadCheckboxCell.selectsSingle=this.selects==="single",this.tableHeadCheckboxCell.checked=e,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!e)}handleChange(e){e.stopPropagation();const t=new Set(this.selectedSet),s=[...this.selected],{target:i}=e,{parentElement:l}=i;if(l.value)switch(this.selects){case"single":{this.deselectAllRows(),l.selected&&(this.selectedSet.add(l.value),this.selected=[...this.selectedSet]);break}case"multiple":{l.selected?this.selectedSet.add(l.value):this.selectedSet.delete(l.value),this.selected=[...this.selectedSet];const r=this.selected.length===this.tableRows.length;if(!this.tableHeadCheckboxCell)return;this.tableHeadCheckboxCell.checked=r,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!r;break}default:break}else{const{checkbox:r}=i;if(!r)return;r.checked||r.indeterminate?this.selectAllRows():this.deselectAllRows()}this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))||(e.preventDefault(),this.selectedSet=t,this.selected=s)}scrollToIndex(e){if(e&&this.tableBody){const s=this.tableBody[v].element(e);s&&s.scrollIntoView()}}render(){return h`
15
15
  <slot @change=${this.handleChange}></slot>
16
- `}willUpdate(e){this.hasUpdated||(this.validateSelected(),this.manageCheckboxes()),e.has("selects")&&this.manageSelects(),e.has("selected")&&this.hasUpdated&&this.manageSelected()}updated(){this.items.length&&this.renderVirtualizedItems()}renderVirtualizedItems(){if(!this.isConnected)return;this.tableBody||(this.tableBody=this.querySelector("sp-table-body"),this.tableBody||(this.tableBody=document.createElement("sp-table-body"),this.append(this.tableBody)),this.tableBody.addEventListener("rangeChanged",t=>{this.dispatchEvent(new v({first:t.first,last:t.last}))}),this.tableBody.addEventListener("visibilityChanged",t=>{this.dispatchEvent(new x({first:t.first,last:t.last}))}));const e={items:this.items,renderItem:this.renderItem,scroller:this.scroller};p(r`
16
+ `}willUpdate(e){this.hasUpdated||(this.validateSelected(),this.manageCheckboxes()),e.has("selects")&&this.manageSelects(),e.has("selected")&&this.hasUpdated&&this.manageSelected()}updated(){this.items.length&&this.renderVirtualizedItems()}renderVirtualizedItems(){if(!this.isConnected)return;this.tableBody||(this.tableBody=this.querySelector("sp-table-body"),this.tableBody||(this.tableBody=document.createElement("sp-table-body"),this.append(this.tableBody)),this.tableBody.addEventListener("rangeChanged",t=>{this.dispatchEvent(new x({first:t.first,last:t.last}))}),this.tableBody.addEventListener("visibilityChanged",t=>{this.dispatchEvent(new S({first:t.first,last:t.last}))}));const e={items:this.items,renderItem:this.renderItem,scroller:this.scroller};m(h`
17
17
  ${k(e)}
18
- `,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}a([d({reflect:!0})],Table.prototype,"role",2),a([d({type:String,reflect:!0})],Table.prototype,"selects",2),a([d({type:Array})],Table.prototype,"selected",2),a([d({type:Array})],Table.prototype,"items",2),a([d({type:Object})],Table.prototype,"itemValue",2),a([d({type:Boolean,reflect:!0})],Table.prototype,"scroller",2);
18
+ `,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}c([d({reflect:!0})],Table.prototype,"role",2),c([d({type:String,reflect:!0})],Table.prototype,"selects",2),c([d({type:Array})],Table.prototype,"selected",2),c([d({type:Array})],Table.prototype,"items",2),c([d({type:Object})],Table.prototype,"itemValue",2),c([d({type:Boolean,reflect:!0})],Table.prototype,"scroller",2);
19
19
  //# sourceMappingURL=Table.js.map
package/src/Table.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Table.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.js';\nimport type { TableCheckboxCell } from './TableCheckboxCell.js';\nimport type { TableHead } from './TableHead.js';\nimport type { TableHeadCell } from './TableHeadCell.js';\nimport type { TableRow } from './TableRow.js';\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\n}\n\n/**\n * @element sp-table\n *\n * @fires rangeChanged - Announces a change in the range of visible cells on the table body\n * @event change - Announces a change in the `selected` property of a table row\n */\n\nexport class Table extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm'],\n defaultSize: 'm',\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n get renderItem(): (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult {\n return this._renderItem;\n }\n\n set renderItem(\n fn: (item: Record<string, unknown>, index: number) => TemplateResult\n ) {\n this._renderItem = (\n item: Record<string, unknown>,\n index: number\n ): TemplateResult => {\n const value = this.itemValue(item, index);\n const selected = this.selected.includes(value);\n const hasCheckbox = this.selects && item?._$rowType$ !== 1;\n\n return html`\n <sp-table-row\n value=${value}\n aria-rowindex=${index + 1}\n ?selected=${selected}\n >\n ${hasCheckbox\n ? html`\n <sp-table-checkbox-cell\n ?checked=${selected}\n ></sp-table-checkbox-cell>\n `\n : html``}\n ${fn(item, index)}\n </sp-table-row>\n `;\n };\n }\n\n private _renderItem: (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult = /* c8 ignore next */ () => html``;\n\n @property({ reflect: true })\n public role = 'grid';\n\n /**\n * Whether the Table allows users to select a row or rows, and thus controls whether or not the Table also renders checkboxes.\n */\n @property({ type: String, reflect: true })\n public selects: undefined | 'single' | 'multiple';\n\n /**\n * An array of <sp-row> values that have been selected.\n */\n @property({ type: Array })\n public selected: string[] = [];\n\n private selectedSet = new Set<string>();\n\n /**\n * The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).\n */\n @property({ type: Array })\n public items: Record<string, unknown>[] = [];\n\n /**\n * The value of an item. By default, it is set to the index of the sp-table-row.\n */\n @property({ type: Object })\n public itemValue = (_item: unknown, index: number): string => {\n return `${index}`;\n };\n\n /**\n * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.\n */\n @property({ type: Boolean, reflect: true })\n public scroller = false;\n\n private tableBody?: TableBody;\n\n private tableHeadCheckboxCell?: TableCheckboxCell;\n\n private get tableHead(): TableHead {\n return this.querySelector('sp-table-head') as TableHead;\n }\n\n private get tableRows(): TableRow[] {\n if (this.isVirtualized) {\n return [];\n }\n return [...this.querySelectorAll('sp-table-row')] as TableRow[];\n }\n\n private get isVirtualized(): boolean {\n return !!this.items.length;\n }\n\n public override focus(): void {\n const sortableHeadCell = this.querySelector(\n 'sp-table-head-cell[sortable]'\n ) as TableHeadCell;\n if (sortableHeadCell) {\n sortableHeadCell.focus();\n }\n }\n\n private selectAllRows(): void {\n if (this.isVirtualized) {\n this.items.forEach((item, index: number) => {\n if (item._$rowType$ !== 1) {\n this.selectedSet.add(this.itemValue(item, index));\n }\n });\n } else {\n this.tableRows.forEach((row) => {\n row.selected = true; // Visually\n this.selectedSet.add(row.value); // Prepares table state\n });\n }\n this.selected = [...this.selectedSet];\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = true;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n private deselectAllRows(): void {\n this.selectedSet.clear();\n this.selected = [];\n\n if (!this.isVirtualized) {\n const selectedRows = [\n ...this.querySelectorAll('[selected]'),\n ] as TableRow[];\n\n selectedRows.forEach((row) => {\n row.selected = false;\n });\n }\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = false;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n protected manageSelects(): void {\n const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n const checkbox = document.createElement('sp-table-checkbox-cell');\n if (!!this.selects) {\n let allSelected = false;\n if (this.isVirtualized) {\n allSelected =\n this.selected.length > 0 &&\n this.selected.length === this.items.length;\n } else {\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n checkboxes.forEach((box) => {\n box.remove();\n });\n delete this.tableHeadCheckboxCell;\n }\n }\n\n protected validateSelected(): void {\n const rowValues = new Set<string>();\n\n if (this.isVirtualized) {\n this.items.forEach((item, index) => {\n const value = this.itemValue(item, index);\n rowValues.add(value);\n });\n } else {\n this.tableRows.forEach((row) => {\n rowValues.add(row.value);\n });\n }\n\n const oldSelectedCount = this.selected.length;\n\n this.selected = this.selected.filter((selectedItem) =>\n rowValues.has(selectedItem)\n );\n if (oldSelectedCount !== this.selected.length) {\n this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n }\n this.selectedSet = new Set(this.selected);\n }\n\n protected manageSelected(): void {\n this.validateSelected();\n\n if (this.isVirtualized) return;\n\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n });\n if (this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.checked =\n this.selected.length === this.tableRows.length;\n }\n }\n\n protected manageCheckboxes(): void {\n if (!!this.selects) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n );\n const allSelected = this.selected.length === this.tableRows.length;\n\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n this.tableHead.querySelector('sp-table-checkbox-cell')?.remove();\n this.tableRows.forEach((row) => {\n row.checkboxCells[0]?.remove();\n if (this.selected.length) {\n row.selected = this.selectedSet.has(row.value);\n }\n });\n }\n }\n\n protected manageHeadCheckbox(allSelected: boolean): void {\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n\n this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n }\n\n protected handleChange(event: Event): void {\n event.stopPropagation();\n\n const previousSelectedSet = new Set(this.selectedSet);\n const previousSelected = [...this.selected];\n\n const { target } = event;\n const { parentElement: rowItem } = target as HTMLElement & {\n parentElement: TableRow;\n };\n if (!rowItem.value) {\n const { checkbox } = target as TableCheckboxCell;\n if (!checkbox) return;\n if (checkbox.checked || checkbox.indeterminate) {\n this.selectAllRows();\n } else {\n this.deselectAllRows();\n }\n } else {\n switch (this.selects) {\n case 'single': {\n this.deselectAllRows();\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n this.selected = [...this.selectedSet];\n }\n break;\n }\n case 'multiple': {\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n } else {\n this.selectedSet.delete(rowItem.value);\n }\n this.selected = [...this.selectedSet];\n\n const allSelected =\n this.selected.length === this.tableRows.length;\n\n if (!this.tableHeadCheckboxCell)\n /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n break;\n }\n default: {\n break;\n }\n }\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n this.selectedSet = previousSelectedSet;\n this.selected = previousSelected;\n }\n }\n\n public scrollToIndex(index?: number): void {\n if (index && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @change=${this.handleChange}></slot>\n `;\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.validateSelected();\n this.manageCheckboxes();\n }\n if (changed.has('selects')) {\n this.manageSelects();\n }\n\n if (changed.has('selected') && this.hasUpdated) {\n this.manageSelected();\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n }\n }\n\n protected renderVirtualizedItems(): void {\n // Rendering updates into the table while disconnected can\n // cause runaway event binding in ancestor elements.\n if (!this.isConnected) return;\n if (!this.tableBody) {\n this.tableBody = this.querySelector('sp-table-body') as TableBody;\n if (!this.tableBody) {\n this.tableBody = document.createElement('sp-table-body');\n this.append(this.tableBody);\n }\n this.tableBody.addEventListener(\n 'rangeChanged',\n (event: RangeChangedEvent) => {\n this.dispatchEvent(\n new RangeChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\n };\n render(\n html`\n ${virtualize(config)}\n `,\n this.tableBody\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["html", "render", "SizedMixin", "SpectrumElement", "property", "styles", "virtualize", "virtualizerRef", "RangeChangedEvent", "VisibilityChangedEvent", "RowType", "_item", "index", "fn", "item", "value", "selected", "hasCheckbox", "sortableHeadCell", "row", "checkboxes", "checkbox", "allSelected", "clonedCheckbox", "box", "rowValues", "oldSelectedCount", "selectedItem", "_a", "event", "previousSelectedSet", "previousSelected", "target", "rowItem", "changed", "config", "__decorateClass"]
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n render,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/table/sp-table-body.js';\nimport '@spectrum-web-components/table/sp-table-row.js';\nimport '@spectrum-web-components/table/sp-table-checkbox-cell.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.js';\nimport type { TableCheckboxCell } from './TableCheckboxCell.js';\nimport type { TableHead } from './TableHead.js';\nimport type { TableHeadCell } from './TableHeadCell.js';\nimport type { TableRow } from './TableRow.js';\nimport {\n virtualize,\n VirtualizeDirectiveConfig,\n virtualizerRef,\n} from '@lit-labs/virtualizer/virtualize.js';\nimport { Virtualizer } from '@lit-labs/virtualizer/Virtualizer.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\n\nexport enum RowType {\n ITEM = 0,\n INFORMATION = 1,\n}\n\nexport interface TableItem extends Record<string, unknown> {\n _$rowType$?: RowType;\n}\n\n/**\n * @element sp-table\n *\n * @fires rangeChanged - Announces a change in the range of visible cells on the table body\n * @event change - Announces a change in the `selected` property of a table row\n */\n\nexport class Table extends SizedMixin(SpectrumElement, {\n validSizes: ['s', 'm'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n get renderItem(): (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult {\n return this._renderItem;\n }\n\n set renderItem(\n fn: (item: Record<string, unknown>, index: number) => TemplateResult\n ) {\n this._renderItem = (\n item: Record<string, unknown>,\n index: number\n ): TemplateResult => {\n const value = this.itemValue(item, index);\n const selected = this.selected.includes(value);\n const hasCheckbox = this.selects && item?._$rowType$ !== 1;\n\n return html`\n <sp-table-row\n value=${value}\n aria-rowindex=${index + 1}\n ?selected=${selected}\n >\n ${hasCheckbox\n ? html`\n <sp-table-checkbox-cell\n ?checked=${selected}\n ></sp-table-checkbox-cell>\n `\n : nothing}\n ${fn(item, index)}\n </sp-table-row>\n `;\n };\n }\n\n private _renderItem: (\n item: Record<string, unknown>,\n index: number\n ) => TemplateResult = /* c8 ignore next */ () => html``;\n\n @property({ reflect: true })\n public role = 'grid';\n\n /**\n * Whether the Table allows users to select a row or rows, and thus controls whether or not the Table also renders checkboxes.\n */\n @property({ type: String, reflect: true })\n public selects: undefined | 'single' | 'multiple';\n\n /**\n * An array of <sp-row> values that have been selected.\n */\n @property({ type: Array })\n public selected: string[] = [];\n\n private selectedSet = new Set<string>();\n\n /**\n * The content of the rows rendered by the virtualized table. The key is the value of the sp-table-row, and the value is the sp-table-row's content (not the row itself).\n */\n @property({ type: Array })\n public items: Record<string, unknown>[] = [];\n\n /**\n * The value of an item. By default, it is set to the index of the sp-table-row.\n */\n @property({ type: Object })\n public itemValue = (_item: unknown, index: number): string => {\n return `${index}`;\n };\n\n /**\n * Whether or not the virtualized table has a scroll bar. If this is set to true, make sure to specify a height in the sp-table's inline styles.\n */\n @property({ type: Boolean, reflect: true })\n public scroller = false;\n\n private tableBody?: TableBody;\n\n private tableHeadCheckboxCell?: TableCheckboxCell;\n\n private get tableHead(): TableHead {\n return this.querySelector('sp-table-head') as TableHead;\n }\n\n private get tableRows(): TableRow[] {\n if (this.isVirtualized) {\n return [];\n }\n return [...this.querySelectorAll('sp-table-row')] as TableRow[];\n }\n\n private get isVirtualized(): boolean {\n return !!this.items.length;\n }\n\n public override focus(): void {\n const sortableHeadCell = this.querySelector(\n 'sp-table-head-cell[sortable]'\n ) as TableHeadCell;\n if (sortableHeadCell) {\n sortableHeadCell.focus();\n }\n }\n\n private selectAllRows(): void {\n if (this.isVirtualized) {\n this.items.forEach((item, index: number) => {\n if (item._$rowType$ !== 1) {\n this.selectedSet.add(this.itemValue(item, index));\n }\n });\n } else {\n this.tableRows.forEach((row) => {\n row.selected = true; // Visually\n this.selectedSet.add(row.value); // Prepares table state\n });\n }\n this.selected = [...this.selectedSet];\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = true;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n private deselectAllRows(): void {\n this.selectedSet.clear();\n this.selected = [];\n\n if (!this.isVirtualized) {\n const selectedRows = [\n ...this.querySelectorAll('[selected]'),\n ] as TableRow[];\n\n selectedRows.forEach((row) => {\n row.selected = false;\n });\n }\n\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = false;\n this.tableHeadCheckboxCell.indeterminate = false;\n }\n\n protected manageSelects(): void {\n const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n const checkbox = document.createElement('sp-table-checkbox-cell');\n if (!!this.selects) {\n let allSelected = false;\n if (this.isVirtualized) {\n allSelected =\n this.selected.length > 0 &&\n this.selected.length === this.items.length;\n } else {\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n checkboxes.forEach((box) => {\n box.remove();\n });\n delete this.tableHeadCheckboxCell;\n }\n }\n\n protected validateSelected(): void {\n const rowValues = new Set<string>();\n\n if (this.isVirtualized) {\n this.items.forEach((item, index) => {\n const value = this.itemValue(item, index);\n rowValues.add(value);\n });\n } else {\n this.tableRows.forEach((row) => {\n rowValues.add(row.value);\n });\n }\n\n const oldSelectedCount = this.selected.length;\n\n this.selected = this.selected.filter((selectedItem) =>\n rowValues.has(selectedItem)\n );\n if (oldSelectedCount !== this.selected.length) {\n this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n }\n this.selectedSet = new Set(this.selected);\n }\n\n protected manageSelected(): void {\n this.validateSelected();\n\n if (this.isVirtualized) return;\n\n this.tableRows.forEach((row) => {\n row.selected = this.selectedSet.has(row.value);\n });\n if (this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell.checked =\n this.selected.length === this.tableRows.length;\n }\n }\n\n protected manageCheckboxes(): void {\n if (!!this.selects) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n );\n const allSelected = this.selected.length === this.tableRows.length;\n\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n this.tableHead?.querySelector('sp-table-checkbox-cell')?.remove();\n this.tableRows.forEach((row) => {\n row.checkboxCells[0]?.remove();\n if (this.selected.length) {\n row.selected = this.selectedSet.has(row.value);\n }\n });\n }\n }\n\n protected manageHeadCheckbox(allSelected: boolean): void {\n if (!this.tableHeadCheckboxCell) /* c8 ignore next */ return;\n\n this.tableHeadCheckboxCell.selectsSingle = this.selects === 'single';\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n }\n\n protected handleChange(event: Event): void {\n event.stopPropagation();\n\n const previousSelectedSet = new Set(this.selectedSet);\n const previousSelected = [...this.selected];\n\n const { target } = event;\n const { parentElement: rowItem } = target as HTMLElement & {\n parentElement: TableRow;\n };\n if (!rowItem.value) {\n const { checkbox } = target as TableCheckboxCell;\n if (!checkbox) return;\n if (checkbox.checked || checkbox.indeterminate) {\n this.selectAllRows();\n } else {\n this.deselectAllRows();\n }\n } else {\n switch (this.selects) {\n case 'single': {\n this.deselectAllRows();\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n this.selected = [...this.selectedSet];\n }\n break;\n }\n case 'multiple': {\n if (rowItem.selected) {\n this.selectedSet.add(rowItem.value);\n } else {\n this.selectedSet.delete(rowItem.value);\n }\n this.selected = [...this.selectedSet];\n\n const allSelected =\n this.selected.length === this.tableRows.length;\n\n if (!this.tableHeadCheckboxCell)\n /* c8 ignore next */ return;\n this.tableHeadCheckboxCell.checked = allSelected;\n this.tableHeadCheckboxCell.indeterminate =\n this.selected.length > 0 && !allSelected;\n break;\n }\n default: {\n break;\n }\n }\n }\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n this.selectedSet = previousSelectedSet;\n this.selected = previousSelected;\n }\n }\n\n public scrollToIndex(index?: number): void {\n if (index && !!this.tableBody) {\n const virtualizerParent = this.tableBody as unknown as {\n [virtualizerRef]: Virtualizer;\n };\n const item = virtualizerParent[virtualizerRef].element(index);\n if (item) {\n item.scrollIntoView();\n }\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot @change=${this.handleChange}></slot>\n `;\n }\n\n protected override willUpdate(changed: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.validateSelected();\n this.manageCheckboxes();\n }\n if (changed.has('selects')) {\n this.manageSelects();\n }\n\n if (changed.has('selected') && this.hasUpdated) {\n this.manageSelected();\n }\n }\n\n protected override updated(): void {\n if (this.items.length) {\n this.renderVirtualizedItems();\n }\n }\n\n protected renderVirtualizedItems(): void {\n // Rendering updates into the table while disconnected can\n // cause runaway event binding in ancestor elements.\n if (!this.isConnected) return;\n if (!this.tableBody) {\n this.tableBody = this.querySelector('sp-table-body') as TableBody;\n if (!this.tableBody) {\n this.tableBody = document.createElement('sp-table-body');\n this.append(this.tableBody);\n }\n this.tableBody.addEventListener(\n 'rangeChanged',\n (event: RangeChangedEvent) => {\n this.dispatchEvent(\n new RangeChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n this.tableBody.addEventListener(\n 'visibilityChanged',\n (event: VisibilityChangedEvent) => {\n this.dispatchEvent(\n new VisibilityChangedEvent({\n first: event.first,\n last: event.last,\n })\n );\n }\n );\n }\n const config: VirtualizeDirectiveConfig<Record<string, unknown>> = {\n items: this.items,\n renderItem: this.renderItem,\n scroller: this.scroller,\n };\n render(\n html`\n ${virtualize(config)}\n `,\n this.tableBody\n );\n }\n\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["html", "nothing", "render", "SizedMixin", "SpectrumElement", "property", "styles", "virtualize", "virtualizerRef", "RangeChangedEvent", "VisibilityChangedEvent", "RowType", "_item", "index", "fn", "item", "value", "selected", "hasCheckbox", "sortableHeadCell", "row", "_a", "checkboxes", "checkbox", "allSelected", "clonedCheckbox", "box", "rowValues", "oldSelectedCount", "selectedItem", "_b", "_c", "event", "previousSelectedSet", "previousSelected", "target", "rowItem", "changed", "config", "__decorateClass"]
7
7
  }
@@ -12,6 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
12
12
  };
13
13
  import {
14
14
  html,
15
+ nothing,
15
16
  SpectrumElement
16
17
  } from "@spectrum-web-components/base";
17
18
  import { property } from "@spectrum-web-components/base/src/decorators.js";
@@ -61,7 +62,7 @@ export class TableHeadCell extends SpectrumElement {
61
62
  <sp-icon-arrow100
62
63
  class="sortedIcon spectrum-UIIcon-ArrowDown100"
63
64
  ></sp-icon-arrow100>
64
- ` : html``}
65
+ ` : nothing}
65
66
  `;
66
67
  }
67
68
  firstUpdated(changes) {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["TableHeadCell.ts"],
4
- "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';\n\nimport styles from './table-head-cell.css.js';\nimport arrowStyles from '@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js';\n\nexport type SortedEventDetails = {\n sortDirection: 'asc' | 'desc';\n sortKey: string;\n};\n\nconst ariaSortValue = (sortDirection?: 'asc' | 'desc'): string => {\n const values = {\n asc: 'ascending',\n desc: 'descending',\n };\n return values[sortDirection as 'asc' | 'desc'] || 'none';\n};\n\n/**\n * @element sp-table-head-cell\n *\n * @fires sorted - Announces that the table head has been sorted and handles the sorted event\n */\nexport class TableHeadCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles, arrowStyles];\n }\n\n @property({ reflect: true })\n public role = 'columnheader';\n\n @property({ type: Boolean, reflect: true })\n public sortable = false;\n\n @property({ reflect: true, attribute: 'sort-direction' })\n public sortDirection: 'asc' | 'desc' | undefined;\n\n @property({ attribute: 'sort-key' })\n public sortKey = '';\n\n protected handleClick(): void {\n if (!this.sortable) return;\n if (this.sortDirection) {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n } else {\n this.sortDirection = 'asc';\n }\n this.dispatchEvent(\n new CustomEvent<SortedEventDetails>('sorted', {\n bubbles: true,\n detail: {\n sortDirection: this.sortDirection,\n sortKey: this.sortKey,\n },\n })\n );\n }\n\n protected override render(): TemplateResult {\n const visiblySorted = this.sortable && !!this.sortDirection;\n return html`\n <slot></slot>\n ${visiblySorted\n ? html`\n <sp-icon-arrow100\n class=\"sortedIcon spectrum-UIIcon-ArrowDown100\"\n ></sp-icon-arrow100>\n `\n : html``}\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n }\n\n protected override update(changes: PropertyValues): void {\n if (changes.has('sortDirection')) {\n this.setAttribute('aria-sort', ariaSortValue(this.sortDirection));\n }\n if (changes.has('sortable')) {\n this.tabIndex = this.sortable ? 0 : -1;\n }\n super.update(changes);\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,OAAO;AAEP,OAAO,YAAY;AACnB,OAAO,iBAAiB;AAOxB,MAAM,gBAAgB,CAAC,kBAA2C;AAC9D,QAAM,SAAS;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,EACV;AACA,SAAO,OAAO,aAA+B,KAAK;AACtD;AAOO,aAAM,sBAAsB,gBAAgB;AAAA,EAA5C;AAAA;AAMH,SAAO,OAAO;AAGd,SAAO,WAAW;AAMlB,SAAO,UAAU;AAAA;AAAA,EAdjB,WAA2B,SAAyB;AAChD,WAAO,CAAC,QAAQ,WAAW;AAAA,EAC/B;AAAA,EAcU,cAAoB;AAC1B,QAAI,CAAC,KAAK;AAAU;AACpB,QAAI,KAAK,eAAe;AACpB,WAAK,gBAAgB,KAAK,kBAAkB,QAAQ,SAAS;AAAA,IACjE,OAAO;AACH,WAAK,gBAAgB;AAAA,IACzB;AACA,SAAK;AAAA,MACD,IAAI,YAAgC,UAAU;AAAA,QAC1C,SAAS;AAAA,QACT,QAAQ;AAAA,UACJ,eAAe,KAAK;AAAA,UACpB,SAAS,KAAK;AAAA,QAClB;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,UAAM,gBAAgB,KAAK,YAAY,CAAC,CAAC,KAAK;AAC9C,WAAO;AAAA;AAAA,cAED,gBACI;AAAA;AAAA;AAAA;AAAA,sBAKA,MAAM;AAAA;AAAA,EAEpB;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACnD;AAAA,EAEmB,OAAO,SAA+B;AACrD,QAAI,QAAQ,IAAI,eAAe,GAAG;AAC9B,WAAK,aAAa,aAAa,cAAc,KAAK,aAAa,CAAC;AAAA,IACpE;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK,WAAW,KAAK,WAAW,IAAI;AAAA,IACxC;AACA,UAAM,OAAO,OAAO;AAAA,EACxB;AACJ;AAzDW;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GALlB,cAMF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARjC,cASF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAX/C,cAYF;AAGA;AAAA,EADN,SAAS,EAAE,WAAW,WAAW,CAAC;AAAA,GAd1B,cAeF;",
4
+ "sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';\n\nimport styles from './table-head-cell.css.js';\nimport arrowStyles from '@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js';\n\nexport type SortedEventDetails = {\n sortDirection: 'asc' | 'desc';\n sortKey: string;\n};\n\nconst ariaSortValue = (sortDirection?: 'asc' | 'desc'): string => {\n const values = {\n asc: 'ascending',\n desc: 'descending',\n };\n return values[sortDirection as 'asc' | 'desc'] || 'none';\n};\n\n/**\n * @element sp-table-head-cell\n *\n * @fires sorted - Announces that the table head has been sorted and handles the sorted event\n */\nexport class TableHeadCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles, arrowStyles];\n }\n\n @property({ reflect: true })\n public role = 'columnheader';\n\n @property({ type: Boolean, reflect: true })\n public sortable = false;\n\n @property({ reflect: true, attribute: 'sort-direction' })\n public sortDirection: 'asc' | 'desc' | undefined;\n\n @property({ attribute: 'sort-key' })\n public sortKey = '';\n\n protected handleClick(): void {\n if (!this.sortable) return;\n if (this.sortDirection) {\n this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';\n } else {\n this.sortDirection = 'asc';\n }\n this.dispatchEvent(\n new CustomEvent<SortedEventDetails>('sorted', {\n bubbles: true,\n detail: {\n sortDirection: this.sortDirection,\n sortKey: this.sortKey,\n },\n })\n );\n }\n\n protected override render(): TemplateResult {\n const visiblySorted = this.sortable && !!this.sortDirection;\n return html`\n <slot></slot>\n ${visiblySorted\n ? html`\n <sp-icon-arrow100\n class=\"sortedIcon spectrum-UIIcon-ArrowDown100\"\n ></sp-icon-arrow100>\n `\n : nothing}\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n }\n\n protected override update(changes: PropertyValues): void {\n if (changes.has('sortDirection')) {\n this.setAttribute('aria-sort', ariaSortValue(this.sortDirection));\n }\n if (changes.has('sortable')) {\n this.tabIndex = this.sortable ? 0 : -1;\n }\n super.update(changes);\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,OAAO;AAEP,OAAO,YAAY;AACnB,OAAO,iBAAiB;AAOxB,MAAM,gBAAgB,CAAC,kBAA2C;AAC9D,QAAM,SAAS;AAAA,IACX,KAAK;AAAA,IACL,MAAM;AAAA,EACV;AACA,SAAO,OAAO,aAA+B,KAAK;AACtD;AAOO,aAAM,sBAAsB,gBAAgB;AAAA,EAA5C;AAAA;AAMH,SAAO,OAAO;AAGd,SAAO,WAAW;AAMlB,SAAO,UAAU;AAAA;AAAA,EAdjB,WAA2B,SAAyB;AAChD,WAAO,CAAC,QAAQ,WAAW;AAAA,EAC/B;AAAA,EAcU,cAAoB;AAC1B,QAAI,CAAC,KAAK;AAAU;AACpB,QAAI,KAAK,eAAe;AACpB,WAAK,gBAAgB,KAAK,kBAAkB,QAAQ,SAAS;AAAA,IACjE,OAAO;AACH,WAAK,gBAAgB;AAAA,IACzB;AACA,SAAK;AAAA,MACD,IAAI,YAAgC,UAAU;AAAA,QAC1C,SAAS;AAAA,QACT,QAAQ;AAAA,UACJ,eAAe,KAAK;AAAA,UACpB,SAAS,KAAK;AAAA,QAClB;AAAA,MACJ,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,UAAM,gBAAgB,KAAK,YAAY,CAAC,CAAC,KAAK;AAC9C,WAAO;AAAA;AAAA,cAED,gBACI;AAAA;AAAA;AAAA;AAAA,sBAKA,OAAO;AAAA;AAAA,EAErB;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACnD;AAAA,EAEmB,OAAO,SAA+B;AACrD,QAAI,QAAQ,IAAI,eAAe,GAAG;AAC9B,WAAK,aAAa,aAAa,cAAc,KAAK,aAAa,CAAC;AAAA,IACpE;AACA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK,WAAW,KAAK,WAAW,IAAI;AAAA,IACxC;AACA,UAAM,OAAO,OAAO;AAAA,EACxB;AACJ;AAzDW;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GALlB,cAMF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GARjC,cASF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAX/C,cAYF;AAGA;AAAA,EADN,SAAS,EAAE,WAAW,WAAW,CAAC;AAAA,GAd1B,cAeF;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,9 @@
1
- "use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(s,r,t,i)=>{for(var e=i>1?void 0:i?p(r,t):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(e=(i?a(r,t,e):a(e))||e);return i&&e&&l(r,t,e),e};import{html as d,SpectrumElement as u}from"@spectrum-web-components/base";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js";import h from"./table-head-cell.css.js";import m from"@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js";const y=s=>({asc:"ascending",desc:"descending"})[s]||"none";export class TableHeadCell extends u{constructor(){super(...arguments);this.role="columnheader";this.sortable=!1;this.sortKey=""}static get styles(){return[h,m]}handleClick(){this.sortable&&(this.sortDirection?this.sortDirection=this.sortDirection==="asc"?"desc":"asc":this.sortDirection="asc",this.dispatchEvent(new CustomEvent("sorted",{bubbles:!0,detail:{sortDirection:this.sortDirection,sortKey:this.sortKey}})))}render(){const t=this.sortable&&!!this.sortDirection;return d`
1
+ "use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(s,r,t,i)=>{for(var e=i>1?void 0:i?p(r,t):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(e=(i?a(r,t,e):a(e))||e);return i&&e&&l(r,t,e),e};import{html as d,nothing as u,SpectrumElement as h}from"@spectrum-web-components/base";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js";import m from"./table-head-cell.css.js";import y from"@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js";const b=s=>({asc:"ascending",desc:"descending"})[s]||"none";export class TableHeadCell extends h{constructor(){super(...arguments);this.role="columnheader";this.sortable=!1;this.sortKey=""}static get styles(){return[m,y]}handleClick(){this.sortable&&(this.sortDirection?this.sortDirection=this.sortDirection==="asc"?"desc":"asc":this.sortDirection="asc",this.dispatchEvent(new CustomEvent("sorted",{bubbles:!0,detail:{sortDirection:this.sortDirection,sortKey:this.sortKey}})))}render(){const t=this.sortable&&!!this.sortDirection;return d`
2
2
  <slot></slot>
3
3
  ${t?d`
4
4
  <sp-icon-arrow100
5
5
  class="sortedIcon spectrum-UIIcon-ArrowDown100"
6
6
  ></sp-icon-arrow100>
7
- `:d``}
8
- `}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this.handleClick)}update(t){t.has("sortDirection")&&this.setAttribute("aria-sort",y(this.sortDirection)),t.has("sortable")&&(this.tabIndex=this.sortable?0:-1),super.update(t)}}o([c({reflect:!0})],TableHeadCell.prototype,"role",2),o([c({type:Boolean,reflect:!0})],TableHeadCell.prototype,"sortable",2),o([c({reflect:!0,attribute:"sort-direction"})],TableHeadCell.prototype,"sortDirection",2),o([c({attribute:"sort-key"})],TableHeadCell.prototype,"sortKey",2);
7
+ `:u}
8
+ `}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this.handleClick)}update(t){t.has("sortDirection")&&this.setAttribute("aria-sort",b(this.sortDirection)),t.has("sortable")&&(this.tabIndex=this.sortable?0:-1),super.update(t)}}o([c({reflect:!0})],TableHeadCell.prototype,"role",2),o([c({type:Boolean,reflect:!0})],TableHeadCell.prototype,"sortable",2),o([c({reflect:!0,attribute:"sort-direction"})],TableHeadCell.prototype,"sortDirection",2),o([c({attribute:"sort-key"})],TableHeadCell.prototype,"sortKey",2);
9
9
  //# sourceMappingURL=TableHeadCell.js.map