@agnos-ui/core 0.8.0-next.0 → 0.8.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.
- package/{accordion-hVi2XRk-.js → accordion-BLVIYePx.js} +3 -3
- package/{accordion-DTQj-TQ1.cjs → accordion-vfnqMstG.cjs} +1 -1
- package/{alert-BSixS_cz.js → alert-BpepSIHu.js} +1 -1
- package/{alert-BrVkxOnA.cjs → alert-D6W48Ffr.cjs} +1 -1
- package/{common-CcQOJ_hf.cjs → common-BToNPUDq.cjs} +1 -1
- package/{common-CuZAeECD.js → common-BqUjUBPy.js} +1 -1
- package/components/accordion/index.cjs +1 -1
- package/components/accordion/index.js +1 -1
- package/components/alert/index.cjs +1 -1
- package/components/alert/index.js +1 -1
- package/components/carousel/carousel.d.ts +232 -0
- package/components/carousel/index.cjs +288 -0
- package/components/carousel/index.d.ts +1 -0
- package/components/carousel/index.js +288 -0
- package/components/modal/index.cjs +1 -1
- package/components/modal/index.js +1 -1
- package/components/pagination/index.cjs +1 -1
- package/components/pagination/index.js +1 -1
- package/components/progressbar/index.cjs +1 -1
- package/components/progressbar/index.js +1 -1
- package/components/rating/index.cjs +1 -1
- package/components/rating/index.js +1 -1
- package/components/select/index.js +1 -1
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.js +1 -1
- package/components/toast/index.cjs +5 -3
- package/components/toast/index.d.ts +1 -0
- package/components/toast/index.js +3 -1
- package/components/toast/toaster.d.ts +128 -0
- package/components/tree/index.cjs +1 -1
- package/components/tree/index.js +1 -1
- package/config.d.ts +5 -0
- package/{dom-BB9jLllr.js → dom-gfxqXJpK.js} +1 -1
- package/index.cjs +15 -12
- package/index.js +21 -18
- package/{modal-BQcw6bnM.js → modal-CGK3h9pR.js} +3 -3
- package/{modal-B7bYoubx.cjs → modal-Dw1MuWPV.cjs} +1 -1
- package/package.json +4 -1
- package/{pagination-5YARuB3V.cjs → pagination-BzyKulaI.cjs} +1 -1
- package/{pagination-BwaZEokc.js → pagination-CRAKaOuh.js} +2 -2
- package/{progressbar-b_kXzGPc.js → progressbar-Csnqx_Pk.js} +2 -2
- package/{progressbar-BpSrg4HG.cjs → progressbar-D9rvrxXi.cjs} +1 -1
- package/{promise-CBh_HbSK.js → promise-XSP94FjG.js} +1 -1
- package/{rating-C8tn9xTO.cjs → rating-C4c8Paz-.cjs} +1 -1
- package/{rating-B1JLZgIR.js → rating-CvTnNxgN.js} +2 -2
- package/{select-Bb2RAVs0.js → select-C-77MJfC.js} +1 -1
- package/services/floatingUI.js +2 -2
- package/services/focustrack.js +1 -1
- package/services/matchMedia.js +1 -1
- package/services/navManager.js +1 -1
- package/services/portal.js +1 -1
- package/services/resizeObserver.js +1 -1
- package/services/siblingsInert.js +1 -1
- package/services/transitions/baseTransitions.cjs +1 -1
- package/services/transitions/baseTransitions.js +3 -3
- package/services/transitions/collapse.js +1 -1
- package/services/transitions/cssTransitions.js +2 -2
- package/services/transitions/simpleClassTransition.js +1 -1
- package/{slider-B2JFXDLt.cjs → slider-B0ZfAY0K.cjs} +200 -97
- package/{slider-C-BSdQ0b.js → slider-BF6a0eh_.js} +201 -98
- package/toaster-B2ibv38T.cjs +208 -0
- package/toaster-PwfLC7FH.js +209 -0
- package/{tree-DWv0zwFJ.js → tree-DUU_TWqy.js} +2 -2
- package/{tree-D4t2SOql.cjs → tree-Dwv2U0ea.cjs} +1 -1
- package/utils/directive.js +1 -1
- package/utils/stores.js +2 -2
- package/utils/writables.cjs +2 -1
- package/utils/writables.d.ts +7 -0
- package/utils/writables.js +7 -6
- package/{writables-BPAJvaL_.cjs → writables-Bn3uhKEG.cjs} +4 -0
- package/{writables-DCiBdIBK.js → writables-CgpOQ4hA.js} +10 -6
- package/toast-Bw2QSzBX.js +0 -64
- package/toast-CaIcB2sD.cjs +0 -63
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { computed, writable, readable } from "@amadeus-it-group/tansu";
|
|
2
|
-
import { j as createBrowserStoreDirective, k as mergeDirectives, n as createAttributesDirective } from "./dom-
|
|
2
|
+
import { j as createBrowserStoreDirective, g as createBrowserStoreArrayDirective, k as mergeDirectives, n as createAttributesDirective, b as browserDirective } from "./dom-gfxqXJpK.js";
|
|
3
3
|
import { noop } from "./utils/func.js";
|
|
4
4
|
import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
|
|
5
|
-
import {
|
|
5
|
+
import { i as typeArray, e as typeString, c as typeBoolean, b as typeNumberInRangeFactory, g as typeFunction, a as typeNumber } from "./writables-CgpOQ4hA.js";
|
|
6
6
|
import { createResizeObserver } from "./services/resizeObserver.js";
|
|
7
7
|
const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
|
|
8
8
|
function getDecimalPrecision(number) {
|
|
@@ -114,6 +114,7 @@ function createSlider(config) {
|
|
|
114
114
|
] = writablesForProps(defaultSliderConfig, config, configValidator);
|
|
115
115
|
const { vertical$, disabled$, readonly$ } = stateProps;
|
|
116
116
|
let _prevCoordinate = -1;
|
|
117
|
+
const _handleElements = /* @__PURE__ */ new Map();
|
|
117
118
|
const min$ = computed(() => {
|
|
118
119
|
const _dirtyMinimum = _dirtyMinimum$(), _dirtyMaximum = _dirtyMaximum$();
|
|
119
120
|
if (_dirtyMinimum === _dirtyMaximum) {
|
|
@@ -145,8 +146,20 @@ function createSlider(config) {
|
|
|
145
146
|
const { directive: sliderDirective, element$: sliderDom$ } = createBrowserStoreDirective();
|
|
146
147
|
const { directive: minLabelDomDirective, element$: minLabelDom$ } = createBrowserStoreDirective();
|
|
147
148
|
const { directive: maxLabelDomDirective, element$: maxLabelDom$ } = createBrowserStoreDirective();
|
|
149
|
+
const { directive: combinedLabelDomDirective, element$: combinedLabelDom$ } = createBrowserStoreDirective();
|
|
150
|
+
const { directive: handleLabelDirective, elements$: currentLabelDoms$ } = createBrowserStoreArrayDirective();
|
|
148
151
|
const { directive: resizeDirective, dimensions$ } = createResizeObserver();
|
|
149
152
|
const updateSliderSize$ = writable({});
|
|
153
|
+
const currentLabelDomsRect$ = computed(
|
|
154
|
+
() => {
|
|
155
|
+
dimensions$();
|
|
156
|
+
updateSliderSize$();
|
|
157
|
+
return currentLabelDoms$().map((element) => element.getBoundingClientRect());
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
equal: Object.is
|
|
161
|
+
}
|
|
162
|
+
);
|
|
150
163
|
const sliderDomRect$ = computed(
|
|
151
164
|
() => {
|
|
152
165
|
var _a;
|
|
@@ -201,17 +214,43 @@ function createSlider(config) {
|
|
|
201
214
|
});
|
|
202
215
|
const valuesPercent$ = computed(() => values$().map((val) => percentCompute(val)));
|
|
203
216
|
const sortedValuesPercent$ = computed(() => [...valuesPercent$()].sort((a, b) => a - b));
|
|
204
|
-
const
|
|
205
|
-
|
|
217
|
+
const minLabelSize$ = computed(() => {
|
|
218
|
+
const minLabelDomRect = minLabelDomRect$();
|
|
219
|
+
return pixelToPercent(vertical$() ? minLabelDomRect.height : minLabelDomRect.width);
|
|
220
|
+
});
|
|
221
|
+
const maxLabelSize$ = computed(() => {
|
|
222
|
+
const maxLabelDomRect = maxLabelDomRect$();
|
|
223
|
+
return pixelToPercent(vertical$() ? maxLabelDomRect.height : maxLabelDomRect.width);
|
|
224
|
+
});
|
|
206
225
|
const adjustedShowValueLabels$ = computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
|
|
226
|
+
const pixelToPercent = (pixels) => pixels ? pixels / sliderDomRectSize$() * 100 : 0;
|
|
227
|
+
const combinedLabelSize$ = computed(
|
|
228
|
+
() => {
|
|
229
|
+
var _a, _b;
|
|
230
|
+
return pixelToPercent(vertical$() ? (_a = combinedLabelDom$()) == null ? void 0 : _a.getBoundingClientRect().height : (_b = combinedLabelDom$()) == null ? void 0 : _b.getBoundingClientRect().width);
|
|
231
|
+
}
|
|
232
|
+
);
|
|
233
|
+
const combinedLabelPosition$ = computed(() => vertical$() ? combinedLabelPositionTop$() : combinedLabelPositionLeft$());
|
|
234
|
+
const currentLabelSizeByIndex = (index) => {
|
|
235
|
+
var _a, _b;
|
|
236
|
+
return pixelToPercent(vertical$() ? (_a = currentLabelDomsRect$()[index]) == null ? void 0 : _a.height : (_b = currentLabelDomsRect$()[index]) == null ? void 0 : _b.width);
|
|
237
|
+
};
|
|
207
238
|
const minValueLabelDisplay$ = computed(() => {
|
|
208
239
|
if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
|
|
209
240
|
return false;
|
|
210
241
|
} else if (!showValueLabels$()) {
|
|
211
242
|
return true;
|
|
212
243
|
}
|
|
213
|
-
const
|
|
214
|
-
|
|
244
|
+
const minLabelSize = minLabelSize$();
|
|
245
|
+
const vertical = vertical$();
|
|
246
|
+
const rtl = rtl$();
|
|
247
|
+
if (combinedLabelDisplay$()) {
|
|
248
|
+
const combinedLabelSize = combinedLabelSize$();
|
|
249
|
+
const combinedLabelPosition = combinedLabelPosition$();
|
|
250
|
+
return rtl && !vertical || vertical && !rtl ? combinedLabelPosition + combinedLabelSize / 2 < 100 - minLabelSize - 1 : combinedLabelPosition - combinedLabelSize / 2 > minLabelSize + 1;
|
|
251
|
+
}
|
|
252
|
+
const sortedValuesPercent = sortedValuesPercent$();
|
|
253
|
+
return rtl ? sortedValuesPercent[0] - currentLabelSizeByIndex(sortedValuesPercent.length - 1) / 2 > minLabelSize + 1 : sortedValuesPercent[0] - currentLabelSizeByIndex(0) / 2 > minLabelSize + 1;
|
|
215
254
|
});
|
|
216
255
|
const maxValueLabelDisplay$ = computed(() => {
|
|
217
256
|
if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
|
|
@@ -219,12 +258,29 @@ function createSlider(config) {
|
|
|
219
258
|
} else if (!showValueLabels$()) {
|
|
220
259
|
return true;
|
|
221
260
|
}
|
|
222
|
-
const
|
|
223
|
-
|
|
261
|
+
const maxLabelSize = maxLabelSize$();
|
|
262
|
+
const vertical = vertical$();
|
|
263
|
+
const rtl = rtl$();
|
|
264
|
+
if (combinedLabelDisplay$()) {
|
|
265
|
+
const combinedLabelSize = combinedLabelSize$();
|
|
266
|
+
const combinedLabelPosition = combinedLabelPosition$();
|
|
267
|
+
return rtl && !vertical || vertical && !rtl ? combinedLabelPosition - combinedLabelSize / 2 > maxLabelSize + 1 : combinedLabelPosition + combinedLabelSize / 2 < 100 - maxLabelSize - 1;
|
|
268
|
+
}
|
|
269
|
+
const sortedValuesPercent = sortedValuesPercent$();
|
|
270
|
+
return rtl ? 100 - sortedValuesPercent[sortedValuesPercent.length - 1] - currentLabelSizeByIndex(0) / 2 > maxLabelSize + 1 : sortedValuesPercent[sortedValuesPercent.length - 1] + currentLabelSizeByIndex(sortedValuesPercent.length - 1) / 2 < 100 - maxLabelSize - 1;
|
|
224
271
|
});
|
|
272
|
+
const storedLabelSize$ = writable([]);
|
|
225
273
|
const combinedLabelDisplay$ = computed(() => {
|
|
226
|
-
const values =
|
|
227
|
-
|
|
274
|
+
const values = sortedValuesPercent$();
|
|
275
|
+
if (currentLabelDomsRect$().length === values.length) {
|
|
276
|
+
storedLabelSize$.set(values.map((_, index) => currentLabelSizeByIndex(index) / 2));
|
|
277
|
+
}
|
|
278
|
+
const storedLabelSize = storedLabelSize$();
|
|
279
|
+
const firstLabelSize = (storedLabelSize == null ? void 0 : storedLabelSize[0]) ?? 0;
|
|
280
|
+
const secondLabelSize = (storedLabelSize == null ? void 0 : storedLabelSize[1]) ?? 0;
|
|
281
|
+
const biggestLabelSize = Math.max(firstLabelSize, secondLabelSize);
|
|
282
|
+
const intersectionLimit = biggestLabelSize !== 50 ? biggestLabelSize * 2 + 2 : 15;
|
|
283
|
+
return values.length == 2 && values[1] - secondLabelSize - values[0] + firstLabelSize < intersectionLimit;
|
|
228
284
|
});
|
|
229
285
|
const interactive$ = computed(() => !disabled$() && !readonly$());
|
|
230
286
|
const combinedLabelPositionLeft$ = computed(() => {
|
|
@@ -331,11 +387,15 @@ function createSlider(config) {
|
|
|
331
387
|
const closestValue = sortedValues[clickedPercent * 100 <= midPoint ? closestBiggerIndex - 1 : closestBiggerIndex];
|
|
332
388
|
return values.indexOf(closestValue);
|
|
333
389
|
};
|
|
390
|
+
const getClickedPercent = (clickedCoordinate) => {
|
|
391
|
+
const sliderDomRectSize = sliderDomRectSize$(), sliderDomRectOffset = sliderDomRectOffset$();
|
|
392
|
+
let clickedPercent = vertical$() ? (sliderDomRectSize - clickedCoordinate + sliderDomRectOffset) / sliderDomRectSize : (clickedCoordinate - sliderDomRectOffset) / sliderDomRectSize;
|
|
393
|
+
clickedPercent = rtl$() ? 1 - clickedPercent : clickedPercent;
|
|
394
|
+
return clickedPercent;
|
|
395
|
+
};
|
|
334
396
|
const adjustCoordinate = (clickedCoordinate, handleNumber) => {
|
|
335
397
|
if (interactive$()) {
|
|
336
|
-
const
|
|
337
|
-
let clickedPercent = vertical$() ? (sliderDomRectSize - clickedCoordinate + sliderDomRectOffset) / sliderDomRectSize : (clickedCoordinate - sliderDomRectOffset) / sliderDomRectSize;
|
|
338
|
-
clickedPercent = rtl$() ? 1 - clickedPercent : clickedPercent;
|
|
398
|
+
const clickedPercent = getClickedPercent(clickedCoordinate);
|
|
339
399
|
const derivedHandleIndex = handleNumber ?? getClosestSliderHandle(clickedPercent);
|
|
340
400
|
const newValue = clickedPercent * (max$() - min$()) + min$();
|
|
341
401
|
values$.update((dh) => {
|
|
@@ -384,6 +444,77 @@ function createSlider(config) {
|
|
|
384
444
|
"aria-hidden": readable("true")
|
|
385
445
|
}
|
|
386
446
|
}));
|
|
447
|
+
const handleElementDirective = browserDirective((handleItem, args) => {
|
|
448
|
+
const destroy = () => {
|
|
449
|
+
_handleElements.delete(args.item.id);
|
|
450
|
+
};
|
|
451
|
+
const update = (args2) => {
|
|
452
|
+
_handleElements.set(args2.item.id, handleItem);
|
|
453
|
+
};
|
|
454
|
+
update(args);
|
|
455
|
+
return {
|
|
456
|
+
update,
|
|
457
|
+
destroy
|
|
458
|
+
};
|
|
459
|
+
});
|
|
460
|
+
const mouseDown = (event, handleId) => {
|
|
461
|
+
event.preventDefault();
|
|
462
|
+
const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
|
|
463
|
+
const handleDrag = (e) => {
|
|
464
|
+
e.preventDefault();
|
|
465
|
+
const newCoord = vertical$() ? e.clientY : e.clientX;
|
|
466
|
+
currentTarget == null ? void 0 : currentTarget.focus();
|
|
467
|
+
if (_prevCoordinate !== newCoord) {
|
|
468
|
+
_prevCoordinate = newCoord;
|
|
469
|
+
adjustCoordinate(newCoord, handleId);
|
|
470
|
+
}
|
|
471
|
+
};
|
|
472
|
+
if (interactive$()) {
|
|
473
|
+
updateSliderSize$.set({});
|
|
474
|
+
currentTarget == null ? void 0 : currentTarget.focus();
|
|
475
|
+
document.addEventListener("mousemove", handleDrag);
|
|
476
|
+
document.addEventListener(
|
|
477
|
+
"mouseup",
|
|
478
|
+
() => {
|
|
479
|
+
document.removeEventListener("mousemove", handleDrag);
|
|
480
|
+
},
|
|
481
|
+
{ once: true }
|
|
482
|
+
);
|
|
483
|
+
}
|
|
484
|
+
};
|
|
485
|
+
const touchStart = (event, handleId) => {
|
|
486
|
+
const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
|
|
487
|
+
const handleDrag = (e) => {
|
|
488
|
+
e.preventDefault();
|
|
489
|
+
const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
|
|
490
|
+
currentTarget == null ? void 0 : currentTarget.focus();
|
|
491
|
+
if (_prevCoordinate !== newCoord) {
|
|
492
|
+
_prevCoordinate = newCoord;
|
|
493
|
+
adjustCoordinate(newCoord, handleId);
|
|
494
|
+
}
|
|
495
|
+
};
|
|
496
|
+
if (interactive$()) {
|
|
497
|
+
updateSliderSize$.set({});
|
|
498
|
+
currentTarget == null ? void 0 : currentTarget.focus();
|
|
499
|
+
document.addEventListener("touchmove", handleDrag, { passive: false });
|
|
500
|
+
document.addEventListener(
|
|
501
|
+
"touchend",
|
|
502
|
+
() => {
|
|
503
|
+
document.removeEventListener("touchmove", handleDrag);
|
|
504
|
+
document.removeEventListener("touchcancel", handleDrag);
|
|
505
|
+
},
|
|
506
|
+
{ once: true }
|
|
507
|
+
);
|
|
508
|
+
document.addEventListener(
|
|
509
|
+
"touchcancel",
|
|
510
|
+
() => {
|
|
511
|
+
document.removeEventListener("touchmove", handleDrag);
|
|
512
|
+
document.removeEventListener("touchend", handleDrag);
|
|
513
|
+
},
|
|
514
|
+
{ once: true }
|
|
515
|
+
);
|
|
516
|
+
}
|
|
517
|
+
};
|
|
387
518
|
const handleEventsDirective = createAttributesDirective((handleContext$) => ({
|
|
388
519
|
events: {
|
|
389
520
|
keydown: (event) => {
|
|
@@ -429,61 +560,13 @@ function createSlider(config) {
|
|
|
429
560
|
}
|
|
430
561
|
},
|
|
431
562
|
mousedown: (event) => {
|
|
432
|
-
event.
|
|
433
|
-
|
|
434
|
-
const handleDrag = (e) => {
|
|
435
|
-
e.preventDefault();
|
|
436
|
-
const newCoord = vertical$() ? e.clientY : e.clientX;
|
|
437
|
-
currentTarget.focus();
|
|
438
|
-
if (_prevCoordinate !== newCoord) {
|
|
439
|
-
_prevCoordinate = newCoord;
|
|
440
|
-
adjustCoordinate(newCoord, handleContext$().item.id);
|
|
441
|
-
}
|
|
442
|
-
};
|
|
443
|
-
if (interactive$()) {
|
|
444
|
-
updateSliderSize$.set({});
|
|
445
|
-
currentTarget.focus();
|
|
446
|
-
document.addEventListener("mousemove", handleDrag);
|
|
447
|
-
document.addEventListener(
|
|
448
|
-
"mouseup",
|
|
449
|
-
() => {
|
|
450
|
-
document.removeEventListener("mousemove", handleDrag);
|
|
451
|
-
},
|
|
452
|
-
{ once: true }
|
|
453
|
-
);
|
|
563
|
+
if (event.button !== 0) {
|
|
564
|
+
return;
|
|
454
565
|
}
|
|
566
|
+
mouseDown(event, handleContext$().item.id);
|
|
455
567
|
},
|
|
456
568
|
touchstart: (event) => {
|
|
457
|
-
|
|
458
|
-
e.preventDefault();
|
|
459
|
-
const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
|
|
460
|
-
event.target.focus();
|
|
461
|
-
if (_prevCoordinate !== newCoord) {
|
|
462
|
-
_prevCoordinate = newCoord;
|
|
463
|
-
adjustCoordinate(newCoord, handleContext$().item.id);
|
|
464
|
-
}
|
|
465
|
-
};
|
|
466
|
-
if (interactive$()) {
|
|
467
|
-
updateSliderSize$.set({});
|
|
468
|
-
event.target.focus();
|
|
469
|
-
document.addEventListener("touchmove", handleDrag, { passive: false });
|
|
470
|
-
document.addEventListener(
|
|
471
|
-
"touchend",
|
|
472
|
-
() => {
|
|
473
|
-
document.removeEventListener("touchmove", handleDrag);
|
|
474
|
-
document.removeEventListener("touchcancel", handleDrag);
|
|
475
|
-
},
|
|
476
|
-
{ once: true }
|
|
477
|
-
);
|
|
478
|
-
document.addEventListener(
|
|
479
|
-
"touchcancel",
|
|
480
|
-
() => {
|
|
481
|
-
document.removeEventListener("touchmove", handleDrag);
|
|
482
|
-
document.removeEventListener("touchend", handleDrag);
|
|
483
|
-
},
|
|
484
|
-
{ once: true }
|
|
485
|
-
);
|
|
486
|
-
}
|
|
569
|
+
touchStart(event, handleContext$().item.id);
|
|
487
570
|
}
|
|
488
571
|
}
|
|
489
572
|
}));
|
|
@@ -529,8 +612,20 @@ function createSlider(config) {
|
|
|
529
612
|
})),
|
|
530
613
|
clickableAreaDirective: createAttributesDirective(() => ({
|
|
531
614
|
events: {
|
|
532
|
-
|
|
533
|
-
|
|
615
|
+
mousedown: (event) => {
|
|
616
|
+
if (event.button !== 0) {
|
|
617
|
+
return;
|
|
618
|
+
}
|
|
619
|
+
const clickedCoordinate = vertical$() ? event.clientY : event.clientX;
|
|
620
|
+
const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
|
|
621
|
+
adjustCoordinate(clickedCoordinate, closestHandle);
|
|
622
|
+
mouseDown(event, closestHandle);
|
|
623
|
+
},
|
|
624
|
+
touchstart: (event) => {
|
|
625
|
+
const clickedCoordinate = vertical$() ? event.touches[0].clientY : event.touches[0].clientX;
|
|
626
|
+
const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
|
|
627
|
+
adjustCoordinate(clickedCoordinate, closestHandle);
|
|
628
|
+
touchStart(event, closestHandle);
|
|
534
629
|
}
|
|
535
630
|
},
|
|
536
631
|
classNames: {
|
|
@@ -541,6 +636,7 @@ function createSlider(config) {
|
|
|
541
636
|
})),
|
|
542
637
|
handleEventsDirective,
|
|
543
638
|
handleDirective: mergeDirectives(
|
|
639
|
+
handleElementDirective,
|
|
544
640
|
handleEventsDirective,
|
|
545
641
|
createAttributesDirective((handleContext$) => ({
|
|
546
642
|
attributes: {
|
|
@@ -569,36 +665,42 @@ function createSlider(config) {
|
|
|
569
665
|
),
|
|
570
666
|
minLabelDirective: mergeDirectives(minLabelDomDirective, minLabelDirective),
|
|
571
667
|
maxLabelDirective: mergeDirectives(maxLabelDomDirective, maxLabelDirective),
|
|
572
|
-
combinedHandleLabelDisplayDirective:
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
668
|
+
combinedHandleLabelDisplayDirective: mergeDirectives(
|
|
669
|
+
combinedLabelDomDirective,
|
|
670
|
+
createAttributesDirective(() => ({
|
|
671
|
+
classNames: {
|
|
672
|
+
"au-slider-label-vertical": vertical$,
|
|
673
|
+
"au-slider-label-vertical-now": vertical$,
|
|
674
|
+
"au-slider-label": horizontal$,
|
|
675
|
+
"au-slider-label-now": horizontal$
|
|
676
|
+
},
|
|
677
|
+
styles: {
|
|
678
|
+
left: computed(() => percent(combinedLabelPositionLeft$())),
|
|
679
|
+
top: computed(() => percent(combinedLabelPositionTop$()))
|
|
680
|
+
},
|
|
681
|
+
attributes: {
|
|
682
|
+
"aria-hidden": readable("true")
|
|
683
|
+
}
|
|
684
|
+
}))
|
|
685
|
+
),
|
|
686
|
+
handleLabelDisplayDirective: mergeDirectives(
|
|
687
|
+
handleLabelDirective,
|
|
688
|
+
createAttributesDirective((labelDisplayContext$) => ({
|
|
689
|
+
classNames: {
|
|
690
|
+
"au-slider-label-vertical": vertical$,
|
|
691
|
+
"au-slider-label-vertical-now": vertical$,
|
|
692
|
+
"au-slider-label": horizontal$,
|
|
693
|
+
"au-slider-label-now": horizontal$
|
|
694
|
+
},
|
|
695
|
+
styles: {
|
|
696
|
+
left: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
|
|
697
|
+
top: computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
|
|
698
|
+
},
|
|
699
|
+
attributes: {
|
|
700
|
+
"aria-hidden": readable("true")
|
|
701
|
+
}
|
|
702
|
+
}))
|
|
703
|
+
),
|
|
602
704
|
tickDirective: createAttributesDirective((tickContext$) => ({
|
|
603
705
|
classNames: {
|
|
604
706
|
"au-slider-tick": true$,
|
|
@@ -621,7 +723,8 @@ function createSlider(config) {
|
|
|
621
723
|
tickLabelDirective: createAttributesDirective((tickContext$) => ({
|
|
622
724
|
classNames: {
|
|
623
725
|
"au-slider-tick-label": true$,
|
|
624
|
-
"au-slider-tick-label-vertical": vertical
|
|
726
|
+
"au-slider-tick-label-vertical": vertical$,
|
|
727
|
+
"au-slider-tick-label-now": computed(() => sortedValues$().some((sv) => sv === tickContext$().tick.value))
|
|
625
728
|
},
|
|
626
729
|
styles: {
|
|
627
730
|
left: computed(() => vertical$() ? null : percent(tickContext$().tick.position)),
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __typeError = (msg) => {
|
|
4
|
+
throw TypeError(msg);
|
|
5
|
+
};
|
|
6
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
7
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
8
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
9
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
10
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
11
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
12
|
+
var __privateWrapper = (obj, member, setter, getter) => ({
|
|
13
|
+
set _(value) {
|
|
14
|
+
__privateSet(obj, member, value, setter);
|
|
15
|
+
},
|
|
16
|
+
get _() {
|
|
17
|
+
return __privateGet(obj, member, getter);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
var _idCount, _toasts, _timers;
|
|
21
|
+
const tansu = require("@amadeus-it-group/tansu");
|
|
22
|
+
const services_extendWidget = require("./services/extendWidget.cjs");
|
|
23
|
+
const utils_directive = require("./dom-CuBx1JPZ.cjs");
|
|
24
|
+
const utils_stores = require("./utils/stores.cjs");
|
|
25
|
+
const utils_writables = require("./writables-Bn3uhKEG.cjs");
|
|
26
|
+
const common = require("./common-BToNPUDq.cjs");
|
|
27
|
+
const toastDefaultConfig = {
|
|
28
|
+
autoHide: true,
|
|
29
|
+
delay: 5e3
|
|
30
|
+
};
|
|
31
|
+
const toastConfigValidator = {
|
|
32
|
+
autoHide: utils_writables.typeBoolean,
|
|
33
|
+
delay: utils_writables.typeNumberInRangeFactory(0, Infinity, { strict: true })
|
|
34
|
+
};
|
|
35
|
+
function getToastDefaultConfig() {
|
|
36
|
+
return { ...common.getCommonAlertDefaultConfig(), ...toastDefaultConfig };
|
|
37
|
+
}
|
|
38
|
+
function createToast(config) {
|
|
39
|
+
let _timeout;
|
|
40
|
+
const extendedAlert = services_extendWidget.extendWidgetProps(
|
|
41
|
+
common.createCommonAlert,
|
|
42
|
+
toastDefaultConfig,
|
|
43
|
+
toastConfigValidator
|
|
44
|
+
)(config);
|
|
45
|
+
const time$ = tansu.computed(() => {
|
|
46
|
+
clearTimeout(_timeout);
|
|
47
|
+
if (extendedAlert.stores.autoHide$()) {
|
|
48
|
+
_timeout = setTimeout(() => extendedAlert.api.close(), extendedAlert.stores.delay$());
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
const bodyDirective = utils_directive.createAttributesDirective(() => ({
|
|
52
|
+
attributes: {
|
|
53
|
+
role: tansu.readable("alert"),
|
|
54
|
+
"aria-atomic": tansu.readable("true"),
|
|
55
|
+
class: tansu.computed(() => extendedAlert.stores.className$())
|
|
56
|
+
},
|
|
57
|
+
classNames: {
|
|
58
|
+
"au-toast": utils_stores.true$,
|
|
59
|
+
toast: utils_stores.true$
|
|
60
|
+
}
|
|
61
|
+
}));
|
|
62
|
+
const closeButtonDirective = utils_directive.createAttributesDirective(() => ({
|
|
63
|
+
attributes: {
|
|
64
|
+
type: tansu.readable("button"),
|
|
65
|
+
"aria-label": tansu.computed(() => extendedAlert.stores.ariaCloseButtonLabel$())
|
|
66
|
+
},
|
|
67
|
+
events: {
|
|
68
|
+
click: extendedAlert.api.close
|
|
69
|
+
}
|
|
70
|
+
}));
|
|
71
|
+
return {
|
|
72
|
+
...extendedAlert,
|
|
73
|
+
directives: {
|
|
74
|
+
...extendedAlert.directives,
|
|
75
|
+
autoHideDirective: utils_directive.directiveSubscribe(time$),
|
|
76
|
+
bodyDirective,
|
|
77
|
+
closeButtonDirective
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
const defaultToasterProps = {
|
|
82
|
+
duration: 5e3,
|
|
83
|
+
position: "bottomRight",
|
|
84
|
+
dismissible: false
|
|
85
|
+
};
|
|
86
|
+
class Toaster {
|
|
87
|
+
constructor(props) {
|
|
88
|
+
__privateAdd(this, _idCount, 0);
|
|
89
|
+
__privateAdd(this, _toasts, tansu.writable([]));
|
|
90
|
+
/**
|
|
91
|
+
* Get the toasts value from the store
|
|
92
|
+
* @returns The array of toasts.
|
|
93
|
+
*/
|
|
94
|
+
__publicField(this, "toasts", tansu.computed(
|
|
95
|
+
() => __privateGet(this, _toasts).call(this).sort((a, b) => b.id - a.id).slice(0, this.options().limit)
|
|
96
|
+
));
|
|
97
|
+
__publicField(this, "options", tansu.writable(defaultToasterProps));
|
|
98
|
+
__privateAdd(this, _timers, /* @__PURE__ */ new Map());
|
|
99
|
+
/**
|
|
100
|
+
* Add timer for a toast
|
|
101
|
+
* @param id Id of the toast
|
|
102
|
+
* @param duration Duration of the timer, by default taken from options
|
|
103
|
+
*/
|
|
104
|
+
__publicField(this, "addTimer", (id, duration = this.options().duration) => {
|
|
105
|
+
if (duration > 0) {
|
|
106
|
+
__privateGet(this, _timers).set(id, {
|
|
107
|
+
timeout: setTimeout(() => this.removeToast(id), duration),
|
|
108
|
+
started: performance.now(),
|
|
109
|
+
duration
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
/**
|
|
114
|
+
* Pause a timer for a toast
|
|
115
|
+
* @param id Id of the toast
|
|
116
|
+
*/
|
|
117
|
+
__publicField(this, "pauseTimer", (id) => {
|
|
118
|
+
if (__privateGet(this, _timers).has(id)) {
|
|
119
|
+
const timer = __privateGet(this, _timers).get(id);
|
|
120
|
+
if (timer && timer.timeout) {
|
|
121
|
+
clearTimeout(timer.timeout);
|
|
122
|
+
timer.timeout = null;
|
|
123
|
+
timer.paused = performance.now();
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
/**
|
|
128
|
+
* Resume a timer for a toast
|
|
129
|
+
* @param id Id of the toast
|
|
130
|
+
*/
|
|
131
|
+
__publicField(this, "resumeTimer", (id) => {
|
|
132
|
+
if (__privateGet(this, _timers).has(id)) {
|
|
133
|
+
const timer = __privateGet(this, _timers).get(id);
|
|
134
|
+
if (timer) {
|
|
135
|
+
const paused = timer.paused ?? timer.started;
|
|
136
|
+
const elapsed = paused - timer.started;
|
|
137
|
+
const remaining = (timer.duration ?? 0) - elapsed;
|
|
138
|
+
this.addTimer(id, remaining);
|
|
139
|
+
timer.duration = remaining;
|
|
140
|
+
timer.paused = void 0;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
/**
|
|
145
|
+
* Events directive is used to set events on the Toast component, to keep track for example of pointer enter/leave,
|
|
146
|
+
* used to pause / resume the timer in case of duration and pauseOnHover are specified.
|
|
147
|
+
*/
|
|
148
|
+
__publicField(this, "eventsDirective", utils_directive.createAttributesDirective((id) => ({
|
|
149
|
+
events: {
|
|
150
|
+
pointerenter: () => this.options().pauseOnHover && this.pauseTimer(id()),
|
|
151
|
+
pointerleave: () => this.options().pauseOnHover && this.resumeTimer(id())
|
|
152
|
+
}
|
|
153
|
+
})));
|
|
154
|
+
/**
|
|
155
|
+
* Helper to add a toast to the viewport.
|
|
156
|
+
* @param props Options for the toast.
|
|
157
|
+
* @returns The ID of the added toast.
|
|
158
|
+
*/
|
|
159
|
+
__publicField(this, "addToast", (props) => {
|
|
160
|
+
const autoHide = props.autoHide ?? this.options().duration > 0;
|
|
161
|
+
__privateGet(this, _toasts).update((toasts) => [...toasts, { id: __privateWrapper(this, _idCount)._++, props }]);
|
|
162
|
+
if (autoHide) {
|
|
163
|
+
this.addTimer(__privateGet(this, _idCount) - 1, props.delay);
|
|
164
|
+
}
|
|
165
|
+
return __privateGet(this, _idCount) - 1;
|
|
166
|
+
});
|
|
167
|
+
/**
|
|
168
|
+
* Helper to remove a toast to the viewport.
|
|
169
|
+
* @param id Id of the toast to remove.
|
|
170
|
+
*/
|
|
171
|
+
__publicField(this, "removeToast", (id) => {
|
|
172
|
+
__privateGet(this, _timers).delete(id);
|
|
173
|
+
__privateGet(this, _toasts).update((toasts) => toasts.filter((toast) => toast.id !== id));
|
|
174
|
+
});
|
|
175
|
+
/** Helper to update toasts when options change */
|
|
176
|
+
__publicField(this, "updateToasts", () => {
|
|
177
|
+
if (this.options().duration === 0) {
|
|
178
|
+
this.options().dismissible = true;
|
|
179
|
+
}
|
|
180
|
+
});
|
|
181
|
+
/** Helper to close all toasts at once */
|
|
182
|
+
__publicField(this, "closeAll", () => {
|
|
183
|
+
__privateGet(this, _toasts).set([]);
|
|
184
|
+
__privateGet(this, _timers).clear();
|
|
185
|
+
});
|
|
186
|
+
this.options.set({
|
|
187
|
+
...defaultToasterProps,
|
|
188
|
+
...props
|
|
189
|
+
});
|
|
190
|
+
this.options.subscribe(() => {
|
|
191
|
+
this.updateToasts();
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
* Get the timers value from the store
|
|
196
|
+
* @returns The map of timers.
|
|
197
|
+
*/
|
|
198
|
+
get timers() {
|
|
199
|
+
return new Map(__privateGet(this, _timers));
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
_idCount = new WeakMap();
|
|
203
|
+
_toasts = new WeakMap();
|
|
204
|
+
_timers = new WeakMap();
|
|
205
|
+
exports.Toaster = Toaster;
|
|
206
|
+
exports.createToast = createToast;
|
|
207
|
+
exports.defaultToasterProps = defaultToasterProps;
|
|
208
|
+
exports.getToastDefaultConfig = getToastDefaultConfig;
|