@db-ux/react-core-components 4.9.1 → 4.10.0-esm-94516f3

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 (131) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/README.md +97 -35
  3. package/dist/components/accordion/accordion.js +102 -86
  4. package/dist/components/accordion/model.js +4 -2
  5. package/dist/components/accordion-item/accordion-item.d.ts +2 -1
  6. package/dist/components/accordion-item/accordion-item.js +89 -56
  7. package/dist/components/accordion-item/model.d.ts +4 -0
  8. package/dist/components/badge/badge.js +72 -32
  9. package/dist/components/badge/model.js +12 -1
  10. package/dist/components/brand/brand.js +60 -13
  11. package/dist/components/button/button.js +75 -21
  12. package/dist/components/button/model.js +13 -2
  13. package/dist/components/card/card.js +65 -15
  14. package/dist/components/card/model.js +8 -2
  15. package/dist/components/checkbox/checkbox.js +163 -157
  16. package/dist/components/custom-button/custom-button.js +65 -10
  17. package/dist/components/custom-select/custom-select.js +509 -727
  18. package/dist/components/custom-select/model.js +8 -1
  19. package/dist/components/custom-select-dropdown/custom-select-dropdown.js +62 -11
  20. package/dist/components/custom-select-dropdown/model.js +8 -1
  21. package/dist/components/custom-select-form-field/custom-select-form-field.js +57 -10
  22. package/dist/components/custom-select-list/custom-select-list.js +60 -11
  23. package/dist/components/custom-select-list-item/custom-select-list-item.js +89 -32
  24. package/dist/components/custom-select-list-item/model.js +4 -1
  25. package/dist/components/divider/divider.js +60 -10
  26. package/dist/components/divider/model.js +4 -2
  27. package/dist/components/drawer/drawer.js +118 -97
  28. package/dist/components/drawer/model.js +14 -4
  29. package/dist/components/header/header.js +143 -65
  30. package/dist/components/icon/icon.js +61 -12
  31. package/dist/components/icon/model.js +11 -1
  32. package/dist/components/infotext/infotext.js +62 -12
  33. package/dist/components/input/input.js +198 -167
  34. package/dist/components/input/model.js +21 -5
  35. package/dist/components/link/link.js +70 -12
  36. package/dist/components/link/model.js +8 -3
  37. package/dist/components/navigation/navigation.js +57 -11
  38. package/dist/components/navigation-item/model.d.ts +4 -0
  39. package/dist/components/navigation-item/navigation-item.js +117 -81
  40. package/dist/components/notification/model.js +12 -3
  41. package/dist/components/notification/notification.js +100 -32
  42. package/dist/components/page/model.js +4 -2
  43. package/dist/components/page/page.js +74 -46
  44. package/dist/components/popover/popover.js +126 -125
  45. package/dist/components/radio/radio.js +124 -85
  46. package/dist/components/section/section.js +59 -10
  47. package/dist/components/select/select.js +188 -191
  48. package/dist/components/stack/model.js +14 -4
  49. package/dist/components/stack/stack.js +63 -10
  50. package/dist/components/switch/switch.js +182 -150
  51. package/dist/components/tab-item/tab-item.js +105 -76
  52. package/dist/components/tab-list/tab-list.js +60 -11
  53. package/dist/components/tab-panel/tab-panel.js +59 -13
  54. package/dist/components/tabs/model.js +4 -2
  55. package/dist/components/tabs/tabs.js +191 -178
  56. package/dist/components/tag/model.js +4 -1
  57. package/dist/components/tag/tag.js +91 -32
  58. package/dist/components/textarea/model.js +13 -2
  59. package/dist/components/textarea/textarea.js +165 -150
  60. package/dist/components/tooltip/model.js +4 -1
  61. package/dist/components/tooltip/tooltip.js +119 -115
  62. package/dist/index.js +64 -81
  63. package/dist/shared/constants.js +32 -94
  64. package/dist/shared/figma.d.ts +12 -6
  65. package/dist/shared/model.js +73 -22
  66. package/dist/utils/document-click-listener.js +26 -29
  67. package/dist/utils/document-scroll-listener.js +30 -38
  68. package/dist/utils/floating-components.js +107 -358
  69. package/dist/utils/form-components.js +34 -60
  70. package/dist/utils/index.js +49 -167
  71. package/dist/utils/navigation.js +68 -135
  72. package/dist/utils/react.js +10 -15
  73. package/package.json +11 -8
  74. package/dist/components/accordion/index.js +0 -1
  75. package/dist/components/accordion-item/index.js +0 -1
  76. package/dist/components/accordion-item/model.js +0 -1
  77. package/dist/components/badge/index.js +0 -1
  78. package/dist/components/brand/index.js +0 -1
  79. package/dist/components/brand/model.js +0 -1
  80. package/dist/components/button/index.js +0 -1
  81. package/dist/components/card/index.js +0 -1
  82. package/dist/components/checkbox/index.js +0 -1
  83. package/dist/components/checkbox/model.js +0 -1
  84. package/dist/components/custom-button/index.js +0 -1
  85. package/dist/components/custom-button/model.js +0 -1
  86. package/dist/components/custom-select/index.js +0 -1
  87. package/dist/components/custom-select-dropdown/index.js +0 -1
  88. package/dist/components/custom-select-form-field/index.js +0 -1
  89. package/dist/components/custom-select-form-field/model.js +0 -1
  90. package/dist/components/custom-select-list/index.js +0 -1
  91. package/dist/components/custom-select-list/model.js +0 -1
  92. package/dist/components/custom-select-list-item/index.js +0 -1
  93. package/dist/components/divider/index.js +0 -1
  94. package/dist/components/drawer/index.js +0 -1
  95. package/dist/components/header/index.js +0 -1
  96. package/dist/components/header/model.js +0 -1
  97. package/dist/components/icon/index.js +0 -1
  98. package/dist/components/infotext/index.js +0 -1
  99. package/dist/components/infotext/model.js +0 -1
  100. package/dist/components/input/index.js +0 -1
  101. package/dist/components/link/index.js +0 -1
  102. package/dist/components/navigation/index.js +0 -1
  103. package/dist/components/navigation/model.js +0 -1
  104. package/dist/components/navigation-item/index.js +0 -1
  105. package/dist/components/navigation-item/model.js +0 -1
  106. package/dist/components/notification/index.js +0 -1
  107. package/dist/components/page/index.js +0 -1
  108. package/dist/components/popover/index.js +0 -1
  109. package/dist/components/popover/model.js +0 -1
  110. package/dist/components/radio/index.js +0 -1
  111. package/dist/components/radio/model.js +0 -1
  112. package/dist/components/section/index.js +0 -1
  113. package/dist/components/section/model.js +0 -1
  114. package/dist/components/select/index.js +0 -1
  115. package/dist/components/select/model.js +0 -1
  116. package/dist/components/stack/index.js +0 -1
  117. package/dist/components/switch/index.js +0 -1
  118. package/dist/components/switch/model.js +0 -1
  119. package/dist/components/tab-item/index.js +0 -1
  120. package/dist/components/tab-item/model.js +0 -1
  121. package/dist/components/tab-list/index.js +0 -1
  122. package/dist/components/tab-list/model.js +0 -1
  123. package/dist/components/tab-panel/index.js +0 -1
  124. package/dist/components/tab-panel/model.js +0 -1
  125. package/dist/components/tabs/index.js +0 -1
  126. package/dist/components/tag/index.js +0 -1
  127. package/dist/components/textarea/index.js +0 -1
  128. package/dist/components/tooltip/index.js +0 -1
  129. package/dist/shared/examples/index.js +0 -4
  130. package/dist/shared/figma.js +0 -1
  131. package/dist/shared/showcase/show-code-link.js +0 -51
