@scania/tegel 0.0.1-beta.7 → 0.0.1-beta.9
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/package.json +1 -1
- package/readme.md +7 -8
- package/dist/cjs/index-e1c79686.js +0 -1912
- package/dist/cjs/index.cjs.js +0 -2
- package/dist/cjs/loader.cjs.js +0 -21
- package/dist/cjs/popper-11d5f714.js +0 -1801
- package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
- package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
- package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
- package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
- package/dist/cjs/sdds-button.cjs.entry.js +0 -36
- package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
- package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
- package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
- package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
- package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
- package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
- package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
- package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
- package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
- package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
- package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
- package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
- package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
- package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
- package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
- package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
- package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
- package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
- package/dist/cjs/sdds-table.cjs.entry.js +0 -69
- package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
- package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
- package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
- package/dist/cjs/tegel.cjs.js +0 -19
- package/dist/collection/collection-manifest.json +0 -40
- package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
- package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
- package/dist/collection/components/accordion/accordion.css +0 -77
- package/dist/collection/components/accordion/accordion.js +0 -62
- package/dist/collection/components/badge/badges.css +0 -42
- package/dist/collection/components/badge/badges.js +0 -150
- package/dist/collection/components/button/button-component.js +0 -154
- package/dist/collection/components/button/button.css +0 -658
- package/dist/collection/components/data-table/table/table.css +0 -15
- package/dist/collection/components/data-table/table/table.js +0 -253
- package/dist/collection/components/data-table/table-body/table-body.css +0 -22
- package/dist/collection/components/data-table/table-body/table-body.js +0 -425
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
- package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
- package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
- package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
- package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
- package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
- package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
- package/dist/collection/components/data-table/table-header/table-header.css +0 -204
- package/dist/collection/components/data-table/table-header/table-header.js +0 -153
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
- package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
- package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
- package/dist/collection/components/datetime/datetime.css +0 -375
- package/dist/collection/components/datetime/datetime.js +0 -251
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
- package/dist/collection/components/dropdown/dropdown.css +0 -891
- package/dist/collection/components/dropdown/dropdown.js +0 -554
- package/dist/collection/components/icon/icon.css +0 -16
- package/dist/collection/components/icon/icon.js +0 -89
- package/dist/collection/components/icon/iconsArray.js +0 -2
- package/dist/collection/components/modal/modal.css +0 -324
- package/dist/collection/components/modal/modal.js +0 -146
- package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
- package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
- package/dist/collection/components/popover-menu/popover-menu.css +0 -19
- package/dist/collection/components/popover-menu/popover-menu.js +0 -189
- package/dist/collection/components/slider/slider.css +0 -260
- package/dist/collection/components/slider/slider.js +0 -682
- package/dist/collection/components/spinner/spinner.css +0 -79
- package/dist/collection/components/spinner/spinner.js +0 -61
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
- package/dist/collection/components/textarea/textarea.css +0 -283
- package/dist/collection/components/textarea/textarea.js +0 -336
- package/dist/collection/components/textfield/textfield.css +0 -494
- package/dist/collection/components/textfield/textfield.js +0 -359
- package/dist/collection/components/tooltip/tooltip.css +0 -46
- package/dist/collection/components/tooltip/tooltip.js +0 -200
- package/dist/collection/index.js +0 -1
- package/dist/collection/stories/assets/code-brackets.svg +0 -1
- package/dist/collection/stories/assets/colors.svg +0 -1
- package/dist/collection/stories/assets/comments.svg +0 -1
- package/dist/collection/stories/assets/direction.svg +0 -1
- package/dist/collection/stories/assets/flow.svg +0 -1
- package/dist/collection/stories/assets/plugin.svg +0 -1
- package/dist/collection/stories/assets/repo.svg +0 -1
- package/dist/collection/stories/assets/stackalt.svg +0 -1
- package/dist/collection/utils/utils.js +0 -12
- package/dist/components/dropdown-option.js +0 -100
- package/dist/components/dropdown.js +0 -296
- package/dist/components/icon.js +0 -58
- package/dist/components/index.d.ts +0 -50
- package/dist/components/index.js +0 -30
- package/dist/components/popper.js +0 -1799
- package/dist/components/sdds-accordion-item.d.ts +0 -11
- package/dist/components/sdds-accordion-item.js +0 -60
- package/dist/components/sdds-accordion.d.ts +0 -11
- package/dist/components/sdds-accordion.js +0 -38
- package/dist/components/sdds-badges.d.ts +0 -11
- package/dist/components/sdds-badges.js +0 -76
- package/dist/components/sdds-body-cell.d.ts +0 -11
- package/dist/components/sdds-body-cell.js +0 -6
- package/dist/components/sdds-button.d.ts +0 -11
- package/dist/components/sdds-button.js +0 -58
- package/dist/components/sdds-datetime.d.ts +0 -11
- package/dist/components/sdds-datetime.js +0 -90
- package/dist/components/sdds-dropdown-filter.d.ts +0 -11
- package/dist/components/sdds-dropdown-filter.js +0 -138
- package/dist/components/sdds-dropdown-option.d.ts +0 -11
- package/dist/components/sdds-dropdown-option.js +0 -6
- package/dist/components/sdds-dropdown.d.ts +0 -11
- package/dist/components/sdds-dropdown.js +0 -6
- package/dist/components/sdds-header-cell.d.ts +0 -11
- package/dist/components/sdds-header-cell.js +0 -173
- package/dist/components/sdds-icon.d.ts +0 -11
- package/dist/components/sdds-icon.js +0 -6
- package/dist/components/sdds-inline-tabs-fullbleed.d.ts +0 -11
- package/dist/components/sdds-inline-tabs-fullbleed.js +0 -115
- package/dist/components/sdds-inline-tabs.d.ts +0 -11
- package/dist/components/sdds-inline-tabs.js +0 -235
- package/dist/components/sdds-modal.d.ts +0 -11
- package/dist/components/sdds-modal.js +0 -69
- package/dist/components/sdds-navigation-tabs.d.ts +0 -11
- package/dist/components/sdds-navigation-tabs.js +0 -113
- package/dist/components/sdds-popover-canvas.d.ts +0 -11
- package/dist/components/sdds-popover-canvas.js +0 -97
- package/dist/components/sdds-popover-menu.d.ts +0 -11
- package/dist/components/sdds-popover-menu.js +0 -96
- package/dist/components/sdds-slider.d.ts +0 -11
- package/dist/components/sdds-slider.js +0 -366
- package/dist/components/sdds-spinner.d.ts +0 -11
- package/dist/components/sdds-spinner.js +0 -37
- package/dist/components/sdds-table-body-row-expandable.d.ts +0 -11
- package/dist/components/sdds-table-body-row-expandable.js +0 -104
- package/dist/components/sdds-table-body-row.d.ts +0 -11
- package/dist/components/sdds-table-body-row.js +0 -6
- package/dist/components/sdds-table-body.d.ts +0 -11
- package/dist/components/sdds-table-body.js +0 -337
- package/dist/components/sdds-table-footer.d.ts +0 -11
- package/dist/components/sdds-table-footer.js +0 -196
- package/dist/components/sdds-table-header.d.ts +0 -11
- package/dist/components/sdds-table-header.js +0 -125
- package/dist/components/sdds-table-toolbar.d.ts +0 -11
- package/dist/components/sdds-table-toolbar.js +0 -88
- package/dist/components/sdds-table.d.ts +0 -11
- package/dist/components/sdds-table.js +0 -92
- package/dist/components/sdds-textarea.d.ts +0 -11
- package/dist/components/sdds-textarea.js +0 -90
- package/dist/components/sdds-textfield.d.ts +0 -11
- package/dist/components/sdds-textfield.js +0 -111
- package/dist/components/sdds-tooltip.d.ts +0 -11
- package/dist/components/sdds-tooltip.js +0 -116
- package/dist/components/table-body-cell.js +0 -102
- package/dist/components/table-body-row.js +0 -119
- package/dist/esm/index-b67b15a6.js +0 -1884
- package/dist/esm/index.js +0 -1
- package/dist/esm/loader.js +0 -17
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/esm/popper-f860750c.js +0 -1799
- package/dist/esm/sdds-accordion-item.entry.js +0 -30
- package/dist/esm/sdds-accordion.entry.js +0 -17
- package/dist/esm/sdds-badges.entry.js +0 -51
- package/dist/esm/sdds-body-cell_2.entry.js +0 -168
- package/dist/esm/sdds-button.entry.js +0 -32
- package/dist/esm/sdds-datetime.entry.js +0 -62
- package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
- package/dist/esm/sdds-dropdown_2.entry.js +0 -330
- package/dist/esm/sdds-header-cell.entry.js +0 -137
- package/dist/esm/sdds-icon.entry.js +0 -38
- package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
- package/dist/esm/sdds-inline-tabs.entry.js +0 -207
- package/dist/esm/sdds-modal.entry.js +0 -45
- package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
- package/dist/esm/sdds-popover-canvas.entry.js +0 -72
- package/dist/esm/sdds-popover-menu.entry.js +0 -71
- package/dist/esm/sdds-slider.entry.js +0 -332
- package/dist/esm/sdds-spinner.entry.js +0 -17
- package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
- package/dist/esm/sdds-table-body.entry.js +0 -285
- package/dist/esm/sdds-table-footer.entry.js +0 -161
- package/dist/esm/sdds-table-header.entry.js +0 -96
- package/dist/esm/sdds-table-toolbar.entry.js +0 -62
- package/dist/esm/sdds-table.entry.js +0 -65
- package/dist/esm/sdds-textarea.entry.js +0 -57
- package/dist/esm/sdds-textfield.entry.js +0 -78
- package/dist/esm/sdds-tooltip.entry.js +0 -91
- package/dist/esm/tegel.js +0 -17
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/node_modules/@types/jest/index.d.ts +0 -1512
- package/dist/tegel/index.esm.js +0 -0
- package/dist/tegel/p-040efb32.entry.js +0 -1
- package/dist/tegel/p-12ca5cfa.entry.js +0 -1
- package/dist/tegel/p-157e1618.js +0 -2
- package/dist/tegel/p-1fe61cf6.entry.js +0 -1
- package/dist/tegel/p-2f376504.entry.js +0 -1
- package/dist/tegel/p-44ced895.entry.js +0 -1
- package/dist/tegel/p-4880f03d.entry.js +0 -1
- package/dist/tegel/p-4aba73a3.entry.js +0 -1
- package/dist/tegel/p-4b58a02c.entry.js +0 -1
- package/dist/tegel/p-4cb85347.entry.js +0 -1
- package/dist/tegel/p-52031b5a.entry.js +0 -1
- package/dist/tegel/p-677baf7f.entry.js +0 -1
- package/dist/tegel/p-71797eaf.entry.js +0 -1
- package/dist/tegel/p-7373284c.entry.js +0 -1
- package/dist/tegel/p-7451779b.entry.js +0 -1
- package/dist/tegel/p-77aeea3b.entry.js +0 -1
- package/dist/tegel/p-8582d6a7.entry.js +0 -1
- package/dist/tegel/p-96021bd0.entry.js +0 -1
- package/dist/tegel/p-9d8caf51.entry.js +0 -1
- package/dist/tegel/p-a5919930.entry.js +0 -1
- package/dist/tegel/p-b01cface.entry.js +0 -1
- package/dist/tegel/p-bf896643.entry.js +0 -1
- package/dist/tegel/p-c311725c.entry.js +0 -1
- package/dist/tegel/p-cf72dfd9.entry.js +0 -1
- package/dist/tegel/p-d91caec6.entry.js +0 -1
- package/dist/tegel/p-e10eec33.entry.js +0 -1
- package/dist/tegel/p-ec26fc38.js +0 -1
- package/dist/tegel/p-f2262a69.entry.js +0 -1
- package/dist/tegel/p-f2f7aa45.entry.js +0 -1
- package/dist/tegel/tegel.css +0 -101
- package/dist/tegel/tegel.esm.js +0 -1
- package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +0 -17
- package/dist/types/components/accordion/accordion.d.ts +0 -7
- package/dist/types/components/badge/badges.d.ts +0 -16
- package/dist/types/components/button/button-component.d.ts +0 -15
- package/dist/types/components/data-table/table/table.d.ts +0 -47
- package/dist/types/components/data-table/table-body/table-body.d.ts +0 -54
- package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +0 -24
- package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +0 -27
- package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +0 -27
- package/dist/types/components/data-table/table-footer/table-footer.d.ts +0 -50
- package/dist/types/components/data-table/table-header/table-header.d.ts +0 -27
- package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +0 -45
- package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +0 -22
- package/dist/types/components/datetime/datetime.d.ts +0 -32
- package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +0 -42
- package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -19
- package/dist/types/components/dropdown/dropdown.d.ts +0 -56
- package/dist/types/components/icon/icon.d.ts +0 -12
- package/dist/types/components/modal/modal.d.ts +0 -16
- package/dist/types/components/popover-canvas/popover-canvas.d.ts +0 -18
- package/dist/types/components/popover-menu/popover-menu.d.ts +0 -18
- package/dist/types/components/slider/slider.d.ts +0 -82
- package/dist/types/components/spinner/spinner.d.ts +0 -7
- package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +0 -41
- package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +0 -20
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +0 -18
- package/dist/types/components/textarea/textarea.d.ts +0 -41
- package/dist/types/components/textfield/textfield.d.ts +0 -42
- package/dist/types/components/tooltip/tooltip.d.ts +0 -20
- package/dist/types/components.d.ts +0 -1752
- package/dist/types/global.d.ts +0 -2
- package/dist/types/index.d.ts +0 -1
- package/dist/types/stencil-public-runtime.d.ts +0 -1581
- package/dist/types/utils/utils.d.ts +0 -2
- package/loader/cdn.js +0 -3
- package/loader/index.cjs.js +0 -3
- package/loader/index.d.ts +0 -12
- package/loader/index.es2017.js +0 -3
- package/loader/index.js +0 -4
- package/loader/package.json +0 -11
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface SddsTableBody extends Components.SddsTableBody, HTMLElement {}
|
|
4
|
-
export const SddsTableBody: {
|
|
5
|
-
prototype: SddsTableBody;
|
|
6
|
-
new (): SddsTableBody;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,337 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { d as defineCustomElement$3 } from './table-body-cell.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './table-body-row.js';
|
|
4
|
-
|
|
5
|
-
const dummyData = [
|
|
6
|
-
{
|
|
7
|
-
truck: "L-series",
|
|
8
|
-
driver: "Sonya Bruce",
|
|
9
|
-
country: "Brazil",
|
|
10
|
-
mileage: 123987
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
truck: "P-series",
|
|
14
|
-
driver: "Guerra Bowman",
|
|
15
|
-
country: "Sweden",
|
|
16
|
-
mileage: 2000852
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
truck: "G-series",
|
|
20
|
-
driver: "Ferrell Wallace",
|
|
21
|
-
country: "Germany",
|
|
22
|
-
mileage: 564
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
truck: "R-series",
|
|
26
|
-
driver: "Cox Burris",
|
|
27
|
-
country: "Spain",
|
|
28
|
-
mileage: 1789357
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
truck: "S-series",
|
|
32
|
-
driver: "Montgomery Cervantes",
|
|
33
|
-
country: "Croatia",
|
|
34
|
-
mileage: 65
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
truck: "L-series",
|
|
38
|
-
driver: "Sheryl Nielsen",
|
|
39
|
-
country: "Greece",
|
|
40
|
-
mileage: 365784
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
truck: "G-series",
|
|
44
|
-
driver: "Benton Gomez",
|
|
45
|
-
country: "France",
|
|
46
|
-
mileage: 80957
|
|
47
|
-
}
|
|
48
|
-
];
|
|
49
|
-
|
|
50
|
-
const tableBodyCss = ":host,sdds-table-body{box-sizing:border-box;display:table-row-group}:host *,sdds-table-body *{box-sizing:border-box}:host .sdds-table__info-message,sdds-table-body .sdds-table__info-message{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-grey-958);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}";
|
|
51
|
-
|
|
52
|
-
const relevantTableProps = [
|
|
53
|
-
'enableMultiselect',
|
|
54
|
-
'enableExpandableRows',
|
|
55
|
-
];
|
|
56
|
-
const TableBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
57
|
-
constructor() {
|
|
58
|
-
super();
|
|
59
|
-
this.__registerHost();
|
|
60
|
-
this.sortingSwitcherEvent = createEvent(this, "sortingSwitcherEvent", 7);
|
|
61
|
-
this.updateBodyCheckboxesEvent = createEvent(this, "updateBodyCheckboxesEvent", 7);
|
|
62
|
-
this.updateMainCheckboxEvent = createEvent(this, "updateMainCheckboxEvent", 7);
|
|
63
|
-
this.uncheckAll = () => {
|
|
64
|
-
this.mainCheckboxStatus = false;
|
|
65
|
-
this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
|
|
66
|
-
this.updateBodyCheckboxesEvent.emit([this.tableId, this.mainCheckboxStatus]);
|
|
67
|
-
};
|
|
68
|
-
this.selectedDataExporter = () => {
|
|
69
|
-
const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');
|
|
70
|
-
this.multiselectArray = [];
|
|
71
|
-
for (let j = 0; j < selectedRows.length; j++) {
|
|
72
|
-
const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');
|
|
73
|
-
const selectedObject = {};
|
|
74
|
-
for (let i = 0; i < rowCells.length; i++) {
|
|
75
|
-
const currentCellKey = rowCells[i].getAttribute('cell-key');
|
|
76
|
-
const currentCellValue = rowCells[i].getAttribute('cell-value');
|
|
77
|
-
selectedObject[currentCellKey] = currentCellValue;
|
|
78
|
-
}
|
|
79
|
-
this.multiselectArray.push(selectedObject);
|
|
80
|
-
}
|
|
81
|
-
this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);
|
|
82
|
-
};
|
|
83
|
-
this.bodyCheckBoxClicked = () => {
|
|
84
|
-
const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;
|
|
85
|
-
const numberOfRowsSelected = this.host.getElementsByClassName('sdds-table__row--selected').length;
|
|
86
|
-
this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
|
|
87
|
-
this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
|
|
88
|
-
this.selectedDataExporter();
|
|
89
|
-
};
|
|
90
|
-
this.disableFilteringFunction = false;
|
|
91
|
-
this.disableSortingFunction = false;
|
|
92
|
-
this.bodyData = undefined;
|
|
93
|
-
this.enableDummyData = false;
|
|
94
|
-
this.dummyData = JSON.stringify(dummyData);
|
|
95
|
-
this.rowsPerPage = 1;
|
|
96
|
-
this.enableMultiselect = false;
|
|
97
|
-
this.enablePaginationTableBody = false;
|
|
98
|
-
this.enableExpandableRows = true;
|
|
99
|
-
this.innerBodyData = [];
|
|
100
|
-
this.bodyDataManipulated = [];
|
|
101
|
-
this.bodyDataOriginal = [];
|
|
102
|
-
this.multiselectArray = [];
|
|
103
|
-
this.multiselectArrayJSON = undefined;
|
|
104
|
-
this.mainCheckboxStatus = false;
|
|
105
|
-
this.columnsNumber = 0;
|
|
106
|
-
this.disableAllSorting = false;
|
|
107
|
-
this.numberOfPages = 0;
|
|
108
|
-
this.paginationValue = 1;
|
|
109
|
-
this.tempPaginationDisable = false;
|
|
110
|
-
this.showNoResultsMessage = false;
|
|
111
|
-
this.tableId = '';
|
|
112
|
-
}
|
|
113
|
-
arrayDataWatcher(newValue) {
|
|
114
|
-
if (typeof newValue === 'string') {
|
|
115
|
-
this.innerBodyData = JSON.parse(newValue);
|
|
116
|
-
}
|
|
117
|
-
else {
|
|
118
|
-
this.innerBodyData = newValue;
|
|
119
|
-
}
|
|
120
|
-
this.bodyDataManipulated = [...this.innerBodyData];
|
|
121
|
-
this.bodyDataOriginal = [...this.innerBodyData];
|
|
122
|
-
}
|
|
123
|
-
tablePropsChangedEventListener(event) {
|
|
124
|
-
if (this.tableId === event.detail.tableId) {
|
|
125
|
-
event.detail.changed
|
|
126
|
-
.filter((changedProp) => relevantTableProps.includes(changedProp))
|
|
127
|
-
.forEach((changedProp) => {
|
|
128
|
-
if (typeof this[changedProp] === 'undefined') {
|
|
129
|
-
throw new Error(`Table prop is not supported: ${changedProp}`);
|
|
130
|
-
}
|
|
131
|
-
this[changedProp] = event.detail[changedProp];
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
static compareValues(key, order = 'asc') {
|
|
136
|
-
return function innerSort(a, b) {
|
|
137
|
-
// eslint-disable-next-line no-prototype-builtins
|
|
138
|
-
if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
|
|
139
|
-
// property doesn't exist on either object
|
|
140
|
-
return 0;
|
|
141
|
-
}
|
|
142
|
-
const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
|
|
143
|
-
const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
|
|
144
|
-
let comparison = 0;
|
|
145
|
-
if (varA > varB) {
|
|
146
|
-
comparison = 1;
|
|
147
|
-
}
|
|
148
|
-
else if (varA < varB) {
|
|
149
|
-
comparison = -1;
|
|
150
|
-
}
|
|
151
|
-
return order === 'desc' ? comparison * -1 : comparison;
|
|
152
|
-
};
|
|
153
|
-
}
|
|
154
|
-
sortData(keyValue, sortingDirection) {
|
|
155
|
-
if (!this.disableSortingFunction) {
|
|
156
|
-
if (this.enableMultiselect) {
|
|
157
|
-
// Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.
|
|
158
|
-
this.uncheckAll();
|
|
159
|
-
}
|
|
160
|
-
// use spread operator to make enable sorting and modifying array, same as using .slice()
|
|
161
|
-
this.bodyDataManipulated = [...this.bodyDataManipulated];
|
|
162
|
-
this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
// Listen to sortColumnData from data-table-header-element
|
|
166
|
-
updateOptionsContent(event) {
|
|
167
|
-
const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;
|
|
168
|
-
if (this.tableId === receivedID) {
|
|
169
|
-
this.sortData(receivedKeyValue, receivedSortingDirection);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
headCheckboxListener(event) {
|
|
173
|
-
if (this.tableId === event.detail[0]) {
|
|
174
|
-
[, this.mainCheckboxStatus] = event.detail;
|
|
175
|
-
this.selectedDataExporter();
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
// No need to read the value, event is here just to trigger another function
|
|
179
|
-
bodyCheckboxListener() {
|
|
180
|
-
this.bodyCheckBoxClicked();
|
|
181
|
-
}
|
|
182
|
-
searchFunction(searchTerm) {
|
|
183
|
-
if (!this.disableFilteringFunction) {
|
|
184
|
-
/*
|
|
185
|
-
// Logic for filtering JSON data on all columns
|
|
186
|
-
// Really nice solution, do not delete, might be needed in future
|
|
187
|
-
// Reason to go with upper one is not to lose selected state on checkboxes
|
|
188
|
-
if (searchTerm.length > 0) {
|
|
189
|
-
this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>
|
|
190
|
-
Object.keys(option).some(
|
|
191
|
-
(key) =>
|
|
192
|
-
String(option[key] ?? '')
|
|
193
|
-
.toLowerCase()
|
|
194
|
-
.indexOf(searchTerm) >= 0
|
|
195
|
-
)
|
|
196
|
-
);
|
|
197
|
-
} else {
|
|
198
|
-
this.bodyDataManipulated = this.bodyDataOriginal;
|
|
199
|
-
}
|
|
200
|
-
*/
|
|
201
|
-
// grab all rows in body
|
|
202
|
-
const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');
|
|
203
|
-
if (searchTerm.length > 0) {
|
|
204
|
-
if (this.enablePaginationTableBody) {
|
|
205
|
-
this.tempPaginationDisable = true;
|
|
206
|
-
}
|
|
207
|
-
dataRowsFiltering.forEach((item) => {
|
|
208
|
-
const cells = item.querySelectorAll('sdds-body-cell');
|
|
209
|
-
const cellValuesArray = [];
|
|
210
|
-
// go through cells and save cell-values in array
|
|
211
|
-
cells.forEach((cellItem) => {
|
|
212
|
-
const cellValue = cellItem.getAttribute('cell-value').toLowerCase();
|
|
213
|
-
cellValuesArray.push(cellValue);
|
|
214
|
-
});
|
|
215
|
-
// iterate over array of values and see if one matches search string
|
|
216
|
-
const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));
|
|
217
|
-
// if matches, show parent row, otherwise hide the row
|
|
218
|
-
if (matchCounter) {
|
|
219
|
-
item.classList.remove('sdds-table__row--hidden');
|
|
220
|
-
}
|
|
221
|
-
else {
|
|
222
|
-
item.classList.add('sdds-table__row--hidden');
|
|
223
|
-
}
|
|
224
|
-
});
|
|
225
|
-
this.disableAllSorting = true;
|
|
226
|
-
this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
|
|
227
|
-
const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');
|
|
228
|
-
// If same, info message will be shown
|
|
229
|
-
this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;
|
|
230
|
-
}
|
|
231
|
-
else {
|
|
232
|
-
if (this.enablePaginationTableBody) {
|
|
233
|
-
this.tempPaginationDisable = false;
|
|
234
|
-
}
|
|
235
|
-
// Check if pagination is ON in order to prevent showing all rows
|
|
236
|
-
if (this.enablePaginationTableBody) ;
|
|
237
|
-
else {
|
|
238
|
-
dataRowsFiltering.forEach((item) => {
|
|
239
|
-
item.classList.remove('sdds-table__row--hidden');
|
|
240
|
-
});
|
|
241
|
-
}
|
|
242
|
-
this.disableAllSorting = false;
|
|
243
|
-
this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
// Listen to tableFilteringTerm from tableToolbar component
|
|
248
|
-
tableFilteringTermListener(event) {
|
|
249
|
-
if (this.tableId === event.detail[0]) {
|
|
250
|
-
this.searchFunction(event.detail[1]);
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
connectedCallback() {
|
|
254
|
-
this.tableEl = this.host.closest('sdds-table');
|
|
255
|
-
this.tableId = this.tableEl.tableId;
|
|
256
|
-
}
|
|
257
|
-
componentWillLoad() {
|
|
258
|
-
relevantTableProps.forEach((tablePropName) => {
|
|
259
|
-
this[tablePropName] = this.tableEl[tablePropName];
|
|
260
|
-
});
|
|
261
|
-
if (this.enableDummyData) {
|
|
262
|
-
this.bodyData = this.dummyData;
|
|
263
|
-
}
|
|
264
|
-
else if (this.bodyData) {
|
|
265
|
-
this.arrayDataWatcher(this.bodyData);
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
componentWillRender() {
|
|
269
|
-
const headerColumnsNo = this.host.parentElement.querySelector('sdds-table-header').children.length;
|
|
270
|
-
// multiselect and expended features requires one extra column for controls...
|
|
271
|
-
if (this.enableMultiselect || this.enableExpandableRows) {
|
|
272
|
-
this.columnsNumber = headerColumnsNo + 1;
|
|
273
|
-
}
|
|
274
|
-
else {
|
|
275
|
-
this.columnsNumber = headerColumnsNo;
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
render() {
|
|
279
|
-
return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (h("sdds-table-body-row", null, Object.keys(row).map((cellData) => (h("sdds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), this.showNoResultsMessage && (h("tr", null, h("td", { class: "sdds-table__info-message", colSpan: this.columnsNumber }, "Unfortunately, no data matches your search term \uD83D\uDE15"))), h("slot", null)));
|
|
280
|
-
}
|
|
281
|
-
get host() { return this; }
|
|
282
|
-
static get watchers() { return {
|
|
283
|
-
"bodyData": ["arrayDataWatcher"]
|
|
284
|
-
}; }
|
|
285
|
-
static get style() { return tableBodyCss; }
|
|
286
|
-
}, [4, "sdds-table-body", {
|
|
287
|
-
"disableFilteringFunction": [4, "disable-filtering-function"],
|
|
288
|
-
"disableSortingFunction": [4, "disable-sorting-function"],
|
|
289
|
-
"bodyData": [8, "body-data"],
|
|
290
|
-
"enableDummyData": [4, "enable-dummy-data"],
|
|
291
|
-
"dummyData": [32],
|
|
292
|
-
"rowsPerPage": [32],
|
|
293
|
-
"enableMultiselect": [32],
|
|
294
|
-
"enablePaginationTableBody": [32],
|
|
295
|
-
"enableExpandableRows": [32],
|
|
296
|
-
"innerBodyData": [32],
|
|
297
|
-
"bodyDataManipulated": [32],
|
|
298
|
-
"bodyDataOriginal": [32],
|
|
299
|
-
"multiselectArray": [32],
|
|
300
|
-
"multiselectArrayJSON": [32],
|
|
301
|
-
"mainCheckboxStatus": [32],
|
|
302
|
-
"columnsNumber": [32],
|
|
303
|
-
"disableAllSorting": [32],
|
|
304
|
-
"numberOfPages": [32],
|
|
305
|
-
"paginationValue": [32],
|
|
306
|
-
"tempPaginationDisable": [32],
|
|
307
|
-
"showNoResultsMessage": [32],
|
|
308
|
-
"tableId": [32]
|
|
309
|
-
}, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "sortColumnDataEvent", "updateOptionsContent"], [16, "mainCheckboxSelectedEvent", "headCheckboxListener"], [16, "bodyRowToTable", "bodyCheckboxListener"], [16, "tableFilteringTerm", "tableFilteringTermListener"]]]);
|
|
310
|
-
function defineCustomElement$1() {
|
|
311
|
-
if (typeof customElements === "undefined") {
|
|
312
|
-
return;
|
|
313
|
-
}
|
|
314
|
-
const components = ["sdds-table-body", "sdds-body-cell", "sdds-table-body-row"];
|
|
315
|
-
components.forEach(tagName => { switch (tagName) {
|
|
316
|
-
case "sdds-table-body":
|
|
317
|
-
if (!customElements.get(tagName)) {
|
|
318
|
-
customElements.define(tagName, TableBody);
|
|
319
|
-
}
|
|
320
|
-
break;
|
|
321
|
-
case "sdds-body-cell":
|
|
322
|
-
if (!customElements.get(tagName)) {
|
|
323
|
-
defineCustomElement$3();
|
|
324
|
-
}
|
|
325
|
-
break;
|
|
326
|
-
case "sdds-table-body-row":
|
|
327
|
-
if (!customElements.get(tagName)) {
|
|
328
|
-
defineCustomElement$2();
|
|
329
|
-
}
|
|
330
|
-
break;
|
|
331
|
-
} });
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
const SddsTableBody = TableBody;
|
|
335
|
-
const defineCustomElement = defineCustomElement$1;
|
|
336
|
-
|
|
337
|
-
export { SddsTableBody, defineCustomElement };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface SddsTableFooter extends Components.SddsTableFooter, HTMLElement {}
|
|
4
|
-
export const SddsTableFooter: {
|
|
5
|
-
prototype: SddsTableFooter;
|
|
6
|
-
new (): SddsTableFooter;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .sdds-table__footer-row{background-color:var(--sdds-grey-100)}:host .sdds-table__footer-cell{padding:0 16px}:host .sdds-table__footer-cell .sdds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__row-selector,:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector{display:flex;align-items:center}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-grey-50);width:36px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-right:8px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover{background-color:var(--sdds-white)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled{color:var(--sdds-grey-600)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input--shake{animation:sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-text{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:1px 8px 0 0}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover{background-color:var(--sdds-grey-300)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled{cursor:default}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover{background-color:transparent}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg{height:20px;width:20px}:host(.sdds-table--compact){height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination{height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{height:24px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{height:28px;width:28px}";
|
|
4
|
-
|
|
5
|
-
const relevantTableProps = [
|
|
6
|
-
'compactDesign',
|
|
7
|
-
'noMinWidth',
|
|
8
|
-
'verticalDividers',
|
|
9
|
-
'whiteBackground',
|
|
10
|
-
];
|
|
11
|
-
function removeShakeAnimation(e) {
|
|
12
|
-
e.target.classList.remove('sdds-table__page-selector-input--shake');
|
|
13
|
-
}
|
|
14
|
-
const TableFooter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
15
|
-
constructor() {
|
|
16
|
-
super();
|
|
17
|
-
this.__registerHost();
|
|
18
|
-
this.__attachShadow();
|
|
19
|
-
this.enablePaginationEvent = createEvent(this, "enablePaginationEvent", 7);
|
|
20
|
-
this.currentPageValueEvent = createEvent(this, "currentPageValueEvent", 7);
|
|
21
|
-
this.paginationPrev = (event) => {
|
|
22
|
-
event.preventDefault();
|
|
23
|
-
// Enable lowering until 1st page
|
|
24
|
-
if (this.paginationValue >= 2) {
|
|
25
|
-
this.paginationValue--;
|
|
26
|
-
this.runPagination();
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
this.paginationNext = (event) => {
|
|
30
|
-
event.preventDefault();
|
|
31
|
-
// Enable increasing until the max number of pages
|
|
32
|
-
if (this.paginationValue <= this.numberOfPages) {
|
|
33
|
-
this.paginationValue++;
|
|
34
|
-
this.runPagination();
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
this.runPagination = () => {
|
|
38
|
-
if (!this.disablePaginationFunction) {
|
|
39
|
-
// grab all rows in body
|
|
40
|
-
const dataRowsPagination = this.host.parentNode
|
|
41
|
-
.querySelector('sdds-table-body')
|
|
42
|
-
.querySelectorAll('.sdds-table__row');
|
|
43
|
-
dataRowsPagination.forEach((item, i) => {
|
|
44
|
-
// for making logic easier 1st result, 2nd result...
|
|
45
|
-
const index = i + 1;
|
|
46
|
-
if (this.tempPaginationDisable) {
|
|
47
|
-
this.paginationValue = 1;
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
const lastResult = this.rowsPerPage * this.paginationValue;
|
|
51
|
-
const firstResult = lastResult - this.rowsPerPage;
|
|
52
|
-
if (index > firstResult && index <= lastResult) {
|
|
53
|
-
item.classList.remove('sdds-table__row--hidden');
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
item.classList.add('sdds-table__row--hidden');
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
this.clientPaginationPrev = (event) => {
|
|
63
|
-
event.preventDefault();
|
|
64
|
-
// Enable lowering until 1st page
|
|
65
|
-
if (this.clientPaginationValue >= 2) {
|
|
66
|
-
this.clientPaginationValue--;
|
|
67
|
-
this.sendPaginationValue(this.clientPaginationValue);
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
this.clientPaginationNext = (event) => {
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
// Enable increasing until the max number of pages
|
|
73
|
-
if (this.clientPaginationValue <= this.clientMaxPages) {
|
|
74
|
-
this.clientPaginationValue++;
|
|
75
|
-
this.sendPaginationValue(this.clientPaginationValue);
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
this.enablePagination = false;
|
|
79
|
-
this.rowsPerPage = 5;
|
|
80
|
-
this.enableClientPagination = false;
|
|
81
|
-
this.clientPaginationValue = 1;
|
|
82
|
-
this.clientMaxPages = 1;
|
|
83
|
-
this.clientSetColumnsNumber = null;
|
|
84
|
-
this.disablePaginationFunction = false;
|
|
85
|
-
this.columnsNumber = 0;
|
|
86
|
-
this.numberOfPages = 0;
|
|
87
|
-
this.paginationValue = 1;
|
|
88
|
-
this.tempPaginationDisable = false;
|
|
89
|
-
this.verticalDividers = false;
|
|
90
|
-
this.compactDesign = false;
|
|
91
|
-
this.noMinWidth = false;
|
|
92
|
-
this.whiteBackground = false;
|
|
93
|
-
this.tableId = '';
|
|
94
|
-
}
|
|
95
|
-
tablePropsChangedEventListener(event) {
|
|
96
|
-
if (this.tableId === event.detail.tableId) {
|
|
97
|
-
event.detail.changed
|
|
98
|
-
.filter((changedProp) => relevantTableProps.includes(changedProp))
|
|
99
|
-
.forEach((changedProp) => {
|
|
100
|
-
if (typeof this[changedProp] === 'undefined') {
|
|
101
|
-
throw new Error(`Table prop is not supported: ${changedProp}`);
|
|
102
|
-
}
|
|
103
|
-
this[changedProp] = event.detail[changedProp];
|
|
104
|
-
});
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
connectedCallback() {
|
|
108
|
-
this.tableEl = this.host.closest('sdds-table');
|
|
109
|
-
this.tableId = this.tableEl.tableId;
|
|
110
|
-
}
|
|
111
|
-
componentWillLoad() {
|
|
112
|
-
relevantTableProps.forEach((tablePropName) => {
|
|
113
|
-
this[tablePropName] = this.tableEl[tablePropName];
|
|
114
|
-
});
|
|
115
|
-
const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;
|
|
116
|
-
const numberOfColumns = this.host.parentElement.querySelector('sdds-table-header').childElementCount;
|
|
117
|
-
this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
|
|
118
|
-
if (this.clientSetColumnsNumber !== null) {
|
|
119
|
-
this.columnsNumber = this.clientSetColumnsNumber;
|
|
120
|
-
}
|
|
121
|
-
else {
|
|
122
|
-
this.columnsNumber = numberOfColumns;
|
|
123
|
-
}
|
|
124
|
-
this.enablePaginationEvent.emit(this.tableId);
|
|
125
|
-
}
|
|
126
|
-
paginationInputChange(event) {
|
|
127
|
-
const insertedValue = event.target.value;
|
|
128
|
-
if (insertedValue > this.numberOfPages || insertedValue < 1) {
|
|
129
|
-
event.target.classList.add('sdds-table__page-selector-input--shake');
|
|
130
|
-
this.paginationValue = event.target.max;
|
|
131
|
-
}
|
|
132
|
-
else {
|
|
133
|
-
this.paginationValue = event.target.value;
|
|
134
|
-
}
|
|
135
|
-
this.runPagination();
|
|
136
|
-
}
|
|
137
|
-
runPaginationEventListener(event) {
|
|
138
|
-
if (this.tableId === event.detail) {
|
|
139
|
-
this.runPagination();
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
sendPaginationValue(value) {
|
|
143
|
-
this.currentPageValueEvent.emit([this.tableId, value]);
|
|
144
|
-
}
|
|
145
|
-
clientPaginationInputChange(event) {
|
|
146
|
-
const insertedValue = event.target.value;
|
|
147
|
-
if (insertedValue > this.clientMaxPages || insertedValue < 1) {
|
|
148
|
-
event.target.classList.add('sdds-table__page-selector-input--shake');
|
|
149
|
-
this.clientPaginationValue = event.target.max;
|
|
150
|
-
}
|
|
151
|
-
else {
|
|
152
|
-
this.clientPaginationValue = event.target.value;
|
|
153
|
-
}
|
|
154
|
-
this.sendPaginationValue(this.clientPaginationValue);
|
|
155
|
-
}
|
|
156
|
-
render() {
|
|
157
|
-
return (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("tr", { class: "sdds-table__footer-row" }, h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z", fill: "currentColor" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z", fill: "currentColor" })))))), this.enableClientPagination && !this.enablePagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.clientMaxPages, value: this.clientPaginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.clientPaginationInputChange(event), onFocusout: (event) => this.clientPaginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.clientMaxPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z", fill: "currentColor" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z", fill: "currentColor" }))))))))));
|
|
158
|
-
}
|
|
159
|
-
get host() { return this; }
|
|
160
|
-
static get style() { return tableFooterCss; }
|
|
161
|
-
}, [1, "sdds-table-footer", {
|
|
162
|
-
"enablePagination": [516, "enable-pagination"],
|
|
163
|
-
"rowsPerPage": [514, "rows-per-page"],
|
|
164
|
-
"enableClientPagination": [516, "enable-client-pagination"],
|
|
165
|
-
"clientPaginationValue": [514, "client-pagination-value"],
|
|
166
|
-
"clientMaxPages": [514, "client-max-pages"],
|
|
167
|
-
"clientSetColumnsNumber": [2, "client-set-columns-number"],
|
|
168
|
-
"disablePaginationFunction": [4, "disable-pagination-function"],
|
|
169
|
-
"columnsNumber": [32],
|
|
170
|
-
"numberOfPages": [32],
|
|
171
|
-
"paginationValue": [32],
|
|
172
|
-
"tempPaginationDisable": [32],
|
|
173
|
-
"verticalDividers": [32],
|
|
174
|
-
"compactDesign": [32],
|
|
175
|
-
"noMinWidth": [32],
|
|
176
|
-
"whiteBackground": [32],
|
|
177
|
-
"tableId": [32]
|
|
178
|
-
}, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "runPaginationEvent", "runPaginationEventListener"]]]);
|
|
179
|
-
function defineCustomElement$1() {
|
|
180
|
-
if (typeof customElements === "undefined") {
|
|
181
|
-
return;
|
|
182
|
-
}
|
|
183
|
-
const components = ["sdds-table-footer"];
|
|
184
|
-
components.forEach(tagName => { switch (tagName) {
|
|
185
|
-
case "sdds-table-footer":
|
|
186
|
-
if (!customElements.get(tagName)) {
|
|
187
|
-
customElements.define(tagName, TableFooter);
|
|
188
|
-
}
|
|
189
|
-
break;
|
|
190
|
-
} });
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
const SddsTableFooter = TableFooter;
|
|
194
|
-
const defineCustomElement = defineCustomElement$1;
|
|
195
|
-
|
|
196
|
-
export { SddsTableFooter, defineCustomElement };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface SddsTableHeader extends Components.SddsTableHeader, HTMLElement {}
|
|
4
|
-
export const SddsTableHeader: {
|
|
5
|
-
prototype: SddsTableHeader;
|
|
6
|
-
new (): SddsTableHeader;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|