@francofantomius/material-components 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/README.md +277 -83
  3. package/custom-elements.json +21010 -2354
  4. package/dist/chunks/badge-G4EjcMoy.js +89 -0
  5. package/dist/chunks/badge-G4EjcMoy.js.map +1 -0
  6. package/dist/chunks/button-B4TSZ7Sl.js +250 -0
  7. package/dist/chunks/button-B4TSZ7Sl.js.map +1 -0
  8. package/dist/chunks/card-DVffdPpv.js +163 -0
  9. package/dist/chunks/card-DVffdPpv.js.map +1 -0
  10. package/dist/chunks/checkbox-BqlboAHd.js +194 -0
  11. package/dist/chunks/checkbox-BqlboAHd.js.map +1 -0
  12. package/dist/chunks/chip-CI1ZINnr.js +169 -0
  13. package/dist/chunks/chip-CI1ZINnr.js.map +1 -0
  14. package/dist/chunks/code-C5UFBkCh.js +1830 -0
  15. package/dist/chunks/code-C5UFBkCh.js.map +1 -0
  16. package/dist/chunks/decorate-DXuynaiA.js +39 -0
  17. package/dist/chunks/decorate-DXuynaiA.js.map +1 -0
  18. package/dist/chunks/dialog-DGVEE5m_.js +158 -0
  19. package/dist/chunks/dialog-DGVEE5m_.js.map +1 -0
  20. package/dist/chunks/divider-DNepwoZv.js +82 -0
  21. package/dist/chunks/divider-DNepwoZv.js.map +1 -0
  22. package/dist/chunks/fab-C9j3WBHE.js +150 -0
  23. package/dist/chunks/fab-C9j3WBHE.js.map +1 -0
  24. package/dist/chunks/focus-ring-CuiJuM-y.js +71 -0
  25. package/dist/chunks/focus-ring-CuiJuM-y.js.map +1 -0
  26. package/dist/chunks/{form-associated-fKbeX_2P.js → form-associated-Cty_ZaS9.js} +26 -27
  27. package/dist/chunks/form-associated-Cty_ZaS9.js.map +1 -0
  28. package/dist/chunks/icon-DrNqcNEL.js +62 -0
  29. package/dist/chunks/icon-DrNqcNEL.js.map +1 -0
  30. package/dist/chunks/icon-button-BdSc7eot.js +188 -0
  31. package/dist/chunks/icon-button-BdSc7eot.js.map +1 -0
  32. package/dist/chunks/list-D8olR7oZ.js +204 -0
  33. package/dist/chunks/list-D8olR7oZ.js.map +1 -0
  34. package/dist/chunks/navigation-drawer-CKl44Ef5.js +531 -0
  35. package/dist/chunks/navigation-drawer-CKl44Ef5.js.map +1 -0
  36. package/dist/chunks/player-C4ydiIpr.js +1582 -0
  37. package/dist/chunks/player-C4ydiIpr.js.map +1 -0
  38. package/dist/chunks/progress-LQmLMDjX.js +266 -0
  39. package/dist/chunks/progress-LQmLMDjX.js.map +1 -0
  40. package/dist/chunks/radio-Bily78NT.js +205 -0
  41. package/dist/chunks/radio-Bily78NT.js.map +1 -0
  42. package/dist/chunks/ripple-squbKHhj.js +135 -0
  43. package/dist/chunks/ripple-squbKHhj.js.map +1 -0
  44. package/dist/chunks/search-bar-TXnqJ-gd.js +698 -0
  45. package/dist/chunks/search-bar-TXnqJ-gd.js.map +1 -0
  46. package/dist/chunks/snackbar-Wsz3BzEY.js +161 -0
  47. package/dist/chunks/snackbar-Wsz3BzEY.js.map +1 -0
  48. package/dist/chunks/switch-DdukrvXb.js +190 -0
  49. package/dist/chunks/switch-DdukrvXb.js.map +1 -0
  50. package/dist/chunks/table-aRTYzDyE.js +773 -0
  51. package/dist/chunks/table-aRTYzDyE.js.map +1 -0
  52. package/dist/chunks/tabs-BfOtoeir.js +191 -0
  53. package/dist/chunks/tabs-BfOtoeir.js.map +1 -0
  54. package/dist/chunks/text-field-hN6-2HQy.js +338 -0
  55. package/dist/chunks/text-field-hN6-2HQy.js.map +1 -0
  56. package/dist/chunks/top-app-bar-Dgbp6CFv.js +228 -0
  57. package/dist/chunks/top-app-bar-Dgbp6CFv.js.map +1 -0
  58. package/dist/components/account-menu/account-menu.css.d.ts +3 -0
  59. package/dist/components/account-menu/account-menu.css.d.ts.map +1 -0
  60. package/dist/components/account-menu/account-menu.d.ts +111 -0
  61. package/dist/components/account-menu/account-menu.d.ts.map +1 -0
  62. package/dist/components/app-drawer/app-drawer.css.d.ts +3 -0
  63. package/dist/components/app-drawer/app-drawer.css.d.ts.map +1 -0
  64. package/dist/components/app-drawer/app-drawer.d.ts +173 -0
  65. package/dist/components/app-drawer/app-drawer.d.ts.map +1 -0
  66. package/dist/components/badge/badge.js +2 -91
  67. package/dist/components/button/button.js +2 -261
  68. package/dist/components/card/card.js +2 -167
  69. package/dist/components/checkbox/checkbox.css.d.ts.map +1 -1
  70. package/dist/components/checkbox/checkbox.js +2 -186
  71. package/dist/components/chip/chip.js +3 -172
  72. package/dist/components/code/code.css.d.ts +2 -0
  73. package/dist/components/code/code.css.d.ts.map +1 -0
  74. package/dist/components/code/code.d.ts +106 -0
  75. package/dist/components/code/code.d.ts.map +1 -0
  76. package/dist/components/code/code.js +5 -0
  77. package/dist/components/code/highlighter.d.ts +8 -0
  78. package/dist/components/code/highlighter.d.ts.map +1 -0
  79. package/dist/components/code/linter.d.ts +44 -0
  80. package/dist/components/code/linter.d.ts.map +1 -0
  81. package/dist/components/dialog/dialog.js +2 -165
  82. package/dist/components/divider/divider.js +2 -79
  83. package/dist/components/fab/fab.js +2 -153
  84. package/dist/components/icon/icon.js +2 -68
  85. package/dist/components/icon-button/icon-button.css.d.ts.map +1 -1
  86. package/dist/components/icon-button/icon-button.js +1 -189
  87. package/dist/components/list/list.css.d.ts.map +1 -1
  88. package/dist/components/list/list.d.ts.map +1 -1
  89. package/dist/components/list/list.js +3 -188
  90. package/dist/components/navigation-drawer/navigation-drawer.css.d.ts +3 -0
  91. package/dist/components/navigation-drawer/navigation-drawer.css.d.ts.map +1 -0
  92. package/dist/components/navigation-drawer/navigation-drawer.d.ts +76 -0
  93. package/dist/components/navigation-drawer/navigation-drawer.d.ts.map +1 -0
  94. package/dist/components/navigation-drawer/navigation-drawer.js +8 -0
  95. package/dist/components/player/player.css.d.ts +2 -0
  96. package/dist/components/player/player.css.d.ts.map +1 -0
  97. package/dist/components/player/player.d.ts +99 -0
  98. package/dist/components/player/player.d.ts.map +1 -0
  99. package/dist/components/player/player.js +7 -0
  100. package/dist/components/progress/progress.css.d.ts.map +1 -1
  101. package/dist/components/progress/progress.d.ts +2 -0
  102. package/dist/components/progress/progress.d.ts.map +1 -1
  103. package/dist/components/progress/progress.js +3 -181
  104. package/dist/components/radio/radio.css.d.ts.map +1 -1
  105. package/dist/components/radio/radio.js +3 -203
  106. package/dist/components/search-bar/search-bar.css.d.ts +2 -0
  107. package/dist/components/search-bar/search-bar.css.d.ts.map +1 -0
  108. package/dist/components/search-bar/search-bar.d.ts +81 -0
  109. package/dist/components/search-bar/search-bar.d.ts.map +1 -0
  110. package/dist/components/search-bar/search-bar.js +5 -0
  111. package/dist/components/snackbar/snackbar.js +2 -162
  112. package/dist/components/switch/switch.css.d.ts.map +1 -1
  113. package/dist/components/switch/switch.js +2 -169
  114. package/dist/components/table/table.css.d.ts +8 -0
  115. package/dist/components/table/table.css.d.ts.map +1 -0
  116. package/dist/components/table/table.d.ts +158 -0
  117. package/dist/components/table/table.d.ts.map +1 -0
  118. package/dist/components/table/table.js +13 -0
  119. package/dist/components/tabs/tabs.js +3 -198
  120. package/dist/components/text-field/text-field.css.d.ts.map +1 -1
  121. package/dist/components/text-field/text-field.d.ts +1 -1
  122. package/dist/components/text-field/text-field.d.ts.map +1 -1
  123. package/dist/components/text-field/text-field.js +2 -325
  124. package/dist/components/top-app-bar/top-app-bar.css.d.ts +2 -0
  125. package/dist/components/top-app-bar/top-app-bar.css.d.ts.map +1 -0
  126. package/dist/components/top-app-bar/top-app-bar.d.ts +29 -0
  127. package/dist/components/top-app-bar/top-app-bar.d.ts.map +1 -0
  128. package/dist/components/top-app-bar/top-app-bar.js +5 -0
  129. package/dist/index.d.ts +8 -0
  130. package/dist/index.d.ts.map +1 -1
  131. package/dist/index.js +2264 -58
  132. package/dist/index.js.map +1 -1
  133. package/dist/internal/focus-ring/focus-ring.d.ts.map +1 -1
  134. package/dist/internal/focus-ring/focus-ring.js +4 -0
  135. package/dist/internal/ripple/ripple.css.d.ts.map +1 -1
  136. package/dist/internal/ripple/ripple.d.ts +0 -3
  137. package/dist/internal/ripple/ripple.d.ts.map +1 -1
  138. package/dist/internal/ripple/ripple.js +2 -142
  139. package/dist/tokens/index.js +336 -11
  140. package/dist/tokens/index.js.map +1 -1
  141. package/package.json +118 -12
  142. package/dist/chunks/base-component-DQTjlEVL.js +0 -34
  143. package/dist/chunks/base-component-DQTjlEVL.js.map +0 -1
  144. package/dist/chunks/focus-ring-Dl-XoEKK.js +0 -71
  145. package/dist/chunks/focus-ring-Dl-XoEKK.js.map +0 -1
  146. package/dist/chunks/form-associated-fKbeX_2P.js.map +0 -1
  147. package/dist/chunks/theme.css-DV3DRha-.js +0 -263
  148. package/dist/chunks/theme.css-DV3DRha-.js.map +0 -1
  149. package/dist/components/badge/badge.js.map +0 -1
  150. package/dist/components/button/button.js.map +0 -1
  151. package/dist/components/card/card.js.map +0 -1
  152. package/dist/components/checkbox/checkbox.js.map +0 -1
  153. package/dist/components/chip/chip.js.map +0 -1
  154. package/dist/components/dialog/dialog.js.map +0 -1
  155. package/dist/components/divider/divider.js.map +0 -1
  156. package/dist/components/fab/fab.js.map +0 -1
  157. package/dist/components/icon/icon.js.map +0 -1
  158. package/dist/components/icon-button/icon-button.js.map +0 -1
  159. package/dist/components/list/list.js.map +0 -1
  160. package/dist/components/progress/progress.js.map +0 -1
  161. package/dist/components/radio/radio.js.map +0 -1
  162. package/dist/components/snackbar/snackbar.js.map +0 -1
  163. package/dist/components/switch/switch.js.map +0 -1
  164. package/dist/components/tabs/tabs.js.map +0 -1
  165. package/dist/components/text-field/text-field.js.map +0 -1
  166. package/dist/internal/ripple/ripple.js.map +0 -1