@@ -1,359 +1,108 @@
1
- // TODO: We should reevaluate this as soon as CSS Anchor Positioning is supported in all relevant browsers
2
- const isInView = (el) => {
3
- var _a;
4
- const { top, bottom, left, right } = el.getBoundingClientRect();
5
- const { innerHeight, innerWidth } = window;
6
- let outTop = top < 0;
7
- let outBottom = bottom > innerHeight;
8
- let outLeft = left < 0;
9
- let outRight = right > innerWidth;
10
- // We need to check if it was already outside
11
- const outsideY = el.dataset['outsideVy'];
12
- const outsideX = el.dataset['outsideVx'];
13
- const parentRect = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
14
- if (parentRect) {
15
- if (outsideY) {
16
- const position = el.dataset['outsideVy'];
17
- if (position === 'top') {
18
- outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
19
- }
20
- else {
21
- outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
22
- }
23
- }
24
- if (outsideX) {
25
- const position = el.dataset['outsideVx'];
26
- if (position === 'left') {
27
- outLeft = parentRect.left - (right - parentRect.right) < 0;
28
- }
29
- else {
30
- outRight = parentRect.right + (parentRect.left - left) > innerWidth;
31
- }
32
- }
33
- }
34
- return {
35
- outTop,
36
- outBottom,
37
- outLeft,
38
- outRight
39
- };
40
- };
41
- export const handleDataOutside = (el) => {
42
- const { outTop, outBottom, outLeft, outRight } = isInView(el);
43
- let dataOutsidePair = {};
44
- if (outTop || outBottom) {
45
- dataOutsidePair = {
46
- vy: outTop ? 'top' : 'bottom'
47
- };
48
- el.dataset['outsideVy'] = dataOutsidePair.vy;
49
- }
50
- else {
51
- delete el.dataset['outsideVy'];
52
- }
53
- if (outLeft || outRight) {
54
- dataOutsidePair = Object.assign(Object.assign({}, dataOutsidePair), { vx: outRight ? 'right' : 'left' });
55
- el.dataset['outsideVx'] = dataOutsidePair.vx;
56
- }
57
- else {
58
- delete el.dataset['outsideVx'];
59
- }
60
- return dataOutsidePair;
61
- };
62
- export const handleFixedDropdown = (element, parent, placement) => {
63
- if (!element || !parent)
64
- return;
65
- // We skip this if we are in mobile it's already fixed
66
- if (getComputedStyle(element).zIndex === '9999')
67
- return;
68
- const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
69
- const fullWidth = element.dataset['width'] === 'full';
70
- if (fullWidth) {
71
- element.style.inlineSize = `${width}px`;
72
- }
73
- if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
74
- element.style.insetInlineStart = `${left}px`;
75
- }
76
- else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
77
- element.style.insetInlineStart = `${right - childWidth}px`;
78
- }
79
- if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
80
- element.style.insetBlockStart = `${top - childHeight}px`;
81
- }
82
- else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
83
- element.style.insetBlockStart = `${bottom}px`;
84
- }
85
- element.style.position = 'fixed';
86
- };
87
- export const getFloatingProps = (element, parent, placement) => {
88
- if (!element || !parent) {
89
- return {
90
- top: 0,
91
- bottom: 0,
92
- right: 0,
93
- height: 0,
94
- width: 0,
95
- left: 0,
96
- childHeight: 0,
97
- childWidth: 0,
98
- correctedPlacement: placement,
99
- innerWidth: window.innerWidth,
100
- innerHeight: window.innerHeight
101
- };
102
- }
103
- const childRect = element.getBoundingClientRect();
104
- const { top, height, bottom, right, left, width } = parent.getBoundingClientRect();
105
- const { innerHeight, innerWidth } = window;
106
- let childHeight = childRect.height;
107
- let childWidth = childRect.width;
108
- if (placement === 'bottom' || placement === 'top') {
109
- childWidth = childWidth / 2;
110
- }
111
- if (placement === 'left' || placement === 'right') {
112
- childHeight = childHeight / 2;
113
- }
114
- const outsideBottom = bottom + childHeight > innerHeight;
115
- const outsideTop = top - childHeight < 0;
116
- const outsideLeft = left - childWidth < 0;
117
- const outsideRight = right + childWidth > innerWidth;
118
- let correctedPlacement = placement;
119
- if (placement.startsWith('bottom')) {
120
- if (outsideBottom) {
121
- correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('bottom', 'top');
122
- if (outsideLeft && outsideRight) {
123
- correctedPlacement = 'top';
124
- }
125
- else if (outsideLeft) {
126
- correctedPlacement = 'top-start';
127
- }
128
- else if (outsideRight) {
129
- correctedPlacement = 'top-end';
130
- }
131
- }
132
- else {
133
- if (outsideLeft && outsideRight) {
134
- correctedPlacement = 'bottom';
135
- }
136
- else if (outsideLeft) {
137
- correctedPlacement = 'bottom-start';
138
- }
139
- else if (outsideRight) {
140
- correctedPlacement = 'bottom-end';
141
- }
142
- }
143
- }
144
- else if (placement.startsWith('top')) {
145
- if (outsideTop) {
146
- correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('top', 'bottom');
147
- if (outsideLeft && outsideRight) {
148
- correctedPlacement = 'bottom';
149
- }
150
- else if (outsideLeft) {
151
- correctedPlacement = 'bottom-start';
152
- }
153
- else if (outsideRight) {
154
- correctedPlacement = 'bottom-end';
155
- }
156
- }
157
- else {
158
- if (outsideLeft && outsideRight) {
159
- correctedPlacement = 'top';
160
- }
161
- else if (outsideLeft) {
162
- correctedPlacement = 'top-start';
163
- }
164
- else if (outsideRight) {
165
- correctedPlacement = 'top-end';
166
- }
167
- }
168
- }
169
- else if (placement.startsWith('left')) {
170
- if (outsideLeft) {
171
- correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('left', 'right');
172
- if (outsideBottom && outsideTop) {
173
- correctedPlacement = 'right';
174
- }
175
- else if (outsideBottom) {
176
- correctedPlacement = 'right-end';
177
- }
178
- else if (outsideTop) {
179
- correctedPlacement = 'right-start';
180
- }
181
- }
182
- else {
183
- if (outsideBottom && outsideTop) {
184
- correctedPlacement = 'left';
185
- }
186
- else if (outsideBottom) {
187
- correctedPlacement = 'left-end';
188
- }
189
- else if (outsideTop) {
190
- correctedPlacement = 'left-start';
191
- }
192
- }
193
- }
194
- else if (correctedPlacement.startsWith('right')) {
195
- if (outsideRight) {
196
- correctedPlacement = placement === null || placement === void 0 ? void 0 : placement.replace('right', 'left');
197
- if (outsideBottom && outsideTop) {
198
- correctedPlacement = 'left';
199
- }
200
- else if (outsideBottom) {
201
- correctedPlacement = 'left-end';
202
- }
203
- else if (outsideTop) {
204
- correctedPlacement = 'left-start';
205
- }
206
- }
207
- else {
208
- if (outsideBottom && outsideTop) {
209
- correctedPlacement = 'right';
210
- }
211
- else if (outsideBottom) {
212
- correctedPlacement = 'right-end';
213
- }
214
- else if (outsideTop) {
215
- correctedPlacement = 'right-start';
216
- }
217
- }
218
- }
219
- return {
220
- top,
221
- bottom,
222
- right,
223
- height,
224
- width,
225
- left,
226
- childHeight: childRect.height,
227
- childWidth: childRect.width,
228
- correctedPlacement,
229
- innerWidth,
230
- innerHeight
231
- };
232
- };
233
- const MAX_ANCESTOR_DEPTH = 10;
234
- const ancestorCache = new WeakMap();
235
- const getAncestorHasCorrectedPlacement = (element) => {
236
- if (ancestorCache.has(element)) {
237
- return ancestorCache.get(element);
238
- }
239
- let current = element.parentElement;
240
- let anchor = 0;
241
- while (current && anchor < MAX_ANCESTOR_DEPTH) {
242
- if (current.dataset['correctedPlacement']) {
243
- ancestorCache.set(element, current);
244
- return current;
245
- }
246
- current = current.parentElement;
247
- anchor += 1;
248
- }
249
- ancestorCache.set(element, null);
250
- return null;
251
- };
252
- export const handleFixedPopover = (element, parent, placement) => {
253
- var _a, _b;
254
- if (!element || !parent)
255
- return;
256
- const parentComputedStyles = getComputedStyle(parent);
257
- const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
258
- const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
259
- const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
260
- const distance = (_b = (_a = getComputedStyle(element)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--db-popover-distance')) !== null && _b !== void 0 ? _b : '0px';
261
- let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
262
- if (ancestorWithCorrectedPlacement) {
263
- const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
264
- left = Math.abs(left - ancestorRect.left);
265
- right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
266
- top = Math.abs(top - ancestorRect.top);
267
- bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
268
- }
269
- if (parentHasFloatingPosition) {
270
- /*
271
- * If we have a floating element inside an element with position:absolute/fixed
272
- * we need to calculate with relative values
273
- * */
274
- left = 0;
275
- right = width;
276
- top = 0;
277
- bottom = height;
278
- if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
279
- // We need the default zIndex for floating elements on the parent
280
- parent.style.zIndex = '1';
281
- }
282
- }
283
- // Tooltip arrow position
284
- if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
285
- const diff = width / 2 / childWidth * 100;
286
- if (correctedPlacement.endsWith('start')) {
287
- element.style.setProperty('--db-tooltip-arrow-inline-start', `${diff}%`);
288
- }
289
- else if (correctedPlacement.endsWith('end')) {
290
- element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
291
- }
292
- else {
293
- element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
294
- }
295
- }
296
- if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
297
- const diff = height / 2 / childHeight * 100;
298
- if (correctedPlacement.endsWith('start')) {
299
- element.style.setProperty('--db-tooltip-arrow-block-start', `${diff}%`);
300
- }
301
- else if (correctedPlacement.endsWith('end')) {
302
- element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
303
- }
304
- else {
305
- element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
306
- }
307
- }
308
- // Popover position
309
- if (correctedPlacement === 'right' || correctedPlacement === 'left') {
310
- // center horizontally
311
- element.style.insetBlockStart = `${top + height / 2}px`;
312
- }
313
- else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
314
- const end = top + childHeight;
315
- element.style.insetBlockStart = `${top}px`;
316
- element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
317
- }
318
- else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
319
- const start = bottom - childHeight;
320
- element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
321
- element.style.insetBlockEnd = `${bottom}px`;
322
- }
323
- else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
324
- // center vertically
325
- element.style.insetInlineStart = `${left + width / 2}px`;
326
- }
327
- else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
328
- const end = left + childWidth;
329
- element.style.insetInlineStart = `${left}px`;
330
- element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
331
- }
332
- else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
333
- const start = right - childWidth;
334
- element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
335
- element.style.insetInlineEnd = `${right}px`;
336
- }
337
- if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('right')) {
338
- const end = right + childWidth;
339
- element.style.insetInlineStart = `calc(${right}px + ${distance})`;
340
- element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
341
- }
342
- else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('left')) {
343
- const start = left - childWidth;
344
- element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
345
- element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
346
- }
347
- else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
348
- const start = top - childHeight;
349
- element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
350
- element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
351
- }
352
- else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
353
- const end = bottom + childHeight;
354
- element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
355
- element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
356
- }
357
- element.style.position = 'fixed';
358
- element.dataset['correctedPlacement'] = correctedPlacement;
1
+ //#region src/utils/floating-components.ts
2
+ var e = (e) => {
3
+ let { top: t, bottom: n, left: r, right: i } = e.getBoundingClientRect(), { innerHeight: a, innerWidth: o } = window, s = t < 0, c = n > a, l = r < 0, u = i > o, d = e.dataset.outsideVy, f = e.dataset.outsideVx, p = e?.parentElement?.getBoundingClientRect();
4
+ return p && (d && (e.dataset.outsideVy === "top" ? s = p.top - (n - p.bottom) < 0 : c = p.bottom + (p.top - t) > a), f && (e.dataset.outsideVx === "left" ? l = p.left - (i - p.right) < 0 : u = p.right + (p.left - r) > o)), {
5
+ outTop: s,
6
+ outBottom: c,
7
+ outLeft: l,
8
+ outRight: u
9
+ };
10
+ }, t = (t) => {
11
+ let { outTop: n, outBottom: r, outLeft: i, outRight: a } = e(t), o = {};
12
+ return n || r ? (o = { vy: n ? "top" : "bottom" }, t.dataset.outsideVy = o.vy) : delete t.dataset.outsideVy, i || a ? (o = {
13
+ ...o,
14
+ vx: a ? "right" : "left"
15
+ }, t.dataset.outsideVx = o.vx) : delete t.dataset.outsideVx, o;
16
+ }, n = (e, t, n) => {
17
+ if (!e || !t || getComputedStyle(e).zIndex === "9999") return;
18
+ let { top: i, bottom: a, childHeight: o, childWidth: s, width: c, right: l, left: u, correctedPlacement: d } = r(e, t, n);
19
+ e.dataset.width === "full" && (e.style.inlineSize = `${c}px`), d === "top" || d === "bottom" || d === "top-start" || d === "bottom-start" ? e.style.insetInlineStart = `${u}px` : (d === "top-end" || d === "bottom-end") && (e.style.insetInlineStart = `${l - s}px`), d?.startsWith("top") ? e.style.insetBlockStart = `${i - o}px` : d?.startsWith("bottom") && (e.style.insetBlockStart = `${a}px`), e.style.position = "fixed";
20
+ }, r = (e, t, n) => {
21
+ if (!e || !t) return {
22
+ top: 0,
23
+ bottom: 0,
24
+ right: 0,
25
+ height: 0,
26
+ width: 0,
27
+ left: 0,
28
+ childHeight: 0,
29
+ childWidth: 0,
30
+ correctedPlacement: n,
31
+ innerWidth: window.innerWidth,
32
+ innerHeight: window.innerHeight
33
+ };
34
+ let r = e.getBoundingClientRect(), { top: i, height: a, bottom: o, right: s, left: c, width: l } = t.getBoundingClientRect(), { innerHeight: u, innerWidth: d } = window, f = r.height, p = r.width;
35
+ (n === "bottom" || n === "top") && (p /= 2), (n === "left" || n === "right") && (f /= 2);
36
+ let m = o + f > u, h = i - f < 0, g = c - p < 0, _ = s + p > d, v = n;
37
+ return n.startsWith("bottom") ? m ? (v = n?.replace("bottom", "top"), g && _ ? v = "top" : g ? v = "top-start" : _ && (v = "top-end")) : g && _ ? v = "bottom" : g ? v = "bottom-start" : _ && (v = "bottom-end") : n.startsWith("top") ? h ? (v = n?.replace("top", "bottom"), g && _ ? v = "bottom" : g ? v = "bottom-start" : _ && (v = "bottom-end")) : g && _ ? v = "top" : g ? v = "top-start" : _ && (v = "top-end") : n.startsWith("left") ? g ? (v = n?.replace("left", "right"), m && h ? v = "right" : m ? v = "right-end" : h && (v = "right-start")) : m && h ? v = "left" : m ? v = "left-end" : h && (v = "left-start") : v.startsWith("right") && (_ ? (v = n?.replace("right", "left"), m && h ? v = "left" : m ? v = "left-end" : h && (v = "left-start")) : m && h ? v = "right" : m ? v = "right-end" : h && (v = "right-start")), {
38
+ top: i,
39
+ bottom: o,
40
+ right: s,
41
+ height: a,
42
+ width: l,
43
+ left: c,
44
+ childHeight: r.height,
45
+ childWidth: r.width,
46
+ correctedPlacement: v,
47
+ innerWidth: d,
48
+ innerHeight: u
49
+ };
50
+ }, i = 10, a = /* @__PURE__ */ new WeakMap(), o = (e) => {
51
+ if (a.has(e)) return a.get(e);
52
+ let t = e.parentElement, n = 0;
53
+ for (; t && n < i;) {
54
+ if (t.dataset.correctedPlacement) return a.set(e, t), t;
55
+ t = t.parentElement, n += 1;
56
+ }
57
+ return a.set(e, null), null;
58
+ }, s = (e, t, n) => {
59
+ if (!e || !t) return;
60
+ let i = getComputedStyle(t), a = ["absolute", "fixed"].includes(i.position), s = o(e), c = !s && !a, l = getComputedStyle(e)?.getPropertyValue("--db-popover-distance") ?? "0px", { top: u, height: d, width: f, childHeight: p, childWidth: m, right: h, left: g, bottom: _, correctedPlacement: v, innerWidth: y, innerHeight: b } = r(e, t, n);
61
+ if (s) {
62
+ let e = s.getBoundingClientRect();
63
+ g = Math.abs(g - e.left), h = (f + Math.abs(h - e.right)) * 1.5, u = Math.abs(u - e.top), _ = (d + Math.abs(_ - e.bottom)) * 1.5;
64
+ }
65
+ if (a && (g = 0, h = f, u = 0, _ = d, [
66
+ "auto",
67
+ "inherit",
68
+ "0"
69
+ ].includes(i.zIndex) && (t.style.zIndex = "1")), m > f && (v.startsWith("bottom") || v.startsWith("top"))) {
70
+ let t = f / 2 / m * 100;
71
+ v.endsWith("start") ? e.style.setProperty("--db-tooltip-arrow-inline-start", `${t}%`) : v.endsWith("end") ? e.style.setProperty("--db-tooltip-arrow-inline-start", `${100 - t}%`) : e.style.setProperty("--db-tooltip-arrow-inline-start", "50%");
72
+ }
73
+ if (p > d && (v.startsWith("left") || v.startsWith("bottom"))) {
74
+ let t = d / 2 / p * 100;
75
+ v.endsWith("start") ? e.style.setProperty("--db-tooltip-arrow-block-start", `${t}%`) : v.endsWith("end") ? e.style.setProperty("--db-tooltip-arrow-block-start", `${100 - t}%`) : e.style.setProperty("--db-tooltip-arrow-block-start", "50%");
76
+ }
77
+ if (v === "right" || v === "left") e.style.insetBlockStart = `${u + d / 2}px`;
78
+ else if (v === "right-start" || v === "left-start") {
79
+ let t = u + p;
80
+ e.style.insetBlockStart = `${u}px`, e.style.insetBlockEnd = `${!a && t > b ? b : t}px`;
81
+ } else if (v === "right-end" || v === "left-end") {
82
+ let t = _ - p;
83
+ e.style.insetBlockStart = `${!a && t < 0 ? 0 : t}px`, e.style.insetBlockEnd = `${_}px`;
84
+ } else if (v === "top" || v === "bottom") e.style.insetInlineStart = `${g + f / 2}px`;
85
+ else if (v === "top-start" || v === "bottom-start") {
86
+ let t = g + m;
87
+ e.style.insetInlineStart = `${g}px`, e.style.insetInlineEnd = `${!a && t > y ? y : t}px`;
88
+ } else if (v === "top-end" || v === "bottom-end") {
89
+ let t = h - m;
90
+ e.style.insetInlineStart = `${!a && t < 0 ? 0 : t}px`, e.style.insetInlineEnd = `${h}px`;
91
+ }
92
+ if (v?.startsWith("right")) {
93
+ let t = h + m;
94
+ e.style.insetInlineStart = `calc(${h}px + ${l})`, e.style.insetInlineEnd = `calc(${c && t > y ? y : t}px + ${l})`;
95
+ } else if (v?.startsWith("left")) {
96
+ let t = g - m;
97
+ e.style.insetInlineStart = `calc(${c && t < 0 ? 0 : t}px - ${l})`, e.style.insetInlineEnd = `calc(${h}px - ${l})`;
98
+ } else if (v?.startsWith("top")) {
99
+ let t = u - p;
100
+ e.style.insetBlockStart = `calc(${c && t < 0 ? 0 : t}px - ${l})`, e.style.insetBlockEnd = `calc(${a ? t : _}px - ${l})`;
101
+ } else if (v?.startsWith("bottom")) {
102
+ let t = _ + p;
103
+ e.style.insetBlockStart = `calc(${a ? t : _}px + ${l})`, e.style.insetBlockEnd = `calc(${c && t > b ? b : t}px + ${l})`;
104
+ }
105
+ e.style.position = "fixed", e.dataset.correctedPlacement = v;
359
106
  };
