@rozie-ui/data-table-lit 0.2.2 → 0.2.3

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.
Files changed (10) hide show
  1. package/dist/index.cjs +17 -17
  2. package/dist/index.d.cts +30 -30
  3. package/dist/index.d.mts +30 -30
  4. package/dist/index.mjs +17 -17
  5. package/package.json +2 -2
  6. package/src/DataTable.ts +50 -50
  7. package/src/DetailPanel.ts +2 -2
  8. package/src/EditorSelect.ts +1 -1
  9. package/src/FilterSelect.ts +1 -1
  10. package/src/GroupBar.ts +2 -2
package/dist/index.cjs CHANGED
@@ -3804,7 +3804,7 @@ ${!!this._invalidMsg.value ? lit.html`<div class="rdt-sr-live" role="status" ari
3804
3804
  ${this.allLeafColumns().length ? lit.html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
3805
3805
  <summary class="rdt-colvis-summary" data-rozie-s-d5dcab4c>Columns</summary>
3806
3806
  <div class="rdt-colvis-menu" role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c>
3807
- ${(0, lit_directives_repeat_js.repeat)(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => lit.html`<label class="rdt-colvis-item" key=${(0, _rozie_runtime_lit.rozieAttr)(lc.id)} data-rozie-s-d5dcab4c>
3807
+ ${(0, lit_directives_repeat_js.repeat)(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => lit.html`<label class="rdt-colvis-item" data-rozie-s-d5dcab4c>
3808
3808
  <input class="rdt-colvis-checkbox" type="checkbox" ?checked=${lc.visible} @change=${($event) => {
3809
3809
  this.onToggleVisibility(lc.id);
3810
3810
  }} data-rozie-s-d5dcab4c />
@@ -3830,7 +3830,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
3830
3830
  return "{}";
3831
3831
  }
3832
3832
  })()} @rozie-group-bar-apply-grouping=${($event) => this.applyGrouping($event.detail)} @rozie-group-bar-clear-grouping=${($event) => this.clearGrouping($event.detail)}>
3833
- ${(0, lit_directives_repeat_js.repeat)(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => lit.html`<span class="rdt-group-token" data-group-token="" key=${(0, _rozie_runtime_lit.rozieAttr)(gk)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(gk)}</span>`)}
3833
+ ${(0, lit_directives_repeat_js.repeat)(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => lit.html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(gk)}</span>`)}
3834
3834
  </slot>`}
3835
3835
  </div>` : lit.nothing}${this.virtual ? lit.html`<div class="rdt-scroll" style=${(0, _rozie_runtime_lit.rozieStyle)(this.maxHeight ? "max-height:" + this.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + this.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c>
3836
3836
  <table class="${Object.entries({
@@ -3850,14 +3850,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
3850
3850
  this.onGridClick($event);
3851
3851
  }} data-rozie-s-d5dcab4c>
3852
3852
  <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
3853
- ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" key=${(0, _rozie_runtime_lit.rozieAttr)(hg.id)} aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
3853
+ ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
3854
3854
  ${(0, lit_directives_repeat_js.repeat)(hg.headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="${Object.entries({
3855
3855
  "rdt-th": true,
3856
3856
  "rdt-select-th": this.isSelectColumn(header.column.id),
3857
3857
  "rdt-expander-th": this.isExpanderColumn(header.column.id),
3858
3858
  "rdt-th-resizing": this.columnIsResizing(header.column.id),
3859
3859
  "rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
3860
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
3860
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
3861
3861
  ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
3862
3862
  ${this.selectAll !== void 0 ? this.selectAll({
3863
3863
  checked: this.isAllRowsSelected(),
@@ -3940,7 +3940,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
3940
3940
  </tr>`)}
3941
3941
 
