overview-components 1.0.77 → 1.0.79

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 (49) hide show
  1. package/dist/_virtual/_commonjsHelpers.js +6 -2
  2. package/dist/_virtual/air-datepicker.js +4 -0
  3. package/dist/index.d.ts +56 -11
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +105 -53
  6. package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +285 -231
  7. package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +48 -47
  8. package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +39 -38
  9. package/dist/node_modules/air-datepicker/air-datepicker.js +1147 -0
  10. package/dist/node_modules/air-datepicker/index.es.js +4 -0
  11. package/dist/shared/filter-inputs.js +326 -0
  12. package/dist/shared/lit-case-variables-tab-cell.js +207 -0
  13. package/dist/shared/lit-custom-popper.js +99 -0
  14. package/dist/shared/lit-data-grid-action-buttons-popover.js +258 -0
  15. package/dist/shared/lit-data-grid-density-popover.js +79 -0
  16. package/dist/shared/lit-data-grid-export-popover.js +66 -0
  17. package/dist/shared/lit-data-grid-operators-popover.js +94 -0
  18. package/dist/shared/lit-data-grid-row-actions.js +73 -0
  19. package/dist/shared/lit-date-picker.js +525 -0
  20. package/dist/shared/lit-icon-button.d.ts +1 -1
  21. package/dist/shared/lit-icon-button.d.ts.map +1 -1
  22. package/dist/shared/lit-icon-button.js +91 -0
  23. package/dist/shared/lit-label.js +96 -0
  24. package/dist/shared/lit-loader.d.ts +1 -1
  25. package/dist/shared/lit-loader.d.ts.map +1 -1
  26. package/dist/shared/lit-loader.js +70 -0
  27. package/dist/shared/lit-loading-bar.d.ts +1 -1
  28. package/dist/shared/lit-loading-bar.d.ts.map +1 -1
  29. package/dist/shared/lit-loading-bar.js +94 -0
  30. package/dist/shared/lit-menu-item.d.ts +1 -1
  31. package/dist/shared/lit-menu-item.d.ts.map +1 -1
  32. package/dist/shared/lit-menu-item.js +94 -0
  33. package/dist/shared/lit-modal-body.js +28 -0
  34. package/dist/shared/lit-modal-footer.js +32 -0
  35. package/dist/shared/lit-modal-header.js +39 -0
  36. package/dist/shared/lit-overflow-tooltip.js +85 -0
  37. package/dist/shared/lit-responsive-button.js +84 -0
  38. package/dist/shared/lit-select-field.js +376 -0
  39. package/dist/shared/lit-settings.js +60 -0
  40. package/dist/shared/lit-text-field.d.ts +1 -1
  41. package/dist/shared/lit-text-field.d.ts.map +1 -1
  42. package/dist/shared/lit-text-field.js +205 -0
  43. package/dist/shared/lit-toggle.js +213 -0
  44. package/dist/shared/simple-popper.js +186 -0
  45. package/dist/shared/simple-tooltip.js +1 -1
  46. package/dist/style.css +1 -0
  47. package/dist/utils/localization.js +410 -25
  48. package/dist/utils/utils.js +11 -0
  49. package/package.json +1 -1
