@nuralyui/table 0.0.2 → 0.0.6

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 (89) hide show
  1. package/bundle.js +1497 -0
  2. package/package.json +16 -2
  3. package/react.js +1 -1
  4. package/react.js.map +1 -1
  5. package/table.component.d.ts +85 -12
  6. package/table.component.js +229 -136
  7. package/table.component.js.map +1 -1
  8. package/table.style.js +253 -2
  9. package/table.style.js.map +1 -1
  10. package/table.types.d.ts +22 -4
  11. package/table.types.js +0 -23
  12. package/table.types.js.map +1 -1
  13. package/components/hy-table-actions.d.ts +0 -10
  14. package/components/hy-table-actions.d.ts.map +0 -1
  15. package/components/hy-table-actions.js +0 -39
  16. package/components/hy-table-actions.js.map +0 -1
  17. package/components/hy-table-content.d.ts +0 -25
  18. package/components/hy-table-content.d.ts.map +0 -1
  19. package/components/hy-table-content.js +0 -168
  20. package/components/hy-table-content.js.map +0 -1
  21. package/components/hy-table-filter.d.ts +0 -11
  22. package/components/hy-table-filter.d.ts.map +0 -1
  23. package/components/hy-table-filter.js +0 -59
  24. package/components/hy-table-filter.js.map +0 -1
  25. package/components/hy-table-pagination.d.ts +0 -21
  26. package/components/hy-table-pagination.d.ts.map +0 -1
  27. package/components/hy-table-pagination.js +0 -111
  28. package/components/hy-table-pagination.js.map +0 -1
  29. package/components/table-actions.style.d.ts +0 -2
  30. package/components/table-actions.style.d.ts.map +0 -1
  31. package/components/table-actions.style.js +0 -31
  32. package/components/table-actions.style.js.map +0 -1
  33. package/components/table-actions.variables.d.ts +0 -2
  34. package/components/table-actions.variables.d.ts.map +0 -1
  35. package/components/table-actions.variables.js +0 -13
  36. package/components/table-actions.variables.js.map +0 -1
  37. package/components/table-content.style.d.ts +0 -2
  38. package/components/table-content.style.d.ts.map +0 -1
  39. package/components/table-content.style.js +0 -77
  40. package/components/table-content.style.js.map +0 -1
  41. package/components/table-content.variables.d.ts +0 -2
  42. package/components/table-content.variables.d.ts.map +0 -1
  43. package/components/table-content.variables.js +0 -29
  44. package/components/table-content.variables.js.map +0 -1
  45. package/components/table-filter.style.d.ts +0 -2
  46. package/components/table-filter.style.d.ts.map +0 -1
  47. package/components/table-filter.style.js +0 -39
  48. package/components/table-filter.style.js.map +0 -1
  49. package/components/table-filter.variables.d.ts +0 -2
  50. package/components/table-filter.variables.d.ts.map +0 -1
  51. package/components/table-filter.variables.js +0 -17
  52. package/components/table-filter.variables.js.map +0 -1
  53. package/components/table-pagination.style.d.ts +0 -2
  54. package/components/table-pagination.style.d.ts.map +0 -1
  55. package/components/table-pagination.style.js +0 -102
  56. package/components/table-pagination.style.js.map +0 -1
  57. package/components/table-pagination.variables.d.ts +0 -2
  58. package/components/table-pagination.variables.d.ts.map +0 -1
  59. package/components/table-pagination.variables.js +0 -17
  60. package/components/table-pagination.variables.js.map +0 -1
  61. package/demo/table-demo.d.ts +0 -17
  62. package/demo/table-demo.d.ts.map +0 -1
  63. package/demo/table-demo.js +0 -166
  64. package/demo/table-demo.js.map +0 -1
  65. package/index.d.ts.map +0 -1
  66. package/react.d.ts.map +0 -1
  67. package/table.component.d.ts.map +0 -1
  68. package/table.style.d.ts.map +0 -1
  69. package/table.types.d.ts.map +0 -1
  70. package/test/hy-table-actions_test.d.ts +0 -2
  71. package/test/hy-table-actions_test.d.ts.map +0 -1
  72. package/test/hy-table-actions_test.js +0 -32
  73. package/test/hy-table-actions_test.js.map +0 -1
  74. package/test/hy-table-content_test.d.ts +0 -2
  75. package/test/hy-table-content_test.d.ts.map +0 -1
  76. package/test/hy-table-content_test.js +0 -168
  77. package/test/hy-table-content_test.js.map +0 -1
  78. package/test/hy-table-filter_test.d.ts +0 -2
  79. package/test/hy-table-filter_test.d.ts.map +0 -1
  80. package/test/hy-table-filter_test.js +0 -80
  81. package/test/hy-table-filter_test.js.map +0 -1
  82. package/test/hy-table-pagination_test.d.ts +0 -2
  83. package/test/hy-table-pagination_test.d.ts.map +0 -1
  84. package/test/hy-table-pagination_test.js +0 -114
  85. package/test/hy-table-pagination_test.js.map +0 -1
  86. package/test/hy-table_test.d.ts +0 -2
  87. package/test/hy-table_test.d.ts.map +0 -1
  88. package/test/hy-table_test.js +0 -145
  89. package/test/hy-table_test.js.map +0 -1