3942
3942
  ${this.hasAnyFilterableColumn() ? lit.html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
3943
- ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
3943
+ ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
3944
3944
  ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
3945
3945
  ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? lit.html`<input class="rdt-col-filter" type="text" aria-label=${(0, _rozie_runtime_lit.rozieAttr)("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
3946
3946
  this.onColumnFilterInput(header.column.id, $event);
@@ -3986,7 +3986,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
3986
3986
  "rdt-expander-td": this.isExpanderColumn(cell.column.id),
3987
3987
  "rdt-in-range": this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)),
3988
3988
  "rdt-cell-active": this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell))
3989
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} key=${(0, _rozie_runtime_lit.rozieAttr)(cell.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(wr.vi.index)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(wr.row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
3989
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(wr.vi.index)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(wr.row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
3990
3990
 
3991
3991
  ${this.isExpanderColumn(cell.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
3992
3992
  ${this.rowCanExpand(wr.row) ? lit.html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIsExpanded(wr.row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4072,7 +4072,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
4072
4072
  }} @blur=${($event) => {
4073
4073
  this.onEditorBlur($event);
4074
4074
  }} data-rozie-s-d5dcab4c>
4075
- ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
4075
+ ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
4076
4076
  </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? lit.html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
4077
4077
  this.onCellEditorCheckbox(cell.column.id, $event);
4078
4078
  }} @keydown=${($event) => {
@@ -4142,14 +4142,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
4142
4142
  this.onGridClick($event);
4143
4143
  }} data-rozie-s-d5dcab4c>
4144
4144
  <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
4145
- ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" key=${(0, _rozie_runtime_lit.rozieAttr)(hg.id)} aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
4145
+ ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => lit.html`<tr class="rdt-tr" role="row" aria-rowindex=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel + 1)} data-rozie-s-d5dcab4c>
4146
4146
  ${(0, lit_directives_repeat_js.repeat)(hg.headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="${Object.entries({
4147
4147
  "rdt-th": true,
4148
4148
  "rdt-select-th": this.isSelectColumn(header.column.id),
4149
4149
  "rdt-expander-th": this.isExpanderColumn(header.column.id),
4150
4150
  "rdt-th-resizing": this.columnIsResizing(header.column.id),
4151
4151
  "rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
4152
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
4152
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${(0, _rozie_runtime_lit.rozieAttr)(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${(0, _rozie_runtime_lit.rozieAttr)(hgLevel)} colspan=${(0, _rozie_runtime_lit.rozieAttr)(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.headerColIndexOf(hg, header))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${(0, _rozie_runtime_lit.rozieAttr)(this.ariaSortFor(header.column.id))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
4153
4153
 
4154
4154
 
4155
4155
  ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4238,7 +4238,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
4238
4238
  </tr>`)}
4239
4239
 
4240
4240
  ${this.hasAnyFilterableColumn() ? lit.html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
4241
- ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" key=${(0, _rozie_runtime_lit.rozieAttr)(header.id)} style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
4241
+ ${(0, lit_directives_repeat_js.repeat)(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => lit.html`<th class="rdt-filter-cell" role="presentation" style=${(0, _rozie_runtime_lit.rozieStyle)(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
4242
4242
  ${this.isSelectColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
4243
4243
  ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? lit.html`<input class="rdt-col-filter" type="text" aria-label=${(0, _rozie_runtime_lit.rozieAttr)("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
4244
4244
  this.onColumnFilterInput(header.column.id, $event);
@@ -4279,7 +4279,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
4279
4279
  "rdt-expander-td": this.isExpanderColumn(cell.column.id),
4280
4280
  "rdt-in-range": this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)),
4281
4281
  "rdt-cell-active": this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell))
4282
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} key=${(0, _rozie_runtime_lit.rozieAttr)(cell.id)} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIndexOf(row))} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
4282
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.cellRole())} data-col=${(0, _rozie_runtime_lit.rozieAttr)(cell.column.id)} data-grid-cell="" data-row=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIndexOf(row))} data-col-index=${(0, _rozie_runtime_lit.rozieAttr)(this.colIndexOf(row, cell))} tabindex=${(0, _rozie_runtime_lit.rozieAttr)(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${(0, _rozie_runtime_lit.rozieStyle)(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${(0, _rozie_runtime_lit.rozieAttr)(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${(0, _rozie_runtime_lit.rozieAttr)(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${(0, _rozie_runtime_lit.rozieAttr)(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
4283
4283
 
4284
4284
  ${this.isExpanderColumn(cell.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
4285
4285
  ${this.rowCanExpand(row) ? lit.html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${(0, _rozie_runtime_lit.rozieAttr)(this.rowIsExpanded(row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4365,7 +4365,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
4365
4365
  }} @blur=${($event) => {
4366
4366
  this.onEditorBlur($event);
4367
4367
  }} data-rozie-s-d5dcab4c>
4368
- ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
4368
+ ${(0, lit_directives_repeat_js.repeat)(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
4369
4369
  </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? lit.html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
4370
4370
  this.onCellEditorCheckbox(cell.column.id, $event);
4371
4371
  }} @keydown=${($event) => {
@@ -5044,7 +5044,7 @@ let EditorSelect = class EditorSelect extends (0, _lit_labs_preact_signals.Signa
5044
5044
  }} @blur=${($event) => {
5045
5045
  this.onBlur();
5046
5046
  }} data-rozie-s-117f1a16>
5047
- ${(0, lit_directives_repeat_js.repeat)(this.options, (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-117f1a16>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
5047
+ ${(0, lit_directives_repeat_js.repeat)(this.options, (opt, _idx) => opt.value, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt.value)} data-rozie-s-117f1a16>${(0, _rozie_runtime_lit.rozieDisplay)(opt.label)}</option>`)}
5048
5048
  </select>
5049
5049
  `;
5050
5050
  }
@@ -5387,7 +5387,7 @@ let FilterSelect = class FilterSelect extends (0, _lit_labs_preact_signals.Signa
5387
5387
  this.onChange($event);
5388
5388
  }} data-rozie-s-d75b42b2>
5389
5389
  <option value="" data-rozie-s-d75b42b2>All</option>
5390
- ${(0, lit_directives_repeat_js.repeat)(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => lit.html`<option key=${(0, _rozie_runtime_lit.rozieAttr)(opt)} value=${(0, _rozie_runtime_lit.rozieAttr)(opt)} data-rozie-s-d75b42b2>${(0, _rozie_runtime_lit.rozieDisplay)(opt)}</option>`)}
5390
+ ${(0, lit_directives_repeat_js.repeat)(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => lit.html`<option value=${(0, _rozie_runtime_lit.rozieAttr)(opt)} data-rozie-s-d75b42b2>${(0, _rozie_runtime_lit.rozieDisplay)(opt)}</option>`)}
5391
5391
  </select>
5392
5392
  `;
5393
5393
  }
@@ -5558,7 +5558,7 @@ let GroupBar = class GroupBar extends (0, _lit_labs_preact_signals.SignalWatcher
5558
5558
  return lit.html`
5559
5559
  <div class="rdt-group-bar" data-rozie-s-546c469a>
5560
5560
 
5561
- ${(0, lit_directives_repeat_js.repeat)(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => lit.html`<span class="rdt-group-token" part="group-token" key=${(0, _rozie_runtime_lit.rozieAttr)(col.id)} draggable="true" @dragstart=${($event) => {
5561
+ ${(0, lit_directives_repeat_js.repeat)(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => lit.html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event) => {
5562
5562
  this.onChipDragStart($event, col.id);
5563
5563
  }} @dragend=${($event) => {
5564
5564
  this.onDragEnd();
@@ -5579,7 +5579,7 @@ let GroupBar = class GroupBar extends (0, _lit_labs_preact_signals.SignalWatcher
5579
5579
  ${!this.grouping.length ? lit.html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : lit.nothing}${(0, lit_directives_repeat_js.repeat)(this.grouping, (gk, _idx) => gk, (gk, _idx) => lit.html`<span class="${Object.entries({
5580
5580
  "rdt-group-token": true,
5581
5581
  "is-drop-target": this._dragKind.value === "token" && this._dropKey.value === gk && this._draggingId.value !== gk
5582
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" key=${(0, _rozie_runtime_lit.rozieAttr)(gk)} draggable="true" @dragstart=${($event) => {
5582
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event) => {
5583
5583
  this.onTokenDragStart($event, gk);
5584
5584
  }} @dragover=${($event) => {
5585
5585
  this.onTokenDragOver($event, gk);
@@ -5641,7 +5641,7 @@ let DetailPanel = class DetailPanel extends (0, _lit_labs_preact_signals.SignalW
5641
5641
  return lit.html`
5642
5642
  <dl class="rdt-detail-panel" data-rozie-s-8f65bdaa>
5643
5643
 
5644
- ${(0, lit_directives_repeat_js.repeat)(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => lit.html`<div class="rdt-detail-entry" key=${(0, _rozie_runtime_lit.rozieAttr)(pair.key)} data-rozie-s-8f65bdaa>
5644
+ ${(0, lit_directives_repeat_js.repeat)(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => lit.html`<div class="rdt-detail-entry" data-rozie-s-8f65bdaa>
5645
5645
  <dt class="rdt-detail-key" data-rozie-s-8f65bdaa>${(0, _rozie_runtime_lit.rozieDisplay)(pair.key)}</dt>
5646
5646
  <dd class="rdt-detail-value" data-rozie-s-8f65bdaa>${(0, _rozie_runtime_lit.rozieDisplay)(pair.value)}</dd>
5647
5647
  </div>`)}
package/dist/index.d.cts CHANGED
@@ -174,64 +174,64 @@ declare class DataTable extends DataTable_base {
174
174
  private _hasSlotGroupBar;
175
175
  private _slotGroupBarElements;
176
176
  groupBar?: (scope: {
177
- grouping: unknown;
178
- groupableColumns: unknown;
179
- applyGrouping: unknown;
180
- clearGrouping: unknown;
177
+ grouping: any;
178
+ groupableColumns: any;
179
+ applyGrouping: any;
180
+ clearGrouping: any;
181
181
  }) => unknown;
182
182
  private _hasSlotSelectAll;
183
183
  private _slotSelectAllElements;
184
184
  selectAll?: (scope: {
185
- checked: unknown;
186
- indeterminate: unknown;
187
- toggle: unknown;
185
+ checked: any;
186
+ indeterminate: any;
187
+ toggle: any;
188
188
  }) => unknown;
189
189
  private _hasSlotColHeader;
190
190
  private _slotColHeaderElements;
191
191
  colHeader?: (scope: {
192
- columnId: unknown;
193
- column: unknown;
194
- label: unknown;
192
+ columnId: any;
193
+ column: any;
194
+ label: any;
195
195
  }) => unknown;
196
196
  private _hasSlotFilter;
197
197
  private _slotFilterElements;
198
198
  filter?: (scope: {
199
- columnId: unknown;
200
- value: unknown;
201
- uniqueValues: unknown;
202
- minMax: unknown;
203
- setFilter: unknown;
199
+ columnId: any;
200
+ value: any;
201
+ uniqueValues: any;
202
+ minMax: any;
203
+ setFilter: any;
204
204
  }) => unknown;
205
205
  private _hasSlotSelectCell;
206
206
  private _slotSelectCellElements;
207
207
  selectCell?: (scope: {
208
- row: unknown;
209
- checked: unknown;
210
- toggle: unknown;
208
+ row: any;
209
+ checked: any;
210
+ toggle: any;
211
211
  }) => unknown;
212
212
  private _hasSlotCell;
213
213
  private _slotCellElements;
214
214
  cell?: (scope: {
215
- columnId: unknown;
216
- column: unknown;
217
- row: unknown;
218
- value: unknown;
215
+ columnId: any;
216
+ column: any;
217
+ row: any;
218
+ value: any;
219
219
  }) => unknown;
220
220
  private _hasSlotEditor;
221
221
  private _slotEditorElements;
222
222
  editor?: (scope: {
223
- columnId: unknown;
224
- column: unknown;
225
- row: unknown;
226
- value: unknown;
227
- commit: unknown;
228
- cancel: unknown;
229
- autofocus: unknown;
223
+ columnId: any;
224
+ column: any;
225
+ row: any;
226
+ value: any;
227
+ commit: any;
228
+ cancel: any;
229
+ autofocus: any;
230
230
  }) => unknown;
231
231
  private _hasSlotDetail;
232
232
  private _slotDetailElements;
233
233
  detail?: (scope: {
234
- row: unknown;
234
+ row: any;
235
235
  }) => unknown;
236
236
  private _disconnectCleanups;
237
237
  private _rozieTornDown;
package/dist/index.d.mts CHANGED
@@ -174,64 +174,64 @@ declare class DataTable extends DataTable_base {
174
174
  private _hasSlotGroupBar;
175
175
  private _slotGroupBarElements;
176
176
  groupBar?: (scope: {
177
- grouping: unknown;
178
- groupableColumns: unknown;
179
- applyGrouping: unknown;
180
- clearGrouping: unknown;
177
+ grouping: any;
178
+ groupableColumns: any;
179
+ applyGrouping: any;
180
+ clearGrouping: any;
181
181
  }) => unknown;
182
182
  private _hasSlotSelectAll;
183
183
  private _slotSelectAllElements;
184
184
  selectAll?: (scope: {
185
- checked: unknown;
186
- indeterminate: unknown;
187
- toggle: unknown;
185
+ checked: any;
186
+ indeterminate: any;
187
+ toggle: any;
188
188
  }) => unknown;
189
189
  private _hasSlotColHeader;
190
190
  private _slotColHeaderElements;
191
191
  colHeader?: (scope: {
192
- columnId: unknown;
193
- column: unknown;
194
- label: unknown;
192
+ columnId: any;
193
+ column: any;
194
+ label: any;
195
195
  }) => unknown;
196
196
  private _hasSlotFilter;
197
197
  private _slotFilterElements;
198
198
  filter?: (scope: {
199
- columnId: unknown;
200
- value: unknown;
201
- uniqueValues: unknown;
202
- minMax: unknown;
203
- setFilter: unknown;
199
+ columnId: any;
200
+ value: any;
201
+ uniqueValues: any;
202
+ minMax: any;
203
+ setFilter: any;
204
204
  }) => unknown;
205
205
  private _hasSlotSelectCell;
206
206
  private _slotSelectCellElements;
207
207
  selectCell?: (scope: {
208
- row: unknown;
209
- checked: unknown;
210
- toggle: unknown;
208
+ row: any;
209
+ checked: any;
210
+ toggle: any;
211
211
  }) => unknown;
212
212
  private _hasSlotCell;
213
213
  private _slotCellElements;
214
214
  cell?: (scope: {
215
- columnId: unknown;
216
- column: unknown;
217
- row: unknown;
218
- value: unknown;
215
+ columnId: any;
216
+ column: any;
217
+ row: any;
218
+ value: any;
219
219
  }) => unknown;
220
220
  private _hasSlotEditor;
221
221
  private _slotEditorElements;
222
222
  editor?: (scope: {
223
- columnId: unknown;
224
- column: unknown;
225
- row: unknown;
226
- value: unknown;
227
- commit: unknown;
228
- cancel: unknown;
229
- autofocus: unknown;
223
+ columnId: any;
224
+ column: any;
225
+ row: any;
226
+ value: any;
227
+ commit: any;
228
+ cancel: any;
229
+ autofocus: any;
230
230
  }) => unknown;
231
231
  private _hasSlotDetail;
232
232
  private _slotDetailElements;
233
233
  detail?: (scope: {
234
- row: unknown;
234
+ row: any;
235
235
  }) => unknown;
236
236
  private _disconnectCleanups;
237
237
  private _rozieTornDown;
package/dist/index.mjs CHANGED
@@ -3800,7 +3800,7 @@ ${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-li
3800
3800
  ${this.allLeafColumns().length ? html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
3801
3801
  <summary class="rdt-colvis-summary" data-rozie-s-d5dcab4c>Columns</summary>
3802
3802
  <div class="rdt-colvis-menu" role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c>
3803
- ${repeat(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" key=${rozieAttr(lc.id)} data-rozie-s-d5dcab4c>
3803
+ ${repeat(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" data-rozie-s-d5dcab4c>
3804
3804
  <input class="rdt-colvis-checkbox" type="checkbox" ?checked=${lc.visible} @change=${($event) => {
3805
3805
  this.onToggleVisibility(lc.id);
3806
3806
  }} data-rozie-s-d5dcab4c />
@@ -3826,7 +3826,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
3826
3826
  return "{}";
3827
3827
  }
3828
3828
  })()} @rozie-group-bar-apply-grouping=${($event) => this.applyGrouping($event.detail)} @rozie-group-bar-clear-grouping=${($event) => this.clearGrouping($event.detail)}>
3829
- ${repeat(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" key=${rozieAttr(gk)} data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
3829
+ ${repeat(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
3830
3830
  </slot>`}
3831
3831
  </div>` : nothing}${this.virtual ? html`<div class="rdt-scroll" style=${rozieStyle(this.maxHeight ? "max-height:" + this.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + this.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c>
3832
3832
  <table class="${Object.entries({
@@ -3846,14 +3846,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
3846
3846
  this.onGridClick($event);
3847
3847
  }} data-rozie-s-d5dcab4c>
3848
3848
  <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
3849
- ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
3849
+ ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
3850
3850
  ${repeat(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({
3851
3851
  "rdt-th": true,
3852
3852
  "rdt-select-th": this.isSelectColumn(header.column.id),
3853
3853
  "rdt-expander-th": this.isExpanderColumn(header.column.id),
3854
3854
  "rdt-th-resizing": this.columnIsResizing(header.column.id),
3855
3855
  "rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
3856
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
3856
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
3857
3857
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
3858
3858
  ${this.selectAll !== void 0 ? this.selectAll({
3859
3859
  checked: this.isAllRowsSelected(),
@@ -3936,7 +3936,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
3936
3936
  </tr>`)}
3937
3937
 
3938
3938
  ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
3939
- ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
3939
+ ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
3940
3940
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
3941
3941
  ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
3942
3942
  this.onColumnFilterInput(header.column.id, $event);
@@ -3982,7 +3982,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
3982
3982
  "rdt-expander-td": this.isExpanderColumn(cell.column.id),
3983
3983
  "rdt-in-range": this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)),
3984
3984
  "rdt-cell-active": this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell))
3985
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
3985
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
3986
3986
 
3987
3987
  ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
3988
3988
  ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4068,7 +4068,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
4068
4068
  }} @blur=${($event) => {
4069
4069
  this.onEditorBlur($event);
4070
4070
  }} data-rozie-s-d5dcab4c>
4071
- ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
4071
+ ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
4072
4072
  </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
4073
4073
  this.onCellEditorCheckbox(cell.column.id, $event);
4074
4074
  }} @keydown=${($event) => {
@@ -4138,14 +4138,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
4138
4138
  this.onGridClick($event);
4139
4139
  }} data-rozie-s-d5dcab4c>
4140
4140
  <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
4141
- ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
4141
+ ${repeat(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
4142
4142
  ${repeat(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({
4143
4143
  "rdt-th": true,
4144
4144
  "rdt-select-th": this.isSelectColumn(header.column.id),
4145
4145
  "rdt-expander-th": this.isExpanderColumn(header.column.id),
4146
4146
  "rdt-th-resizing": this.columnIsResizing(header.column.id),
4147
4147
  "rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
4148
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
4148
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
4149
4149
 
4150
4150
 
4151
4151
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4234,7 +4234,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
4234
4234
  </tr>`)}
4235
4235
 
4236
4236
  ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
4237
- ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
4237
+ ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
4238
4238
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
4239
4239
  ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
4240
4240
  this.onColumnFilterInput(header.column.id, $event);
@@ -4275,7 +4275,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
4275
4275
  "rdt-expander-td": this.isExpanderColumn(cell.column.id),
4276
4276
  "rdt-in-range": this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)),
4277
4277
  "rdt-cell-active": this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell))
4278
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
4278
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
4279
4279
 
4280
4280
  ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
4281
4281
  ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -4361,7 +4361,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
4361
4361
  }} @blur=${($event) => {
4362
4362
  this.onEditorBlur($event);
4363
4363
  }} data-rozie-s-d5dcab4c>
4364
- ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
4364
+ ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
4365
4365
  </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
4366
4366
  this.onCellEditorCheckbox(cell.column.id, $event);
4367
4367
  }} @keydown=${($event) => {
@@ -5040,7 +5040,7 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
5040
5040
  }} @blur=${($event) => {
5041
5041
  this.onBlur();
5042
5042
  }} data-rozie-s-117f1a16>
5043
- ${repeat(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
5043
+ ${repeat(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
5044
5044
  </select>
5045
5045
  `;
5046
5046
  }
@@ -5383,7 +5383,7 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
5383
5383
  this.onChange($event);
5384
5384
  }} data-rozie-s-d75b42b2>
5385
5385
  <option value="" data-rozie-s-d75b42b2>All</option>
5386
- ${repeat(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option key=${rozieAttr(opt)} value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
5386
+ ${repeat(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
5387
5387
  </select>
5388
5388
  `;
5389
5389
  }
@@ -5554,7 +5554,7 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
5554
5554
  return html`
5555
5555
  <div class="rdt-group-bar" data-rozie-s-546c469a>
5556
5556
 
5557
- ${repeat(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" key=${rozieAttr(col.id)} draggable="true" @dragstart=${($event) => {
5557
+ ${repeat(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event) => {
5558
5558
  this.onChipDragStart($event, col.id);
5559
5559
  }} @dragend=${($event) => {
5560
5560
  this.onDragEnd();
@@ -5575,7 +5575,7 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
5575
5575
  ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({
5576
5576
  "rdt-group-token": true,
5577
5577
  "is-drop-target": this._dragKind.value === "token" && this._dropKey.value === gk && this._draggingId.value !== gk
5578
- }).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" key=${rozieAttr(gk)} draggable="true" @dragstart=${($event) => {
5578
+ }).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event) => {
5579
5579
  this.onTokenDragStart($event, gk);
5580
5580
  }} @dragover=${($event) => {
5581
5581
  this.onTokenDragOver($event, gk);
@@ -5637,7 +5637,7 @@ let DetailPanel = class DetailPanel extends SignalWatcher(LitElement) {
5637
5637
  return html`
5638
5638
  <dl class="rdt-detail-panel" data-rozie-s-8f65bdaa>
5639
5639
 
5640
- ${repeat(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" key=${rozieAttr(pair.key)} data-rozie-s-8f65bdaa>
5640
+ ${repeat(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" data-rozie-s-8f65bdaa>
5641
5641
  <dt class="rdt-detail-key" data-rozie-s-8f65bdaa>${rozieDisplay(pair.key)}</dt>
5642
5642
  <dd class="rdt-detail-value" data-rozie-s-8f65bdaa>${rozieDisplay(pair.value)}</dd>
5643
5643
  </div>`)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rozie-ui/data-table-lit",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "license": "MIT",
@@ -45,7 +45,7 @@
45
45
  "src"
46
46
  ],
47
47
  "dependencies": {
48
- "@rozie/runtime-lit": "0.2.1"
48
+ "@rozie/runtime-lit": "0.2.2"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "lit": "^3.2",
package/src/DataTable.ts CHANGED
@@ -36,57 +36,57 @@ import { Virtualizer, elementScroll, observeElementRect, observeElementOffset, m
36
36
  const __rozieCtx_data_table_columns = createContext(Symbol.for("rozie:data-table:columns"));
37
37
 
38
38
  interface RozieGroupBarSlotCtx {
39
- grouping: unknown;
40
- groupableColumns: unknown;
41
- applyGrouping: unknown;
42
- clearGrouping: unknown;
39
+ grouping: any;
40
+ groupableColumns: any;
41
+ applyGrouping: any;
42
+ clearGrouping: any;
43
43
  }
44
44
 
45
45
  interface RozieSelectAllSlotCtx {
46
- checked: unknown;
47
- indeterminate: unknown;
48
- toggle: unknown;
46
+ checked: any;
47
+ indeterminate: any;
48
+ toggle: any;
49
49
  }
50
50
 
51
51
  interface RozieColHeaderSlotCtx {
52
- columnId: unknown;
53
- column: unknown;
54
- label: unknown;
52
+ columnId: any;
53
+ column: any;
54
+ label: any;
55
55
  }
56
56
 
57
57
  interface RozieFilterSlotCtx {
58
- columnId: unknown;
59
- value: unknown;
60
- uniqueValues: unknown;
61
- minMax: unknown;
62
- setFilter: unknown;
58
+ columnId: any;
59
+ value: any;
60
+ uniqueValues: any;
61
+ minMax: any;
62
+ setFilter: any;
63
63
  }
64
64
 
65
65
  interface RozieSelectCellSlotCtx {
66
- row: unknown;
67
- checked: unknown;
68
- toggle: unknown;
66
+ row: any;
67
+ checked: any;
68
+ toggle: any;
69
69
  }
70
70
 
71
71
  interface RozieCellSlotCtx {
72
- columnId: unknown;
73
- column: unknown;
74
- row: unknown;
75
- value: unknown;
72
+ columnId: any;
73
+ column: any;
74
+ row: any;
75
+ value: any;
76
76
  }
77
77
 
78
78
  interface RozieEditorSlotCtx {
79
- columnId: unknown;
80
- column: unknown;
81
- row: unknown;
82
- value: unknown;
83
- commit: unknown;
84
- cancel: unknown;
85
- autofocus: unknown;
79
+ columnId: any;
80
+ column: any;
81
+ row: any;
82
+ value: any;
83
+ commit: any;
84
+ cancel: any;
85
+ autofocus: any;
86
86
  }
87
87
 
88
88
  interface RozieDetailSlotCtx {
89
- row: unknown;
89
+ row: any;
90
90
  }
91
91
 
92
92
  @customElement('rozie-data-table')
@@ -635,28 +635,28 @@ private __rozieCtxProvider_data_table_columns = new ContextProvider(this, { cont
635
635
  @queryAssignedElements({ flatten: true }) private _slotDefaultElements!: Element[];
636
636
  @state() private _hasSlotGroupBar = false;
637
637
  @queryAssignedElements({ slot: 'groupBar', flatten: true }) private _slotGroupBarElements!: Element[];
638
- @property({ attribute: false }) groupBar?: (scope: { grouping: unknown; groupableColumns: unknown; applyGrouping: unknown; clearGrouping: unknown }) => unknown;
638
+ @property({ attribute: false }) groupBar?: (scope: { grouping: any; groupableColumns: any; applyGrouping: any; clearGrouping: any }) => unknown;
639
639
  @state() private _hasSlotSelectAll = false;
640
640
  @queryAssignedElements({ slot: 'selectAll', flatten: true }) private _slotSelectAllElements!: Element[];
641
- @property({ attribute: false }) selectAll?: (scope: { checked: unknown; indeterminate: unknown; toggle: unknown }) => unknown;
641
+ @property({ attribute: false }) selectAll?: (scope: { checked: any; indeterminate: any; toggle: any }) => unknown;
642
642
  @state() private _hasSlotColHeader = false;
643
643
  @queryAssignedElements({ slot: 'colHeader', flatten: true }) private _slotColHeaderElements!: Element[];
644
- @property({ attribute: false }) colHeader?: (scope: { columnId: unknown; column: unknown; label: unknown }) => unknown;
644
+ @property({ attribute: false }) colHeader?: (scope: { columnId: any; column: any; label: any }) => unknown;
645
645
  @state() private _hasSlotFilter = false;
646
646
  @queryAssignedElements({ slot: 'filter', flatten: true }) private _slotFilterElements!: Element[];
647
- @property({ attribute: false }) filter?: (scope: { columnId: unknown; value: unknown; uniqueValues: unknown; minMax: unknown; setFilter: unknown }) => unknown;
647
+ @property({ attribute: false }) filter?: (scope: { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any }) => unknown;
648
648
  @state() private _hasSlotSelectCell = false;
649
649
  @queryAssignedElements({ slot: 'selectCell', flatten: true }) private _slotSelectCellElements!: Element[];
650
- @property({ attribute: false }) selectCell?: (scope: { row: unknown; checked: unknown; toggle: unknown }) => unknown;
650
+ @property({ attribute: false }) selectCell?: (scope: { row: any; checked: any; toggle: any }) => unknown;
651
651
  @state() private _hasSlotCell = false;
652
652
  @queryAssignedElements({ slot: 'cell', flatten: true }) private _slotCellElements!: Element[];
653
- @property({ attribute: false }) cell?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown }) => unknown;
653
+ @property({ attribute: false }) cell?: (scope: { columnId: any; column: any; row: any; value: any }) => unknown;
654
654
  @state() private _hasSlotEditor = false;
655
655
  @queryAssignedElements({ slot: 'editor', flatten: true }) private _slotEditorElements!: Element[];
656
- @property({ attribute: false }) editor?: (scope: { columnId: unknown; column: unknown; row: unknown; value: unknown; commit: unknown; cancel: unknown; autofocus: unknown }) => unknown;
656
+ @property({ attribute: false }) editor?: (scope: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any }) => unknown;
657
657
  @state() private _hasSlotDetail = false;
658
658
  @queryAssignedElements({ slot: 'detail', flatten: true }) private _slotDetailElements!: Element[];
659
- @property({ attribute: false }) detail?: (scope: { row: unknown }) => unknown;
659
+ @property({ attribute: false }) detail?: (scope: { row: any }) => unknown;
660
660
 
661
661
  private _disconnectCleanups: Array<() => void> = [];
662
662
  // Re-parenting guard: set true once the deferred teardown has actually
@@ -1154,7 +1154,7 @@ ${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-li
1154
1154
  ${this.allLeafColumns().length ? html`<details class="rdt-colvis" data-rozie-s-d5dcab4c>
1155
1155
  <summary class="rdt-colvis-summary" data-rozie-s-d5dcab4c>Columns</summary>
1156
1156
  <div class="rdt-colvis-menu" role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c>
1157
- ${repeat<any>(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" key=${rozieAttr(lc.id)} data-rozie-s-d5dcab4c>
1157
+ ${repeat<any>(this.allLeafColumns(), (lc, _idx) => lc.id, (lc, _idx) => html`<label class="rdt-colvis-item" data-rozie-s-d5dcab4c>
1158
1158
  <input class="rdt-colvis-checkbox" type="checkbox" ?checked=${lc.visible} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleVisibility(lc.id); }} data-rozie-s-d5dcab4c />
1159
1159
  <span class="rdt-colvis-label" data-rozie-s-d5dcab4c>${rozieDisplay(lc.label)}</span>
1160
1160
  </label>`)}
@@ -1164,13 +1164,13 @@ ${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-li
1164
1164
 
1165
1165
  ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1166
1166
  ${this.groupBar !== undefined ? this.groupBar({grouping: this.groupingKeys(), groupableColumns: this.groupableColumns(), applyGrouping: this.applyGrouping, clearGrouping: this.clearGrouping}) : html`<slot name="groupBar" data-rozie-params=${(() => { try { return JSON.stringify({grouping: this.groupingKeys(), groupableColumns: this.groupableColumns()}); } catch { return '{}'; } })()} @rozie-group-bar-apply-grouping=${($event: CustomEvent) => ((this.applyGrouping) as (...args: any[]) => any)($event.detail)} @rozie-group-bar-clear-grouping=${($event: CustomEvent) => ((this.clearGrouping) as (...args: any[]) => any)($event.detail)}>
1167
- ${repeat<any>(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" key=${rozieAttr(gk)} data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
1167
+ ${repeat<any>(this.groupingKeys(), (gk, _idx) => gk, (gk, _idx) => html`<span class="rdt-group-token" data-group-token="" data-rozie-s-d5dcab4c>${rozieDisplay(gk)}</span>`)}
1168
1168
  </slot>`}
1169
1169
  </div>` : nothing}${this.virtual ? html`<div class="rdt-scroll" style=${rozieStyle(this.maxHeight ? 'max-height:' + this.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + this.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c>
1170
1170
  <table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
1171
1171
  <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
1172
- ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
1173
- ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
1172
+ ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
1173
+ ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
1174
1174
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1175
1175
  ${this.selectAll !== undefined ? this.selectAll({checked: this.isAllRowsSelected(), indeterminate: this.isSomeRowsSelected(), toggle: this.onToggleAllRows}) : html`<slot name="selectAll" data-rozie-params=${(() => { try { return JSON.stringify({checked: this.isAllRowsSelected(), indeterminate: this.isSomeRowsSelected()}); } catch { return '{}'; } })()} @rozie-select-all-toggle=${($event: CustomEvent) => ((this.onToggleAllRows) as (...args: any[]) => any)($event.detail)}>
1176
1176
  ${this.selectionMode === 'multiple' ? html`<input class="rdt-select-all" type="checkbox" aria-label="Select all rows" ?checked=${this.isAllRowsSelected()} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleAllRows($event); }} data-rozie-s-d5dcab4c />` : nothing}</slot>`}
@@ -1196,7 +1196,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1196
1196
  </tr>`)}
1197
1197
 
1198
1198
  ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
1199
- ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
1199
+ ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
1200
1200
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
1201
1201
  ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr('Filter ' + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onColumnFilterInput(header.column.id, $event); }} @click=${($event: MouseEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.stopEvent($event); }} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1202
1202
  ${this.filter !== undefined ? this.filter({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}></slot>`}
@@ -1211,7 +1211,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1211
1211
 
1212
1212
  ${repeat<any>(this.windowedRows(), (wr, _idx) => wr.row.id, (wr, _idx) => html`
1213
1213
  <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(wr.row), 'rdt-row-pinned': wr.pinned }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.headerRowCount() + wr.vi.index + 1)} data-index=${rozieAttr(wr.vi.index)} data-pinned=${rozieAttr(wr.pinned ? 'true' : null)} data-depth=${rozieAttr(wr.row.depth)} data-group-header=${rozieAttr(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} data-rozie-s-d5dcab4c>
1214
- ${repeat<any>(this.visibleCellsFor(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)), 'rdt-cell-active': this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
1214
+ ${repeat<any>(this.visibleCellsFor(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)), 'rdt-cell-active': this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
1215
1215
 
1216
1216
  ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1217
1217
  ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1228,7 +1228,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1228
1228
  ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1229
1229
  ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}></slot>`}
1230
1230
  </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
1231
- ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
1231
+ ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
1232
1232
  </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
1233
1233
  ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
1234
1234
  </span>`}${this.isFillHandleCell(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
@@ -1247,8 +1247,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1247
1247
  </table>
1248
1248
  </div>` : html`<table class="${Object.entries({ "rozie-data-table": true, 'rdt-sticky': this.stickyHeader }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridKeyDown($event); }} @focusin=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.syncActiveFromEvent($event); }} @focusout=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridFocusOut($event); }} @mousedown=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridMouseDown($event); }} @dblclick=${($event: Event & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridDblClick($event); }} @click=${($event: MouseEvent & { currentTarget: HTMLTableElement; target: HTMLTableElement }) => { this.onGridClick($event); }} data-rozie-s-d5dcab4c>
1249
1249
  <thead class="rdt-thead" role="rowgroup" data-rozie-s-d5dcab4c>
1250
- ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" key=${rozieAttr(hg.id)} aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
1251
- ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" key=${rozieAttr(header.id)} data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
1250
+ ${repeat<any>(this._headerGroups.value, (hg, hgLevel) => hg.id, (hg, hgLevel) => html`<tr class="rdt-tr" role="row" aria-rowindex=${rozieAttr(hgLevel + 1)} data-rozie-s-d5dcab4c>
1251
+ ${repeat<any>(hg.headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({ "rdt-th": true, 'rdt-select-th': this.isSelectColumn(header.column.id), 'rdt-expander-th': this.isExpanderColumn(header.column.id), 'rdt-th-resizing': this.columnIsResizing(header.column.id), 'rdt-cell-active': this.isActiveCell('__header', this.headerColIndexOf(hg, header), hgLevel) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex('__header', this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
1252
1252
 
1253
1253
 
1254
1254
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1280,7 +1280,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1280
1280
  </tr>`)}
1281
1281
 
1282
1282
  ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
1283
- ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" key=${rozieAttr(header.id)} style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
1283
+ ${repeat<any>(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
1284
1284
  ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
1285
1285
  ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr('Filter ' + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onColumnFilterInput(header.column.id, $event); }} @click=${($event: MouseEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.stopEvent($event); }} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1286
1286
  ${this.filter !== undefined ? this.filter({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id), setFilter: this.setColumnFilter}) : html`<slot name="filter" data-rozie-params=${(() => { try { return JSON.stringify({columnId: header.column.id, value: this.columnFilterValue(header.column.id), uniqueValues: this.getFacetedUniqueValues(header.column.id), minMax: this.getFacetedMinMaxValues(header.column.id)}); } catch { return '{}'; } })()} @rozie-filter-set-filter=${($event: CustomEvent) => ((this.setColumnFilter) as (...args: any[]) => any)($event.detail)}></slot>`}
@@ -1291,7 +1291,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1291
1291
 
1292
1292
  ${repeat<any>(this._rows.value, (row, _idx) => row.id, (row, _idx) => html`
1293
1293
  <tr class="${Object.entries({ "rdt-tr": true, 'rdt-group-header': this.rowIsGrouped(row) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role="row" data-depth=${rozieAttr(row.depth)} aria-rowindex=${rozieAttr(this.bodyAriaRowIndex(row))} data-group-header=${rozieAttr(this.rowIsGrouped(row) ? row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(row) ? row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(row) ? !!this.rowIsExpanded(row) : null)} aria-selected=${rozieAttr(this.selectionMode !== 'none' ? !!this.rowIsSelected(row) : null)} aria-level=${rozieAttr(this.groupingActive() ? row.depth + 1 : null)} data-rozie-s-d5dcab4c>
1294
- ${repeat<any>(this.visibleCellsFor(row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)), 'rdt-cell-active': this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} key=${rozieAttr(cell.id)} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
1294
+ ${repeat<any>(this.visibleCellsFor(row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({ "rdt-td": true, 'rdt-select-td': this.isSelectColumn(cell.column.id), 'rdt-expander-td': this.isExpanderColumn(cell.column.id), 'rdt-in-range': this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)), 'rdt-cell-active': this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)) }).filter(([, v]) => v).map(([k]) => k).join(' ')}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? 'true' : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
1295
1295
 
1296
1296
  ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1297
1297
  ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -1308,7 +1308,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
1308
1308
  ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
1309
1309
  ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}></slot>`}
1310
1310
  </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
1311
- ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
1311
+ ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
1312
1312
  </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
1313
1313
  ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
1314
1314
  </span>`}${this.isFillHandleCell(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
package/src/DetailPanel.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { LitElement, css, html } from 'lit';
2
2
  import { customElement, property } from 'lit/decorators.js';
3
3
  import { SignalWatcher } from '@lit-labs/preact-signals';
4
- import { rozieAttr, rozieDisplay } from '@rozie/runtime-lit';
4
+ import { rozieDisplay } from '@rozie/runtime-lit';
5
5
  import { repeat } from 'lit/directives/repeat.js';
6
6
 
7
7
  @customElement('rozie-detail-panel')
@@ -34,7 +34,7 @@ export default class DetailPanel extends SignalWatcher(LitElement) {
34
34
  return html`
35
35
  <dl class="rdt-detail-panel" data-rozie-s-8f65bdaa>
36
36
 
37
- ${repeat<any>(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" key=${rozieAttr(pair.key)} data-rozie-s-8f65bdaa>
37
+ ${repeat<any>(this.entries(), (pair, _idx) => pair.key, (pair, _idx) => html`<div class="rdt-detail-entry" data-rozie-s-8f65bdaa>
38
38
  <dt class="rdt-detail-key" data-rozie-s-8f65bdaa>${rozieDisplay(pair.key)}</dt>
39
39
  <dd class="rdt-detail-value" data-rozie-s-8f65bdaa>${rozieDisplay(pair.value)}</dd>
40
40
  </div>`)}
package/src/EditorSelect.ts CHANGED
@@ -66,7 +66,7 @@ export default class EditorSelect extends SignalWatcher(LitElement) {
66
66
  render() {
67
67
  return html`
68
68
  <select class="rdt-cell-editor" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onChange($event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onKeydown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onBlur(); }} data-rozie-s-117f1a16>
69
- ${repeat<any>(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option key=${rozieAttr(opt.value)} value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
69
+ ${repeat<any>(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
70
70
  </select>
71
71
  `;
72
72
  }
package/src/FilterSelect.ts CHANGED
@@ -50,7 +50,7 @@ export default class FilterSelect extends SignalWatcher(LitElement) {
50
50
  return html`
51
51
  <select class="rdt-col-filter" part="col-filter" aria-label=${this.columnId} .value=${this.selectValue()} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onChange($event); }} data-rozie-s-d75b42b2>
52
52
  <option value="" data-rozie-s-d75b42b2>All</option>
53
- ${repeat<any>(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option key=${rozieAttr(opt)} value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
53
+ ${repeat<any>(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
54
54
  </select>
55
55
  `;
56
56
  }
package/src/GroupBar.ts CHANGED
@@ -107,12 +107,12 @@ export default class GroupBar extends SignalWatcher(LitElement) {
107
107
  return html`
108
108
  <div class="rdt-group-bar" data-rozie-s-546c469a>
109
109
 
110
- ${repeat<any>(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" key=${rozieAttr(col.id)} draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onChipDragStart($event, col.id); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>${rozieDisplay(col.label)}</span>`)}
110
+ ${repeat<any>(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onChipDragStart($event, col.id); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>${rozieDisplay(col.label)}</span>`)}
111
111
 
112
112
 
113
113
  <span class="${Object.entries({ "rdt-group-drop-zone": true, 'is-over': this._isOver.value }).filter(([, v]) => v).map(([k]) => k).join(' ')}" data-group-drop-zone="" @dragover=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragOver($event); }} @dragleave=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragLeave($event); }} @drop=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDrop($event); }} data-rozie-s-546c469a>
114
114
 
115
- ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat<any>(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({ "rdt-group-token": true, 'is-drop-target': this._dragKind.value === 'token' && this._dropKey.value === gk && this._draggingId.value !== gk }).filter(([, v]) => v).map(([k]) => k).join(' ')}" part="group-token" data-group-token="" key=${rozieAttr(gk)} draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragStart($event, gk); }} @dragover=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragOver($event, gk); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>
115
+ ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat<any>(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({ "rdt-group-token": true, 'is-drop-target': this._dragKind.value === 'token' && this._dropKey.value === gk && this._draggingId.value !== gk }).filter(([, v]) => v).map(([k]) => k).join(' ')}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragStart($event, gk); }} @dragover=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onTokenDragOver($event, gk); }} @dragend=${($event: Event & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onDragEnd(); }} data-rozie-s-546c469a>
116
116
  ${rozieDisplay(this.labelFor(gk))}
117
117
  <button class="rdt-group-token-remove" type="button" aria-label=${rozieAttr('Remove ' + this.labelFor(gk) + ' grouping')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.removeKey(gk); }} data-rozie-s-546c469a>×</button>
118
118
  </span>`)}