@design-factory/angular 21.0.4 → 21.1.0-next.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/drawer/README.md +54 -0
- package/fesm2022/design-factory-angular-drawer.mjs +202 -67
- package/fesm2022/design-factory-angular-drawer.mjs.map +1 -1
- package/fesm2022/design-factory-angular-internals.mjs +439 -17
- package/fesm2022/design-factory-angular-internals.mjs.map +1 -1
- package/fesm2022/design-factory-angular-sidenav.mjs +223 -210
- package/fesm2022/design-factory-angular-sidenav.mjs.map +1 -1
- package/fesm2022/design-factory-angular-theme.mjs +198 -0
- package/fesm2022/design-factory-angular-theme.mjs.map +1 -0
- package/fesm2022/design-factory-angular-topnav.mjs +1538 -0
- package/fesm2022/design-factory-angular-topnav.mjs.map +1 -0
- package/node_modules/@agnos-ui/core/README.md +5 -0
- package/node_modules/@agnos-ui/core/accordion-BC_9xn23.cjs +314 -0
- package/node_modules/@agnos-ui/core/accordion-Ca_0T8Bc.js +315 -0
- package/node_modules/@agnos-ui/core/alert-AhaliJ17.cjs +9 -0
- package/node_modules/@agnos-ui/core/alert-Cb9FhbFQ.js +10 -0
- package/node_modules/@agnos-ui/core/collapse-COriZO7o.cjs +94 -0
- package/node_modules/@agnos-ui/core/collapse-CP79atna.js +95 -0
- package/node_modules/@agnos-ui/core/common-B5jS-Ih_.cjs +73 -0
- package/node_modules/@agnos-ui/core/common-DFyZvkII.js +74 -0
- package/node_modules/@agnos-ui/core/components/accordion/accordion.d.ts +333 -0
- package/node_modules/@agnos-ui/core/components/accordion/index.cjs +7 -0
- package/node_modules/@agnos-ui/core/components/accordion/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/accordion/index.js +7 -0
- package/node_modules/@agnos-ui/core/components/alert/alert.d.ts +37 -0
- package/node_modules/@agnos-ui/core/components/alert/common.d.ts +138 -0
- package/node_modules/@agnos-ui/core/components/alert/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/alert/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/alert/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/carousel/carousel.d.ts +247 -0
- package/node_modules/@agnos-ui/core/components/carousel/index.cjs +292 -0
- package/node_modules/@agnos-ui/core/components/carousel/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/carousel/index.js +292 -0
- package/node_modules/@agnos-ui/core/components/collapse/collapse.d.ts +135 -0
- package/node_modules/@agnos-ui/core/components/collapse/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/collapse/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/collapse/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/commonProps.d.ts +11 -0
- package/node_modules/@agnos-ui/core/components/drawer/drawer.d.ts +279 -0
- package/node_modules/@agnos-ui/core/components/drawer/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/drawer/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/drawer/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/modal/index.cjs +8 -0
- package/node_modules/@agnos-ui/core/components/modal/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/modal/index.js +8 -0
- package/node_modules/@agnos-ui/core/components/modal/modal.d.ts +245 -0
- package/node_modules/@agnos-ui/core/components/pagination/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/pagination/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/pagination/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/pagination/pagination.d.ts +313 -0
- package/node_modules/@agnos-ui/core/components/progressbar/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/progressbar/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/progressbar/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/progressbar/progressbar.d.ts +91 -0
- package/node_modules/@agnos-ui/core/components/rating/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/rating/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/rating/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/rating/rating.d.ts +191 -0
- package/node_modules/@agnos-ui/core/components/slider/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/slider/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/slider/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/slider/slider-utils.d.ts +25 -0
- package/node_modules/@agnos-ui/core/components/slider/slider.d.ts +383 -0
- package/node_modules/@agnos-ui/core/components/toast/index.cjs +7 -0
- package/node_modules/@agnos-ui/core/components/toast/index.d.ts +2 -0
- package/node_modules/@agnos-ui/core/components/toast/index.js +7 -0
- package/node_modules/@agnos-ui/core/components/toast/toast.d.ts +66 -0
- package/node_modules/@agnos-ui/core/components/toast/toaster.d.ts +128 -0
- package/node_modules/@agnos-ui/core/components/tree/index.cjs +5 -0
- package/node_modules/@agnos-ui/core/components/tree/index.d.ts +1 -0
- package/node_modules/@agnos-ui/core/components/tree/index.js +5 -0
- package/node_modules/@agnos-ui/core/components/tree/tree.d.ts +143 -0
- package/node_modules/@agnos-ui/core/config.cjs +36 -0
- package/node_modules/@agnos-ui/core/config.d.ts +117 -0
- package/node_modules/@agnos-ui/core/config.js +36 -0
- package/node_modules/@agnos-ui/core/directive-Bsreu2z1.js +523 -0
- package/node_modules/@agnos-ui/core/directive-DCaXmRe_.cjs +522 -0
- package/node_modules/@agnos-ui/core/drawer-BbFAHV07.cjs +328 -0
- package/node_modules/@agnos-ui/core/drawer-C6Qa0xEu.js +329 -0
- package/node_modules/@agnos-ui/core/index.cjs +134 -0
- package/node_modules/@agnos-ui/core/index.d.ts +29 -0
- package/node_modules/@agnos-ui/core/index.js +134 -0
- package/node_modules/@agnos-ui/core/isFocusable-Ckwus82R.js +32 -0
- package/node_modules/@agnos-ui/core/isFocusable-DfzDLeAN.cjs +31 -0
- package/node_modules/@agnos-ui/core/modal-BsNuHhT7.cjs +252 -0
- package/node_modules/@agnos-ui/core/modal-CgzY8ezz.js +253 -0
- package/node_modules/@agnos-ui/core/package.json +57 -0
- package/node_modules/@agnos-ui/core/pagination-ZxGaNWZz.js +255 -0
- package/node_modules/@agnos-ui/core/pagination-xbcOHnhd.cjs +254 -0
- package/node_modules/@agnos-ui/core/progressbar-CRbMKp4b.cjs +86 -0
- package/node_modules/@agnos-ui/core/progressbar-CSEIFnlD.js +87 -0
- package/node_modules/@agnos-ui/core/promise-CxCD3NYv.cjs +118 -0
- package/node_modules/@agnos-ui/core/promise-D-RZVPuv.js +119 -0
- package/node_modules/@agnos-ui/core/rating-BIdiiPUo.js +184 -0
- package/node_modules/@agnos-ui/core/rating-qx1xaBmz.cjs +183 -0
- package/node_modules/@agnos-ui/core/scrollbars-CT87iv_6.cjs +30 -0
- package/node_modules/@agnos-ui/core/scrollbars-CcxSrnCx.js +31 -0
- package/node_modules/@agnos-ui/core/services/extendWidget.cjs +41 -0
- package/node_modules/@agnos-ui/core/services/extendWidget.d.ts +31 -0
- package/node_modules/@agnos-ui/core/services/extendWidget.js +41 -0
- package/node_modules/@agnos-ui/core/services/floatingUI.cjs +111 -0
- package/node_modules/@agnos-ui/core/services/floatingUI.d.ts +76 -0
- package/node_modules/@agnos-ui/core/services/floatingUI.js +111 -0
- package/node_modules/@agnos-ui/core/services/focusElement.cjs +46 -0
- package/node_modules/@agnos-ui/core/services/focusElement.d.ts +9 -0
- package/node_modules/@agnos-ui/core/services/focusElement.js +46 -0
- package/node_modules/@agnos-ui/core/services/focustrack.cjs +47 -0
- package/node_modules/@agnos-ui/core/services/focustrack.d.ts +40 -0
- package/node_modules/@agnos-ui/core/services/focustrack.js +47 -0
- package/node_modules/@agnos-ui/core/services/hash.cjs +15 -0
- package/node_modules/@agnos-ui/core/services/hash.d.ts +3 -0
- package/node_modules/@agnos-ui/core/services/hash.js +15 -0
- package/node_modules/@agnos-ui/core/services/intersection.cjs +53 -0
- package/node_modules/@agnos-ui/core/services/intersection.d.ts +30 -0
- package/node_modules/@agnos-ui/core/services/intersection.js +53 -0
- package/node_modules/@agnos-ui/core/services/matchMedia.cjs +14 -0
- package/node_modules/@agnos-ui/core/services/matchMedia.d.ts +8 -0
- package/node_modules/@agnos-ui/core/services/matchMedia.js +14 -0
- package/node_modules/@agnos-ui/core/services/navManager.cjs +166 -0
- package/node_modules/@agnos-ui/core/services/navManager.d.ts +144 -0
- package/node_modules/@agnos-ui/core/services/navManager.js +166 -0
- package/node_modules/@agnos-ui/core/services/pointerdownPosition.cjs +60 -0
- package/node_modules/@agnos-ui/core/services/pointerdownPosition.d.ts +42 -0
- package/node_modules/@agnos-ui/core/services/pointerdownPosition.js +60 -0
- package/node_modules/@agnos-ui/core/services/portal.cjs +42 -0
- package/node_modules/@agnos-ui/core/services/portal.d.ts +16 -0
- package/node_modules/@agnos-ui/core/services/portal.js +42 -0
- package/node_modules/@agnos-ui/core/services/resizeObserver.cjs +54 -0
- package/node_modules/@agnos-ui/core/services/resizeObserver.d.ts +18 -0
- package/node_modules/@agnos-ui/core/services/resizeObserver.js +54 -0
- package/node_modules/@agnos-ui/core/services/siblingsInert.cjs +44 -0
- package/node_modules/@agnos-ui/core/services/siblingsInert.d.ts +16 -0
- package/node_modules/@agnos-ui/core/services/siblingsInert.js +44 -0
- package/node_modules/@agnos-ui/core/services/transitions/baseTransitions.cjs +186 -0
- package/node_modules/@agnos-ui/core/services/transitions/baseTransitions.d.ts +166 -0
- package/node_modules/@agnos-ui/core/services/transitions/baseTransitions.js +186 -0
- package/node_modules/@agnos-ui/core/services/transitions/collapse.cjs +40 -0
- package/node_modules/@agnos-ui/core/services/transitions/collapse.d.ts +49 -0
- package/node_modules/@agnos-ui/core/services/transitions/collapse.js +40 -0
- package/node_modules/@agnos-ui/core/services/transitions/cssTransitions.cjs +32 -0
- package/node_modules/@agnos-ui/core/services/transitions/cssTransitions.d.ts +25 -0
- package/node_modules/@agnos-ui/core/services/transitions/cssTransitions.js +32 -0
- package/node_modules/@agnos-ui/core/services/transitions/simpleClassTransition.cjs +37 -0
- package/node_modules/@agnos-ui/core/services/transitions/simpleClassTransition.d.ts +47 -0
- package/node_modules/@agnos-ui/core/services/transitions/simpleClassTransition.js +37 -0
- package/node_modules/@agnos-ui/core/slider-B93hE0ag.cjs +807 -0
- package/node_modules/@agnos-ui/core/slider-Cjiq9FgI.js +808 -0
- package/node_modules/@agnos-ui/core/textDirection-cNgt24LJ.js +4 -0
- package/node_modules/@agnos-ui/core/textDirection-zqcZ5-eK.cjs +3 -0
- package/node_modules/@agnos-ui/core/toaster-BQWqxYv-.cjs +190 -0
- package/node_modules/@agnos-ui/core/toaster-BzEkshT2.js +191 -0
- package/node_modules/@agnos-ui/core/tree-DY04XPPg.cjs +228 -0
- package/node_modules/@agnos-ui/core/tree-HwcvZ0_p.js +229 -0
- package/node_modules/@agnos-ui/core/types.cjs +6 -0
- package/node_modules/@agnos-ui/core/types.d.ts +246 -0
- package/node_modules/@agnos-ui/core/types.js +6 -0
- package/node_modules/@agnos-ui/core/utils/directive.cjs +28 -0
- package/node_modules/@agnos-ui/core/utils/directive.d.ts +352 -0
- package/node_modules/@agnos-ui/core/utils/directive.js +28 -0
- package/node_modules/@agnos-ui/core/utils/func.cjs +7 -0
- package/node_modules/@agnos-ui/core/utils/func.d.ts +11 -0
- package/node_modules/@agnos-ui/core/utils/func.js +7 -0
- package/node_modules/@agnos-ui/core/utils/id.cjs +5 -0
- package/node_modules/@agnos-ui/core/utils/id.d.ts +6 -0
- package/node_modules/@agnos-ui/core/utils/id.js +5 -0
- package/node_modules/@agnos-ui/core/utils/internal/assign.d.ts +10 -0
- package/node_modules/@agnos-ui/core/utils/internal/checks.d.ts +57 -0
- package/node_modules/@agnos-ui/core/utils/internal/dom.d.ts +75 -0
- package/node_modules/@agnos-ui/core/utils/internal/isFocusable.d.ts +9 -0
- package/node_modules/@agnos-ui/core/utils/internal/math.d.ts +5 -0
- package/node_modules/@agnos-ui/core/utils/internal/promise.d.ts +98 -0
- package/node_modules/@agnos-ui/core/utils/internal/scrollbars.d.ts +8 -0
- package/node_modules/@agnos-ui/core/utils/internal/sort.d.ts +16 -0
- package/node_modules/@agnos-ui/core/utils/internal/ssrHTMLElement.d.ts +17 -0
- package/node_modules/@agnos-ui/core/utils/internal/textDirection.d.ts +7 -0
- package/node_modules/@agnos-ui/core/utils/internal/traversal.d.ts +54 -0
- package/node_modules/@agnos-ui/core/utils/stores.cjs +172 -0
- package/node_modules/@agnos-ui/core/utils/stores.d.ts +224 -0
- package/node_modules/@agnos-ui/core/utils/stores.js +172 -0
- package/node_modules/@agnos-ui/core/utils/widget.cjs +8 -0
- package/node_modules/@agnos-ui/core/utils/widget.d.ts +11 -0
- package/node_modules/@agnos-ui/core/utils/widget.js +8 -0
- package/node_modules/@agnos-ui/core/utils/writables.cjs +16 -0
- package/node_modules/@agnos-ui/core/utils/writables.d.ts +95 -0
- package/node_modules/@agnos-ui/core/utils/writables.js +16 -0
- package/node_modules/@agnos-ui/core/writables-DYGjj5T3.js +103 -0
- package/node_modules/@agnos-ui/core/writables-Dt68gADJ.cjs +102 -0
- package/package.json +25 -6
- package/schematics/collection.json +1 -1
- package/types/design-factory-angular-drawer.d.ts +71 -13
- package/types/design-factory-angular-internals.d.ts +220 -31
- package/types/design-factory-angular-sidenav.d.ts +15 -7
- package/types/design-factory-angular-theme.d.ts +122 -0
- package/types/design-factory-angular-topnav.d.ts +435 -0
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const tansu = require("@amadeus-it-group/tansu");
|
|
3
|
+
const services_extendWidget = require("./services/extendWidget.cjs");
|
|
4
|
+
const utils_directive = require("./directive-DCaXmRe_.cjs");
|
|
5
|
+
const utils_stores = require("./utils/stores.cjs");
|
|
6
|
+
const utils_writables = require("./writables-Dt68gADJ.cjs");
|
|
7
|
+
const common = require("./common-B5jS-Ih_.cjs");
|
|
8
|
+
const utils_widget = require("./utils/widget.cjs");
|
|
9
|
+
const toastDefaultConfig = {
|
|
10
|
+
autoHide: true,
|
|
11
|
+
delay: 5e3
|
|
12
|
+
};
|
|
13
|
+
const toastConfigValidator = {
|
|
14
|
+
autoHide: utils_writables.typeBoolean,
|
|
15
|
+
delay: utils_writables.typeNumberInRangeFactory(0, Infinity, { strict: true })
|
|
16
|
+
};
|
|
17
|
+
function getToastDefaultConfig() {
|
|
18
|
+
return { ...common.getCommonAlertDefaultConfig(), ...toastDefaultConfig };
|
|
19
|
+
}
|
|
20
|
+
const createToast = utils_widget.createWidgetFactory(
|
|
21
|
+
"toast",
|
|
22
|
+
(config) => {
|
|
23
|
+
let _timeout;
|
|
24
|
+
const extendedAlert = services_extendWidget.extendWidgetProps(
|
|
25
|
+
common.createCommonAlert,
|
|
26
|
+
toastDefaultConfig,
|
|
27
|
+
toastConfigValidator
|
|
28
|
+
)(config);
|
|
29
|
+
const time$ = tansu.computed(() => {
|
|
30
|
+
clearTimeout(_timeout);
|
|
31
|
+
if (extendedAlert.stores.autoHide$()) {
|
|
32
|
+
_timeout = setTimeout(() => void extendedAlert.api.close(), extendedAlert.stores.delay$());
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
const bodyDirective = utils_directive.createAttributesDirective(() => ({
|
|
36
|
+
attributes: {
|
|
37
|
+
role: tansu.readable("alert"),
|
|
38
|
+
"aria-atomic": tansu.readable("true"),
|
|
39
|
+
class: tansu.computed(() => extendedAlert.stores.className$())
|
|
40
|
+
},
|
|
41
|
+
classNames: {
|
|
42
|
+
"au-toast": utils_stores.true$,
|
|
43
|
+
toast: utils_stores.true$
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
46
|
+
const closeButtonDirective = utils_directive.createAttributesDirective(() => ({
|
|
47
|
+
attributes: {
|
|
48
|
+
type: tansu.readable("button"),
|
|
49
|
+
"aria-label": tansu.computed(() => extendedAlert.stores.ariaCloseButtonLabel$())
|
|
50
|
+
},
|
|
51
|
+
events: {
|
|
52
|
+
click: () => void extendedAlert.api.close()
|
|
53
|
+
}
|
|
54
|
+
}));
|
|
55
|
+
return {
|
|
56
|
+
...extendedAlert,
|
|
57
|
+
directives: {
|
|
58
|
+
...extendedAlert.directives,
|
|
59
|
+
autoHideDirective: utils_directive.directiveSubscribe(time$),
|
|
60
|
+
bodyDirective,
|
|
61
|
+
closeButtonDirective
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
const defaultToasterProps = {
|
|
67
|
+
duration: 5e3,
|
|
68
|
+
position: "bottomRight",
|
|
69
|
+
dismissible: false
|
|
70
|
+
};
|
|
71
|
+
class Toaster {
|
|
72
|
+
#idCount = 0;
|
|
73
|
+
#toasts = tansu.writable([]);
|
|
74
|
+
/**
|
|
75
|
+
* Get the toasts value from the store
|
|
76
|
+
* @returns The array of toasts.
|
|
77
|
+
*/
|
|
78
|
+
toasts = tansu.computed(
|
|
79
|
+
() => this.#toasts().sort((a, b) => b.id - a.id).slice(0, this.options().limit)
|
|
80
|
+
);
|
|
81
|
+
options = tansu.writable(defaultToasterProps);
|
|
82
|
+
#timers = /* @__PURE__ */ new Map();
|
|
83
|
+
/**
|
|
84
|
+
* Get the timers value from the store
|
|
85
|
+
* @returns The map of timers.
|
|
86
|
+
*/
|
|
87
|
+
get timers() {
|
|
88
|
+
return new Map(this.#timers);
|
|
89
|
+
}
|
|
90
|
+
constructor(props) {
|
|
91
|
+
this.options.set({
|
|
92
|
+
...defaultToasterProps,
|
|
93
|
+
...props
|
|
94
|
+
});
|
|
95
|
+
this.options.subscribe(() => {
|
|
96
|
+
this.updateToasts();
|
|
97
|
+
});
|
|
98
|
+
}
|
|
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
|
+
addTimer = (id, duration = this.options().duration) => {
|
|
105
|
+
if (duration > 0) {
|
|
106
|
+
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
|
+
pauseTimer = (id) => {
|
|
118
|
+
if (this.#timers.has(id)) {
|
|
119
|
+
const timer = 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
|
+
resumeTimer = (id) => {
|
|
132
|
+
if (this.#timers.has(id)) {
|
|
133
|
+
const timer = 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
|
+
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
|
+
addToast = (props) => {
|
|
160
|
+
const autoHide = props.autoHide ?? this.options().duration > 0;
|
|
161
|
+
this.#toasts.update((toasts) => [...toasts, { id: this.#idCount++, props }]);
|
|
162
|
+
if (autoHide) {
|
|
163
|
+
this.addTimer(this.#idCount - 1, props.delay);
|
|
164
|
+
}
|
|
165
|
+
return 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
|
+
removeToast = (id) => {
|
|
172
|
+
this.#timers.delete(id);
|
|
173
|
+
this.#toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
|
|
174
|
+
};
|
|
175
|
+
/** Helper to update toasts when options change */
|
|
176
|
+
updateToasts = () => {
|
|
177
|
+
if (this.options().duration === 0) {
|
|
178
|
+
this.options().dismissible = true;
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
/** Helper to close all toasts at once */
|
|
182
|
+
closeAll = () => {
|
|
183
|
+
this.#toasts.set([]);
|
|
184
|
+
this.#timers.clear();
|
|
185
|
+
};
|
|
186
|
+
}
|
|
187
|
+
exports.Toaster = Toaster;
|
|
188
|
+
exports.createToast = createToast;
|
|
189
|
+
exports.defaultToasterProps = defaultToasterProps;
|
|
190
|
+
exports.getToastDefaultConfig = getToastDefaultConfig;
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
import { computed, readable, writable } from "@amadeus-it-group/tansu";
|
|
2
|
+
import { extendWidgetProps } from "./services/extendWidget.js";
|
|
3
|
+
import { o as directiveSubscribe, g as createAttributesDirective } from "./directive-Bsreu2z1.js";
|
|
4
|
+
import { true$ } from "./utils/stores.js";
|
|
5
|
+
import { h as typeNumberInRangeFactory, b as typeBoolean } from "./writables-DYGjj5T3.js";
|
|
6
|
+
import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-DFyZvkII.js";
|
|
7
|
+
import { createWidgetFactory } from "./utils/widget.js";
|
|
8
|
+
const toastDefaultConfig = {
|
|
9
|
+
autoHide: true,
|
|
10
|
+
delay: 5e3
|
|
11
|
+
};
|
|
12
|
+
const toastConfigValidator = {
|
|
13
|
+
autoHide: typeBoolean,
|
|
14
|
+
delay: typeNumberInRangeFactory(0, Infinity, { strict: true })
|
|
15
|
+
};
|
|
16
|
+
function getToastDefaultConfig() {
|
|
17
|
+
return { ...getCommonAlertDefaultConfig(), ...toastDefaultConfig };
|
|
18
|
+
}
|
|
19
|
+
const createToast = createWidgetFactory(
|
|
20
|
+
"toast",
|
|
21
|
+
(config) => {
|
|
22
|
+
let _timeout;
|
|
23
|
+
const extendedAlert = extendWidgetProps(
|
|
24
|
+
createCommonAlert,
|
|
25
|
+
toastDefaultConfig,
|
|
26
|
+
toastConfigValidator
|
|
27
|
+
)(config);
|
|
28
|
+
const time$ = computed(() => {
|
|
29
|
+
clearTimeout(_timeout);
|
|
30
|
+
if (extendedAlert.stores.autoHide$()) {
|
|
31
|
+
_timeout = setTimeout(() => void extendedAlert.api.close(), extendedAlert.stores.delay$());
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const bodyDirective = createAttributesDirective(() => ({
|
|
35
|
+
attributes: {
|
|
36
|
+
role: readable("alert"),
|
|
37
|
+
"aria-atomic": readable("true"),
|
|
38
|
+
class: computed(() => extendedAlert.stores.className$())
|
|
39
|
+
},
|
|
40
|
+
classNames: {
|
|
41
|
+
"au-toast": true$,
|
|
42
|
+
toast: true$
|
|
43
|
+
}
|
|
44
|
+
}));
|
|
45
|
+
const closeButtonDirective = createAttributesDirective(() => ({
|
|
46
|
+
attributes: {
|
|
47
|
+
type: readable("button"),
|
|
48
|
+
"aria-label": computed(() => extendedAlert.stores.ariaCloseButtonLabel$())
|
|
49
|
+
},
|
|
50
|
+
events: {
|
|
51
|
+
click: () => void extendedAlert.api.close()
|
|
52
|
+
}
|
|
53
|
+
}));
|
|
54
|
+
return {
|
|
55
|
+
...extendedAlert,
|
|
56
|
+
directives: {
|
|
57
|
+
...extendedAlert.directives,
|
|
58
|
+
autoHideDirective: directiveSubscribe(time$),
|
|
59
|
+
bodyDirective,
|
|
60
|
+
closeButtonDirective
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
const defaultToasterProps = {
|
|
66
|
+
duration: 5e3,
|
|
67
|
+
position: "bottomRight",
|
|
68
|
+
dismissible: false
|
|
69
|
+
};
|
|
70
|
+
class Toaster {
|
|
71
|
+
#idCount = 0;
|
|
72
|
+
#toasts = writable([]);
|
|
73
|
+
/**
|
|
74
|
+
* Get the toasts value from the store
|
|
75
|
+
* @returns The array of toasts.
|
|
76
|
+
*/
|
|
77
|
+
toasts = computed(
|
|
78
|
+
() => this.#toasts().sort((a, b) => b.id - a.id).slice(0, this.options().limit)
|
|
79
|
+
);
|
|
80
|
+
options = writable(defaultToasterProps);
|
|
81
|
+
#timers = /* @__PURE__ */ new Map();
|
|
82
|
+
/**
|
|
83
|
+
* Get the timers value from the store
|
|
84
|
+
* @returns The map of timers.
|
|
85
|
+
*/
|
|
86
|
+
get timers() {
|
|
87
|
+
return new Map(this.#timers);
|
|
88
|
+
}
|
|
89
|
+
constructor(props) {
|
|
90
|
+
this.options.set({
|
|
91
|
+
...defaultToasterProps,
|
|
92
|
+
...props
|
|
93
|
+
});
|
|
94
|
+
this.options.subscribe(() => {
|
|
95
|
+
this.updateToasts();
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Add timer for a toast
|
|
100
|
+
* @param id Id of the toast
|
|
101
|
+
* @param duration Duration of the timer, by default taken from options
|
|
102
|
+
*/
|
|
103
|
+
addTimer = (id, duration = this.options().duration) => {
|
|
104
|
+
if (duration > 0) {
|
|
105
|
+
this.#timers.set(id, {
|
|
106
|
+
timeout: setTimeout(() => this.removeToast(id), duration),
|
|
107
|
+
started: performance.now(),
|
|
108
|
+
duration
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
/**
|
|
113
|
+
* Pause a timer for a toast
|
|
114
|
+
* @param id Id of the toast
|
|
115
|
+
*/
|
|
116
|
+
pauseTimer = (id) => {
|
|
117
|
+
if (this.#timers.has(id)) {
|
|
118
|
+
const timer = this.#timers.get(id);
|
|
119
|
+
if (timer && timer.timeout) {
|
|
120
|
+
clearTimeout(timer.timeout);
|
|
121
|
+
timer.timeout = null;
|
|
122
|
+
timer.paused = performance.now();
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
/**
|
|
127
|
+
* Resume a timer for a toast
|
|
128
|
+
* @param id Id of the toast
|
|
129
|
+
*/
|
|
130
|
+
resumeTimer = (id) => {
|
|
131
|
+
if (this.#timers.has(id)) {
|
|
132
|
+
const timer = this.#timers.get(id);
|
|
133
|
+
if (timer) {
|
|
134
|
+
const paused = timer.paused ?? timer.started;
|
|
135
|
+
const elapsed = paused - timer.started;
|
|
136
|
+
const remaining = (timer.duration ?? 0) - elapsed;
|
|
137
|
+
this.addTimer(id, remaining);
|
|
138
|
+
timer.duration = remaining;
|
|
139
|
+
timer.paused = void 0;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
/**
|
|
144
|
+
* Events directive is used to set events on the Toast component, to keep track for example of pointer enter/leave,
|
|
145
|
+
* used to pause / resume the timer in case of duration and pauseOnHover are specified.
|
|
146
|
+
*/
|
|
147
|
+
eventsDirective = createAttributesDirective((id) => ({
|
|
148
|
+
events: {
|
|
149
|
+
pointerenter: () => this.options().pauseOnHover && this.pauseTimer(id()),
|
|
150
|
+
pointerleave: () => this.options().pauseOnHover && this.resumeTimer(id())
|
|
151
|
+
}
|
|
152
|
+
}));
|
|
153
|
+
/**
|
|
154
|
+
* Helper to add a toast to the viewport.
|
|
155
|
+
* @param props Options for the toast.
|
|
156
|
+
* @returns The ID of the added toast.
|
|
157
|
+
*/
|
|
158
|
+
addToast = (props) => {
|
|
159
|
+
const autoHide = props.autoHide ?? this.options().duration > 0;
|
|
160
|
+
this.#toasts.update((toasts) => [...toasts, { id: this.#idCount++, props }]);
|
|
161
|
+
if (autoHide) {
|
|
162
|
+
this.addTimer(this.#idCount - 1, props.delay);
|
|
163
|
+
}
|
|
164
|
+
return this.#idCount - 1;
|
|
165
|
+
};
|
|
166
|
+
/**
|
|
167
|
+
* Helper to remove a toast to the viewport.
|
|
168
|
+
* @param id Id of the toast to remove.
|
|
169
|
+
*/
|
|
170
|
+
removeToast = (id) => {
|
|
171
|
+
this.#timers.delete(id);
|
|
172
|
+
this.#toasts.update((toasts) => toasts.filter((toast) => toast.id !== id));
|
|
173
|
+
};
|
|
174
|
+
/** Helper to update toasts when options change */
|
|
175
|
+
updateToasts = () => {
|
|
176
|
+
if (this.options().duration === 0) {
|
|
177
|
+
this.options().dismissible = true;
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
/** Helper to close all toasts at once */
|
|
181
|
+
closeAll = () => {
|
|
182
|
+
this.#toasts.set([]);
|
|
183
|
+
this.#timers.clear();
|
|
184
|
+
};
|
|
185
|
+
}
|
|
186
|
+
export {
|
|
187
|
+
Toaster as T,
|
|
188
|
+
createToast as c,
|
|
189
|
+
defaultToasterProps as d,
|
|
190
|
+
getToastDefaultConfig as g
|
|
191
|
+
};
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const tansu = require("@amadeus-it-group/tansu");
|
|
3
|
+
const services_navManager = require("./services/navManager.cjs");
|
|
4
|
+
const utils_directive = require("./directive-DCaXmRe_.cjs");
|
|
5
|
+
const utils_func = require("./utils/func.cjs");
|
|
6
|
+
const utils_stores = require("./utils/stores.cjs");
|
|
7
|
+
const utils_writables = require("./writables-Dt68gADJ.cjs");
|
|
8
|
+
const utils_widget = require("./utils/widget.cjs");
|
|
9
|
+
function getTreeDefaultConfig() {
|
|
10
|
+
return {
|
|
11
|
+
...defaultTreeConfig
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
const defaultTreeConfig = {
|
|
15
|
+
className: "",
|
|
16
|
+
nodes: [],
|
|
17
|
+
onExpandToggle: utils_func.noop,
|
|
18
|
+
navSelector: (node) => node.querySelectorAll("button"),
|
|
19
|
+
ariaLabelToggleFn: (label) => `Toggle ${label}`
|
|
20
|
+
};
|
|
21
|
+
const configValidator = {
|
|
22
|
+
className: utils_writables.typeString,
|
|
23
|
+
nodes: utils_writables.typeArray,
|
|
24
|
+
onExpandToggle: utils_writables.typeFunction,
|
|
25
|
+
navSelector: utils_writables.typeFunction,
|
|
26
|
+
ariaLabelToggleFn: utils_writables.typeFunction
|
|
27
|
+
};
|
|
28
|
+
const createTree = utils_widget.createWidgetFactory("tree", (config) => {
|
|
29
|
+
const [{ nodes$, onExpandToggle$, navSelector$, ariaLabelToggleFn$, ...stateProps }, patch] = utils_stores.writablesForProps(
|
|
30
|
+
defaultTreeConfig,
|
|
31
|
+
config,
|
|
32
|
+
configValidator
|
|
33
|
+
);
|
|
34
|
+
const treeMap = /* @__PURE__ */ new Map();
|
|
35
|
+
const _expandedMap = {
|
|
36
|
+
get(item) {
|
|
37
|
+
return item.isExpanded;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const _toggleChange$ = tansu.writable({});
|
|
41
|
+
const expandedMap$ = tansu.computed(() => {
|
|
42
|
+
normalizedNodes$();
|
|
43
|
+
_toggleChange$();
|
|
44
|
+
return _expandedMap;
|
|
45
|
+
});
|
|
46
|
+
const {
|
|
47
|
+
elementsInDomOrder$,
|
|
48
|
+
directive: navDirective,
|
|
49
|
+
refreshElements,
|
|
50
|
+
focusIndex,
|
|
51
|
+
focusPrevious,
|
|
52
|
+
focusNext,
|
|
53
|
+
focusFirst,
|
|
54
|
+
focusLast
|
|
55
|
+
} = services_navManager.createNavManager();
|
|
56
|
+
const navManagerConfig$ = tansu.computed(() => ({
|
|
57
|
+
keys: {
|
|
58
|
+
ArrowUp: focusPrevious,
|
|
59
|
+
ArrowDown: focusNext,
|
|
60
|
+
Home: focusFirst,
|
|
61
|
+
End: focusLast
|
|
62
|
+
},
|
|
63
|
+
selector: navSelector$()
|
|
64
|
+
}));
|
|
65
|
+
const traverseTree = (node, level, parent) => {
|
|
66
|
+
const copyNode = {
|
|
67
|
+
...node,
|
|
68
|
+
ariaLabel: node.ariaLabel ?? node.label,
|
|
69
|
+
level,
|
|
70
|
+
children: [],
|
|
71
|
+
isExpanded: node.children?.length ? node.isExpanded ?? false : void 0
|
|
72
|
+
};
|
|
73
|
+
treeMap.set(copyNode, {
|
|
74
|
+
parent
|
|
75
|
+
});
|
|
76
|
+
if (node.children) {
|
|
77
|
+
copyNode.children = node.children.map((child) => traverseTree(child, level + 1, copyNode));
|
|
78
|
+
}
|
|
79
|
+
return copyNode;
|
|
80
|
+
};
|
|
81
|
+
const normalizedNodes$ = tansu.computed(() => {
|
|
82
|
+
treeMap.clear();
|
|
83
|
+
return nodes$().map((node) => traverseTree(node, 0, void 0));
|
|
84
|
+
});
|
|
85
|
+
const _lastFocusedTreeItem$ = tansu.writable(
|
|
86
|
+
normalizedNodes$().find((node) => node.isExpanded !== void 0)
|
|
87
|
+
);
|
|
88
|
+
const getTreeItemInfo = (item) => {
|
|
89
|
+
const treeItem = treeMap.get(item);
|
|
90
|
+
if (!treeItem) {
|
|
91
|
+
console.error(`Node ${item.label} doesn't exist in the map`);
|
|
92
|
+
}
|
|
93
|
+
return treeItem;
|
|
94
|
+
};
|
|
95
|
+
const treeItemElementDirective = utils_directive.browserDirective(
|
|
96
|
+
(toggleItem, args) => {
|
|
97
|
+
let treeItemInfo;
|
|
98
|
+
const destroy = () => {
|
|
99
|
+
if (treeItemInfo && treeItemInfo.htmlElement === toggleItem) {
|
|
100
|
+
treeItemInfo.htmlElement = void 0;
|
|
101
|
+
}
|
|
102
|
+
treeItemInfo = void 0;
|
|
103
|
+
};
|
|
104
|
+
const update = (args2) => {
|
|
105
|
+
destroy();
|
|
106
|
+
treeItemInfo = getTreeItemInfo(args2.item);
|
|
107
|
+
if (treeItemInfo) {
|
|
108
|
+
if (treeItemInfo.htmlElement) {
|
|
109
|
+
console.warn(`The tree item directive should be used once per element`);
|
|
110
|
+
}
|
|
111
|
+
treeItemInfo.htmlElement = toggleItem;
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
update(args);
|
|
115
|
+
return {
|
|
116
|
+
update,
|
|
117
|
+
destroy
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
const focusElementIfExists = (itemToFocus) => {
|
|
122
|
+
if (itemToFocus) {
|
|
123
|
+
const mapItemHtml = getTreeItemInfo(itemToFocus)?.htmlElement;
|
|
124
|
+
if (mapItemHtml) {
|
|
125
|
+
const index = elementsInDomOrder$().indexOf(mapItemHtml);
|
|
126
|
+
focusIndex(index, 0);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
const itemToggleAttributesDirective = utils_directive.createAttributesDirective(
|
|
131
|
+
(treeItemContext$) => ({
|
|
132
|
+
events: {
|
|
133
|
+
focus: () => {
|
|
134
|
+
const { item } = treeItemContext$();
|
|
135
|
+
_lastFocusedTreeItem$.set(item);
|
|
136
|
+
},
|
|
137
|
+
click: () => {
|
|
138
|
+
const { item } = treeItemContext$();
|
|
139
|
+
toggleExpanded(item);
|
|
140
|
+
},
|
|
141
|
+
keydown: (event) => {
|
|
142
|
+
const { key } = event;
|
|
143
|
+
const { item } = treeItemContext$();
|
|
144
|
+
const isExpanded = item.isExpanded;
|
|
145
|
+
refreshElements();
|
|
146
|
+
switch (key) {
|
|
147
|
+
case "Enter":
|
|
148
|
+
case " ":
|
|
149
|
+
toggleExpanded(item);
|
|
150
|
+
break;
|
|
151
|
+
case "ArrowLeft":
|
|
152
|
+
if (isExpanded) {
|
|
153
|
+
toggleExpanded(item);
|
|
154
|
+
} else {
|
|
155
|
+
focusElementIfExists(getTreeItemInfo(item)?.parent);
|
|
156
|
+
}
|
|
157
|
+
break;
|
|
158
|
+
case "ArrowRight":
|
|
159
|
+
if (!isExpanded) {
|
|
160
|
+
toggleExpanded(item);
|
|
161
|
+
} else {
|
|
162
|
+
focusElementIfExists(item.children?.[0]);
|
|
163
|
+
}
|
|
164
|
+
break;
|
|
165
|
+
default:
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
event.preventDefault();
|
|
169
|
+
event.stopPropagation();
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
attributes: {
|
|
173
|
+
"aria-label": tansu.computed(() => {
|
|
174
|
+
const { item } = treeItemContext$();
|
|
175
|
+
return ariaLabelToggleFn$()(item.ariaLabel);
|
|
176
|
+
}),
|
|
177
|
+
tabindex: tansu.computed(() => {
|
|
178
|
+
const { item } = treeItemContext$();
|
|
179
|
+
return item === _lastFocusedTreeItem$() ? "0" : "-1";
|
|
180
|
+
}),
|
|
181
|
+
type: tansu.readable("button")
|
|
182
|
+
},
|
|
183
|
+
classNames: {
|
|
184
|
+
"au-tree-expand-icon": utils_stores.true$,
|
|
185
|
+
"au-tree-expand-icon-expanded": tansu.computed(() => {
|
|
186
|
+
_toggleChange$();
|
|
187
|
+
const { item } = treeItemContext$();
|
|
188
|
+
return item.isExpanded ?? false;
|
|
189
|
+
})
|
|
190
|
+
}
|
|
191
|
+
})
|
|
192
|
+
);
|
|
193
|
+
const toggleExpanded = (node) => {
|
|
194
|
+
const treeItemInfo = getTreeItemInfo(node);
|
|
195
|
+
if (treeItemInfo === void 0 || node.isExpanded === void 0) {
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
node.isExpanded = !node.isExpanded;
|
|
199
|
+
_toggleChange$.set({});
|
|
200
|
+
onExpandToggle$()(node);
|
|
201
|
+
};
|
|
202
|
+
const widget = {
|
|
203
|
+
...utils_stores.stateStores({ normalizedNodes$, expandedMap$, ...stateProps }),
|
|
204
|
+
patch,
|
|
205
|
+
api: {},
|
|
206
|
+
directives: {
|
|
207
|
+
navigationDirective: utils_directive.bindDirective(navDirective, navManagerConfig$),
|
|
208
|
+
itemToggleDirective: utils_directive.mergeDirectives(treeItemElementDirective, itemToggleAttributesDirective),
|
|
209
|
+
itemAttributesDirective: utils_directive.createAttributesDirective(
|
|
210
|
+
(treeItemContext$) => ({
|
|
211
|
+
attributes: {
|
|
212
|
+
role: tansu.readable("treeitem"),
|
|
213
|
+
"aria-selected": tansu.readable("false"),
|
|
214
|
+
// TODO: adapt aria-selected to the actual selected state
|
|
215
|
+
"aria-expanded": tansu.computed(() => {
|
|
216
|
+
const { item } = treeItemContext$();
|
|
217
|
+
_toggleChange$();
|
|
218
|
+
return item.isExpanded?.toString();
|
|
219
|
+
})
|
|
220
|
+
}
|
|
221
|
+
})
|
|
222
|
+
)
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
return widget;
|
|
226
|
+
});
|
|
227
|
+
exports.createTree = createTree;
|
|
228
|
+
exports.getTreeDefaultConfig = getTreeDefaultConfig;
|