@@ -1,168 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, html, nothing } from 'lit';
8
- import { customElement, property, query, state } from 'lit/decorators.js';
9
- import { styles } from './table-content.style.js';
10
- import { repeat } from 'lit/directives/repeat.js';
11
- import { choose } from 'lit/directives/choose.js';
12
- import { SelectionMode, Sizes, SortOrder } from '../table.types.js';
13
- let HyTableContent = class HyTableContent extends LitElement {
14
- constructor() {
15
- super(...arguments);
16
- this.selectedItems = [];
17
- this.expand = [];
18
- }
19
- willUpdate(changedProperties) {
20
- if (changedProperties.has('rows')) {
21
- this.expand = Array(this.rows.length).fill(false);
22
- }
23
- }
24
- updated(_changedProperties) {
25
- if (this.globalCheck && _changedProperties.has('selectedItems')) {
26
- if (this.selectedItems.every((isSelected) => isSelected)) {
27
- this.globalCheck.checked = true;
28
- this.globalCheck.setAttribute('data-indeterminate', 'false');
29
- }
30
- else if (this.selectedItems.some((isSelected) => isSelected)) {
31
- this.globalCheck.checked = false;
32
- this.globalCheck.setAttribute('data-indeterminate', 'true');
33
- }
34
- else {
35
- this.globalCheck.checked = false;
36
- this.globalCheck.setAttribute('data-indeterminate', 'false');
37
- }
38
- }
39
- }
40
- _showExpandedContent(index) {
41
- this.expand[index] = !this.expand[index];
42
- this.requestUpdate();
43
- }
44
- _onCheckAll() {
45
- this.dispatchEvent(new CustomEvent('check-all', {
46
- detail: { isEveryItemChecked: this.selectedItems.every((isSelected) => isSelected) },
47
- composed: true,
48
- bubbles: true,
49
- }));
50
- }
51
- _onCheckOne(checkOneEvent, index) {
52
- const checked = checkOneEvent.target.checked;
53
- this.dispatchEvent(new CustomEvent('check-one', { detail: { value: checked, index }, composed: true, bubbles: true }));
54
- }
55
- _onSelectOne(index) {
56
- this.dispatchEvent(new CustomEvent('select-one', { detail: { index } }));
57
- }
58
- _onUpdateSortOrder(index) {
59
- this.dispatchEvent(new CustomEvent('update-sort', { detail: { index }, bubbles: true, composed: true }));
60
- }
61
- render() {
62
- return html ` <table>
63
- <tr>
64
- ${this.expandable || this.selectionMode
65
- ? html `<th>
66
- ${this.selectionMode == SelectionMode.Multiple
67
- ? html `<input id="global-check" type="checkbox" @change=${this._onCheckAll} />`
68
- : nothing}
69
- </th>`
70
- : nothing}
71
- ${repeat(this.headers, (header, index) => html `
72
- ${this.expandable != header.key
73
- ? html `<th @click=${() => this._onUpdateSortOrder(index)}>
74
- <span
75
- >${header.name}${index == this.sortAttribute.index
76
- ? choose(this.sortAttribute.order, [
77
- [SortOrder.Default, () => html `<hy-icon name="arrows-v"></hy-icon>`],
78
- [SortOrder.Ascending, () => html `<hy-icon name="long-arrow-up"></hy-icon>`],
79
- [SortOrder.Descending, () => html `<hy-icon name="long-arrow-down"></hy-icon>`],
80
- ])
81
- : html `<hy-icon name="arrows-v"></hy-icon>`}
82
- </span>
83
- </th>`
84
- : nothing}
85
- `)}
86
- </tr>
87
- ${repeat(this.rows, (row, index) => html `
88
- <tr>
89
- ${this.expandable && !this.selectionMode
90
- ? html `
91
- <td @click=${() => this._showExpandedContent(index)} class="expand-icon">
92
- <hy-icon name="${this.expand[index] ? 'angle-up' : 'angle-down'}"></hy-icon>
93
- </td>
94
- `
95
- : this.selectionMode
96
- ? choose(this.selectionMode, [
97
- [
98
- SelectionMode.Multiple,
99
- () => html `<td>
100
- <input
101
- type="checkbox"
102
- @change=${(checkOneEvent) => this._onCheckOne(checkOneEvent, index)}
103
- .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}
104
- />
105
- </td> `,
106
- ],
107
- [
108
- SelectionMode.Single,
109
- () => html ` <td>
110
- <input
111
- type="radio"
112
- name="item"
113
- @change=${() => this._onSelectOne(index)}
114
- .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}
115
- />
116
- </td>`,
117
- ],
118
- ])
119
- : nothing}
120
- ${repeat(this.headers, (header) => html ` ${this.expandable != header.key ? html `<td>${row[header.key]}</td>` : nothing} `)}
121
-
122
- <tr style="display:${this.expand[index] ? 'table-row' : 'none'};">
123
- <td colspan=${this.headers.length}> ${this.expandable}: ${row[this.expandable]}</td>
124
- </tr>
125
- </tr>
126
- `)}
127
- </table>`;
128
- }
129
- };
130
- HyTableContent.styles = styles;
131
- __decorate([
132
- property({ type: Array })
133
- ], HyTableContent.prototype, "headers", void 0);
134
- __decorate([
135
- property({ type: Array })
136
- ], HyTableContent.prototype, "rows", void 0);
137
- __decorate([
138
- property({ type: Sizes, reflect: true })
139
- ], HyTableContent.prototype, "size", void 0);
140
- __decorate([
141
- property({ type: String })
142
- ], HyTableContent.prototype, "expandable", void 0);
143
- __decorate([
144
- property()
145
- ], HyTableContent.prototype, "selectionMode", void 0);
146
- __decorate([
147
- property()
148
- ], HyTableContent.prototype, "selectedItems", void 0);
149
- __decorate([
150
- property()
151
- ], HyTableContent.prototype, "currentPage", void 0);
152
- __decorate([
153
- property()
154
- ], HyTableContent.prototype, "itemPerPage", void 0);
155
- __decorate([
156
- property()
157
- ], HyTableContent.prototype, "sortAttribute", void 0);
158
- __decorate([
159
- state()
160
- ], HyTableContent.prototype, "expand", void 0);
161
- __decorate([
162
- query('#global-check')
163
- ], HyTableContent.prototype, "globalCheck", void 0);
164
- HyTableContent = __decorate([
165
- customElement('hy-table-content')
166
- ], HyTableContent);
167
- export { HyTableContent };
168
- //# sourceMappingURL=hy-table-content.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-content.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './table-content.style.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport {IHeader, SelectionMode, Sizes, SortAttribute, SortOrder} from '../table.types.js';\n\n@customElement('hy-table-content')\nexport class HyTableContent extends LitElement {\n @property({type: Array}) headers!: [];\n @property({type: Array}) rows!: [];\n @property({type: Sizes, reflect: true}) size!: Sizes;\n @property({type: String}) expandable: string | undefined;\n @property() selectionMode: SelectionMode | undefined;\n @property() selectedItems: boolean[] = [];\n @property() currentPage!: number;\n @property() itemPerPage!: number;\n @property() sortAttribute!: SortAttribute;\n @state() expand: boolean[] = [];\n @query('#global-check')\n globalCheck!: HTMLInputElement;\n\n override willUpdate(changedProperties: Map<string, this>) {\n if (changedProperties.has('rows')) {\n this.expand = Array(this.rows.length).fill(false);\n }\n }\n override updated(_changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void {\n if (this.globalCheck && _changedProperties.has('selectedItems')) {\n if (this.selectedItems.every((isSelected) => isSelected)) {\n this.globalCheck.checked = true;\n this.globalCheck.setAttribute('data-indeterminate', 'false');\n } else if (this.selectedItems.some((isSelected) => isSelected)) {\n this.globalCheck.checked = false;\n this.globalCheck.setAttribute('data-indeterminate', 'true');\n } else {\n this.globalCheck.checked = false;\n this.globalCheck.setAttribute('data-indeterminate', 'false');\n }\n }\n }\n\n _showExpandedContent(index: number) {\n this.expand[index] = !this.expand[index];\n this.requestUpdate();\n }\n\n _onCheckAll() {\n this.dispatchEvent(\n new CustomEvent('check-all', {\n detail: {isEveryItemChecked: this.selectedItems.every((isSelected) => isSelected)},\n composed: true,\n bubbles: true,\n })\n );\n }\n\n _onCheckOne(checkOneEvent: Event, index: number) {\n const checked = (checkOneEvent.target as HTMLInputElement).checked;\n this.dispatchEvent(new CustomEvent('check-one', {detail: {value: checked, index}, composed: true, bubbles: true}));\n }\n\n _onSelectOne(index: number) {\n this.dispatchEvent(new CustomEvent('select-one', {detail: {index}}));\n }\n\n _onUpdateSortOrder(index: number) {\n this.dispatchEvent(new CustomEvent('update-sort', {detail: {index}, bubbles: true, composed: true}));\n }\n\n override render() {\n return html` <table>\n <tr>\n ${this.expandable || this.selectionMode\n ? html`<th>\n ${this.selectionMode == SelectionMode.Multiple\n ? html`<input id=\"global-check\" type=\"checkbox\" @change=${this._onCheckAll} />`\n : nothing}\n </th>`\n : nothing}\n ${repeat(\n this.headers,\n (header: IHeader, index) =>\n html`\n ${this.expandable != header.key\n ? html`<th @click=${() => this._onUpdateSortOrder(index)}>\n <span\n >${header.name}${index == this.sortAttribute.index\n ? choose(this.sortAttribute.order, [\n [SortOrder.Default, () => html`<hy-icon name=\"arrows-v\"></hy-icon>`],\n [SortOrder.Ascending, () => html`<hy-icon name=\"long-arrow-up\"></hy-icon>`],\n [SortOrder.Descending, () => html`<hy-icon name=\"long-arrow-down\"></hy-icon>`],\n ])\n : html`<hy-icon name=\"arrows-v\"></hy-icon>`}\n </span>\n </th>`\n : nothing}\n `\n )}\n </tr>\n ${repeat(\n this.rows,\n (row, index) => html`\n <tr>\n ${\n this.expandable && !this.selectionMode\n ? html`\n <td @click=${() => this._showExpandedContent(index)} class=\"expand-icon\">\n <hy-icon name=\"${this.expand[index] ? 'angle-up' : 'angle-down'}\"></hy-icon>\n </td>\n `\n : this.selectionMode\n ? choose(this.selectionMode, [\n [\n SelectionMode.Multiple,\n () =>\n html`<td>\n <input\n type=\"checkbox\"\n @change=${(checkOneEvent: Event) => this._onCheckOne(checkOneEvent, index)}\n .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}\n />\n </td> `,\n ],\n [\n SelectionMode.Single,\n () => html` <td>\n <input\n type=\"radio\"\n name=\"item\"\n @change=${() => this._onSelectOne(index)}\n .checked=${this.selectedItems[index + (this.currentPage - 1) * this.itemPerPage]}\n />\n </td>`,\n ],\n ])\n : nothing\n }\n ${repeat(\n this.headers,\n (header: IHeader) =>\n html` ${this.expandable != header.key ? html`<td>${row[header.key]}</td>` : nothing} `\n )}\n\n <tr style=\"display:${this.expand[index] ? 'table-row' : 'none'};\">\n <td colspan=${this.headers.length}> ${this.expandable}: ${row[this.expandable!]}</td>\n </tr>\n </tr>\n `\n )}\n </table>`;\n }\n\n static override styles = styles;\n}\n"]}
@@ -1,11 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class HyTableFilter extends LitElement {
3
- showInput: boolean;
4
- value: string;
5
- updated(): void;
6
- _handleInput(): void;
7
- _onChange(inputChangeEvent: Event): void;
8
- render(): import("lit").TemplateResult<1>;
9
- static styles: import("lit").CSSResult[];
10
- }
11
- //# sourceMappingURL=hy-table-filter.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgB,MAAM,KAAK,CAAC;AAK9C,qBACa,aAAc,SAAQ,UAAU;IAE3C,SAAS,UAAS;IAGlB,KAAK,SAAgB;IAEZ,OAAO;IAMhB,YAAY;IAIZ,SAAS,CAAC,gBAAgB,EAAE,KAAK;IAIxB,MAAM;IAiBf,OAAgB,MAAM,4BAAU;CACjC"}
@@ -1,59 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, html, nothing } from 'lit';
8
- import { customElement, property, state } from 'lit/decorators.js';
9
- import { styles } from './table-filter.style.js';
10
- import { EMPTY_STRING } from '../table.types.js';
11
- let HyTableFilter = class HyTableFilter extends LitElement {
12
- constructor() {
13
- super(...arguments);
14
- this.showInput = false;
15
- this.value = EMPTY_STRING;
16
- }
17
- updated() {
18
- var _a, _b;
19
- if (this.showInput) {
20
- (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
21
- }
22
- }
23
- _handleInput() {
24
- this.showInput = !this.showInput;
25
- }
26
- _onChange(inputChangeEvent) {
27
- this.value = inputChangeEvent.target.value;
28
- this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true, composed: true }));
29
- }
30
- render() {
31
- return html `
32
- <div class="filter-container">
33
- ${this.showInput
34
- ? html ` <hy-icon name="search" class="search-icon"></hy-icon>
35
- <input
36
- type="text"
37
- placeholder="search"
38
- @blur=${!this.value.trim() ? this._handleInput : nothing}
39
- @input=${this._onChange}
40
- />`
41
- : html `<div class="icon-container" @click=${this._handleInput}>
42
- <hy-icon name="search"></hy-icon>
43
- </div> `}
44
- </div>
45
- `;
46
- }
47
- };
48
- HyTableFilter.styles = styles;
49
- __decorate([
50
- property({ reflect: true, type: Boolean })
51
- ], HyTableFilter.prototype, "showInput", void 0);
52
- __decorate([
53
- state()
54
- ], HyTableFilter.prototype, "value", void 0);
55
- HyTableFilter = __decorate([
56
- customElement('hy-table-filter')
57
- ], HyTableFilter);
58
- export { HyTableFilter };
59
- //# sourceMappingURL=hy-table-filter.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-filter.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-filter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAG/C,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAEE,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,YAAY,CAAC;IAkCvB,CAAC;IAhCU,OAAO;;QACd,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SAClD;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,SAAS,CAAC,gBAAuB;QAC/B,IAAI,CAAC,KAAK,GAAI,gBAAgB,CAAC,MAA2B,CAAC,KAAK,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IACQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;wBAIQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO;yBAC/C,IAAI,CAAC,SAAS;iBACtB;YACP,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,YAAY;;oBAEnD;;KAEf,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,oBAAM,GAAG,MAAO,CAAA;AApChC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACvB;AAGlB;IADC,KAAK,EAAE;4CACa;AALV,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuCzB;SAvCY,aAAa","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './table-filter.style.js';\nimport {EMPTY_STRING} from '../table.types.js';\n\n@customElement('hy-table-filter')\nexport class HyTableFilter extends LitElement {\n @property({reflect: true, type: Boolean})\n showInput = false;\n\n @state()\n value = EMPTY_STRING;\n\n override updated() {\n if (this.showInput) {\n this.shadowRoot?.querySelector('input')?.focus();\n }\n }\n\n _handleInput() {\n this.showInput = !this.showInput;\n }\n\n _onChange(inputChangeEvent: Event) {\n this.value = (inputChangeEvent.target as HTMLInputElement).value;\n this.dispatchEvent(new CustomEvent('value-change', {detail: {value: this.value}, bubbles: true, composed: true}));\n }\n override render() {\n return html`\n <div class=\"filter-container\">\n ${this.showInput\n ? html` <hy-icon name=\"search\" class=\"search-icon\"></hy-icon>\n <input\n type=\"text\"\n placeholder=\"search\"\n @blur=${!this.value.trim() ? this._handleInput : nothing}\n @input=${this._onChange}\n />`\n : html`<div class=\"icon-container\" @click=${this._handleInput}>\n <hy-icon name=\"search\"></hy-icon>\n </div> `}\n </div>\n `;\n }\n static override styles = styles;\n}\n"]}
@@ -1,21 +0,0 @@
1
- import { LitElement, PropertyValueMap } from 'lit';
2
- import { Sizes } from '../table.types.js';
3
- export declare class HyTablePagination extends LitElement {
4
- numberOfItems: number;
5
- itemPerPage: number[];
6
- selectedItemPerPage: number;
7
- currentPage: number;
8
- size: Sizes;
9
- numberOfPages: number;
10
- fromItem: number;
11
- toItem: number;
12
- enableNext: boolean;
13
- enablePrevious: boolean;
14
- willUpdate(_changedProperties: PropertyValueMap<this>): void;
15
- _handleItemPerPageChange(itemPerPageEvent: Event): void;
16
- _nextPage(): void;
17
- _previousPage(): void;
18
- render(): import("lit").TemplateResult<1>;
19
- static styles: import("lit").CSSResult[];
20
- }
21
- //# sourceMappingURL=hy-table-pagination.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAgB,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,aAAa,EAAG,MAAM,CAAC;IAEvB,WAAW,EAAG,MAAM,EAAE,CAAC;IAEvB,mBAAmB,EAAG,MAAM,CAAC;IAE7B,WAAW,EAAG,MAAM,CAAC;IACmB,IAAI,EAAG,KAAK,CAAC;IAGrD,aAAa,EAAG,MAAM,CAAC;IAEvB,QAAQ,EAAG,MAAM,CAAC;IAElB,MAAM,EAAG,MAAM,CAAC;IAEhB,UAAU,UAAQ;IAElB,cAAc,UAAQ;IAEb,UAAU,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAYrE,wBAAwB,CAAC,gBAAgB,EAAE,KAAK;IAKhD,SAAS;IAIT,aAAa;IAKJ,MAAM;IAkCf,OAAgB,MAAM,4BAAU;CACjC"}
@@ -1,111 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, html, nothing } from 'lit';
8
- import { customElement, property, state } from 'lit/decorators.js';
9
- import { styles } from './table-pagination.style.js';
10
- import { repeat } from 'lit/directives/repeat.js';
11
- import { Sizes } from '../table.types.js';
12
- let HyTablePagination = class HyTablePagination extends LitElement {
13
- constructor() {
14
- super(...arguments);
15
- this.enableNext = true;
16
- this.enablePrevious = true;
17
- }
18
- willUpdate(_changedProperties) {
19
- this.numberOfPages = Math.ceil(this.numberOfItems / this.selectedItemPerPage);
20
- this.fromItem =
21
- this.currentPage > 0 ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1 : 0;
22
- this.toItem =
23
- this.currentPage * this.selectedItemPerPage <= this.numberOfItems
24
- ? this.currentPage * this.selectedItemPerPage
25
- : this.numberOfItems;
26
- this.enableNext = this.toItem < this.numberOfItems;
27
- this.enablePrevious = this.fromItem > 1;
28
- }
29
- _handleItemPerPageChange(itemPerPageEvent) {
30
- this.selectedItemPerPage = +itemPerPageEvent.target.value;
31
- this.dispatchEvent(new CustomEvent('item-per-page', { detail: { selectedItemPerPage: this.selectedItemPerPage } }));
32
- }
33
- _nextPage() {
34
- this.currentPage++;
35
- this.dispatchEvent(new CustomEvent('update-page', { detail: { page: this.currentPage } }));
36
- }
37
- _previousPage() {
38
- this.currentPage--;
39
- this.dispatchEvent(new CustomEvent('update-page', { detail: { page: this.currentPage } }));
40
- }
41
- render() {
42
- return html `
43
- <div class="pagination-container">
44
- <div class="left-content">
45
- <span class="select-details">
46
- Items per page:
47
- <select @change=${this._handleItemPerPageChange}>
48
- ${repeat(this.itemPerPage, (item) => html ` <option value=${item}>${item}</option> `)}
49
- </select>
50
- </span>
51
- <span class="items-details"> ${this.fromItem} - ${this.toItem} of ${this.numberOfItems} items</span>
52
- </div>
53
-
54
- <div class="right-content">
55
- <span class="page-details"> ${this.currentPage} of ${this.numberOfPages} pages </span>
56
- <span class="icon-container">
57
- <hy-icon
58
- class="left-arrow"
59
- data-enabled=${this.enablePrevious}
60
- name="caret-left"
61
- @click=${this.enablePrevious ? this._previousPage : nothing}
62
- ></hy-icon>
63
-
64
- <hy-icon
65
- class="right-arrow"
66
- data-enabled=${this.enableNext}
67
- name="caret-right"
68
- @click=${this.enableNext ? this._nextPage : nothing}
69
- ></hy-icon>
70
- </span>
71
- </div>
72
- </div>
73
- `;
74
- }
75
- };
76
- HyTablePagination.styles = styles;
77
- __decorate([
78
- property()
79
- ], HyTablePagination.prototype, "numberOfItems", void 0);
80
- __decorate([
81
- property()
82
- ], HyTablePagination.prototype, "itemPerPage", void 0);
83
- __decorate([
84
- property()
85
- ], HyTablePagination.prototype, "selectedItemPerPage", void 0);
86
- __decorate([
87
- property()
88
- ], HyTablePagination.prototype, "currentPage", void 0);
89
- __decorate([
90
- property({ type: Sizes, reflect: true })
91
- ], HyTablePagination.prototype, "size", void 0);
92
- __decorate([
93
- state()
94
- ], HyTablePagination.prototype, "numberOfPages", void 0);
95
- __decorate([
96
- state()
97
- ], HyTablePagination.prototype, "fromItem", void 0);
98
- __decorate([
99
- state()
100
- ], HyTablePagination.prototype, "toItem", void 0);
101
- __decorate([
102
- state()
103
- ], HyTablePagination.prototype, "enableNext", void 0);
104
- __decorate([
105
- state()
106
- ], HyTablePagination.prototype, "enablePrevious", void 0);
107
- HyTablePagination = __decorate([
108
- customElement('hy-table-pagination')
109
- ], HyTablePagination);
110
- export { HyTablePagination };
111
- //# sourceMappingURL=hy-table-pagination.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-pagination.js","sourceRoot":"","sources":["../../../../src/components/table/components/hy-table-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValueMap, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport {styles} from './table-pagination.style.js';\nimport {repeat} from 'lit/directives/repeat.js';\nimport {Sizes} from '../table.types.js';\n\n@customElement('hy-table-pagination')\nexport class HyTablePagination extends LitElement {\n @property()\n numberOfItems!: number;\n @property()\n itemPerPage!: number[];\n @property()\n selectedItemPerPage!: number;\n @property()\n currentPage!: number;\n @property({type: Sizes, reflect: true}) size!: Sizes;\n\n @state()\n numberOfPages!: number;\n @state()\n fromItem!: number;\n @state()\n toItem!: number;\n @state()\n enableNext = true;\n @state()\n enablePrevious = true;\n\n override willUpdate(_changedProperties: PropertyValueMap<this>): void {\n this.numberOfPages = Math.ceil(this.numberOfItems / this.selectedItemPerPage);\n this.fromItem =\n this.currentPage > 0 ? this.currentPage * this.selectedItemPerPage - this.selectedItemPerPage + 1 : 0;\n this.toItem =\n this.currentPage * this.selectedItemPerPage <= this.numberOfItems\n ? this.currentPage * this.selectedItemPerPage\n : this.numberOfItems;\n this.enableNext = this.toItem < this.numberOfItems;\n this.enablePrevious = this.fromItem > 1;\n }\n\n _handleItemPerPageChange(itemPerPageEvent: Event) {\n this.selectedItemPerPage = +(itemPerPageEvent.target as HTMLSelectElement).value;\n this.dispatchEvent(new CustomEvent('item-per-page', {detail: {selectedItemPerPage: this.selectedItemPerPage}}));\n }\n\n _nextPage() {\n this.currentPage++;\n this.dispatchEvent(new CustomEvent('update-page', {detail: {page: this.currentPage}}));\n }\n _previousPage() {\n this.currentPage--;\n this.dispatchEvent(new CustomEvent('update-page', {detail: {page: this.currentPage}}));\n }\n\n override render() {\n return html`\n <div class=\"pagination-container\">\n <div class=\"left-content\">\n <span class=\"select-details\">\n Items per page:\n <select @change=${this._handleItemPerPageChange}>\n ${repeat(this.itemPerPage, (item) => html` <option value=${item}>${item}</option> `)}\n </select>\n </span>\n <span class=\"items-details\"> ${this.fromItem} - ${this.toItem} of ${this.numberOfItems} items</span>\n </div>\n\n <div class=\"right-content\">\n <span class=\"page-details\"> ${this.currentPage} of ${this.numberOfPages} pages </span>\n <span class=\"icon-container\">\n <hy-icon\n class=\"left-arrow\"\n data-enabled=${this.enablePrevious}\n name=\"caret-left\"\n @click=${this.enablePrevious ? this._previousPage : nothing}\n ></hy-icon>\n\n <hy-icon\n class=\"right-arrow\"\n data-enabled=${this.enableNext}\n name=\"caret-right\"\n @click=${this.enableNext ? this._nextPage : nothing}\n ></hy-icon>\n </span>\n </div>\n </div>\n `;\n }\n static override styles = styles;\n}\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styles: import("lit").CSSResult[];
2
- //# sourceMappingURL=table-actions.style.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-actions.style.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.style.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,MAAM,2BAAsC,CAAC"}
@@ -1,31 +0,0 @@
1
- import { css } from 'lit';
2
- import { styleVariables } from './table-actions.variables.js';
3
- const tableActionsStyle = css `
4
- .actions-container {
5
- background-color: var(--hybrid-actions-background-color);
6
- padding: 10px;
7
- box-sizing: border-box;
8
- display: flex;
9
- justify-content: space-between;
10
- color: var(--hybrid-actions-text-color);
11
- }
12
-
13
- .actions-container button {
14
- cursor: pointer;
15
- border: none;
16
- color: var(--hybrid-actions-text-color);
17
- background-color: var(--hybrid-actions-background-color);
18
- }
19
-
20
- .actions-container {
21
- padding: 10px;
22
- }
23
- :host([size='small']) .actions-container {
24
- padding: 5px;
25
- }
26
- :host([size='large']) .actions-container {
27
- padding: 15px;
28
- }
29
- `;
30
- export const styles = [tableActionsStyle, styleVariables];
31
- //# sourceMappingURL=table-actions.style.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-actions.style.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './table-actions.variables.js';\n\nconst tableActionsStyle = css`\n .actions-container {\n background-color: var(--hybrid-actions-background-color);\n padding: 10px;\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n color: var(--hybrid-actions-text-color);\n }\n\n .actions-container button {\n cursor: pointer;\n border: none;\n color: var(--hybrid-actions-text-color);\n background-color: var(--hybrid-actions-background-color);\n }\n\n .actions-container {\n padding: 10px;\n }\n :host([size='small']) .actions-container {\n padding: 5px;\n }\n :host([size='large']) .actions-container {\n padding: 15px;\n }\n`;\n\nexport const styles = [tableActionsStyle, styleVariables];\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=table-actions.variables.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-actions.variables.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAU1B,CAAC"}
@@ -1,13 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- --hybrid-actions-text-color: #ffffff;
5
- --hybrid-actions-background-color: #0f62fe;
6
- }
7
-
8
- @media (prefers-color-scheme: dark) {
9
- :host {
10
- }
11
- }
12
- `;
13
- //# sourceMappingURL=table-actions.variables.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-actions.variables.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-actions.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;CAUhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-actions-text-color: #ffffff;\n --hybrid-actions-background-color: #0f62fe;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n }\n }\n`;\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styles: import("lit").CSSResult[];
2
- //# sourceMappingURL=table-content.style.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-content.style.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-content.style.ts"],"names":[],"mappings":"AA6EA,eAAO,MAAM,MAAM,2BAAsC,CAAC"}
@@ -1,77 +0,0 @@
1
- import { css } from 'lit';
2
- import { styleVariables } from './table-content.variables.js';
3
- const tableContentStyle = css `
4
- :host {
5
- display: block;
6
- overflow: auto;
7
- }
8
-
9
- input[type='checkbox'][data-indeterminate='true']::after {
10
- width: 13px;
11
- height: 13px;
12
- background-color: var(--hybrid-table-input-color);
13
- color: var(--hybrid-table-checkbox-some-checked-sign-color);
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- content: '-';
18
- }
19
- table {
20
- width: 100%;
21
- border-spacing: 0px;
22
- color: var(--hybrid-table-text-color);
23
- }
24
- td {
25
- text-align: center;
26
- border-bottom: var(--hybrid-table-column-border);
27
- }
28
- th {
29
- cursor: pointer;
30
- }
31
- th span {
32
- display: flex;
33
- justify-content: center;
34
- gap: 10px;
35
- }
36
- hy-icon {
37
- display: flex;
38
- justify-content: center;
39
- align-items: center;
40
- --hybrid-icon-color: var(--hybrid-table-text-color);
41
- }
42
- tr {
43
- background-color: var(--hybrid-table-row-background-color);
44
- }
45
- tr:hover {
46
- background-color: var(--hybrid-table-row-hover-background-color);
47
- }
48
- tr:first-child {
49
- background-color: var(--hybrid-table-header-background-color);
50
- }
51
-
52
- tr:has(:not(th) > input:checked) {
53
- background-color: var(--hybrid-table-row-checked-background-color);
54
- }
55
-
56
- td,
57
- th {
58
- padding: 10px;
59
- }
60
- input,
61
- .expand-icon {
62
- cursor: pointer;
63
- accent-color: var(--hybrid-table-input-color);
64
- }
65
-
66
- :host([size='small']) td,
67
- :host([size='small']) th {
68
- padding: 5px;
69
- }
70
-
71
- :host([size='large']) td,
72
- :host([size='large']) th {
73
- padding: 15px;
74
- }
75
- `;
76
- export const styles = [tableContentStyle, styleVariables];
77
- //# sourceMappingURL=table-content.style.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-content.style.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-content.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './table-content.variables.js';\n\nconst tableContentStyle = css`\n :host {\n display: block;\n overflow: auto;\n }\n\n input[type='checkbox'][data-indeterminate='true']::after {\n width: 13px;\n height: 13px;\n background-color: var(--hybrid-table-input-color);\n color: var(--hybrid-table-checkbox-some-checked-sign-color);\n display: flex;\n justify-content: center;\n align-items: center;\n content: '-';\n }\n table {\n width: 100%;\n border-spacing: 0px;\n color: var(--hybrid-table-text-color);\n }\n td {\n text-align: center;\n border-bottom: var(--hybrid-table-column-border);\n }\n th {\n cursor: pointer;\n }\n th span {\n display: flex;\n justify-content: center;\n gap: 10px;\n }\n hy-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n --hybrid-icon-color: var(--hybrid-table-text-color);\n }\n tr {\n background-color: var(--hybrid-table-row-background-color);\n }\n tr:hover {\n background-color: var(--hybrid-table-row-hover-background-color);\n }\n tr:first-child {\n background-color: var(--hybrid-table-header-background-color);\n }\n\n tr:has(:not(th) > input:checked) {\n background-color: var(--hybrid-table-row-checked-background-color);\n }\n\n td,\n th {\n padding: 10px;\n }\n input,\n .expand-icon {\n cursor: pointer;\n accent-color: var(--hybrid-table-input-color);\n }\n\n :host([size='small']) td,\n :host([size='small']) th {\n padding: 5px;\n }\n\n :host([size='large']) td,\n :host([size='large']) th {\n padding: 15px;\n }\n`;\n\nexport const styles = [tableContentStyle, styleVariables];\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=table-content.variables.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-content.variables.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-content.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA0B1B,CAAC"}
@@ -1,29 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- --hybrid-table-text-color: #161616;
5
- --hybrid-table-input-color: #161616;
6
- --hybrid-table-column-border: 1px solid #e0e0e0;
7
- --hybrid-table-row-background-color: #f4f4f4;
8
- --hybrid-table-row-checked-background-color: #e5e5e5;
9
- --hybrid-table-row-hover-background-color: #d3d3d3;
10
- --hybrid-table-header-background-color: #e0e0e0;
11
- --hybrid-table-checkbox-some-checked-background-color: #161616;
12
- --hybrid-table-checkbox-some-checked-sign-color: #ffffff;
13
- }
14
-
15
- @media (prefers-color-scheme: dark) {
16
- :host {
17
- --hybrid-table-text-color: #f4f4f4;
18
- --hybrid-table-input-color: #ffffff;
19
- --hybrid-table-column-border: 1px solid #8d8d8d;
20
- --hybrid-table-row-background-color: #393939;
21
- --hybrid-table-header-background-color: #525252;
22
- --hybrid-table-row-hover-background-color: #525252;
23
- --hybrid-table-row-checked-background-color: #6f6f6f;
24
- --hybrid-table-checkbox-some-checked-background-color: #ffffff;
25
- --hybrid-table-checkbox-some-checked-sign-color: #161616;
26
- }
27
- }
28
- `;
29
- //# sourceMappingURL=table-content.variables.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-content.variables.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-content.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-table-text-color: #161616;\n --hybrid-table-input-color: #161616;\n --hybrid-table-column-border: 1px solid #e0e0e0;\n --hybrid-table-row-background-color: #f4f4f4;\n --hybrid-table-row-checked-background-color: #e5e5e5;\n --hybrid-table-row-hover-background-color: #d3d3d3;\n --hybrid-table-header-background-color: #e0e0e0;\n --hybrid-table-checkbox-some-checked-background-color: #161616;\n --hybrid-table-checkbox-some-checked-sign-color: #ffffff;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-table-text-color: #f4f4f4;\n --hybrid-table-input-color: #ffffff;\n --hybrid-table-column-border: 1px solid #8d8d8d;\n --hybrid-table-row-background-color: #393939;\n --hybrid-table-header-background-color: #525252;\n --hybrid-table-row-hover-background-color: #525252;\n --hybrid-table-row-checked-background-color: #6f6f6f;\n --hybrid-table-checkbox-some-checked-background-color: #ffffff;\n --hybrid-table-checkbox-some-checked-sign-color: #161616;\n }\n }\n`;\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styles: import("lit").CSSResult[];
2
- //# sourceMappingURL=table-filter.style.d.ts.map