@kyndryl-design-system/shidoka-applications 1.0.2 → 1.0.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.
- package/components/reusable/table/data-table.d.ts +2 -2
- package/components/reusable/table/data-table.d.ts.map +1 -1
- package/components/reusable/table/data-table.js +68 -0
- package/components/reusable/table/data-table.js.map +1 -0
- package/components/reusable/table/data-table.scss.js +4 -0
- package/components/reusable/table/data-table.scss.js.map +1 -0
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ type ColumnDefinition = {
|
|
|
26
26
|
* @fires on-sort-changed - Dispatched when the sort order changes.
|
|
27
27
|
* @fires on-page-changed - Dispatched when the page number or page size changes.
|
|
28
28
|
*/
|
|
29
|
-
export declare class
|
|
29
|
+
export declare class DataTable extends LitElement {
|
|
30
30
|
static styles: import("lit").CSSResultGroup[];
|
|
31
31
|
/**
|
|
32
32
|
* rows: Array of objects representing each row in the data table.
|
|
@@ -122,7 +122,7 @@ export declare class KynDataTable extends LitElement {
|
|
|
122
122
|
}
|
|
123
123
|
declare global {
|
|
124
124
|
interface HTMLElementTagNameMap {
|
|
125
|
-
'kyn-data-table':
|
|
125
|
+
'kyn-data-table': DataTable;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/table/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAEnE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAGjB,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,gBAAgB,CAAA;KAAE,KAAK,GAAG,CAAC;CACtE,CAAC;AAEF;;;;;;;GAOG;AAEH,qBACa,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/table/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAEnE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,SAAS,CAAC;AAGjB,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,MAAM,EAAE,gBAAgB,CAAA;KAAE,KAAK,GAAG,CAAC;CACtE,CAAC;AAEF;;;;;;;GAOG;AAEH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,iCAAY;IAElC;;OAEG;IAEH,IAAI,EAAE,GAAG,EAAE,CAAM;IAEjB;;;OAGG;IAEH,OAAO,EAAE,gBAAgB,EAAE,CAAM;IAEjC;;;OAGG;IAEH,iBAAiB,UAAS;IAE1B;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,YAAY,cAAqB;IAEjC;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IAEH,YAAY,UAAS;IAErB;;;OAGG;IAEH,KAAK,UAAS;IAEd;;;OAGG;IAEH,eAAe;;;;;MAKb;IAEF,8CAA8C;IAE9C,cAAc,UAAS;IAEvB,6CAA6C;IAE7C,oBAAoB,UAAS;IAE7B,6CAA6C;IAE7C,qBAAqB,UAAS;IAE9B,sEAAsE;IAEtE,WAAW,UAAS;IAEpB;;;;OAIG;IAEH,2BAA2B,UAAS;IAEpC;;;;OAIG;IAEH,qBAAqB,UAAS;IAE9B;;;OAGG;IACH,oBAAoB;IAepB;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO;IAoB1D;;OAEG;IACH,kBAAkB;IAsBlB;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,WAAW;IAWnC;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,WAAW;IAY5B,MAAM;CA2GhB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,SAAS,CAAC;KAC7B;CACF"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as n}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{ifDefined as a}from'./../../../external/lit-html/directives/if-defined.js';import{classMap as d}from'./../../../external/lit-html/directives/class-map.js';import"@kyndryl-design-system/shidoka-foundation/components/button";import"@kyndryl-design-system/shidoka-foundation/components/icon";import"../checkbox/checkbox.js";import"./Table.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-footer.js";import"./table-toolbar.js";import"./table-container.js";import"../pagination/Pagination.js";import"../pagination/pagination-items-range.js";import"../pagination/pagination-page-size-dropdown.js";import"../pagination/pagination-navigation-buttons.js";import l from"./data-table.scss.js";let h=class extends o{constructor(){super(...arguments),this.rows=[],this.columns=[],this.checkboxSelection=!1,this.striped=!1,this.selectedRows=new Set,this.selectAll=!1,this.stickyHeader=!1,this.dense=!1,this.paginationModel={count:0,pageSize:5,pageNumber:0,pageSizeOptions:[5,10]},this.hideItemsRange=!1,this.hidePageSizeDropdown=!1,this.hideNavigationButtons=!1,this.fixedLayout=!1,this.headerCheckboxIndeterminate=!1,this.headerCheckboxChecked=!1}updateHeaderCheckbox(){0===this.selectedRows.size?(this.headerCheckboxIndeterminate=!1,this.headerCheckboxChecked=!1):this.selectedRows.size===this.rows.length?(this.headerCheckboxIndeterminate=!1,this.headerCheckboxChecked=!0,this.selectAll=!0):(this.headerCheckboxIndeterminate=!0,this.headerCheckboxChecked=!1,this.selectAll=!1)}handleRowSelectionChange(e,t){const o=new Set(this.selectedRows);t?o.add(e):o.delete(e),this.selectedRows=o,this.updateHeaderCheckbox(),this.dispatchEvent(new CustomEvent("on-selected-rows-changed",{detail:{selectedRows:Array.from(this.selectedRows)},bubbles:!0,composed:!0}))}toggleSelectionAll(){this.selectAll=!this.selectAll,this.selectAll?this.rows.forEach((e=>this.selectedRows.add(e.id))):this.selectedRows.clear(),this.updateHeaderCheckbox(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("on-selected-rows-changed",{detail:{selectedRows:Array.from(this.selectedRows)},bubbles:!0,composed:!0}))}onPageSizeChange(e){this.paginationModel.pageSize=e.detail.value,this.dispatchEvent(new CustomEvent("on-page-changed",{detail:{pageSize:e.detail.value,pageNumber:1},bubbles:!0,composed:!0}))}onPageNumberChange(e){this.paginationModel.pageNumber=e.detail.value;const t=this.paginationModel.pageSize;this.dispatchEvent(new CustomEvent("on-page-changed",{detail:{pageNumber:e.detail.value,pageSize:t},bubbles:!0,composed:!0}))}render(){var e;const{count:o,pageSize:i,pageNumber:s,pageSizeOptions:n}=this.paginationModel;return this.selectedRows=new Set(this.selectedRows||[]),this.updateHeaderCheckbox(),t`
|
|
2
|
+
<kyn-table-container>
|
|
3
|
+
<kyn-table ?fixedLayout=${this.fixedLayout}>
|
|
4
|
+
<kyn-thead ?stickyHeader=${this.stickyHeader}>
|
|
5
|
+
<kyn-tr>
|
|
6
|
+
${this.checkboxSelection?t` <kyn-th .align=${"center"} ?dense=${this.dense}
|
|
7
|
+
><kyn-checkbox
|
|
8
|
+
.indeterminate=${this.headerCheckboxIndeterminate}
|
|
9
|
+
.checked=${this.headerCheckboxChecked}
|
|
10
|
+
visiblyHidden
|
|
11
|
+
@on-checkbox-change=${this.toggleSelectionAll}
|
|
12
|
+
>Select All Items</kyn-checkbox
|
|
13
|
+
>
|
|
14
|
+
</kyn-th>`:null}
|
|
15
|
+
${this.columns.map((({sortable:e,sortFn:o,field:i,align:s,headerName:n})=>t`<kyn-th
|
|
16
|
+
?dense=${this.dense}
|
|
17
|
+
.sortable=${e}
|
|
18
|
+
@on-sort-changed=${o}
|
|
19
|
+
sortKey=${i}
|
|
20
|
+
.align=${s}
|
|
21
|
+
>${n}</kyn-th
|
|
22
|
+
>`))}
|
|
23
|
+
</kyn-tr>
|
|
24
|
+
</kyn-thead>
|
|
25
|
+
<kyn-tbody .striped=${this.striped}>
|
|
26
|
+
${this.rows.map((e=>t`
|
|
27
|
+
<kyn-tr
|
|
28
|
+
selectable=${a(this.checkboxSelection)}
|
|
29
|
+
class=${d({selected:this.selectedRows.has(e.id),clickable:this.checkboxSelection})}
|
|
30
|
+
@on-row-clicked=${()=>{this.checkboxSelection&&this.handleRowSelectionChange(e.id,!this.selectedRows.has(e.id))}}
|
|
31
|
+
>
|
|
32
|
+
${this.checkboxSelection?t` <kyn-td .align=${"center"} ?dense=${this.dense}>
|
|
33
|
+
<kyn-checkbox
|
|
34
|
+
visiblyHidden
|
|
35
|
+
.checked=${this.selectedRows.has(e.id)}
|
|
36
|
+
@on-checkbox-change=${t=>{this.handleRowSelectionChange(e.id,t.detail.checked)}}
|
|
37
|
+
>${e.id}</kyn-checkbox
|
|
38
|
+
>
|
|
39
|
+
</kyn-td>`:null}
|
|
40
|
+
${this.columns.map((o=>t`
|
|
41
|
+
<kyn-td
|
|
42
|
+
.align=${o.align}
|
|
43
|
+
?dense=${this.dense}
|
|
44
|
+
.maxWidth=${o.maxWidth}
|
|
45
|
+
.width=${o.width}
|
|
46
|
+
?ellipsis=${o.ellipsis}
|
|
47
|
+
>
|
|
48
|
+
${o.cellRenderer?o.cellRenderer({row:e,column:o}):o.valueGetter?o.valueGetter({row:e}):e[o.field]}
|
|
49
|
+
</kyn-td>
|
|
50
|
+
`))}
|
|
51
|
+
</kyn-tr>
|
|
52
|
+
`))}
|
|
53
|
+
</kyn-tbody>
|
|
54
|
+
</kyn-table>
|
|
55
|
+
</kyn-table-container>
|
|
56
|
+
${(null===(e=this.paginationModel)||void 0===e?void 0:e.count)>0?t` <kyn-pagination
|
|
57
|
+
.count=${o}
|
|
58
|
+
.pageSize=${i}
|
|
59
|
+
.pageNumber=${s}
|
|
60
|
+
.pageSizeOptions=${n}
|
|
61
|
+
.hideItemsRange=${this.hideItemsRange}
|
|
62
|
+
.hidePageSizeDropdown=${this.hidePageSizeDropdown}
|
|
63
|
+
.hideNavigationButtons=${this.hideNavigationButtons}
|
|
64
|
+
@on-page-size-change=${this.onPageSizeChange}
|
|
65
|
+
@on-page-number-change=${this.onPageNumberChange}
|
|
66
|
+
></kyn-pagination>`:null}
|
|
67
|
+
`}};h.styles=[l],e([s({type:Array})],h.prototype,"rows",void 0),e([s({type:Array})],h.prototype,"columns",void 0),e([s({type:Boolean})],h.prototype,"checkboxSelection",void 0),e([s({type:Boolean})],h.prototype,"striped",void 0),e([s({type:Set})],h.prototype,"selectedRows",void 0),e([n()],h.prototype,"selectAll",void 0),e([s({type:Boolean})],h.prototype,"stickyHeader",void 0),e([s({type:Boolean})],h.prototype,"dense",void 0),e([s({type:Object})],h.prototype,"paginationModel",void 0),e([s({type:Boolean})],h.prototype,"hideItemsRange",void 0),e([s({type:Boolean})],h.prototype,"hidePageSizeDropdown",void 0),e([s({type:Boolean})],h.prototype,"hideNavigationButtons",void 0),e([s({type:Boolean})],h.prototype,"fixedLayout",void 0),e([n()],h.prototype,"headerCheckboxIndeterminate",void 0),e([n()],h.prototype,"headerCheckboxChecked",void 0),h=e([i("kyn-data-table")],h);export{h as DataTable};
|
|
68
|
+
//# sourceMappingURL=data-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table.js","sources":["../../../../src/components/reusable/table/data-table.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\n// Import required components and icons\nimport '@kyndryl-design-system/shidoka-foundation/components/button';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\n\nimport '../checkbox/checkbox';\nimport './index';\nimport styles from './data-table.scss';\n\ntype ColumnDefinition = {\n sortable?: boolean;\n sortFn?: Function;\n field: string;\n align?: string;\n headerName: string;\n valueGetter?: Function;\n width?: string;\n maxWidth?: string;\n ellipsis?: boolean;\n cellRenderer?: (data: { row: any; column: ColumnDefinition }) => any;\n};\n\n/**\n * `kyn-data-table` Web Component.\n * This component provides a table with sorting, pagination, and selection capabilities.\n * It is designed to be used with the `kyn-table-toolbar` and `kyn-table-container` components.\n * @fires on-selected-rows-changed - Dispatched when the selected rows change.\n * @fires on-sort-changed - Dispatched when the sort order changes.\n * @fires on-page-changed - Dispatched when the page number or page size changes.\n */\n\n@customElement('kyn-data-table')\nexport class DataTable extends LitElement {\n static override styles = [styles];\n\n /**\n * rows: Array of objects representing each row in the data table.\n */\n @property({ type: Array })\n rows: any[] = [];\n\n /**\n * columns: Array of objects defining column properties such as\n * field name, sorting function, etc.\n */\n @property({ type: Array })\n columns: ColumnDefinition[] = [];\n\n /**\n * checkboxSelection: Boolean indicating whether rows should be\n * selectable using checkboxes.\n */\n @property({ type: Boolean })\n checkboxSelection = false;\n\n /**\n * striped: Boolean indicating whether rows should have alternate\n * coloring.\n */\n @property({ type: Boolean })\n striped = false;\n\n /**\n * selectedRows: Set of row ids that are currently selected.\n */\n @property({ type: Set })\n selectedRows = new Set<number>();\n\n /**\n * selectAll: Boolean indicating whether all rows are currently\n * selected.\n * @ignore\n */\n @state()\n selectAll = false;\n\n /**\n * stickyHeader: Boolean indicating whether the table header\n * should be sticky.\n */\n @property({ type: Boolean })\n stickyHeader = false;\n\n /**\n * dense: Boolean indicating whether the table should be displayed\n * in dense mode.\n */\n @property({ type: Boolean })\n dense = false;\n\n /**\n * paginationModel: Object holding pagination information such as\n * current page, page size, etc.\n */\n @property({ type: Object })\n paginationModel = {\n count: 0,\n pageSize: 5,\n pageNumber: 0,\n pageSizeOptions: [5, 10],\n };\n\n /** Option to hide the items range display. */\n @property({ type: Boolean })\n hideItemsRange = false;\n\n /** Option to hide the page size dropdown. */\n @property({ type: Boolean })\n hidePageSizeDropdown = false;\n\n /** Option to hide the navigation buttons. */\n @property({ type: Boolean })\n hideNavigationButtons = false;\n\n /** Determines if the table layout is fixed (true) or auto (false). */\n @property({ type: Boolean })\n fixedLayout = false;\n\n /**\n * headerCheckboxIndeterminate: Boolean indicating whether the header\n * checkbox is in an indeterminate state.\n * @ignore\n */\n @state()\n headerCheckboxIndeterminate = false;\n\n /**\n * headerCheckboxChecked: Boolean indicating whether the header checkbox is\n * checked.\n * @ignore\n */\n @state()\n headerCheckboxChecked = false;\n\n /**\n * Updates the state of the header checkbox based on the number of\n * selected rows.\n */\n updateHeaderCheckbox() {\n if (this.selectedRows.size === 0) {\n this.headerCheckboxIndeterminate = false;\n this.headerCheckboxChecked = false;\n } else if (this.selectedRows.size === this.rows.length) {\n this.headerCheckboxIndeterminate = false;\n this.headerCheckboxChecked = true;\n this.selectAll = true;\n } else {\n this.headerCheckboxIndeterminate = true;\n this.headerCheckboxChecked = false;\n this.selectAll = false;\n }\n }\n\n /**\n * Handles the change of selection state for a specific row.\n */\n handleRowSelectionChange(rowId: number, isChecked: boolean) {\n const newSet = new Set(this.selectedRows);\n if (isChecked) {\n newSet.add(rowId);\n } else {\n newSet.delete(rowId);\n }\n this.selectedRows = newSet;\n this.updateHeaderCheckbox();\n\n // Emit the custom event with the updated selectedRows\n this.dispatchEvent(\n new CustomEvent('on-selected-rows-changed', {\n detail: { selectedRows: Array.from(this.selectedRows) },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Toggles the selection state of all rows in the table.\n */\n toggleSelectionAll() {\n this.selectAll = !this.selectAll;\n if (this.selectAll) {\n // If selecting all, add all row ids to the selectedRows set\n this.rows.forEach((row) => this.selectedRows.add(row.id));\n } else {\n // If deselecting all, clear the selectedRows set\n this.selectedRows.clear();\n }\n\n this.updateHeaderCheckbox();\n this.requestUpdate();\n\n this.dispatchEvent(\n new CustomEvent('on-selected-rows-changed', {\n detail: { selectedRows: Array.from(this.selectedRows) },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Handles the change of page size in pagination.\n */\n onPageSizeChange(event: CustomEvent) {\n this.paginationModel.pageSize = event.detail.value;\n this.dispatchEvent(\n new CustomEvent('on-page-changed', {\n detail: { pageSize: event.detail.value, pageNumber: 1 },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Handles the change of page number in pagination.\n */\n onPageNumberChange(event: CustomEvent) {\n this.paginationModel.pageNumber = event.detail.value;\n const pageSize = this.paginationModel.pageSize;\n this.dispatchEvent(\n new CustomEvent('on-page-changed', {\n detail: { pageNumber: event.detail.value, pageSize },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n override render() {\n const { count, pageSize, pageNumber, pageSizeOptions } =\n this.paginationModel;\n\n this.selectedRows = new Set(this.selectedRows || []);\n this.updateHeaderCheckbox();\n\n return html`\n <kyn-table-container>\n <kyn-table ?fixedLayout=${this.fixedLayout}>\n <kyn-thead ?stickyHeader=${this.stickyHeader}>\n <kyn-tr>\n ${this.checkboxSelection\n ? html` <kyn-th .align=${'center'} ?dense=${this.dense}\n ><kyn-checkbox\n .indeterminate=${this.headerCheckboxIndeterminate}\n .checked=${this.headerCheckboxChecked}\n visiblyHidden\n @on-checkbox-change=${this.toggleSelectionAll}\n >Select All Items</kyn-checkbox\n >\n </kyn-th>`\n : null}\n ${this.columns.map(\n ({ sortable, sortFn, field, align, headerName }) =>\n html`<kyn-th\n ?dense=${this.dense}\n .sortable=${sortable}\n @on-sort-changed=${sortFn}\n sortKey=${field}\n .align=${align}\n >${headerName}</kyn-th\n >`\n )}\n </kyn-tr>\n </kyn-thead>\n <kyn-tbody .striped=${this.striped}>\n ${this.rows.map(\n (row) => html`\n <kyn-tr\n selectable=${ifDefined(this.checkboxSelection)}\n class=${classMap({\n selected: this.selectedRows.has(row.id),\n clickable: this.checkboxSelection,\n })}\n @on-row-clicked=${() => {\n if (this.checkboxSelection) {\n this.handleRowSelectionChange(\n row.id,\n !this.selectedRows.has(row.id)\n );\n }\n }}\n >\n ${this.checkboxSelection\n ? html` <kyn-td .align=${'center'} ?dense=${this.dense}>\n <kyn-checkbox\n visiblyHidden\n .checked=${this.selectedRows.has(row.id)}\n @on-checkbox-change=${(e: CustomEvent) => {\n this.handleRowSelectionChange(\n row.id,\n e.detail.checked\n );\n }}\n >${row.id}</kyn-checkbox\n >\n </kyn-td>`\n : null}\n ${this.columns.map(\n (column) => html`\n <kyn-td\n .align=${column.align}\n ?dense=${this.dense}\n .maxWidth=${column.maxWidth}\n .width=${column.width}\n ?ellipsis=${column.ellipsis}\n >\n ${column.cellRenderer\n ? column.cellRenderer({ row, column })\n : column.valueGetter\n ? column.valueGetter({ row })\n : row[column.field]}\n </kyn-td>\n `\n )}\n </kyn-tr>\n `\n )}\n </kyn-tbody>\n </kyn-table>\n </kyn-table-container>\n ${this.paginationModel?.count > 0\n ? html` <kyn-pagination\n .count=${count}\n .pageSize=${pageSize}\n .pageNumber=${pageNumber}\n .pageSizeOptions=${pageSizeOptions}\n .hideItemsRange=${this.hideItemsRange}\n .hidePageSizeDropdown=${this.hidePageSizeDropdown}\n .hideNavigationButtons=${this.hideNavigationButtons}\n @on-page-size-change=${this.onPageSizeChange}\n @on-page-number-change=${this.onPageNumberChange}\n ></kyn-pagination>`\n : null}\n `;\n }\n}\n\n// Define the custom element in the global namespace\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-data-table': DataTable;\n }\n}\n"],"names":["DataTable","LitElement","constructor","this","rows","columns","checkboxSelection","striped","selectedRows","Set","selectAll","stickyHeader","dense","paginationModel","count","pageSize","pageNumber","pageSizeOptions","hideItemsRange","hidePageSizeDropdown","hideNavigationButtons","fixedLayout","headerCheckboxIndeterminate","headerCheckboxChecked","updateHeaderCheckbox","size","length","handleRowSelectionChange","rowId","isChecked","newSet","add","delete","dispatchEvent","CustomEvent","detail","Array","from","bubbles","composed","toggleSelectionAll","forEach","row","id","clear","requestUpdate","onPageSizeChange","event","value","onPageNumberChange","render","html","map","sortable","sortFn","field","align","headerName","ifDefined","classMap","selected","has","clickable","e","checked","column","maxWidth","width","ellipsis","cellRenderer","valueGetter","_a","styles","__decorate","property","type","prototype","Boolean","state","Object","customElement"],"mappings":"05CAoCO,IAAMA,EAAN,cAAwBC,EAAxBC,kCAOLC,KAAIC,KAAU,GAOdD,KAAOE,QAAuB,GAO9BF,KAAiBG,mBAAG,EAOpBH,KAAOI,SAAG,EAMVJ,KAAAK,aAAe,IAAIC,IAQnBN,KAASO,WAAG,EAOZP,KAAYQ,cAAG,EAOfR,KAAKS,OAAG,EAORT,KAAAU,gBAAkB,CAChBC,MAAO,EACPC,SAAU,EACVC,WAAY,EACZC,gBAAiB,CAAC,EAAG,KAKvBd,KAAce,gBAAG,EAIjBf,KAAoBgB,sBAAG,EAIvBhB,KAAqBiB,uBAAG,EAIxBjB,KAAWkB,aAAG,EAQdlB,KAA2BmB,6BAAG,EAQ9BnB,KAAqBoB,uBAAG,CA6MzB,CAvMCC,uBACiC,IAA3BrB,KAAKK,aAAaiB,MACpBtB,KAAKmB,6BAA8B,EACnCnB,KAAKoB,uBAAwB,GACpBpB,KAAKK,aAAaiB,OAAStB,KAAKC,KAAKsB,QAC9CvB,KAAKmB,6BAA8B,EACnCnB,KAAKoB,uBAAwB,EAC7BpB,KAAKO,WAAY,IAEjBP,KAAKmB,6BAA8B,EACnCnB,KAAKoB,uBAAwB,EAC7BpB,KAAKO,WAAY,EAEpB,CAKDiB,yBAAyBC,EAAeC,GACtC,MAAMC,EAAS,IAAIrB,IAAIN,KAAKK,cACxBqB,EACFC,EAAOC,IAAIH,GAEXE,EAAOE,OAAOJ,GAEhBzB,KAAKK,aAAesB,EACpB3B,KAAKqB,uBAGLrB,KAAK8B,cACH,IAAIC,YAAY,2BAA4B,CAC1CC,OAAQ,CAAE3B,aAAc4B,MAAMC,KAAKlC,KAAKK,eACxC8B,SAAS,EACTC,UAAU,IAGf,CAKDC,qBACErC,KAAKO,WAAaP,KAAKO,UACnBP,KAAKO,UAEPP,KAAKC,KAAKqC,SAASC,GAAQvC,KAAKK,aAAauB,IAAIW,EAAIC,MAGrDxC,KAAKK,aAAaoC,QAGpBzC,KAAKqB,uBACLrB,KAAK0C,gBAEL1C,KAAK8B,cACH,IAAIC,YAAY,2BAA4B,CAC1CC,OAAQ,CAAE3B,aAAc4B,MAAMC,KAAKlC,KAAKK,eACxC8B,SAAS,EACTC,UAAU,IAGf,CAKDO,iBAAiBC,GACf5C,KAAKU,gBAAgBE,SAAWgC,EAAMZ,OAAOa,MAC7C7C,KAAK8B,cACH,IAAIC,YAAY,kBAAmB,CACjCC,OAAQ,CAAEpB,SAAUgC,EAAMZ,OAAOa,MAAOhC,WAAY,GACpDsB,SAAS,EACTC,UAAU,IAGf,CAKDU,mBAAmBF,GACjB5C,KAAKU,gBAAgBG,WAAa+B,EAAMZ,OAAOa,MAC/C,MAAMjC,EAAWZ,KAAKU,gBAAgBE,SACtCZ,KAAK8B,cACH,IAAIC,YAAY,kBAAmB,CACjCC,OAAQ,CAAEnB,WAAY+B,EAAMZ,OAAOa,MAAOjC,YAC1CuB,SAAS,EACTC,UAAU,IAGf,CAEQW,eACP,MAAMpC,MAAEA,EAAKC,SAAEA,EAAQC,WAAEA,EAAUC,gBAAEA,GACnCd,KAAKU,gBAKP,OAHAV,KAAKK,aAAe,IAAIC,IAAIN,KAAKK,cAAgB,IACjDL,KAAKqB,uBAEE2B,CAAI;;kCAEmBhD,KAAKkB;qCACFlB,KAAKQ;;gBAE1BR,KAAKG,kBACH6C,CAAI,mBAAmB,mBAAmBhD,KAAKS;;uCAE1BT,KAAKmB;iCACXnB,KAAKoB;;4CAEMpB,KAAKqC;;;6BAI/B;gBACFrC,KAAKE,QAAQ+C,KACb,EAAGC,WAAUC,SAAQC,QAAOC,QAAOC,gBACjCN,CAAI;6BACOhD,KAAKS;gCACFyC;uCACOC;8BACTC;6BACDC;uBACNC;;;;gCAKStD,KAAKI;cACvBJ,KAAKC,KAAKgD,KACTV,GAAQS,CAAI;;+BAEIO,EAAUvD,KAAKG;0BACpBqD,EAAS,CACfC,SAAUzD,KAAKK,aAAaqD,IAAInB,EAAIC,IACpCmB,UAAW3D,KAAKG;oCAEA,KACZH,KAAKG,mBACPH,KAAKwB,yBACHe,EAAIC,IACHxC,KAAKK,aAAaqD,IAAInB,EAAIC,IAE9B;;oBAGDxC,KAAKG,kBACH6C,CAAI,mBAAmB,mBAAmBhD,KAAKS;;;qCAGhCT,KAAKK,aAAaqD,IAAInB,EAAIC;gDACdoB,IACrB5D,KAAKwB,yBACHe,EAAIC,GACJoB,EAAE5B,OAAO6B,QACV;6BAEAtB,EAAIC;;iCAGX;oBACFxC,KAAKE,QAAQ+C,KACZa,GAAWd,CAAI;;iCAEHc,EAAOT;iCACPrD,KAAKS;oCACFqD,EAAOC;iCACVD,EAAOE;oCACJF,EAAOG;;0BAEjBH,EAAOI,aACLJ,EAAOI,aAAa,CAAE3B,MAAKuB,WAC3BA,EAAOK,YACPL,EAAOK,YAAY,CAAE5B,QACrBA,EAAIuB,EAAOV;;;;;;;;SAUT,UAAtBpD,KAAKU,uBAAiB,IAAA0D,OAAA,EAAAA,EAAAzD,OAAQ,EAC5BqC,CAAI;qBACOrC;wBACGC;0BACEC;+BACKC;8BACDd,KAAKe;oCACCf,KAAKgB;qCACJhB,KAAKiB;mCACPjB,KAAK2C;qCACH3C,KAAK8C;8BAEhC;KAEP,GA/SejD,EAAAwE,OAAS,CAACA,GAM1BC,EAAA,CADCC,EAAS,CAAEC,KAAMvC,SACDpC,EAAA4E,UAAA,YAAA,GAOjBH,EAAA,CADCC,EAAS,CAAEC,KAAMvC,SACepC,EAAA4E,UAAA,eAAA,GAOjCH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACQ7E,EAAA4E,UAAA,yBAAA,GAO1BH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACF7E,EAAA4E,UAAA,eAAA,GAMhBH,EAAA,CADCC,EAAS,CAAEC,KAAMlE,OACeT,EAAA4E,UAAA,oBAAA,GAQjCH,EAAA,CADCK,KACiB9E,EAAA4E,UAAA,iBAAA,GAOlBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACG7E,EAAA4E,UAAA,oBAAA,GAOrBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACJ7E,EAAA4E,UAAA,aAAA,GAOdH,EAAA,CADCC,EAAS,CAAEC,KAAMI,UAMhB/E,EAAA4E,UAAA,uBAAA,GAIFH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACK7E,EAAA4E,UAAA,sBAAA,GAIvBH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACW7E,EAAA4E,UAAA,4BAAA,GAI7BH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACY7E,EAAA4E,UAAA,6BAAA,GAI9BH,EAAA,CADCC,EAAS,CAAEC,KAAME,WACE7E,EAAA4E,UAAA,mBAAA,GAQpBH,EAAA,CADCK,KACmC9E,EAAA4E,UAAA,mCAAA,GAQpCH,EAAA,CADCK,KAC6B9E,EAAA4E,UAAA,6BAAA,GApGnB5E,EAASyE,EAAA,CADrBO,EAAc,mBACFhF"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`kyn-tr.selected {
|
|
2
|
+
background-color: var(--kd-color-background-inverse-hover);
|
|
3
|
+
}`;export{t as default};
|
|
4
|
+
//# sourceMappingURL=data-table.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/index.d.ts
CHANGED
|
@@ -12,5 +12,6 @@ export { DatePicker } from './components/reusable/datePicker';
|
|
|
12
12
|
export { DateRangePicker } from './components/reusable/daterangepicker';
|
|
13
13
|
export { Breadcrumbs, BreadcrumbItem } from './components/reusable/breadcrumbs';
|
|
14
14
|
export { Table } from './components/reusable/table';
|
|
15
|
+
export { DataTable } from './components/reusable/table/data-table';
|
|
15
16
|
export { Pagination } from './components/reusable/pagination';
|
|
16
17
|
//# sourceMappingURL=index.d.ts.map
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";
|
|
1
|
+
export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";export{DataTable}from"./components/reusable/table/data-table.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|