@@ -0,0 +1,4 @@
1
+ import e from "./air-datepicker.js";
2
+ export {
3
+ e as default
4
+ };
@@ -0,0 +1,326 @@
1
+ import "../node_modules/@lit/reactive-element/reactive-element.js";
2
+ import { html as p } from "../node_modules/lit-html/lit-html.js";
3
+ import { LitElement as y } from "../node_modules/lit-element/lit-element.js";
4
+ import d from "lodash";
5
+ import { msg as m } from "../node_modules/@lit/localize/init/install.js";
6
+ import "../node_modules/@lit/localize/init/runtime.js";
7
+ import { customElement as v } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
8
+ import { property as h } from "../node_modules/@lit/reactive-element/decorators/property.js";
9
+ import { state as f } from "../node_modules/@lit/reactive-element/decorators/state.js";
10
+ /* empty css */
11
+ import { debounce as c } from "../utils/utils.js";
12
+ import { css as $ } from "../node_modules/@lit/reactive-element/css-tag.js";
13
+ var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, s, r) => {
14
+ for (var i = r > 1 ? void 0 : r ? b(t, s) : t, a = e.length - 1, l; a >= 0; a--)
15
+ (l = e[a]) && (i = (r ? l(t, s, i) : l(i)) || i);
16
+ return r && i && g(t, s, i), i;
17
+ };
18
+ let n = class extends y {
19
+ constructor() {
20
+ super(), this.minFilterCharacters = 0, this.server = !1, this.value = void 0, this.operator = void 0, this.filterOperators = [], this.valueOptions = [], this.filterVariant = [], this.isClickInside = !1, this.handleSetOperator = (e, t) => {
21
+ var s, r, i;
22
+ this.operator = (s = this.filterOperators.find((a) => a.value === e)) == null ? void 0 : s.value, ["isEmpty", "isNotEmpty"].includes(e) ? (this.value = null, (r = this.column) == null || r.setFilterValue({ value: this.value, operator: e })) : this.value && !(t != null && t.silent) && ((i = this.column) == null || i.setFilterValue({
23
+ value: this.value,
24
+ operator: this.operator
25
+ }));
26
+ }, this.debouncedSetTextFilter = c((e) => {
27
+ this.checkNumberOfCharacters(e, () => {
28
+ this.handleSetFilter(e);
29
+ });
30
+ }), this.debouncedSetNumberFilter = c((e) => {
31
+ this.handleSetFilter(e);
32
+ });
33
+ }
34
+ checkNumberOfCharacters(e, t) {
35
+ (d.isEmpty(e) || e.length >= this.minFilterCharacters) && t();
36
+ }
37
+ updated(e) {
38
+ var t, s, r, i, a;
39
+ if (e.has("column") && (this.filterVariant === "select" || this.filterVariant === "multiselect"))
40
+ if ((s = (t = this.column) == null ? void 0 : t.columnDef) != null && s.meta.valueOptions || this.server)
41
+ this.valueOptions = ((i = (r = this.column) == null ? void 0 : r.columnDef) == null ? void 0 : i.meta.valueOptions) || [];
42
+ else {
43
+ const l = Array.from(
44
+ (a = this.column) == null ? void 0 : a.getFacetedUniqueValues().keys()
45
+ ).sort().slice(0, 5e3);
46
+ this.valueOptions = l.map((u) => ({
47
+ value: u,
48
+ label: u
49
+ }));
50
+ }
51
+ }
52
+ handleSetFilter(e) {
53
+ var t, s, r;
54
+ this.value = e, d.isEmpty(e) ? (r = this.column) == null || r.setFilterValue() : this.server ? (t = this.column) == null || t.setFilterValue({ value: this.value, operator: this.operator }) : (s = this.column) == null || s.setFilterValue(this.value);
55
+ }
56
+ handleClearFilter() {
57
+ var e;
58
+ this.server && (this.operator = this.filterOperators[0].value), this.value = null, (e = this.column) == null || e.setFilterValue();
59
+ }
60
+ handleDateChange(e) {
61
+ d.isEqual(e, this.value) || this.handleSetFilter(e);
62
+ }
63
+ handleStartDateChange(e) {
64
+ this.startDate = e, this.handleFilterDateRangeChange();
65
+ }
66
+ handleEndDateChange(e) {
67
+ this.endDate = e, this.handleFilterDateRangeChange();
68
+ }
69
+ handleFilterDateRangeChange() {
70
+ !this.startDate && !this.endDate ? this.handleSetFilter(void 0) : this.handleSetFilter({ startDate: this.startDate, endDate: this.endDate });
71
+ }
72
+ handleKeyDown(e) {
73
+ if (e.key === "Enter") {
74
+ const t = e.target;
75
+ t && (this.handleSetFilter(t.value), this.requestUpdate());
76
+ } else if (e.key === "Tab") {
77
+ const t = this.getFocusableElements();
78
+ if (t.length <= 1) {
79
+ e.preventDefault(), this.dispatchEvent(
80
+ new CustomEvent("filter-tab", {
81
+ bubbles: !0,
82
+ composed: !0,
83
+ detail: {
84
+ direction: e.shiftKey ? "backward" : "forward",
85
+ currentFilter: this
86
+ }
87
+ })
88
+ );
89
+ return;
90
+ }
91
+ const s = e.target, r = t.indexOf(s);
92
+ if (e.shiftKey && r === 0 || !e.shiftKey && r === t.length - 1)
93
+ e.preventDefault(), this.dispatchEvent(
94
+ new CustomEvent("filter-tab", {
95
+ bubbles: !0,
96
+ composed: !0,
97
+ detail: {
98
+ direction: e.shiftKey ? "backward" : "forward",
99
+ currentFilter: this
100
+ }
101
+ })
102
+ );
103
+ else {
104
+ e.preventDefault();
105
+ const i = e.shiftKey ? r - 1 : r + 1;
106
+ t[i].focus();
107
+ }
108
+ }
109
+ }
110
+ // Improved getFocusableElements to find all actual focusable elements
111
+ getFocusableElements() {
112
+ var i, a, l;
113
+ const e = [], t = (i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("lit-input");
114
+ t && t.forEach((u) => e.push(u));
115
+ const s = (a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("lit-select");
116
+ s && s.forEach((u) => e.push(u));
117
+ const r = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll("lit-date-picker");
118
+ return r && r.forEach((u) => e.push(u)), e;
119
+ }
120
+ focus() {
121
+ var t;
122
+ const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
123
+ "lit-input, lit-select, lit-date-picker"
124
+ );
125
+ e == null || e.focus();
126
+ }
127
+ render() {
128
+ return this.filterVariant === "numberRange" ? this.renderNumberRangeInput() : this.filterVariant === "select" ? this.renderSelectInput() : this.filterVariant === "multiselect" ? this.renderSelectInput(!0) : this.filterVariant === "number" ? this.renderNumberInput() : this.filterVariant === "currency" ? this.renderNumberInput() : this.filterVariant === "date" ? this.renderDateInput() : this.filterVariant === "dateTime" ? this.renderDateInput() : this.filterVariant === "dateRange" ? this.renderDateRangeInput() : this.filterVariant === "dateTimeRange" ? this.renderDateRangeInput() : this.renderTextInput();
129
+ }
130
+ renderNumberRangeInput() {
131
+ var t, s;
132
+ const e = c(
133
+ (r, i) => {
134
+ this.handleSetFilter([r, i]);
135
+ }
136
+ );
137
+ return p`
138
+ <div class="range">
139
+ <lit-input
140
+ class="range-fields"
141
+ type="number"
142
+ .server="${this.server}"
143
+ .value="${((t = this.value) == null ? void 0 : t[0]) || ""}"
144
+ placeholder="Min"
145
+ .onInput=${(r) => {
146
+ var l;
147
+ const i = r ? Number(r) : void 0, a = (l = this.value) == null ? void 0 : l[1];
148
+ e(i, a);
149
+ }}
150
+ .onClear="${() => {
151
+ this.handleClearFilter();
152
+ }}"
153
+ @keydown=${(r) => this.handleKeyDown(r)}
154
+ ></lit-input>
155
+
156
+ <lit-input
157
+ class="range-fields"
158
+ type="number"
159
+ .server="${this.server}"
160
+ .value="${((s = this.value) == null ? void 0 : s[1]) || ""}"
161
+ placeholder="Max"
162
+ .onInput=${(r) => {
163
+ var l;
164
+ const i = r ? Number(r) : void 0, a = (l = this.value) == null ? void 0 : l[0];
165
+ e(a, i);
166
+ }}
167
+ .onClear="${() => {
168
+ this.handleClearFilter();
169
+ }}"
170
+ @keydown=${(r) => this.handleKeyDown(r)}
171
+ ></lit-input>
172
+ </div>
173
+ `;
174
+ }
175
+ renderSelectInput(e = !1) {
176
+ return p`
177
+ <lit-select
178
+ id=${this.column.id}
179
+ .value="${typeof this.value == "number" ? this.value.toString() : this.value || []}"
180
+ .server="${this.server}"
181
+ .options="${this.valueOptions}"
182
+ .onChange="${(t) => {
183
+ const s = t.length === 0 ? void 0 : t;
184
+ this.handleSetFilter(s);
185
+ }}"
186
+ .multiple="${e}"
187
+ @keydown=${(t) => this.handleKeyDown(t)}
188
+ .setOperator="${this.handleSetOperator}"
189
+ .operator="${this.operator}"
190
+ .filterOperators="${this.filterOperators}"
191
+ ></lit-select>
192
+ `;
193
+ }
194
+ renderNumberInput() {
195
+ return p`
196
+ <lit-input
197
+ type="number"
198
+ .value="${this.value || ""}"
199
+ .server="${this.server}"
200
+ .onInput=${(e) => this.debouncedSetNumberFilter(e)}
201
+ .onClear="${() => {
202
+ this.handleClearFilter();
203
+ }}"
204
+ @keydown=${(e) => this.handleKeyDown(e)}
205
+ .setOperator="${this.handleSetOperator}"
206
+ .operator="${this.operator}"
207
+ .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
208
+ .filterOperators="${this.filterOperators}"
209
+ ></lit-input>
210
+ `;
211
+ }
212
+ renderDateInput() {
213
+ return p`
214
+ <lit-date-picker
215
+ class="datePicker"
216
+ .server="${this.server}"
217
+ .pickerVariant=${this.filterVariant || ""}
218
+ .value=${this.value}
219
+ .dateFormat=${this.dateFormat}
220
+ .userLang=${this.userLang}
221
+ .onChange="${(e) => this.handleDateChange(e)}"
222
+ @keydown=${(e) => this.handleKeyDown(e)}
223
+ .setOperator="${this.handleSetOperator}"
224
+ .operator="${this.operator}"
225
+ .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
226
+ .range="${["fromTo"].includes(this.operator)}"
227
+ .filterOperators="${this.filterOperators}"
228
+ ></lit-date-picker>
229
+ `;
230
+ }
231
+ renderDateRangeInput() {
232
+ return p`
233
+ <div class="range">
234
+ <lit-date-picker
235
+ class="range-fields"
236
+ .server="${this.server}"
237
+ .dateFormat=${this.dateFormat}
238
+ .userLang=${this.userLang}
239
+ placeholder=${m("Od")}
240
+ .onChange="${(e) => this.handleStartDateChange(e)}"
241
+ @keydown=${(e) => this.handleKeyDown(e)}
242
+ ></lit-date-picker>
243
+
244
+ <lit-date-picker
245
+ class="range-fields"
246
+ .server="${this.server}"
247
+ .dateFormat=${this.dateFormat}
248
+ .userLang=${this.userLang}
249
+ placeholder=${m("Do")}
250
+ .onChange="${(e) => this.handleEndDateChange(e)}"
251
+ @keydown=${(e) => this.handleKeyDown(e)}
252
+ ></lit-date-picker>
253
+ </div>
254
+ `;
255
+ }
256
+ renderTextInput() {
257
+ return p`
258
+ <lit-input
259
+ .value="${this.value}"
260
+ .server="${this.server}"
261
+ .onInput=${(e) => this.debouncedSetTextFilter(e)}
262
+ .onClear="${() => {
263
+ this.handleClearFilter();
264
+ }}"
265
+ @keydown=${(e) => this.handleKeyDown(e)}
266
+ .setOperator="${this.handleSetOperator}"
267
+ .operator="${this.operator}"
268
+ .disabled="${this.server && ["isEmpty", "isNotEmpty"].includes(this.operator)}"
269
+ .filterOperators="${this.filterOperators}"
270
+ ></lit-input>
271
+ `;
272
+ }
273
+ };
274
+ n.styles = $`
275
+ .range {
276
+ display: flex;
277
+ gap: 0.3125rem;
278
+ }
279
+
280
+ .range-fields {
281
+ width: 100%;
282
+ min-width: 70px;
283
+ }
284
+ `;
285
+ o([
286
+ h({ type: Object })
287
+ ], n.prototype, "column", 2);
288
+ o([
289
+ h({ type: String })
290
+ ], n.prototype, "dateFormat", 2);
291
+ o([
292
+ h({ type: String })
293
+ ], n.prototype, "userLang", 2);
294
+ o([
295
+ h({ type: Number })
296
+ ], n.prototype, "minFilterCharacters", 2);
297
+ o([
298
+ h({ type: Boolean })
299
+ ], n.prototype, "server", 2);
300
+ o([
301
+ h({ type: Object })
302
+ ], n.prototype, "value", 2);
303
+ o([
304
+ h({ type: String })
305
+ ], n.prototype, "operator", 2);
306
+ o([
307
+ h({ type: Array })
308
+ ], n.prototype, "filterOperators", 2);
309
+ o([
310
+ h({ type: Array })
311
+ ], n.prototype, "valueOptions", 2);
312
+ o([
313
+ f()
314
+ ], n.prototype, "startDate", 2);
315
+ o([
316
+ f()
317
+ ], n.prototype, "endDate", 2);
318
+ o([
319
+ f()
320
+ ], n.prototype, "filterVariant", 2);
321
+ n = o([
322
+ v("filter-inputs")
323
+ ], n);
324
+ export {
325
+ n as FilterInputs
326
+ };
@@ -0,0 +1,207 @@
1
+ import "../node_modules/@lit/reactive-element/reactive-element.js";
2
+ import { html as s } from "../node_modules/lit-html/lit-html.js";
3
+ import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
4
+ import { styleMap as p } from "../node_modules/lit-html/directives/style-map.js";
5
+ import { customElement as u } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
6
+ import { property as i } from "../node_modules/@lit/reactive-element/decorators/property.js";
7
+ import { formatDate as y } from "../utils/date.js";
8
+ import { css as m } from "../node_modules/@lit/reactive-element/css-tag.js";
9
+ var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (n, o, l, a) => {
10
+ for (var r = a > 1 ? void 0 : a ? g(o, l) : o, h = n.length - 1, c; h >= 0; h--)
11
+ (c = n[h]) && (r = (a ? c(o, l, r) : c(r)) || r);
12
+ return a && r && v(o, l, r), r;
13
+ };
14
+ let t = class extends d {
15
+ constructor() {
16
+ super(...arguments), this.type = "string", this.buttonVariant = "contained", this.buttonFullWidth = !0, this.userLang = "cs", this.BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
17
+ }
18
+ getHeader() {
19
+ return s`
20
+ <div
21
+ style="${this.headerStyle ? p(this.headerStyle) : ""}"
22
+ class="process-data-heading"
23
+ >
24
+ ${this.headerName ? this.headerName : ""}
25
+ ${this.tooltip ? s`
26
+ <lit-icon size="12px" icon="informative"></lit-icon>
27
+ <simple-tooltip placement="right"
28
+ >${this.tooltip ? this.tooltip : ""}</simple-tooltip
29
+ >
30
+ ` : ""}
31
+ </div>
32
+ `;
33
+ }
34
+ getCellButton() {
35
+ return s`
36
+ <lit-button
37
+ .fullWidth="${this.buttonFullWidth}"
38
+ variant="${this.buttonVariant}"
39
+ label="${this.headerName ? this.headerName : ""}"
40
+ @click=${this.buttonFn}
41
+ ></lit-button>
42
+ `;
43
+ }
44
+ getCellLink() {
45
+ return s`
46
+ <div>${this.getHeader()}</div>
47
+ <a class="link" href=${this.value ? this.value : ""} target="_blank">
48
+ ${this.value ? this.value : ""}
49
+ </a>
50
+ `;
51
+ }
52
+ getCellValue() {
53
+ return s`
54
+ <div>${this.getHeader()}</div>
55
+ <div
56
+ style="${this.valueStyle ? p(this.valueStyle) : ""}"
57
+ class="process-data-value"
58
+ >
59
+ ${this.value ? this.value : ""}
60
+ </div>
61
+ `;
62
+ }
63
+ getCellDate() {
64
+ return s`
65
+ <div>${this.getHeader()}</div>
66
+ <div
67
+ style="${this.valueStyle ? p(this.valueStyle) : ""}"
68
+ class="process-data-value"
69
+ >
70
+ ${this.value ? y(this.value, this.userLang || "cs", !!this.dateFormat) : ""}
71
+ </div>
72
+ `;
73
+ }
74
+ render() {
75
+ const n = this.BREAKPOINTS.indexOf(this.currentBreakpoint), l = `cell--span${this.BREAKPOINTS.slice(0, n + 1).reverse().map((a) => {
76
+ var r;
77
+ return (r = this.size) == null ? void 0 : r[a];
78
+ }).find((a) => a !== void 0) ?? 2} cell`;
79
+ return s`
80
+ <div
81
+ class="${l}"
82
+ style="${p(this.cellStyle || {})}"
83
+ >
84
+ ${this.type === "button" ? this.getCellButton() : this.type === "link" ? this.getCellLink() : this.type === "date" ? this.getCellDate() : this.getCellValue()}
85
+ </div>
86
+ `;
87
+ }
88
+ };
89
+ t.styles = m`
90
+ :host {
91
+ font-family: 'Inter', sans-serif;
92
+ }
93
+
94
+ .grid-container {
95
+ display: grid;
96
+ justify-content: start;
97
+ align-items: start;
98
+ gap: 0.5rem;
99
+ }
100
+
101
+ .process-data-heading {
102
+ font-size: 0.75rem;
103
+ color: var(--text-secondary, #5d6371);
104
+ font-weight: 400 !important;
105
+ display: flex;
106
+ gap: 5px;
107
+ align-items: center;
108
+ }
109
+
110
+ .process-data-value {
111
+ font-size: 0.8125rem;
112
+ color: var(--text-primary, #111827);
113
+ margin: 0;
114
+ padding-top: 0.3125rem;
115
+ font-weight: 500 !important;
116
+ }
117
+
118
+ .status {
119
+ color: var(--color-primary-main, #76b703);
120
+ }
121
+
122
+ .link {
123
+ font-size: 0.8125rem;
124
+ text-decoration: none;
125
+ color: inherit;
126
+ border-bottom: 0.0625rem solid var(--color-primary-main, #76b703);
127
+ }
128
+
129
+ .cell {
130
+ padding: 5px;
131
+ border-radius: 8px;
132
+ }
133
+
134
+ .link:hover {
135
+ color: var(--color-primary-main, #76b703);
136
+ }
137
+
138
+ .cell--span1 {
139
+ grid-column: span 1 / span 1;
140
+ }
141
+
142
+ .cell--span2 {
143
+ grid-column: span 2 / span 2;
144
+ }
145
+
146
+ .cell--span3 {
147
+ grid-column: span 3 / span 3;
148
+ }
149
+
150
+ .cell--span4 {
151
+ grid-column: span 4 / span 4;
152
+ }
153
+ `;
154
+ e([
155
+ i({ type: String })
156
+ ], t.prototype, "field", 2);
157
+ e([
158
+ i({ type: String })
159
+ ], t.prototype, "type", 2);
160
+ e([
161
+ i({ type: Function })
162
+ ], t.prototype, "headerName", 2);
163
+ e([
164
+ i({ type: Function })
165
+ ], t.prototype, "value", 2);
166
+ e([
167
+ i({ type: Object })
168
+ ], t.prototype, "size", 2);
169
+ e([
170
+ i({ type: String })
171
+ ], t.prototype, "buttonVariant", 2);
172
+ e([
173
+ i({ type: Boolean })
174
+ ], t.prototype, "buttonFullWidth", 2);
175
+ e([
176
+ i({ type: Function })
177
+ ], t.prototype, "buttonFn", 2);
178
+ e([
179
+ i({ type: String })
180
+ ], t.prototype, "href", 2);
181
+ e([
182
+ i({ type: Object })
183
+ ], t.prototype, "headerStyle", 2);
184
+ e([
185
+ i({ type: Object })
186
+ ], t.prototype, "valueStyle", 2);
187
+ e([
188
+ i({ type: Object })
189
+ ], t.prototype, "cellStyle", 2);
190
+ e([
191
+ i({ type: Function })
192
+ ], t.prototype, "tooltip", 2);
193
+ e([
194
+ i({ type: String })
195
+ ], t.prototype, "dateFormat", 2);
196
+ e([
197
+ i({ type: String })
198
+ ], t.prototype, "userLang", 2);
199
+ e([
200
+ i({ type: String })
201
+ ], t.prototype, "currentBreakpoint", 2);
202
+ t = e([
203
+ u("lit-case-variables-tab-cell")
204
+ ], t);
205
+ export {
206
+ t as LitCaseVariablesTabCell
207
+ };
@@ -0,0 +1,99 @@
1
+ import "../node_modules/@lit/reactive-element/reactive-element.js";
2
+ import { html as c } from "../node_modules/lit-html/lit-html.js";
3
+ import { LitElement as d } from "../node_modules/lit-element/lit-element.js";
4
+ import { customElement as m } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
5
+ import { property as a } from "../node_modules/@lit/reactive-element/decorators/property.js";
6
+ import { computePosition as h, offset as f, flip as u, shift as y } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
7
+ import { css as E } from "../node_modules/@lit/reactive-element/css-tag.js";
8
+ var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (t, e, p, n) => {
9
+ for (var o = n > 1 ? void 0 : n ? v(e, p) : e, i = t.length - 1, l; i >= 0; i--)
10
+ (l = t[i]) && (o = (n ? l(e, p, o) : l(o)) || o);
11
+ return n && o && b(e, p, o), o;
12
+ };
13
+ let s = class extends d {
14
+ constructor() {
15
+ super(...arguments), this.open = !1, this.placement = "top-end", this.keepMounted = !1, this.referenceElement = null, this.popperElement = null, this.handleOutsideClick = (t) => {
16
+ if (!this.open) return;
17
+ const e = t.composedPath();
18
+ !e.includes(this) && this.referenceElement && !e.includes(this.referenceElement) && this.closePopper();
19
+ };
20
+ }
21
+ connectedCallback() {
22
+ super.connectedCallback(), document.addEventListener("mousedown", this.handleOutsideClick);
23
+ }
24
+ disconnectedCallback() {
25
+ document.removeEventListener("mousedown", this.handleOutsideClick), super.disconnectedCallback();
26
+ }
27
+ firstUpdated() {
28
+ this.referenceElement = this.querySelector('[slot="reference"]'), this.popperElement = this.shadowRoot.querySelector(".popper"), (!this.referenceElement || !this.popperElement) && console.error("Reference or popper element is missing!");
29
+ }
30
+ updated(t) {
31
+ t.has("open") && this.open && this.updatePopperPosition();
32
+ }
33
+ async updatePopperPosition() {
34
+ if (this.referenceElement && this.popperElement) {
35
+ const { x: t, y: e } = await h(this.referenceElement, this.popperElement, {
36
+ placement: this.placement,
37
+ middleware: [f(0), u(), y()]
38
+ }), p = this.referenceElement.offsetWidth - 12;
39
+ Object.assign(this.popperElement.style, {
40
+ left: `${t}px`,
41
+ top: `${e}px`,
42
+ width: `${p}px`
43
+ });
44
+ }
45
+ }
46
+ closePopper() {
47
+ this.open = !1, this.dispatchEvent(new CustomEvent("close", { detail: { closedBy: "outside" } }));
48
+ }
49
+ render() {
50
+ return c`
51
+ <slot name="reference"></slot>
52
+ <div class="popper ${this.open ? "open" : ""}">
53
+ <slot name="content"></slot>
54
+ </div>
55
+ `;
56
+ }
57
+ };
58
+ s.styles = E`
59
+ :host {
60
+ display: block;
61
+ position: relative;
62
+ }
63
+
64
+ .popper {
65
+ position: absolute;
66
+ min-width: max-content;
67
+ width: 100%;
68
+ top: 0;
69
+ left: 0;
70
+ background-color: var(--background-paper, #fff);
71
+ border-radius: 0.5rem;
72
+ padding: 0.375rem;
73
+ box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
74
+ z-index: 9999;
75
+ display: none;
76
+ opacity: 0;
77
+ transition: opacity 0.2s ease-in-out;
78
+ }
79
+
80
+ .popper.open {
81
+ display: block;
82
+ opacity: 1;
83
+ }
84
+ `;
85
+ r([
86
+ a({ type: Boolean })
87
+ ], s.prototype, "open", 2);
88
+ r([
89
+ a({ type: String })
90
+ ], s.prototype, "placement", 2);
91
+ r([
92
+ a({ type: Boolean })
93
+ ], s.prototype, "keepMounted", 2);
94
+ s = r([
95
+ m("lit-custom-popper")
96
+ ], s);
97
+ export {
98
+ s as LitCustomPopper
99
+ };