@spectrum-web-components/table 0.37.0 → 0.39.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 +295 -24
- package/custom-elements.json +101 -0
- package/package.json +8 -8
- package/src/Table.d.ts +12 -0
- package/src/Table.dev.js +27 -7
- package/src/Table.dev.js.map +2 -2
- package/src/Table.js +12 -12
- package/src/Table.js.map +3 -3
- package/src/TableCheckboxCell.d.ts +5 -0
- package/src/TableCheckboxCell.dev.js +10 -3
- package/src/TableCheckboxCell.dev.js.map +2 -2
- package/src/TableCheckboxCell.js +3 -2
- package/src/TableCheckboxCell.js.map +3 -3
- package/src/TableHeadCell.dev.js +3 -2
- package/src/TableHeadCell.dev.js.map +2 -2
- package/src/TableHeadCell.js +4 -4
- package/src/TableHeadCell.js.map +3 -3
- package/src/spectrum-config.js +124 -4
- package/src/spectrum-table-body.css.dev.js +9 -9
- package/src/spectrum-table-body.css.dev.js.map +1 -1
- package/src/spectrum-table-body.css.js +11 -11
- package/src/spectrum-table-body.css.js.map +1 -1
- package/src/spectrum-table-cell.css.dev.js +59 -15
- package/src/spectrum-table-cell.css.dev.js.map +2 -2
- package/src/spectrum-table-cell.css.js +61 -17
- package/src/spectrum-table-cell.css.js.map +2 -2
- package/src/spectrum-table-checkbox-cell.css.dev.js +101 -3
- package/src/spectrum-table-checkbox-cell.css.dev.js.map +2 -2
- package/src/spectrum-table-checkbox-cell.css.js +103 -5
- package/src/spectrum-table-checkbox-cell.css.js.map +2 -2
- package/src/spectrum-table-head-cell.css.dev.js +102 -32
- package/src/spectrum-table-head-cell.css.dev.js.map +2 -2
- package/src/spectrum-table-head-cell.css.js +104 -34
- package/src/spectrum-table-head-cell.css.js.map +2 -2
- package/src/spectrum-table-head.css.dev.js +1 -1
- package/src/spectrum-table-head.css.dev.js.map +1 -1
- package/src/spectrum-table-head.css.js +1 -1
- package/src/spectrum-table-head.css.js.map +1 -1
- package/src/spectrum-table-row.css.dev.js +199 -27
- package/src/spectrum-table-row.css.dev.js.map +2 -2
- package/src/spectrum-table-row.css.js +201 -29
- package/src/spectrum-table-row.css.js.map +2 -2
- package/src/spectrum-table.css.dev.js +247 -325
- package/src/spectrum-table.css.dev.js.map +2 -2
- package/src/spectrum-table.css.js +249 -327
- package/src/spectrum-table.css.js.map +2 -2
- package/src/table-body.css.dev.js +17 -9
- package/src/table-body.css.dev.js.map +2 -2
- package/src/table-body.css.js +17 -9
- package/src/table-body.css.js.map +2 -2
- package/src/table-cell.css.dev.js +59 -15
- package/src/table-cell.css.dev.js.map +2 -2
- package/src/table-cell.css.js +61 -17
- package/src/table-cell.css.js.map +2 -2
- package/src/table-checkbox-cell.css.dev.js +101 -3
- package/src/table-checkbox-cell.css.dev.js.map +2 -2
- package/src/table-checkbox-cell.css.js +101 -3
- package/src/table-checkbox-cell.css.js.map +2 -2
- package/src/table-head-cell.css.dev.js +103 -33
- package/src/table-head-cell.css.dev.js.map +2 -2
- package/src/table-head-cell.css.js +105 -35
- package/src/table-head-cell.css.js.map +2 -2
- package/src/table-head.css.dev.js +1 -1
- package/src/table-head.css.dev.js.map +1 -1
- package/src/table-head.css.js +1 -1
- package/src/table-head.css.js.map +1 -1
- package/src/table-row.css.dev.js +199 -27
- package/src/table-row.css.dev.js.map +2 -2
- package/src/table-row.css.js +201 -29
- package/src/table-row.css.js.map +2 -2
- package/src/table.css.dev.js +247 -325
- package/src/table.css.dev.js.map +2 -2
- package/src/table.css.js +249 -327
- package/src/table.css.js.map +2 -2
- package/stories/table-elements.stories.js +40 -4
- package/stories/table-elements.stories.js.map +2 -2
- package/test/helpers.js +18 -0
- package/test/helpers.js.map +7 -0
- package/test/table-selects.test.js +2 -16
- package/test/table-selects.test.js.map +2 -2
- package/test/table.test.js +42 -24
- package/test/table.test.js.map +2 -2
- package/test/virtualized-table-selects.test.js +15 -46
- package/test/virtualized-table-selects.test.js.map +2 -2
- package/test/virtualized-table.test.js +4 -27
- package/test/virtualized-table.test.js.map +2 -2
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
|
|
@@ -35,8 +36,8 @@ export var RowType = /* @__PURE__ */ ((RowType2) => {
|
|
|
35
36
|
return RowType2;
|
|
36
37
|
})(RowType || {});
|
|
37
38
|
export class Table extends SizedMixin(SpectrumElement, {
|
|
38
|
-
validSizes: ["s", "m"],
|
|
39
|
-
|
|
39
|
+
validSizes: ["s", "m", "l", "xl"],
|
|
40
|
+
noDefaultSize: true
|
|
40
41
|
}) {
|
|
41
42
|
constructor() {
|
|
42
43
|
super(...arguments);
|
|
@@ -50,6 +51,8 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
50
51
|
return `${index}`;
|
|
51
52
|
};
|
|
52
53
|
this.scroller = false;
|
|
54
|
+
this.emphasized = false;
|
|
55
|
+
this.quiet = false;
|
|
53
56
|
}
|
|
54
57
|
static get styles() {
|
|
55
58
|
return [styles];
|
|
@@ -72,7 +75,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
72
75
|
<sp-table-checkbox-cell
|
|
73
76
|
?checked=${selected}
|
|
74
77
|
></sp-table-checkbox-cell>
|
|
75
|
-
` :
|
|
78
|
+
` : nothing}
|
|
76
79
|
${fn(item, index)}
|
|
77
80
|
</sp-table-row>
|
|
78
81
|
`;
|
|
@@ -134,6 +137,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
134
137
|
this.tableHeadCheckboxCell.indeterminate = false;
|
|
135
138
|
}
|
|
136
139
|
manageSelects() {
|
|
140
|
+
var _a;
|
|
137
141
|
const checkboxes = this.querySelectorAll("sp-table-checkbox-cell");
|
|
138
142
|
const checkbox = document.createElement("sp-table-checkbox-cell");
|
|
139
143
|
if (!!this.selects) {
|
|
@@ -145,6 +149,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
145
149
|
row.selected = this.selectedSet.has(row.value);
|
|
146
150
|
if (!row.querySelector(":scope > sp-table-checkbox-cell")) {
|
|
147
151
|
const clonedCheckbox = checkbox.cloneNode();
|
|
152
|
+
checkbox.emphasized = this.emphasized;
|
|
148
153
|
row.insertAdjacentElement("afterbegin", clonedCheckbox);
|
|
149
154
|
checkbox.checked = row.selected;
|
|
150
155
|
}
|
|
@@ -155,7 +160,9 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
155
160
|
this.tableHeadCheckboxCell = document.createElement(
|
|
156
161
|
"sp-table-checkbox-cell"
|
|
157
162
|
);
|
|
158
|
-
this.
|
|
163
|
+
this.tableHeadCheckboxCell.headCell = true;
|
|
164
|
+
this.tableHeadCheckboxCell.emphasized = this.emphasized;
|
|
165
|
+
(_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
|
|
159
166
|
"afterbegin",
|
|
160
167
|
this.tableHeadCheckboxCell
|
|
161
168
|
);
|
|
@@ -207,14 +214,16 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
207
214
|
}
|
|
208
215
|
}
|
|
209
216
|
manageCheckboxes() {
|
|
210
|
-
var _a;
|
|
217
|
+
var _a, _b, _c;
|
|
211
218
|
if (!!this.selects) {
|
|
212
219
|
this.tableHeadCheckboxCell = document.createElement(
|
|
213
220
|
"sp-table-checkbox-cell"
|
|
214
221
|
);
|
|
222
|
+
this.tableHeadCheckboxCell.headCell = true;
|
|
223
|
+
this.tableHeadCheckboxCell.emphasized = this.emphasized;
|
|
215
224
|
const allSelected = this.selected.length === this.tableRows.length;
|
|
216
225
|
this.manageHeadCheckbox(allSelected);
|
|
217
|
-
this.tableHead.insertAdjacentElement(
|
|
226
|
+
(_a = this.tableHead) == null ? void 0 : _a.insertAdjacentElement(
|
|
218
227
|
"afterbegin",
|
|
219
228
|
this.tableHeadCheckboxCell
|
|
220
229
|
);
|
|
@@ -222,12 +231,13 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
222
231
|
const checkbox = document.createElement(
|
|
223
232
|
"sp-table-checkbox-cell"
|
|
224
233
|
);
|
|
234
|
+
checkbox.emphasized = this.emphasized;
|
|
225
235
|
row.insertAdjacentElement("afterbegin", checkbox);
|
|
226
236
|
row.selected = this.selectedSet.has(row.value);
|
|
227
237
|
checkbox.checked = row.selected;
|
|
228
238
|
});
|
|
229
239
|
} else {
|
|
230
|
-
(
|
|
240
|
+
(_c = (_b = this.tableHead) == null ? void 0 : _b.querySelector("sp-table-checkbox-cell")) == null ? void 0 : _c.remove();
|
|
231
241
|
this.tableRows.forEach((row) => {
|
|
232
242
|
var _a2;
|
|
233
243
|
(_a2 = row.checkboxCells[0]) == null ? void 0 : _a2.remove();
|
|
@@ -241,6 +251,7 @@ export class Table extends SizedMixin(SpectrumElement, {
|
|
|
241
251
|
if (!this.tableHeadCheckboxCell)
|
|
242
252
|
return;
|
|
243
253
|
this.tableHeadCheckboxCell.selectsSingle = this.selects === "single";
|
|
254
|
+
this.tableHeadCheckboxCell.emphasized = this.emphasized;
|
|
244
255
|
this.tableHeadCheckboxCell.checked = allSelected;
|
|
245
256
|
this.tableHeadCheckboxCell.indeterminate = this.selected.length > 0 && !allSelected;
|
|
246
257
|
}
|
|
@@ -398,4 +409,13 @@ __decorateClass([
|
|
|
398
409
|
__decorateClass([
|
|
399
410
|
property({ type: Boolean, reflect: true })
|
|
400
411
|
], Table.prototype, "scroller", 2);
|
|
412
|
+
__decorateClass([
|
|
413
|
+
property({ type: Boolean, reflect: true })
|
|
414
|
+
], Table.prototype, "emphasized", 2);
|
|
415
|
+
__decorateClass([
|
|
416
|
+
property({ type: Boolean, reflect: true })
|
|
417
|
+
], Table.prototype, "quiet", 2);
|
|
418
|
+
__decorateClass([
|
|
419
|
+
property({ type: String, reflect: true })
|
|
420
|
+
], Table.prototype, "density", 2);
|
|
401
421
|
//# sourceMappingURL=Table.dev.js.map
|
package/src/Table.dev.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.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": ";;;;;;;;;;;;AAYA;AAAA,EAEI;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,
|
|
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', 'l', 'xl'],\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 /**\n * Deliver the Table with additional visual emphasis to selected rows.\n */\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * Display with \"quiet\" variant styles.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n /**\n * Changes the spacing around table cell content.\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\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\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 // Create and initialize checkboxes in all rows within the table body.\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n // Create and initialize table head checkbox cell.\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n // Remove all checkbox cells.\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 // Create and initialize table head checkbox cell.\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n\n const allSelected = this.selected.length === this.tableRows.length;\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n // Create and initialize checkboxes in all rows within the table body.\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n // Remove all checkbox cells.\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.emphasized = this.emphasized;\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,KAAK,KAAK,IAAI;AAAA,EAChC,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;AAMlB,SAAO,aAAa;AAMpB,SAAO,QAAQ;AAAA;AAAA,EA7Ff,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,EAkEA,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;AAxOpC;AAyOQ,UAAM,aAAa,KAAK,iBAAiB,wBAAwB;AACjE,UAAM,WAAW,SAAS,cAAc,wBAAwB;AAEhE,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;AAE7C,cAAI,CAAC,IAAI,cAAc,iCAAiC,GAAG;AACvD,kBAAM,iBACF,SAAS,UAAU;AACvB,qBAAS,aAAa,KAAK;AAC3B,gBAAI,sBAAsB,cAAc,cAAc;AACtD,qBAAS,UAAU,IAAI;AAAA,UAC3B;AAAA,QACJ,CAAC;AACD,sBAAc,KAAK,SAAS,WAAW,KAAK,UAAU;AAAA,MAC1D;AAGA,UAAI,CAAC,KAAK,uBAAuB;AAC7B,aAAK,wBAAwB,SAAS;AAAA,UAClC;AAAA,QACJ;AACA,aAAK,sBAAsB,WAAW;AACtC,aAAK,sBAAsB,aAAa,KAAK;AAC7C,mBAAK,cAAL,mBAAgB;AAAA,UACZ;AAAA,UACA,KAAK;AAAA;AAAA,MAEb;AACA,WAAK,mBAAmB,WAAW;AAAA,IACvC,OAAO;AAEH,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;AApUvC;AAqUQ,QAAI,CAAC,CAAC,KAAK,SAAS;AAEhB,WAAK,wBAAwB,SAAS;AAAA,QAClC;AAAA,MACJ;AACA,WAAK,sBAAsB,WAAW;AACtC,WAAK,sBAAsB,aAAa,KAAK;AAE7C,YAAM,cAAc,KAAK,SAAS,WAAW,KAAK,UAAU;AAC5D,WAAK,mBAAmB,WAAW;AAEnC,iBAAK,cAAL,mBAAgB;AAAA,QACZ;AAAA,QACA,KAAK;AAAA;AAIT,WAAK,UAAU,QAAQ,CAAC,QAAQ;AAC5B,cAAM,WAAW,SAAS;AAAA,UACtB;AAAA,QACJ;AACA,iBAAS,aAAa,KAAK;AAC3B,YAAI,sBAAsB,cAAc,QAAQ;AAChD,YAAI,WAAW,KAAK,YAAY,IAAI,IAAI,KAAK;AAC7C,iBAAS,UAAU,IAAI;AAAA,MAC3B,CAAC;AAAA,IACL,OAAO;AAEH,uBAAK,cAAL,mBAAgB,cAAc,8BAA9B,mBAAyD;AACzD,WAAK,UAAU,QAAQ,CAAC,QAAQ;AAlW5C,YAAAC;AAmWgB,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,aAAa,KAAK;AAC7C,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;AA9ZW;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;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1FjC,MA2FF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhGjC,MAiGF;AAMA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtGhC,MAuGF;",
|
|
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,
|
|
1
|
+
"use strict";var b=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=(n,h,e,t)=>{for(var s=t>1?void 0:t?u(h,e):h,i=n.length-1,l;i>=0;i--)(l=n[i])&&(s=(t?l(h,e,s):l(s))||s);return t&&s&&b(h,e,s),s};import{html as o,nothing as p,render as m,SizedMixin as C,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 c}from"@spectrum-web-components/base/src/decorators.js";import k from"./table.css.js";import{virtualize as g,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 C(f,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments);this._renderItem=()=>o``;this.role="grid";this.selected=[];this.selectedSet=new Set;this.items=[];this.itemValue=(e,t)=>`${t}`;this.scroller=!1;this.emphasized=!1;this.quiet=!1}static get styles(){return[k]}get renderItem(){return this._renderItem}set renderItem(e){this._renderItem=(t,s)=>{const i=this.itemValue(t,s),l=this.selected.includes(i),r=this.selects&&(t==null?void 0:t._$rowType$)!==1;return o`
|
|
2
2
|
<sp-table-row
|
|
3
|
-
value=${
|
|
4
|
-
aria-rowindex=${
|
|
5
|
-
?selected=${
|
|
3
|
+
value=${i}
|
|
4
|
+
aria-rowindex=${s+1}
|
|
5
|
+
?selected=${l}
|
|
6
6
|
>
|
|
7
|
-
${
|
|
7
|
+
${r?o`
|
|
8
8
|
<sp-table-checkbox-cell
|
|
9
|
-
?checked=${
|
|
9
|
+
?checked=${l}
|
|
10
10
|
></sp-table-checkbox-cell>
|
|
11
|
-
`:
|
|
12
|
-
${e(t,
|
|
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
|
|
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 r=t.cloneNode();t.emphasized=this.emphasized,l.insertAdjacentElement("afterbegin",r),t.checked=l.selected}}),i=this.selected.length===this.tableRows.length),this.tableHeadCheckboxCell||(this.tableHeadCheckboxCell=document.createElement("sp-table-checkbox-cell"),this.tableHeadCheckboxCell.headCell=!0,this.tableHeadCheckboxCell.emphasized=this.emphasized,(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"),this.tableHeadCheckboxCell.headCell=!0,this.tableHeadCheckboxCell.emphasized=this.emphasized;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 r=document.createElement("sp-table-checkbox-cell");r.emphasized=this.emphasized,l.insertAdjacentElement("afterbegin",r),l.selected=this.selectedSet.has(l.value),r.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.emphasized=this.emphasized,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 d=this.selected.length===this.tableRows.length;if(!this.tableHeadCheckboxCell)return;this.tableHeadCheckboxCell.checked=d,this.tableHeadCheckboxCell.indeterminate=this.selected.length>0&&!d;break}default:break}else{const{checkbox:d}=i;if(!d)return;d.checked||d.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 o`
|
|
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
|
|
17
|
-
${
|
|
18
|
-
`,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}a([
|
|
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(o`
|
|
17
|
+
${g(e)}
|
|
18
|
+
`,this.tableBody)}disconnectedCallback(){super.disconnectedCallback()}}a([c({reflect:!0})],Table.prototype,"role",2),a([c({type:String,reflect:!0})],Table.prototype,"selects",2),a([c({type:Array})],Table.prototype,"selected",2),a([c({type:Array})],Table.prototype,"items",2),a([c({type:Object})],Table.prototype,"itemValue",2),a([c({type:Boolean,reflect:!0})],Table.prototype,"scroller",2),a([c({type:Boolean,reflect:!0})],Table.prototype,"emphasized",2),a([c({type:Boolean,reflect:!0})],Table.prototype,"quiet",2),a([c({type:String,reflect:!0})],Table.prototype,"density",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": "qNAYA,OAEI,QAAAA,EAEA,UAAAC,EACA,cAAAC,EACA,mBAAAC,MAEG,gCAEP,MAAO,kDACP,MAAO,iDACP,MAAO,2DACP,OAAS,YAAAC,MAAgB,kDACzB,OAAOC,MAAY,iBAMnB,OACI,cAAAC,EAEA,kBAAAC,MACG,sCAEP,OACI,qBAAAC,EACA,0BAAAC,MACG,kCAEA,WAAK,SAAAC,IACRA,IAAA,KAAO,GAAP,OACAA,IAAA,YAAc,GAAd,cAFQA,IAAA,aAgBL,aAAM,cAAcR,EAAWC,EAAiB,CACnD,WAAY,CAAC,IAAK,
|
|
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", "
|
|
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', 'l', 'xl'],\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 /**\n * Deliver the Table with additional visual emphasis to selected rows.\n */\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n /**\n * Display with \"quiet\" variant styles.\n */\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n /**\n * Changes the spacing around table cell content.\n */\n @property({ type: String, reflect: true })\n public density?: 'compact' | 'spacious';\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\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 // Create and initialize checkboxes in all rows within the table body.\n if (!row.querySelector(':scope > sp-table-checkbox-cell')) {\n const clonedCheckbox =\n checkbox.cloneNode() as TableCheckboxCell;\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', clonedCheckbox);\n checkbox.checked = row.selected;\n }\n });\n allSelected = this.selected.length === this.tableRows.length;\n }\n\n // Create and initialize table head checkbox cell.\n if (!this.tableHeadCheckboxCell) {\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n }\n this.manageHeadCheckbox(allSelected);\n } else {\n // Remove all checkbox cells.\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 // Create and initialize table head checkbox cell.\n this.tableHeadCheckboxCell = document.createElement(\n 'sp-table-checkbox-cell'\n ) as TableCheckboxCell;\n this.tableHeadCheckboxCell.headCell = true;\n this.tableHeadCheckboxCell.emphasized = this.emphasized;\n\n const allSelected = this.selected.length === this.tableRows.length;\n this.manageHeadCheckbox(allSelected);\n\n this.tableHead?.insertAdjacentElement(\n 'afterbegin',\n this.tableHeadCheckboxCell\n );\n\n // Create and initialize checkboxes in all rows within the table body.\n this.tableRows.forEach((row) => {\n const checkbox = document.createElement(\n 'sp-table-checkbox-cell'\n );\n checkbox.emphasized = this.emphasized;\n row.insertAdjacentElement('afterbegin', checkbox);\n row.selected = this.selectedSet.has(row.value);\n checkbox.checked = row.selected;\n });\n } else {\n // Remove all checkbox cells.\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.emphasized = this.emphasized;\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": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,UAAAC,EACA,cAAAC,EACA,mBAAAC,MAEG,gCAEP,MAAO,kDACP,MAAO,iDACP,MAAO,2DACP,OAAS,YAAAC,MAAgB,kDACzB,OAAOC,MAAY,iBAMnB,OACI,cAAAC,EAEA,kBAAAC,MACG,sCAEP,OACI,qBAAAC,EACA,0BAAAC,MACG,kCAEA,WAAK,SAAAC,IACRA,IAAA,KAAO,GAAP,OACAA,IAAA,YAAc,GAAd,cAFQA,IAAA,aAgBL,aAAM,cAAcR,EAAWC,EAAiB,CACnD,WAAY,CAAC,IAAK,IAAK,IAAK,IAAI,EAChC,cAAe,EACnB,CAAC,CAAE,CAHI,kCA6CH,KAAQ,YAGmC,IAAMJ,IAGjD,KAAO,KAAO,OAYd,KAAO,SAAqB,CAAC,EAE7B,KAAQ,YAAc,IAAI,IAM1B,KAAO,MAAmC,CAAC,EAM3C,KAAO,UAAY,CAACY,EAAgBC,IACzB,GAAGA,CAAK,GAOnB,KAAO,SAAW,GAMlB,KAAO,WAAa,GAMpB,KAAO,MAAQ,GA7Ff,WAA2B,QAAyB,CAChD,MAAO,CAACP,CAAM,CAClB,CAEA,IAAI,YAGgB,CAChB,OAAO,KAAK,WAChB,CAEA,IAAI,WACAQ,EACF,CACE,KAAK,YAAc,CACfC,EACAF,IACiB,CACjB,MAAMG,EAAQ,KAAK,UAAUD,EAAMF,CAAK,EAClCI,EAAW,KAAK,SAAS,SAASD,CAAK,EACvCE,EAAc,KAAK,UAAWH,GAAA,YAAAA,EAAM,cAAe,EAEzD,OAAOf;AAAA;AAAA,4BAESgB,CAAK;AAAA,oCACGH,EAAQ,CAAC;AAAA,gCACbI,CAAQ;AAAA;AAAA,sBAElBC,EACIlB;AAAA;AAAA,6CAEmBiB,CAAQ;AAAA;AAAA,4BAG3BhB,CAAO;AAAA,sBACXa,EAAGC,EAAMF,CAAK,CAAC;AAAA;AAAA,aAG7B,CACJ,CAkEA,IAAY,WAAuB,CAC/B,OAAO,KAAK,cAAc,eAAe,CAC7C,CAEA,IAAY,WAAwB,CAChC,OAAI,KAAK,cACE,CAAC,EAEL,CAAC,GAAG,KAAK,iBAAiB,cAAc,CAAC,CACpD,CAEA,IAAY,eAAyB,CACjC,MAAO,CAAC,CAAC,KAAK,MAAM,MACxB,CAEgB,OAAc,CAC1B,MAAMM,EAAmB,KAAK,cAC1B,8BACJ,EACIA,GACAA,EAAiB,MAAM,CAE/B,CAEQ,eAAsB,CACtB,KAAK,cACL,KAAK,MAAM,QAAQ,CAACJ,EAAMF,IAAkB,CACpCE,EAAK,aAAe,GACpB,KAAK,YAAY,IAAI,KAAK,UAAUA,EAAMF,CAAK,CAAC,CAExD,CAAC,EAED,KAAK,UAAU,QAASO,GAAQ,CAC5BA,EAAI,SAAW,GACf,KAAK,YAAY,IAAIA,EAAI,KAAK,CAClC,CAAC,EAEL,KAAK,SAAW,CAAC,GAAG,KAAK,WAAW,EAE/B,KAAK,wBACV,KAAK,sBAAsB,QAAU,GACrC,KAAK,sBAAsB,cAAgB,GAC/C,CAEQ,iBAAwB,CAC5B,KAAK,YAAY,MAAM,EACvB,KAAK,SAAW,CAAC,EAEZ,KAAK,eACe,CACjB,GAAG,KAAK,iBAAiB,YAAY,CACzC,EAEa,QAASA,GAAQ,CAC1BA,EAAI,SAAW,EACnB,CAAC,EAGA,KAAK,wBACV,KAAK,sBAAsB,QAAU,GACrC,KAAK,sBAAsB,cAAgB,GAC/C,CAEU,eAAsB,CAxOpC,IAAAC,EAyOQ,MAAMC,EAAa,KAAK,iBAAiB,wBAAwB,EAC3DC,EAAW,SAAS,cAAc,wBAAwB,EAEhE,GAAM,KAAK,QAAS,CAChB,IAAIC,EAAc,GACd,KAAK,cACLA,EACI,KAAK,SAAS,OAAS,GACvB,KAAK,SAAS,SAAW,KAAK,MAAM,QAExC,KAAK,UAAU,QAASJ,GAAQ,CAG5B,GAFAA,EAAI,SAAW,KAAK,YAAY,IAAIA,EAAI,KAAK,EAEzC,CAACA,EAAI,cAAc,iCAAiC,EAAG,CACvD,MAAMK,EACFF,EAAS,UAAU,EACvBA,EAAS,WAAa,KAAK,WAC3BH,EAAI,sBAAsB,aAAcK,CAAc,EACtDF,EAAS,QAAUH,EAAI,QAC3B,CACJ,CAAC,EACDI,EAAc,KAAK,SAAS,SAAW,KAAK,UAAU,QAIrD,KAAK,wBACN,KAAK,sBAAwB,SAAS,cAClC,wBACJ,EACA,KAAK,sBAAsB,SAAW,GACtC,KAAK,sBAAsB,WAAa,KAAK,YAC7CH,EAAA,KAAK,YAAL,MAAAA,EAAgB,sBACZ,aACA,KAAK,wBAGb,KAAK,mBAAmBG,CAAW,CACvC,MAEIF,EAAW,QAASI,GAAQ,CACxBA,EAAI,OAAO,CACf,CAAC,EACD,OAAO,KAAK,qBAEpB,CAEU,kBAAyB,CAC/B,MAAMC,EAAY,IAAI,IAElB,KAAK,cACL,KAAK,MAAM,QAAQ,CAACZ,EAAMF,IAAU,CAChC,MAAMG,EAAQ,KAAK,UAAUD,EAAMF,CAAK,EACxCc,EAAU,IAAIX,CAAK,CACvB,CAAC,EAED,KAAK,UAAU,QAASI,GAAQ,CAC5BO,EAAU,IAAIP,EAAI,KAAK,CAC3B,CAAC,EAGL,MAAMQ,EAAmB,KAAK,SAAS,OAEvC,KAAK,SAAW,KAAK,SAAS,OAAQC,GAClCF,EAAU,IAAIE,CAAY,CAC9B,EACID,IAAqB,KAAK,SAAS,QACnC,KAAK,cACD,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,GACT,SAAU,EACd,CAAC,CACL,EAEJ,KAAK,YAAc,IAAI,IAAI,KAAK,QAAQ,CAC5C,CAEU,gBAAuB,CAC7B,KAAK,iBAAiB,EAElB,MAAK,gBAET,KAAK,UAAU,QAASR,GAAQ,CAC5BA,EAAI,SAAW,KAAK,YAAY,IAAIA,EAAI,KAAK,CACjD,CAAC,EACG,KAAK,wBACL,KAAK,sBAAsB,QACvB,KAAK,SAAS,SAAW,KAAK,UAAU,QAEpD,CAEU,kBAAyB,CApUvC,IAAAC,EAAAS,EAAAC,EAqUQ,GAAM,KAAK,QAAS,CAEhB,KAAK,sBAAwB,SAAS,cAClC,wBACJ,EACA,KAAK,sBAAsB,SAAW,GACtC,KAAK,sBAAsB,WAAa,KAAK,WAE7C,MAAMP,EAAc,KAAK,SAAS,SAAW,KAAK,UAAU,OAC5D,KAAK,mBAAmBA,CAAW,GAEnCH,EAAA,KAAK,YAAL,MAAAA,EAAgB,sBACZ,aACA,KAAK,uBAIT,KAAK,UAAU,QAASD,GAAQ,CAC5B,MAAMG,EAAW,SAAS,cACtB,wBACJ,EACAA,EAAS,WAAa,KAAK,WAC3BH,EAAI,sBAAsB,aAAcG,CAAQ,EAChDH,EAAI,SAAW,KAAK,YAAY,IAAIA,EAAI,KAAK,EAC7CG,EAAS,QAAUH,EAAI,QAC3B,CAAC,CACL,MAEIW,GAAAD,EAAA,KAAK,YAAL,YAAAA,EAAgB,cAAc,4BAA9B,MAAAC,EAAyD,SACzD,KAAK,UAAU,QAASX,GAAQ,CAlW5C,IAAAC,GAmWgBA,EAAAD,EAAI,cAAc,CAAC,IAAnB,MAAAC,EAAsB,SAClB,KAAK,SAAS,SACdD,EAAI,SAAW,KAAK,YAAY,IAAIA,EAAI,KAAK,EAErD,CAAC,CAET,CAEU,mBAAmBI,EAA4B,CAChD,KAAK,wBAEV,KAAK,sBAAsB,cAAgB,KAAK,UAAY,SAC5D,KAAK,sBAAsB,WAAa,KAAK,WAC7C,KAAK,sBAAsB,QAAUA,EACrC,KAAK,sBAAsB,cACvB,KAAK,SAAS,OAAS,GAAK,CAACA,EACrC,CAEU,aAAaQ,EAAoB,CACvCA,EAAM,gBAAgB,EAEtB,MAAMC,EAAsB,IAAI,IAAI,KAAK,WAAW,EAC9CC,EAAmB,CAAC,GAAG,KAAK,QAAQ,EAEpC,CAAE,OAAAC,CAAO,EAAIH,EACb,CAAE,cAAeI,CAAQ,EAAID,EAGnC,GAAKC,EAAQ,MAST,OAAQ,KAAK,QAAS,CAClB,IAAK,SAAU,CACX,KAAK,gBAAgB,EACjBA,EAAQ,WACR,KAAK,YAAY,IAAIA,EAAQ,KAAK,EAClC,KAAK,SAAW,CAAC,GAAG,KAAK,WAAW,GAExC,KACJ,CACA,IAAK,WAAY,CACTA,EAAQ,SACR,KAAK,YAAY,IAAIA,EAAQ,KAAK,EAElC,KAAK,YAAY,OAAOA,EAAQ,KAAK,EAEzC,KAAK,SAAW,CAAC,GAAG,KAAK,WAAW,EAEpC,MAAMZ,EACF,KAAK,SAAS,SAAW,KAAK,UAAU,OAE5C,GAAI,CAAC,KAAK,sBACe,OACzB,KAAK,sBAAsB,QAAUA,EACrC,KAAK,sBAAsB,cACvB,KAAK,SAAS,OAAS,GAAK,CAACA,EACjC,KACJ,CACA,QACI,KAER,KAvCgB,CAChB,KAAM,CAAE,SAAAD,CAAS,EAAIY,EACrB,GAAI,CAACZ,EAAU,OACXA,EAAS,SAAWA,EAAS,cAC7B,KAAK,cAAc,EAEnB,KAAK,gBAAgB,CAE7B,CAiCqB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,GACT,SAAU,EACd,CAAC,CACL,IAEIS,EAAM,eAAe,EACrB,KAAK,YAAcC,EACnB,KAAK,SAAWC,EAExB,CAEO,cAAcrB,EAAsB,CACvC,GAAIA,GAAW,KAAK,UAAW,CAI3B,MAAME,EAHoB,KAAK,UAGAP,CAAc,EAAE,QAAQK,CAAK,EACxDE,GACAA,EAAK,eAAe,CAE5B,CACJ,CAEmB,QAAyB,CACxC,OAAOf;AAAA,4BACa,KAAK,YAAY;AAAA,SAEzC,CAEmB,WAAWqC,EAAqC,CAC1D,KAAK,aACN,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GAEtBA,EAAQ,IAAI,SAAS,GACrB,KAAK,cAAc,EAGnBA,EAAQ,IAAI,UAAU,GAAK,KAAK,YAChC,KAAK,eAAe,CAE5B,CAEmB,SAAgB,CAC3B,KAAK,MAAM,QACX,KAAK,uBAAuB,CAEpC,CAEU,wBAA+B,CAGrC,GAAI,CAAC,KAAK,YAAa,OAClB,KAAK,YACN,KAAK,UAAY,KAAK,cAAc,eAAe,EAC9C,KAAK,YACN,KAAK,UAAY,SAAS,cAAc,eAAe,EACvD,KAAK,OAAO,KAAK,SAAS,GAE9B,KAAK,UAAU,iBACX,eACCL,GAA6B,CAC1B,KAAK,cACD,IAAIvB,EAAkB,CAClB,MAAOuB,EAAM,MACb,KAAMA,EAAM,IAChB,CAAC,CACL,CACJ,CACJ,EACA,KAAK,UAAU,iBACX,oBACCA,GAAkC,CAC/B,KAAK,cACD,IAAItB,EAAuB,CACvB,MAAOsB,EAAM,MACb,KAAMA,EAAM,IAChB,CAAC,CACL,CACJ,CACJ,GAEJ,MAAMM,EAA6D,CAC/D,MAAO,KAAK,MACZ,WAAY,KAAK,WACjB,SAAU,KAAK,QACnB,EACApC,EACIF;AAAA,kBACMO,EAAW+B,CAAM,CAAC;AAAA,cAExB,KAAK,SACT,CACJ,CAEgB,sBAA6B,CACzC,MAAM,qBAAqB,CAC/B,CACJ,CA9ZWC,EAAA,CADNlC,EAAS,CAAE,QAAS,EAAK,CAAC,GAlDlB,MAmDF,oBAMAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAxDhC,MAyDF,uBAMAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,KAAM,CAAC,GA9DhB,MA+DF,wBAQAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,KAAM,CAAC,GAtEhB,MAuEF,qBAMAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,MAAO,CAAC,GA5EjB,MA6EF,yBAQAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApFjC,MAqFF,wBAMAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1FjC,MA2FF,0BAMAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhGjC,MAiGF,qBAMAkC,EAAA,CADNlC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAtGhC,MAuGF",
|
|
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
|
}
|
|
@@ -6,12 +6,17 @@ import { Checkbox } from '@spectrum-web-components/checkbox';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare class TableCheckboxCell extends SpectrumElement {
|
|
8
8
|
static get styles(): CSSResultArray;
|
|
9
|
+
/**
|
|
10
|
+
* Whether or not the checkbox cell is in the table head.
|
|
11
|
+
*/
|
|
12
|
+
headCell: boolean;
|
|
9
13
|
role: string;
|
|
10
14
|
checkbox: Checkbox;
|
|
11
15
|
indeterminate: boolean;
|
|
12
16
|
checked: boolean;
|
|
13
17
|
disabled: boolean;
|
|
14
18
|
selectsSingle: boolean;
|
|
19
|
+
emphasized: boolean;
|
|
15
20
|
click(): void;
|
|
16
21
|
protected render(): TemplateResult;
|
|
17
22
|
}
|
|
@@ -20,20 +20,20 @@ import {
|
|
|
20
20
|
query
|
|
21
21
|
} from "@spectrum-web-components/base/src/decorators.js";
|
|
22
22
|
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
23
|
-
import cellStyles from "./table-cell.css.js";
|
|
24
|
-
import headCellStyles from "./table-head-cell.css.js";
|
|
25
23
|
import styles from "./table-checkbox-cell.css.js";
|
|
26
24
|
export class TableCheckboxCell extends SpectrumElement {
|
|
27
25
|
constructor() {
|
|
28
26
|
super(...arguments);
|
|
27
|
+
this.headCell = false;
|
|
29
28
|
this.role = "gridcell";
|
|
30
29
|
this.indeterminate = false;
|
|
31
30
|
this.checked = false;
|
|
32
31
|
this.disabled = false;
|
|
33
32
|
this.selectsSingle = false;
|
|
33
|
+
this.emphasized = false;
|
|
34
34
|
}
|
|
35
35
|
static get styles() {
|
|
36
|
-
return [
|
|
36
|
+
return [styles];
|
|
37
37
|
}
|
|
38
38
|
click() {
|
|
39
39
|
this.checkbox.click();
|
|
@@ -44,12 +44,16 @@ export class TableCheckboxCell extends SpectrumElement {
|
|
|
44
44
|
?checked=${this.checked}
|
|
45
45
|
?indeterminate=${this.indeterminate}
|
|
46
46
|
?disabled=${this.disabled}
|
|
47
|
+
?emphasized=${this.emphasized}
|
|
47
48
|
aria-hidden=${ifDefined(this.selectsSingle)}
|
|
48
49
|
class="checkbox"
|
|
49
50
|
></sp-checkbox>
|
|
50
51
|
`;
|
|
51
52
|
}
|
|
52
53
|
}
|
|
54
|
+
__decorateClass([
|
|
55
|
+
property({ type: Boolean, reflect: true, attribute: "head-cell" })
|
|
56
|
+
], TableCheckboxCell.prototype, "headCell", 2);
|
|
53
57
|
__decorateClass([
|
|
54
58
|
property({ reflect: true })
|
|
55
59
|
], TableCheckboxCell.prototype, "role", 2);
|
|
@@ -68,4 +72,7 @@ __decorateClass([
|
|
|
68
72
|
__decorateClass([
|
|
69
73
|
property({ type: Boolean, reflect: true, attribute: "selects-single" })
|
|
70
74
|
], TableCheckboxCell.prototype, "selectsSingle", 2);
|
|
75
|
+
__decorateClass([
|
|
76
|
+
property({ type: Boolean, reflect: true })
|
|
77
|
+
], TableCheckboxCell.prototype, "emphasized", 2);
|
|
71
78
|
//# sourceMappingURL=TableCheckboxCell.dev.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TableCheckboxCell.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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAC1B,OAAO,
|
|
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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table-checkbox-cell\n */\nexport class TableCheckboxCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Whether or not the checkbox cell is in the table head.\n */\n @property({ type: Boolean, reflect: true, attribute: 'head-cell' })\n public headCell = false;\n\n @property({ reflect: true })\n public role = 'gridcell';\n\n @query('.checkbox')\n public checkbox!: Checkbox;\n\n @property({ type: Boolean })\n public indeterminate = false;\n\n @property({ type: Boolean })\n public checked = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n public selectsSingle = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public override click(): void {\n this.checkbox.click();\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-checkbox\n ?checked=${this.checked}\n ?indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?emphasized=${this.emphasized}\n aria-hidden=${ifDefined(this.selectsSingle)}\n class=\"checkbox\"\n ></sp-checkbox>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAWA;AAAA,EAEI;AAAA,EACA;AAAA,OAEG;AACP,OAAO;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAC1B,OAAO,YAAY;AAMZ,aAAM,0BAA0B,gBAAgB;AAAA,EAAhD;AAAA;AASH,SAAO,WAAW;AAGlB,SAAO,OAAO;AAMd,SAAO,gBAAgB;AAGvB,SAAO,UAAU;AAGjB,SAAO,WAAW;AAGlB,SAAO,gBAAgB;AAGvB,SAAO,aAAa;AAAA;AAAA,EA7BpB,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EA6BgB,QAAc;AAC1B,SAAK,SAAS,MAAM;AAAA,EACxB;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,2BAEY,KAAK,OAAO;AAAA,iCACN,KAAK,aAAa;AAAA,4BACvB,KAAK,QAAQ;AAAA,8BACX,KAAK,UAAU;AAAA,8BACf,UAAU,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA,EAIvD;AACJ;AAvCW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,YAAY,CAAC;AAAA,GARzD,kBASF;AAGA;AAAA,EADN,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAXlB,kBAYF;AAGA;AAAA,EADN,MAAM,WAAW;AAAA,GAdT,kBAeF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAjBlB,kBAkBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GApBlB,kBAqBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAvBlB,kBAwBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA1B9D,kBA2BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BjC,kBA8BF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/TableCheckboxCell.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var e=(s,r,l,c)=>{for(var t=c>1?void 0:c?a(r,l):r,p=s.length-1,o;p>=0;p--)(o=s[p])&&(t=(c?o(r,l,t):o(t))||t);return c&&t&&d(r,l,t),t};import{html as u,SpectrumElement as m}from"@spectrum-web-components/base";import"@spectrum-web-components/checkbox/sp-checkbox.js";import{property as i,query as n}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as f}from"@spectrum-web-components/base/src/directives.js";import h from"./table-checkbox-cell.css.js";export class TableCheckboxCell extends m{constructor(){super(...arguments);this.headCell=!1;this.role="gridcell";this.indeterminate=!1;this.checked=!1;this.disabled=!1;this.selectsSingle=!1;this.emphasized=!1}static get styles(){return[h]}click(){this.checkbox.click()}render(){return u`
|
|
2
2
|
<sp-checkbox
|
|
3
3
|
?checked=${this.checked}
|
|
4
4
|
?indeterminate=${this.indeterminate}
|
|
5
5
|
?disabled=${this.disabled}
|
|
6
|
+
?emphasized=${this.emphasized}
|
|
6
7
|
aria-hidden=${f(this.selectsSingle)}
|
|
7
8
|
class="checkbox"
|
|
8
9
|
></sp-checkbox>
|
|
9
|
-
`}}
|
|
10
|
+
`}}e([i({type:Boolean,reflect:!0,attribute:"head-cell"})],TableCheckboxCell.prototype,"headCell",2),e([i({reflect:!0})],TableCheckboxCell.prototype,"role",2),e([n(".checkbox")],TableCheckboxCell.prototype,"checkbox",2),e([i({type:Boolean})],TableCheckboxCell.prototype,"indeterminate",2),e([i({type:Boolean})],TableCheckboxCell.prototype,"checked",2),e([i({type:Boolean})],TableCheckboxCell.prototype,"disabled",2),e([i({type:Boolean,reflect:!0,attribute:"selects-single"})],TableCheckboxCell.prototype,"selectsSingle",2),e([i({type:Boolean,reflect:!0})],TableCheckboxCell.prototype,"emphasized",2);
|
|
10
11
|
//# sourceMappingURL=TableCheckboxCell.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["TableCheckboxCell.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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport
|
|
5
|
-
"mappings": "qNAWA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,MAAO,mDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAC1B,OAAOC,
|
|
6
|
-
"names": ["html", "SpectrumElement", "property", "query", "ifDefined", "
|
|
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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table-checkbox-cell\n */\nexport class TableCheckboxCell extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Whether or not the checkbox cell is in the table head.\n */\n @property({ type: Boolean, reflect: true, attribute: 'head-cell' })\n public headCell = false;\n\n @property({ reflect: true })\n public role = 'gridcell';\n\n @query('.checkbox')\n public checkbox!: Checkbox;\n\n @property({ type: Boolean })\n public indeterminate = false;\n\n @property({ type: Boolean })\n public checked = false;\n\n @property({ type: Boolean })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n public selectsSingle = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n public override click(): void {\n this.checkbox.click();\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-checkbox\n ?checked=${this.checked}\n ?indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?emphasized=${this.emphasized}\n aria-hidden=${ifDefined(this.selectsSingle)}\n class=\"checkbox\"\n ></sp-checkbox>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAWA,OAEI,QAAAA,EACA,mBAAAC,MAEG,gCACP,MAAO,mDACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAC1B,OAAOC,MAAY,+BAMZ,aAAM,0BAA0BJ,CAAgB,CAAhD,kCASH,KAAO,SAAW,GAGlB,KAAO,KAAO,WAMd,KAAO,cAAgB,GAGvB,KAAO,QAAU,GAGjB,KAAO,SAAW,GAGlB,KAAO,cAAgB,GAGvB,KAAO,WAAa,GA7BpB,WAA2B,QAAyB,CAChD,MAAO,CAACI,CAAM,CAClB,CA6BgB,OAAc,CAC1B,KAAK,SAAS,MAAM,CACxB,CAEmB,QAAyB,CACxC,OAAOL;AAAA;AAAA,2BAEY,KAAK,OAAO;AAAA,iCACN,KAAK,aAAa;AAAA,4BACvB,KAAK,QAAQ;AAAA,8BACX,KAAK,UAAU;AAAA,8BACfI,EAAU,KAAK,aAAa,CAAC;AAAA;AAAA;AAAA,SAIvD,CACJ,CAvCWE,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,WAAY,CAAC,GARzD,kBASF,wBAGAI,EAAA,CADNJ,EAAS,CAAE,QAAS,EAAK,CAAC,GAXlB,kBAYF,oBAGAI,EAAA,CADNH,EAAM,WAAW,GAdT,kBAeF,wBAGAG,EAAA,CADNJ,EAAS,CAAE,KAAM,OAAQ,CAAC,GAjBlB,kBAkBF,6BAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,OAAQ,CAAC,GApBlB,kBAqBF,uBAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,OAAQ,CAAC,GAvBlB,kBAwBF,wBAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,gBAAiB,CAAC,GA1B9D,kBA2BF,6BAGAI,EAAA,CADNJ,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,kBA8BF",
|
|
6
|
+
"names": ["html", "SpectrumElement", "property", "query", "ifDefined", "styles", "__decorateClass"]
|
|
7
7
|
}
|