@@ -0,0 +1,773 @@
1
+ import { n, t as e } from "./decorate-DXuynaiA.js";
2
+ import "./ripple-squbKHhj.js";
3
+ import "./focus-ring-CuiJuM-y.js";
4
+ import "./icon-DrNqcNEL.js";
5
+ import "./icon-button-BdSc7eot.js";
6
+ import "./checkbox-BqlboAHd.js";
7
+ import "./progress-LQmLMDjX.js";
8
+ import { css as v, html as r, nothing as u } from "lit";
9
+ import { customElement as h, property as s } from "lit/decorators.js";
10
+ var F = v`
11
+ :host {
12
+ display: block;
13
+ width: 100%;
14
+ position: relative;
15
+ box-sizing: border-box;
16
+ font-family: var(--md-sys-typescale-font-family, inherit);
17
+ background-color: var(--md-sys-color-surface, #FEF7FF);
18
+ color: var(--md-sys-color-on-surface, #1D1B20);
19
+ border-radius: var(--md-sys-shape-corner-medium, 12px);
20
+ overflow: hidden;
21
+ transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),
22
+ background-color 200ms cubic-bezier(0.2, 0, 0, 1);
23
+ }
24
+
25
+ :host([bordered]) {
26
+ border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
27
+ }
28
+
29
+ :host([elevated]) {
30
+ box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
31
+ }
32
+
33
+ .table-wrapper {
34
+ width: 100%;
35
+ overflow-x: auto;
36
+ -webkit-overflow-scrolling: touch;
37
+ position: relative;
38
+ }
39
+
40
+ .progress-container {
41
+ position: absolute;
42
+ top: 0;
43
+ left: 0;
44
+ right: 0;
45
+ z-index: 5;
46
+ height: 4px;
47
+ }
48
+
49
+ .table {
50
+ display: table;
51
+ width: 100%;
52
+ border-collapse: collapse;
53
+ border-spacing: 0;
54
+ text-align: left;
55
+ font-size: var(--md-sys-typescale-body-medium-size, 14px);
56
+ line-height: 20px;
57
+ }
58
+
59
+ /* Dense table variant */
60
+ :host([dense]) {
61
+ --md-table-cell-padding-y: 8px;
62
+ --md-table-cell-padding-x: 12px;
63
+ --md-table-header-padding-y: 10px;
64
+ }
65
+
66
+ /* Default cell padding variables */
67
+ :host {
68
+ --md-table-cell-padding-y: 14px;
69
+ --md-table-cell-padding-x: 16px;
70
+ --md-table-header-padding-y: 16px;
71
+ --md-table-header-padding-x: 16px;
72
+ }
73
+ `, R = v`
74
+ :host {
75
+ display: table-header-group;
76
+ background-color: var(--md-sys-color-surface-container-low, #F7F2FA);
77
+ border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
78
+ }
79
+
80
+ :host-context([sticky-header]),
81
+ :host([sticky]) {
82
+ position: sticky;
83
+ top: 0;
84
+ z-index: 2;
85
+ }
86
+ `, A = v`
87
+ :host {
88
+ display: table-row-group;
89
+ }
90
+ `, B = v`
91
+ :host {
92
+ display: table-row;
93
+ position: relative;
94
+ transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
95
+ border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
96
+ }
97
+
98
+ :host(:last-of-type) {
99
+ border-bottom: none;
100
+ }
101
+
102
+ /* Hoverable rows */
103
+ :host-context([hoverable]):hover,
104
+ :host([hoverable]:hover),
105
+ :host([interactive]:hover) {
106
+ background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
107
+ }
108
+
109
+ /* Striped rows */
110
+ :host-context([striped]):host(:nth-of-type(even)) {
111
+ background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);
112
+ }
113
+
114
+ :host-context([striped]):host(:nth-of-type(odd)) {
115
+ background-color: var(--md-sys-color-surface-container-low, #F7F2FA);
116
+ }
117
+
118
+ /* Selected row */
119
+ :host([selected]) {
120
+ background-color: var(--md-sys-color-secondary-container, #E8DEF8) !important;
121
+ }
122
+
123
+ :host([interactive]) {
124
+ cursor: pointer;
125
+ }
126
+
127
+ :host([disabled]) {
128
+ opacity: 0.38;
129
+ pointer-events: none;
130
+ }
131
+ `, P = v`
132
+ :host {
133
+ display: table-cell;
134
+ vertical-align: middle;
135
+ padding: var(--md-table-header-padding-y, 16px) var(--md-table-header-padding-x, 16px);
136
+ color: var(--md-sys-color-on-surface-variant, #49454F);
137
+ font-size: var(--md-sys-typescale-title-small-size, 14px);
138
+ font-weight: 600;
139
+ letter-spacing: 0.1px;
140
+ border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
141
+ user-select: none;
142
+ box-sizing: border-box;
143
+ white-space: nowrap;
144
+ }
145
+
146
+ :host([sortable]) {
147
+ cursor: pointer;
148
+ }
149
+
150
+ :host([sortable]:hover) {
151
+ color: var(--md-sys-color-on-surface, #1D1B20);
152
+ background-color: rgba(0, 0, 0, 0.04);
153
+ }
154
+
155
+ :host([align="start"]),
156
+ :host([align="left"]) {
157
+ text-align: left;
158
+ }
159
+
160
+ :host([align="center"]) {
161
+ text-align: center;
162
+ }
163
+
164
+ :host([align="end"]),
165
+ :host([align="right"]) {
166
+ text-align: right;
167
+ }
168
+
169
+ .cell-content {
170
+ display: inline-flex;
171
+ align-items: center;
172
+ gap: 6px;
173
+ width: 100%;
174
+ }
175
+
176
+ :host([align="center"]) .cell-content {
177
+ justify-content: center;
178
+ }
179
+
180
+ :host([align="end"]) .cell-content,
181
+ :host([align="right"]) .cell-content {
182
+ justify-content: flex-end;
183
+ }
184
+
185
+ .sort-icon {
186
+ display: inline-flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ font-size: 18px;
190
+ color: var(--md-sys-color-primary, #6750A4);
191
+ opacity: 0;
192
+ transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease;
193
+ }
194
+
195
+ :host([sort-direction="asc"]) .sort-icon {
196
+ opacity: 1;
197
+ transform: rotate(0deg);
198
+ }
199
+
200
+ :host([sort-direction="desc"]) .sort-icon {
201
+ opacity: 1;
202
+ transform: rotate(180deg);
203
+ }
204
+
205
+ :host([sortable]:hover:not([sort-direction="asc"]):not([sort-direction="desc"])) .sort-icon {
206
+ opacity: 0.5;
207
+ }
208
+ `, E = v`
209
+ :host {
210
+ display: table-cell;
211
+ vertical-align: middle;
212
+ padding: var(--md-table-cell-padding-y, 14px) var(--md-table-cell-padding-x, 16px);
213
+ color: var(--md-sys-color-on-surface, #1D1B20);
214
+ font-size: var(--md-sys-typescale-body-medium-size, 14px);
215
+ border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
216
+ box-sizing: border-box;
217
+ }
218
+
219
+ :host([align="start"]),
220
+ :host([align="left"]) {
221
+ text-align: left;
222
+ }
223
+
224
+ :host([align="center"]) {
225
+ text-align: center;
226
+ }
227
+
228
+ :host([align="end"]),
229
+ :host([align="right"]) {
230
+ text-align: right;
231
+ }
232
+
233
+ :host([numeric]) {
234
+ font-variant-numeric: tabular-nums;
235
+ text-align: right;
236
+ }
237
+
238
+ :host([truncate]) {
239
+ max-width: 200px;
240
+ overflow: hidden;
241
+ text-overflow: ellipsis;
242
+ white-space: nowrap;
243
+ }
244
+ `, M = v`
245
+ :host {
246
+ display: flex;
247
+ align-items: center;
248
+ justify-content: flex-end;
249
+ gap: 16px;
250
+ padding: 8px 16px;
251
+ border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
252
+ background-color: var(--md-sys-color-surface, #FEF7FF);
253
+ font-size: var(--md-sys-typescale-body-small-size, 12px);
254
+ color: var(--md-sys-color-on-surface-variant, #49454F);
255
+ box-sizing: border-box;
256
+ }
257
+
258
+ .rows-per-page {
259
+ display: flex;
260
+ align-items: center;
261
+ gap: 8px;
262
+ }
263
+
264
+ select {
265
+ padding: 4px 8px;
266
+ border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
267
+ border-radius: var(--md-sys-shape-corner-extra-small, 4px);
268
+ background-color: var(--md-sys-color-surface-container-low, #F7F2FA);
269
+ color: var(--md-sys-color-on-surface, #1D1B20);
270
+ font-family: inherit;
271
+ font-size: inherit;
272
+ outline: none;
273
+ cursor: pointer;
274
+ }
275
+
276
+ select:focus {
277
+ border-color: var(--md-sys-color-primary, #6750A4);
278
+ }
279
+
280
+ .range-label {
281
+ user-select: none;
282
+ }
283
+
284
+ .actions {
285
+ display: flex;
286
+ align-items: center;
287
+ gap: 4px;
288
+ }
289
+ `, b = class extends n {
290
+ constructor(...i) {
291
+ super(...i), this.sortable = !1, this.sortDirection = "none", this.align = "start", this.columnKey = "", this.width = "", this.handleClick = () => {
292
+ if (!this.sortable) return;
293
+ let t = "asc";
294
+ this.sortDirection === "asc" ? t = "desc" : this.sortDirection === "desc" && (t = "none"), this.sortDirection = t, this.emitEvent("sort-change", {
295
+ column: this.columnKey,
296
+ direction: this.sortDirection
297
+ });
298
+ };
299
+ }
300
+ static {
301
+ this.styles = [n.styles, P];
302
+ }
303
+ connectedCallback() {
304
+ super.connectedCallback(), this.setAttribute("role", "columnheader"), this.addEventListener("click", this.handleClick);
305
+ }
306
+ disconnectedCallback() {
307
+ super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
308
+ }
309
+ updated(i) {
310
+ super.updated(i), i.has("width") && this.width && (this.style.width = this.width), i.has("sortDirection") && (this.sortDirection === "asc" ? this.setAttribute("aria-sort", "ascending") : this.sortDirection === "desc" ? this.setAttribute("aria-sort", "descending") : this.removeAttribute("aria-sort"));
311
+ }
312
+ render() {
313
+ return r`
314
+ <div class="cell-content">
315
+ <slot></slot>
316
+ ${this.sortable ? r`<span class="sort-icon" aria-hidden="true"><md-icon name="arrow_upward" size="18"></md-icon></span>` : u}
317
+ </div>
318
+ `;
319
+ }
320
+ };
321
+ e([s({
322
+ type: Boolean,
323
+ reflect: !0
324
+ })], b.prototype, "sortable", void 0);
325
+ e([s({
326
+ type: String,
327
+ reflect: !0,
328
+ attribute: "sort-direction"
329
+ })], b.prototype, "sortDirection", void 0);
330
+ e([s({
331
+ type: String,
332
+ reflect: !0
333
+ })], b.prototype, "align", void 0);
334
+ e([s({
335
+ type: String,
336
+ attribute: "column-key"
337
+ })], b.prototype, "columnKey", void 0);
338
+ e([s({ type: String })], b.prototype, "width", void 0);
339
+ b = e([h("md-table-header-cell")], b);
340
+ var x = class extends n {
341
+ constructor(...i) {
342
+ super(...i), this.align = "start", this.numeric = !1, this.truncate = !1;
343
+ }
344
+ static {
345
+ this.styles = [n.styles, E];
346
+ }
347
+ connectedCallback() {
348
+ super.connectedCallback(), this.setAttribute("role", "cell");
349
+ }
350
+ render() {
351
+ return r`<slot></slot>`;
352
+ }
353
+ };
354
+ e([s({
355
+ type: String,
356
+ reflect: !0
357
+ })], x.prototype, "align", void 0);
358
+ e([s({
359
+ type: Boolean,
360
+ reflect: !0
361
+ })], x.prototype, "numeric", void 0);
362
+ e([s({
363
+ type: Boolean,
364
+ reflect: !0
365
+ })], x.prototype, "truncate", void 0);
366
+ x = e([h("md-table-cell")], x);
367
+ var y = class extends n {
368
+ constructor(...i) {
369
+ super(...i), this.selected = !1, this.selectable = !1, this.interactive = !1, this.disabled = !1, this.hoverable = !1, this.handleClick = (t) => {
370
+ if (this.disabled) {
371
+ t.preventDefault(), t.stopImmediatePropagation();
372
+ return;
373
+ }
374
+ this.emitEvent("row-click", { row: this }), this.selectable && (this.selected = !this.selected, this.emitEvent("row-select", {
375
+ selected: this.selected,
376
+ row: this
377
+ }));
378
+ };
379
+ }
380
+ static {
381
+ this.styles = [n.styles, B];
382
+ }
383
+ connectedCallback() {
384
+ super.connectedCallback(), this.setAttribute("role", "row"), this.addEventListener("click", this.handleClick);
385
+ }
386
+ disconnectedCallback() {
387
+ super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
388
+ }
389
+ updated(i) {
390
+ super.updated(i), i.has("selected") && this.setAttribute("aria-selected", this.selected ? "true" : "false");
391
+ }
392
+ render() {
393
+ return r`<slot></slot>`;
394
+ }
395
+ };
396
+ e([s({
397
+ type: Boolean,
398
+ reflect: !0
399
+ })], y.prototype, "selected", void 0);
400
+ e([s({
401
+ type: Boolean,
402
+ reflect: !0
403
+ })], y.prototype, "selectable", void 0);
404
+ e([s({
405
+ type: Boolean,
406
+ reflect: !0
407
+ })], y.prototype, "interactive", void 0);
408
+ e([s({
409
+ type: Boolean,
410
+ reflect: !0
411
+ })], y.prototype, "disabled", void 0);
412
+ e([s({
413
+ type: Boolean,
414
+ reflect: !0
415
+ })], y.prototype, "hoverable", void 0);
416
+ y = e([h("md-table-row")], y);
417
+ var w = class extends n {
418
+ constructor(...i) {
419
+ super(...i), this.sticky = !1;
420
+ }
421
+ static {
422
+ this.styles = [n.styles, R];
423
+ }
424
+ connectedCallback() {
425
+ super.connectedCallback(), this.setAttribute("role", "rowgroup");
426
+ }
427
+ render() {
428
+ return r`<slot></slot>`;
429
+ }
430
+ };
431
+ e([s({
432
+ type: Boolean,
433
+ reflect: !0
434
+ })], w.prototype, "sticky", void 0);
435
+ w = e([h("md-table-head")], w);
436
+ var k = class extends n {
437
+ static {
438
+ this.styles = [n.styles, A];
439
+ }
440
+ connectedCallback() {
441
+ super.connectedCallback(), this.setAttribute("role", "rowgroup");
442
+ }
443
+ render() {
444
+ return r`<slot></slot>`;
445
+ }
446
+ };
447
+ k = e([h("md-table-body")], k);
448
+ var m = class extends n {
449
+ constructor(...i) {
450
+ super(...i), this.page = 1, this.pageSize = 10, this.total = 0, this.pageSizeOptions = [
451
+ 5,
452
+ 10,
453
+ 25,
454
+ 50
455
+ ], this.showFirstLast = !0, this.handlePageSizeChange = (t) => {
456
+ const c = t.target, d = Number(c.value);
457
+ this.pageSize = d, this.page = 1, this.emitEvent("page-size-change", {
458
+ page: this.page,
459
+ pageSize: this.pageSize
460
+ }), this.emitEvent("page-change", {
461
+ page: this.page,
462
+ pageSize: this.pageSize
463
+ });
464
+ }, this.firstPage = () => {
465
+ this.page <= 1 || (this.page = 1, this.notifyPageChange());
466
+ }, this.prevPage = () => {
467
+ this.page <= 1 || (this.page -= 1, this.notifyPageChange());
468
+ }, this.nextPage = () => {
469
+ this.page >= this.totalPages || (this.page += 1, this.notifyPageChange());
470
+ }, this.lastPage = () => {
471
+ this.page >= this.totalPages || (this.page = this.totalPages, this.notifyPageChange());
472
+ };
473
+ }
474
+ static {
475
+ this.styles = [n.styles, M];
476
+ }
477
+ get totalPages() {
478
+ return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize)));
479
+ }
480
+ notifyPageChange() {
481
+ this.emitEvent("page-change", {
482
+ page: this.page,
483
+ pageSize: this.pageSize
484
+ });
485
+ }
486
+ render() {
487
+ const i = `${this.total === 0 ? 0 : (this.page - 1) * this.pageSize + 1}–${Math.min(this.page * this.pageSize, this.total)} of ${this.total}`;
488
+ return r`
489
+ <div class="rows-per-page">
490
+ <span>Rows per page:</span>
491
+ <select .value=${String(this.pageSize)} @change=${this.handlePageSizeChange}>
492
+ ${this.pageSizeOptions.map((t) => r`<option value=${t} ?selected=${t === this.pageSize}>${t}</option>`)}
493
+ </select>
494
+ </div>
495
+
496
+ <div class="range-label">${i}</div>
497
+
498
+ <div class="actions">
499
+ ${this.showFirstLast ? r`
500
+ <md-icon-button
501
+ icon="first_page"
502
+ aria-label="First page"
503
+ ?disabled=${this.page <= 1}
504
+ @click=${this.firstPage}
505
+ ></md-icon-button>
506
+ ` : u}
507
+ <md-icon-button
508
+ icon="chevron_left"
509
+ aria-label="Previous page"
510
+ ?disabled=${this.page <= 1}
511
+ @click=${this.prevPage}
512
+ ></md-icon-button>
513
+ <md-icon-button
514
+ icon="chevron_right"
515
+ aria-label="Next page"
516
+ ?disabled=${this.page >= this.totalPages}
517
+ @click=${this.nextPage}
518
+ ></md-icon-button>
519
+ ${this.showFirstLast ? r`
520
+ <md-icon-button
521
+ icon="last_page"
522
+ aria-label="Last page"
523
+ ?disabled=${this.page >= this.totalPages}
524
+ @click=${this.lastPage}
525
+ ></md-icon-button>
526
+ ` : u}
527
+ </div>
528
+ `;
529
+ }
530
+ };
531
+ e([s({ type: Number })], m.prototype, "page", void 0);
532
+ e([s({
533
+ type: Number,
534
+ attribute: "page-size"
535
+ })], m.prototype, "pageSize", void 0);
536
+ e([s({ type: Number })], m.prototype, "total", void 0);
537
+ e([s({
538
+ type: Array,
539
+ attribute: "page-size-options"
540
+ })], m.prototype, "pageSizeOptions", void 0);
541
+ e([s({
542
+ type: Boolean,
543
+ attribute: "show-first-last"
544
+ })], m.prototype, "showFirstLast", void 0);
545
+ m = e([h("md-table-pagination")], m);
546
+ var a = class extends n {
547
+ constructor(...i) {
548
+ super(...i), this.bordered = !1, this.elevated = !1, this.striped = !1, this.hoverable = !0, this.dense = !1, this.stickyHeader = !1, this.loading = !1, this.selectable = !1, this.columns = [], this.rows = [], this.selectedRows = [], this.sortColumn = "", this.sortDirection = "none", this.paginated = !1, this.page = 1, this.pageSize = 10, this.pageSizeOptions = [
549
+ 5,
550
+ 10,
551
+ 25,
552
+ 50
553
+ ], this.total = 0, this.handleHeaderSortChange = (t) => {
554
+ this.sortColumn = t.detail.column, this.sortDirection = t.detail.direction, this.emitEvent("sort-change", t.detail);
555
+ }, this.handleSelectAllToggle = (t) => {
556
+ const c = t.detail.checked, d = this.getProcessedRows();
557
+ if (c) {
558
+ const l = [...this.selectedRows];
559
+ d.forEach((o) => {
560
+ l.includes(o) || l.push(o);
561
+ }), this.selectedRows = l;
562
+ } else this.selectedRows = this.selectedRows.filter((l) => !d.includes(l));
563
+ this.emitEvent("selection-change", {
564
+ selectedRows: this.selectedRows,
565
+ allSelected: c
566
+ });
567
+ }, this.handleRowSelectToggle = (t, c) => {
568
+ const d = this.selectedRows.includes(t);
569
+ d ? this.selectedRows = this.selectedRows.filter((l) => l !== t) : this.selectedRows = [...this.selectedRows, t], this.emitEvent("row-select", {
570
+ row: t,
571
+ index: c,
572
+ selected: !d,
573
+ selectedRows: this.selectedRows
574
+ }), this.emitEvent("selection-change", { selectedRows: this.selectedRows });
575
+ }, this.handlePaginationChange = (t) => {
576
+ this.page = t.detail.page, this.pageSize = t.detail.pageSize, this.emitEvent("page-change", t.detail);
577
+ };
578
+ }
579
+ static {
580
+ this.styles = [n.styles, F];
581
+ }
582
+ connectedCallback() {
583
+ super.connectedCallback(), this.setAttribute("role", "table");
584
+ }
585
+ getProcessedRows() {
586
+ if (!this.rows || this.rows.length === 0) return [];
587
+ let i = [...this.rows];
588
+ if (this.sortColumn && this.sortDirection !== "none") {
589
+ const t = this.sortDirection === "asc" ? 1 : -1;
590
+ i.sort((c, d) => {
591
+ const l = c[this.sortColumn], o = d[this.sortColumn];
592
+ return l == null && o == null ? 0 : l == null ? 1 : o == null ? -1 : typeof l == "number" && typeof o == "number" ? (l - o) * t : String(l).localeCompare(String(o)) * t;
593
+ });
594
+ }
595
+ if (this.paginated) {
596
+ const t = (this.page - 1) * this.pageSize;
597
+ i = i.slice(t, t + this.pageSize);
598
+ }
599
+ return i;
600
+ }
601
+ render() {
602
+ const i = this.columns && this.columns.length > 0, t = i ? this.getProcessedRows() : [], c = this.total || (this.rows ? this.rows.length : 0), d = t.length > 0 && t.every((o) => this.selectedRows.includes(o)), l = !d && t.some((o) => this.selectedRows.includes(o));
603
+ return r`
604
+ <div class="table-wrapper">
605
+ ${this.loading ? r`<div class="progress-container"><md-linear-progress indeterminate></md-linear-progress></div>` : u}
606
+
607
+ <div class="table" role="table">
608
+ ${i ? r`
609
+ <md-table-head ?sticky=${this.stickyHeader}>
610
+ <md-table-row>
611
+ ${this.selectable ? r`
612
+ <md-table-header-cell style="width: 48px; padding-right: 0;">
613
+ <md-checkbox
614
+ .checked=${d}
615
+ .indeterminate=${l}
616
+ aria-label="Select all rows"
617
+ @change=${this.handleSelectAllToggle}
618
+ ></md-checkbox>
619
+ </md-table-header-cell>
620
+ ` : u}
621
+ ${this.columns.map((o) => {
622
+ const f = this.sortColumn === o.key ? this.sortDirection : "none";
623
+ return r`
624
+ <md-table-header-cell
625
+ column-key=${o.key}
626
+ ?sortable=${!!o.sortable}
627
+ sort-direction=${f}
628
+ align=${o.align || (o.numeric ? "end" : "start")}
629
+ width=${o.width || ""}
630
+ @sort-change=${this.handleHeaderSortChange}
631
+ >
632
+ ${o.label}
633
+ </md-table-header-cell>
634
+ `;
635
+ })}
636
+ </md-table-row>
637
+ </md-table-head>
638
+
639
+ <md-table-body>
640
+ ${t.map((o, f) => {
641
+ const C = this.selectedRows.includes(o);
642
+ return r`
643
+ <md-table-row
644
+ ?selected=${C}
645
+ ?hoverable=${this.hoverable}
646
+ @click=${() => this.emitEvent("row-click", {
647
+ row: o,
648
+ index: f
649
+ })}
650
+ >
651
+ ${this.selectable ? r`
652
+ <md-table-cell style="width: 48px; padding-right: 0;">
653
+ <md-checkbox
654
+ .checked=${C}
655
+ aria-label="Select row"
656
+ @change=${(g) => {
657
+ g.stopPropagation(), this.handleRowSelectToggle(o, f);
658
+ }}
659
+ ></md-checkbox>
660
+ </md-table-cell>
661
+ ` : u}
662
+ ${this.columns.map((g) => {
663
+ const D = g.render ? g.render(o, f) : o[g.key];
664
+ return r`
665
+ <md-table-cell
666
+ align=${g.align || (g.numeric ? "end" : "start")}
667
+ ?numeric=${!!g.numeric}
668
+ >
669
+ ${D}
670
+ </md-table-cell>
671
+ `;
672
+ })}
673
+ </md-table-row>
674
+ `;
675
+ })}
676
+ </md-table-body>
677
+ ` : r`<slot></slot>`}
678
+ </div>
679
+ </div>
680
+
681
+ ${this.paginated || i && this.rows.length > 0 && this.paginated ? r`
682
+ <md-table-pagination
683
+ .page=${this.page}
684
+ .pageSize=${this.pageSize}
685
+ .total=${c}
686
+ .pageSizeOptions=${this.pageSizeOptions}
687
+ @page-change=${this.handlePaginationChange}
688
+ @page-size-change=${this.handlePaginationChange}
689
+ ></md-table-pagination>
690
+ ` : u}
691
+ <slot name="pagination"></slot>
692
+ `;
693
+ }
694
+ };
695
+ e([s({
696
+ type: Boolean,
697
+ reflect: !0
698
+ })], a.prototype, "bordered", void 0);
699
+ e([s({
700
+ type: Boolean,
701
+ reflect: !0
702
+ })], a.prototype, "elevated", void 0);
703
+ e([s({
704
+ type: Boolean,
705
+ reflect: !0
706
+ })], a.prototype, "striped", void 0);
707
+ e([s({
708
+ type: Boolean,
709
+ reflect: !0
710
+ })], a.prototype, "hoverable", void 0);
711
+ e([s({
712
+ type: Boolean,
713
+ reflect: !0
714
+ })], a.prototype, "dense", void 0);
715
+ e([s({
716
+ type: Boolean,
717
+ reflect: !0,
718
+ attribute: "sticky-header"
719
+ })], a.prototype, "stickyHeader", void 0);
720
+ e([s({
721
+ type: Boolean,
722
+ reflect: !0
723
+ })], a.prototype, "loading", void 0);
724
+ e([s({
725
+ type: Boolean,
726
+ reflect: !0
727
+ })], a.prototype, "selectable", void 0);
728
+ e([s({ type: Array })], a.prototype, "columns", void 0);
729
+ e([s({ type: Array })], a.prototype, "rows", void 0);
730
+ e([s({ type: Array })], a.prototype, "selectedRows", void 0);
731
+ e([s({
732
+ type: String,
733
+ attribute: "sort-column"
734
+ })], a.prototype, "sortColumn", void 0);
735
+ e([s({
736
+ type: String,
737
+ attribute: "sort-direction"
738
+ })], a.prototype, "sortDirection", void 0);
739
+ e([s({ type: Boolean })], a.prototype, "paginated", void 0);
740
+ e([s({ type: Number })], a.prototype, "page", void 0);
741
+ e([s({
742
+ type: Number,
743
+ attribute: "page-size"
744
+ })], a.prototype, "pageSize", void 0);
745
+ e([s({
746
+ type: Array,
747
+ attribute: "page-size-options"
748
+ })], a.prototype, "pageSizeOptions", void 0);
749
+ e([s({ type: Number })], a.prototype, "total", void 0);
750
+ a = e([h("md-table")], a);
751
+ var S = class extends a {
752
+ };
753
+ S = e([h("md-data-table")], S);
754
+ var z = class extends w {
755
+ };
756
+ z = e([h("md-table-header")], z);
757
+ var $ = class extends b {
758
+ };
759
+ $ = e([h("md-table-head-cell")], $);
760
+ export {
761
+ w as a,
762
+ b as c,
763
+ x as i,
764
+ m as l,
765
+ a as n,
766
+ $ as o,
767
+ k as r,
768
+ z as s,
769
+ S as t,
770
+ y as u
771
+ };
772
+
773
+ //# sourceMappingURL=table-aRTYzDyE.js.map