107
+ //#endregion
108
+ export { r as getFloatingProps, t as handleDataOutside, n as handleFixedDropdown, s as handleFixedPopover };
@@ -1,61 +1,35 @@
1
- /* eslint-disable @typescript-eslint/no-explicit-any */
2
- import { delay } from './index';
3
- const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
4
- export const handleFrameworkEventAngular = (component, event, modelValue = 'value', lastValue) => {
5
- var _a;
6
- const value = event.target[modelValue];
7
- const type = (_a = event.target) === null || _a === void 0 ? void 0 : _a.type;
8
- if (!value && value !== '' && ['date', 'time', 'week', 'month', 'datetime-local'].includes(type)) {
9
- // If value is empty and type date we skip `writingValue` function
10
- return;
11
- }
12
- if (type === 'number') {
13
- if (event.type === 'input') {
14
- if (specialNumberCharacters.includes(event.data) || specialNumberCharacters.some(specialCharacter => lastValue === null || lastValue === void 0 ? void 0 : lastValue.toString().includes(specialCharacter)) && event.inputType === 'deleteContentBackward') {
15
- // Skip `writingValue` function if number type and input event
16
- // and `.` or `,` or 'e', 'E', '+', '-' was typed
17
- // or content was deleted but last number had a `.`
18
- return;
19
- }
20
- }
21
- else if (event.type === 'change') {
22
- // Skip `writingValue` function if number type and change event
23
- return;
24
- }
25
- }
26
- component.propagateChange(value);
27
- component.writeValue(value);
28
- };
29
- export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
30
- // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
31
- emit(`update:${modelValue}`, event.target[modelValue]);
32
- };
33
- export const addResetEventListener = (element, resetFunction, signal) => {
34
- if (element.form && !element._dbFormResetListenerAdded) {
35
- element.form.addEventListener('reset', (event) => {
36
- resetFunction(event);
37
- }, {
38
- signal
39
- });
40
- // Mark as added to avoid duplicate listeners
41
- element._dbFormResetListenerAdded = true;
42
- }
43
- };
44
- export const addCheckedResetEventListener = (element, props, resetFunction, signal) => {
45
- addResetEventListener(element, (event) => {
46
- void delay(() => {
47
- const resetValue = props.checked ? props.checked : props.defaultChecked ? props.defaultChecked : element.checked;
48
- const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { checked: resetValue }) });
49
- resetFunction(valueEvent);
50
- }, 1);
51
- }, signal);
52
- };
53
- export const addValueResetEventListener = (element, props, resetFunction, signal) => {
54
- addResetEventListener(element, (event) => {
55
- void delay(() => {
56
- const resetValue = props.value ? props.value : props.defaultValue ? props.defaultValue : element.value;
57
- const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: resetValue }) });
58
- resetFunction(valueEvent);
59
- }, 1);
60
- }, signal);
1
+ import { delay as e } from "./index.js";
2
+ //#region src/utils/form-components.ts
3
+ var t = (e, t, n) => {
4
+ e.form && !e._dbFormResetListenerAdded && (e.form.addEventListener("reset", (e) => {
5
+ t(e);
6
+ }, { signal: n }), e._dbFormResetListenerAdded = !0);
7
+ }, n = (n, r, i, a) => {
8
+ t(n, (t) => {
9
+ e(() => {
10
+ let e = r.checked ? r.checked : r.defaultChecked ? r.defaultChecked : n.checked;
11
+ i({
12
+ ...t,
13
+ target: {
14
+ ...t.target,
15
+ checked: e
16
+ }
17
+ });
18
+ }, 1);
19
+ }, a);
20
+ }, r = (n, r, i, a) => {
21
+ t(n, (t) => {
22
+ e(() => {
23
+ let e = r.value ? r.value : r.defaultValue ? r.defaultValue : n.value;
24
+ i({
25
+ ...t,
26
+ target: {
27
+ ...t.target,
28
+ value: e
29
+ }
30
+ });
31
+ }, 1);
32
+ }, a);
61
33
  };
34
+ //#endregion
35
+ export { n as addCheckedResetEventListener, t as addResetEventListener, r as addValueResetEventListener };