@cedx/base 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/ReadMe.md +1 -1
  2. package/lib/UI/Components/DialogButton.d.ts +25 -0
  3. package/lib/UI/Components/DialogButton.d.ts.map +1 -1
  4. package/lib/UI/Components/DialogButton.js +3 -12
  5. package/lib/UI/Components/Toast.d.ts +45 -8
  6. package/lib/UI/Components/Toast.d.ts.map +1 -1
  7. package/lib/UI/Components/Toast.js +17 -29
  8. package/lib/UI/Components/Toaster.d.ts +3 -39
  9. package/lib/UI/Components/Toaster.d.ts.map +1 -1
  10. package/lib/UI/Components/Toaster.js +7 -16
  11. package/package.json +1 -1
  12. package/src/Client/UI/Components/DialogButton.ts +34 -6
  13. package/src/Client/UI/Components/Toast.ts +65 -23
  14. package/src/Client/UI/Components/Toaster.ts +8 -56
package/ReadMe.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Cédric Belin's Base
2
- ![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.16.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
2
+ ![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.17.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
3
3
 
4
4
  Base library by [Cédric Belin](https://cedric-belin.fr), full stack developer,
5
5
  implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).
package/lib/UI/Components/DialogButton.d.ts CHANGED
@@ -1,6 +1,31 @@
1
1
  import { Context } from "../Context.js";
2
2
  import { DialogResult } from "../DialogResult.js";
3
3
  import { Variant } from "../Variant.js";
4
+ /**
5
+ * Represents a dialog box button.
6
+ */
7
+ export interface IDialogButton {
8
+ /**
9
+ * A contextual modifier.
10
+ */
11
+ context?: Context | null;
12
+ /**
13
+ * The button icon.
14
+ */
15
+ icon?: string | null;
16
+ /**
17
+ * The button label.
18
+ */
19
+ label?: string;
20
+ /**
21
+ * The button value.
22
+ */
23
+ value?: DialogResult;
24
+ /**
25
+ * A tone variant.
26
+ */
27
+ variant?: Variant | null;
28
+ }
4
29
  /**
5
30
  * Represents a dialog box button.
6
31
  */
package/lib/UI/Components/DialogButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAE3D;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;;IAE5C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAoD;IAStF;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAG9B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,YAAY,CAGxB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,EAE5B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAG9B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;CA6D/F;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
1
+ {"version":3,"file":"DialogButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,aAAa;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,IAAI,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;;IAE5C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAoD;IAStF;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAE9B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAE1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,YAAY,CAGxB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,EAE5B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAE9B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;CA6D/F;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
package/lib/UI/Components/DialogButton.js CHANGED
@@ -23,10 +23,7 @@ export class DialogButton extends HTMLElement {
23
23
  return Object.values(Context).includes(value) ? value : null;
24
24
  }
25
25
  set context(value) {
26
- if (value)
27
- this.setAttribute("context", value);
28
- else
29
- this.removeAttribute("context");
26
+ this.toggleAttribute("context", Boolean(value));
30
27
  }
31
28
  /**
32
29
  * The button icon.
@@ -36,10 +33,7 @@ export class DialogButton extends HTMLElement {
36
33
  return value.trim() || null;
37
34
  }
38
35
  set icon(value) {
39
- if (value)
40
- this.setAttribute("icon", value);
41
- else
42
- this.removeAttribute("icon");
36
+ this.toggleAttribute("icon", Boolean(value));
43
37
  }
44
38
  /**
45
39
  * The button label.
@@ -68,10 +62,7 @@ export class DialogButton extends HTMLElement {
68
62
  return Object.values(Variant).includes(value) ? value : null;
69
63
  }
70
64
  set variant(value) {
71
- if (value)
72
- this.setAttribute("variant", value);
73
- else
74
- this.removeAttribute("variant");
65
+ this.toggleAttribute("context", Boolean(value));
75
66
  }
76
67
  /**
77
68
  * Method invoked when an attribute has been changed.
package/lib/UI/Components/Toast.d.ts CHANGED
@@ -1,4 +1,41 @@
1
1
  import { Context } from "../Context.js";
2
+ /**
3
+ * Represents a notification.
4
+ */
5
+ export interface IToast {
6
+ /**
7
+ * Value indicating whether to apply a fade transition.
8
+ */
9
+ animation?: boolean;
10
+ /**
11
+ * Value indicating whether to automatically hide the toast.
12
+ */
13
+ autoHide?: boolean;
14
+ /**
15
+ * The child content displayed in the body.
16
+ */
17
+ body: DocumentFragment | string;
18
+ /**
19
+ * The title displayed in the header.
20
+ */
21
+ caption: string;
22
+ /**
23
+ * The default contextual modifier.
24
+ */
25
+ context?: Context;
26
+ /**
27
+ * The culture used to format the relative time.
28
+ */
29
+ culture?: Intl.Locale;
30
+ /**
31
+ * The delay, in milliseconds, to hide the toast.
32
+ */
33
+ delay?: number;
34
+ /**
35
+ * The icon displayed next to the caption.
36
+ */
37
+ icon?: string | null;
38
+ }
2
39
  /**
3
40
  * Represents a notification.
4
41
  */
@@ -18,15 +55,15 @@ export declare class Toast extends HTMLElement {
18
55
  */
19
56
  get autoHide(): boolean;
20
57
  set autoHide(value: boolean);
58
+ /**
59
+ * The child content displayed in the body.
60
+ */
61
+ set body(value: DocumentFragment);
21
62
  /**
22
63
  * The title displayed in the header.
23
64
  */
24
65
  get caption(): string;
25
66
  set caption(value: string);
26
- /**
27
- * The child content displayed in the body.
28
- */
29
- set childContent(value: DocumentFragment);
30
67
  /**
31
68
  * A contextual modifier.
32
69
  */
@@ -63,6 +100,10 @@ export declare class Toast extends HTMLElement {
63
100
  * @param newValue The new attribute value.
64
101
  */
65
102
  attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
103
+ /**
104
+ * Closes this toast.
105
+ */
106
+ close(): void;
66
107
  /**
67
108
  * Method invoked when this component is connected.
68
109
  */
@@ -71,10 +112,6 @@ export declare class Toast extends HTMLElement {
71
112
  * Method invoked when this component is disconnected.
72
113
  */
73
114
  disconnectedCallback(): void;
74
- /**
75
- * Hides this toast.
76
- */
77
- hide(): void;
78
115
  /**
79
116
  * Shows this toast.
80
117
  */
package/lib/UI/Components/Toast.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAkE;IAkCpG;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,gBAAgB,EAEvC;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAGtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAY/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+EZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}
1
+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAE9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAkE;IAkCpG;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAY/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CA+EZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}
package/lib/UI/Components/Toast.js CHANGED
@@ -41,10 +41,7 @@ export class Toast extends HTMLElement {
41
41
  return this.hasAttribute("animation");
42
42
  }
43
43
  set animation(value) {
44
- if (value)
45
- this.setAttribute("animation", "");
46
- else
47
- this.removeAttribute("animation");
44
+ this.toggleAttribute("animation", value);
48
45
  }
49
46
  /**
50
47
  * Value indicating whether to automatically hide this toast.
@@ -53,10 +50,13 @@ export class Toast extends HTMLElement {
53
50
  return this.hasAttribute("autohide");
54
51
  }
55
52
  set autoHide(value) {
56
- if (value)
57
- this.setAttribute("autohide", "");
58
- else
59
- this.removeAttribute("autohide");
53
+ this.toggleAttribute("autohide", value);
54
+ }
55
+ /**
56
+ * The child content displayed in the body.
57
+ */
58
+ set body(value) {
59
+ this.querySelector(".toast-body").replaceChildren(...value.childNodes);
60
60
  }
61
61
  /**
62
62
  * The title displayed in the header.
@@ -67,12 +67,6 @@ export class Toast extends HTMLElement {
67
67
  set caption(value) {
68
68
  this.setAttribute("caption", value);
69
69
  }
70
- /**
71
- * The child content displayed in the body.
72
- */
73
- set childContent(value) {
74
- this.querySelector(".toast-body").replaceChildren(...value.childNodes);
75
- }
76
70
  /**
77
71
  * A contextual modifier.
78
72
  */
@@ -117,10 +111,7 @@ export class Toast extends HTMLElement {
117
111
  return value.trim() || null;
118
112
  }
119
113
  set icon(value) {
120
- if (value)
121
- this.setAttribute("icon", value);
122
- else
123
- this.removeAttribute("icon");
114
+ this.toggleAttribute("icon", Boolean(value));
124
115
  }
125
116
  /**
126
117
  * Value indicating whether to initially show this toast.
@@ -129,10 +120,7 @@ export class Toast extends HTMLElement {
129
120
  return this.hasAttribute("open");
130
121
  }
131
122
  set open(value) {
132
- if (value)
133
- this.setAttribute("open", "");
134
- else
135
- this.removeAttribute("open");
123
+ this.toggleAttribute("open", value);
136
124
  }
137
125
  /**
138
126
  * Method invoked when an attribute has been changed.
@@ -164,11 +152,17 @@ export class Toast extends HTMLElement {
164
152
  // No default
165
153
  }
166
154
  }
155
+ /**
156
+ * Closes this toast.
157
+ */
158
+ close() {
159
+ this.#toast.hide();
160
+ }
167
161
  /**
168
162
  * Method invoked when this component is connected.
169
163
  */
170
164
  connectedCallback() {
171
- const toast = this.querySelector(".toast");
165
+ const toast = this.firstElementChild;
172
166
  toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
173
167
  toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, 1_000));
174
168
  const { animation, autoHide: autohide, delay } = this;
@@ -181,12 +175,6 @@ export class Toast extends HTMLElement {
181
175
  clearInterval(this.#timer);
182
176
  this.#toast.dispose();
183
177
  }
184
- /**
185
- * Hides this toast.
186
- */
187
- hide() {
188
- this.#toast.hide();
189
- }
190
178
  /**
191
179
  * Shows this toast.
192
180
  */
package/lib/UI/Components/Toaster.d.ts CHANGED
@@ -1,42 +1,6 @@
1
1
  import { Context } from "../Context.js";
2
2
  import { Position } from "../Position.js";
3
- /**
4
- * Represents a notification.
5
- */
6
- export interface IToast {
7
- /**
8
- * Value indicating whether to apply a fade transition.
9
- */
10
- animation?: boolean;
11
- /**
12
- * Value indicating whether to automatically hide the toast.
13
- */
14
- autoHide?: boolean;
15
- /**
16
- * The title displayed in the header.
17
- */
18
- caption: string;
19
- /**
20
- * The child content displayed in the body.
21
- */
22
- childContent: DocumentFragment | string;
23
- /**
24
- * The default contextual modifier.
25
- */
26
- context?: Context;
27
- /**
28
- * The culture used to format the relative time.
29
- */
30
- culture?: Intl.Locale;
31
- /**
32
- * The delay, in milliseconds, to hide the toast.
33
- */
34
- delay?: number;
35
- /**
36
- * The icon displayed next to the caption.
37
- */
38
- icon?: string;
39
- }
3
+ import type { IToast } from "./Toast.js";
40
4
  /**
41
5
  * Manages the notifications.
42
6
  */
@@ -92,9 +56,9 @@ export declare class Toaster extends HTMLElement {
92
56
  * Shows a toast.
93
57
  * @param context The contextual modifier.
94
58
  * @param caption The title displayed in the toast header.
95
- * @param childContent The child content displayed in the toast body.
59
+ * @param body The child content displayed in the toast body.
96
60
  */
97
- notify(context: Context, caption: string, childContent: DocumentFragment | string): void;
61
+ notify(context: Context, caption: string, body: DocumentFragment | string): void;
98
62
  /**
99
63
  * Shows the specified toast.
100
64
  * @param toast The toast to show.
package/lib/UI/Components/Toaster.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAEtC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAclD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAItF;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA2BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}
1
+ {"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,YAAY,CAAC;AAEvC;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAclD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAE1B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAI9E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA2BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}
package/lib/UI/Components/Toaster.js CHANGED
@@ -26,10 +26,7 @@ export class Toaster extends HTMLElement {
26
26
  return this.hasAttribute("animation");
27
27
  }
28
28
  set animation(value) {
29
- if (value)
30
- this.setAttribute("animation", "");
31
- else
32
- this.removeAttribute("animation");
29
+ this.toggleAttribute("animation", value);
33
30
  }
34
31
  /**
35
32
  * Value indicating whether to automatically hide the toasts.
@@ -38,10 +35,7 @@ export class Toaster extends HTMLElement {
38
35
  return this.hasAttribute("autohide");
39
36
  }
40
37
  set autoHide(value) {
41
- if (value)
42
- this.setAttribute("autohide", "");
43
- else
44
- this.removeAttribute("autohide");
38
+ this.toggleAttribute("autohide", value);
45
39
  }
46
40
  /**
47
41
  * The default contextual modifier.
@@ -81,10 +75,7 @@ export class Toaster extends HTMLElement {
81
75
  return value.trim() || null;
82
76
  }
83
77
  set icon(value) {
84
- if (value)
85
- this.setAttribute("icon", value);
86
- else
87
- this.removeAttribute("icon");
78
+ this.toggleAttribute("icon", Boolean(value));
88
79
  }
89
80
  /**
90
81
  * The toaster placement.
@@ -115,10 +106,10 @@ export class Toaster extends HTMLElement {
115
106
  * Shows a toast.
116
107
  * @param context The contextual modifier.
117
108
  * @param caption The title displayed in the toast header.
118
- * @param childContent The child content displayed in the toast body.
109
+ * @param body The child content displayed in the toast body.
119
110
  */
120
- notify(context, caption, childContent) {
121
- this.show({ context, caption, childContent });
111
+ notify(context, caption, body) {
112
+ this.show({ context, caption, body });
122
113
  }
123
114
  /**
124
115
  * Shows the specified toast.
@@ -130,8 +121,8 @@ export class Toaster extends HTMLElement {
130
121
  item.appendChild(this.#toastTemplate.cloneNode(true).querySelector(".toast"));
131
122
  item.animation = toast.animation ?? this.animation;
132
123
  item.autoHide = toast.autoHide ?? this.autoHide;
124
+ item.body = typeof toast.body == "string" ? createDocumentFragment(toast.body) : toast.body;
133
125
  item.caption = toast.caption;
134
- item.childContent = typeof toast.childContent == "string" ? createDocumentFragment(toast.childContent) : toast.childContent;
135
126
  item.context = toast.context ?? this.context;
136
127
  item.culture = toast.culture ?? this.culture;
137
128
  item.delay = toast.delay ?? this.delay;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "name": "@cedx/base",
8
8
  "repository": "cedx/base",
9
9
  "type": "module",
10
- "version": "0.16.0",
10
+ "version": "0.17.0",
11
11
  "devDependencies": {
12
12
  "@playwright/browser-chromium": "^1.55.0",
13
13
  "@types/bootstrap": "^5.2.10",
package/src/Client/UI/Components/DialogButton.ts CHANGED
@@ -2,6 +2,37 @@ import {Context, toCss as contextCss} from "../Context.js";
2
2
  import {DialogResult} from "../DialogResult.js";
3
3
  import {Variant, toCss as variantCss} from "../Variant.js";
4
4
 
5
+ /**
6
+ * Represents a dialog box button.
7
+ */
8
+ export interface IDialogButton {
9
+
10
+ /**
11
+ * A contextual modifier.
12
+ */
13
+ context?: Context|null;
14
+
15
+ /**
16
+ * The button icon.
17
+ */
18
+ icon?: string|null;
19
+
20
+ /**
21
+ * The button label.
22
+ */
23
+ label?: string;
24
+
25
+ /**
26
+ * The button value.
27
+ */
28
+ value?: DialogResult;
29
+
30
+ /**
31
+ * A tone variant.
32
+ */
33
+ variant?: Variant|null;
34
+ }
35
+
5
36
  /**
6
37
  * Represents a dialog box button.
7
38
  */
@@ -27,8 +58,7 @@ export class DialogButton extends HTMLElement {
27
58
  return Object.values(Context).includes(value) ? value : null;
28
59
  }
29
60
  set context(value: Context|null) {
30
- if (value) this.setAttribute("context", value);
31
- else this.removeAttribute("context");
61
+ this.toggleAttribute("context", Boolean(value));
32
62
  }
33
63
 
34
64
  /**
@@ -39,8 +69,7 @@ export class DialogButton extends HTMLElement {
39
69
  return value.trim() || null;
40
70
  }
41
71
  set icon(value: string|null) {
42
- if (value) this.setAttribute("icon", value);
43
- else this.removeAttribute("icon");
72
+ this.toggleAttribute("icon", Boolean(value));
44
73
  }
45
74
 
46
75
  /**
@@ -72,8 +101,7 @@ export class DialogButton extends HTMLElement {
72
101
  return Object.values(Variant).includes(value) ? value : null;
73
102
  }
74
103
  set variant(value: Variant|null) {
75
- if (value) this.setAttribute("variant", value);
76
- else this.removeAttribute("variant");
104
+ this.toggleAttribute("context", Boolean(value));
77
105
  }
78
106
 
79
107
  /**
package/src/Client/UI/Components/Toast.ts CHANGED
@@ -1,6 +1,52 @@
1
1
  import {Toast as BootstrapToast} from "bootstrap";
2
2
  import {Context, getIcon, toCss} from "../Context.js";
3
3
 
4
+ /**
5
+ * Represents a notification.
6
+ */
7
+ export interface IToast {
8
+
9
+ /**
10
+ * Value indicating whether to apply a fade transition.
11
+ */
12
+ animation?: boolean;
13
+
14
+ /**
15
+ * Value indicating whether to automatically hide the toast.
16
+ */
17
+ autoHide?: boolean;
18
+
19
+ /**
20
+ * The child content displayed in the body.
21
+ */
22
+ body: DocumentFragment|string;
23
+
24
+ /**
25
+ * The title displayed in the header.
26
+ */
27
+ caption: string;
28
+
29
+ /**
30
+ * The default contextual modifier.
31
+ */
32
+ context?: Context;
33
+
34
+ /**
35
+ * The culture used to format the relative time.
36
+ */
37
+ culture?: Intl.Locale;
38
+
39
+ /**
40
+ * The delay, in milliseconds, to hide the toast.
41
+ */
42
+ delay?: number;
43
+
44
+ /**
45
+ * The icon displayed next to the caption.
46
+ */
47
+ icon?: string|null;
48
+ }
49
+
4
50
  /**
5
51
  * Represents a notification.
6
52
  */
@@ -50,8 +96,7 @@ export class Toast extends HTMLElement {
50
96
  return this.hasAttribute("animation");
51
97
  }
52
98
  set animation(value: boolean) {
53
- if (value) this.setAttribute("animation", "");
54
- else this.removeAttribute("animation");
99
+ this.toggleAttribute("animation", value);
55
100
  }
56
101
 
57
102
  /**
@@ -61,8 +106,14 @@ export class Toast extends HTMLElement {
61
106
  return this.hasAttribute("autohide");
62
107
  }
63
108
  set autoHide(value: boolean) {
64
- if (value) this.setAttribute("autohide", "");
65
- else this.removeAttribute("autohide");
109
+ this.toggleAttribute("autohide", value);
110
+ }
111
+
112
+ /**
113
+ * The child content displayed in the body.
114
+ */
115
+ set body(value: DocumentFragment) { // eslint-disable-line accessor-pairs
116
+ this.querySelector(".toast-body")!.replaceChildren(...value.childNodes);
66
117
  }
67
118
 
68
119
  /**
@@ -75,13 +126,6 @@ export class Toast extends HTMLElement {
75
126
  this.setAttribute("caption", value);
76
127
  }
77
128
 
78
- /**
79
- * The child content displayed in the body.
80
- */
81
- set childContent(value: DocumentFragment) { // eslint-disable-line accessor-pairs
82
- this.querySelector(".toast-body")!.replaceChildren(...value.childNodes);
83
- }
84
-
85
129
  /**
86
130
  * A contextual modifier.
87
131
  */
@@ -130,8 +174,7 @@ export class Toast extends HTMLElement {
130
174
  return value.trim() || null;
131
175
  }
132
176
  set icon(value: string|null) {
133
- if (value) this.setAttribute("icon", value);
134
- else this.removeAttribute("icon");
177
+ this.toggleAttribute("icon", Boolean(value));
135
178
  }
136
179
 
137
180
  /**
@@ -141,8 +184,7 @@ export class Toast extends HTMLElement {
141
184
  return this.hasAttribute("open");
142
185
  }
143
186
  set open(value: boolean) {
144
- if (value) this.setAttribute("open", "");
145
- else this.removeAttribute("open");
187
+ this.toggleAttribute("open", value);
146
188
  }
147
189
 
148
190
  /**
@@ -163,11 +205,18 @@ export class Toast extends HTMLElement {
163
205
  }
164
206
  }
165
207
 
208
+ /**
209
+ * Closes this toast.
210
+ */
211
+ close(): void {
212
+ this.#toast.hide();
213
+ }
214
+
166
215
  /**
167
216
  * Method invoked when this component is connected.
168
217
  */
169
218
  connectedCallback(): void {
170
- const toast = this.querySelector(".toast")!;
219
+ const toast = this.firstElementChild!;
171
220
  toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
172
221
  toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, 1_000));
173
222
 
@@ -183,13 +232,6 @@ export class Toast extends HTMLElement {
183
232
  this.#toast.dispose();
184
233
  }
185
234
 
186
- /**
187
- * Hides this toast.
188
- */
189
- hide(): void {
190
- this.#toast.hide();
191
- }
192
-
193
235
  /**
194
236
  * Shows this toast.
195
237
  */
package/src/Client/UI/Components/Toaster.ts CHANGED
@@ -1,52 +1,7 @@
1
1
  import {Context} from "../Context.js";
2
2
  import {createDocumentFragment} from "../ElementExtensions.js";
3
3
  import {Position, toCss} from "../Position.js";
4
-
5
- /**
6
- * Represents a notification.
7
- */
8
- export interface IToast {
9
-
10
- /**
11
- * Value indicating whether to apply a fade transition.
12
- */
13
- animation?: boolean;
14
-
15
- /**
16
- * Value indicating whether to automatically hide the toast.
17
- */
18
- autoHide?: boolean;
19
-
20
- /**
21
- * The title displayed in the header.
22
- */
23
- caption: string;
24
-
25
- /**
26
- * The child content displayed in the body.
27
- */
28
- childContent: DocumentFragment|string;
29
-
30
- /**
31
- * The default contextual modifier.
32
- */
33
- context?: Context;
34
-
35
- /**
36
- * The culture used to format the relative time.
37
- */
38
- culture?: Intl.Locale;
39
-
40
- /**
41
- * The delay, in milliseconds, to hide the toast.
42
- */
43
- delay?: number;
44
-
45
- /**
46
- * The icon displayed next to the caption.
47
- */
48
- icon?: string;
49
- }
4
+ import type {IToast} from "./Toast.js";
50
5
 
51
6
  /**
52
7
  * Manages the notifications.
@@ -77,8 +32,7 @@ export class Toaster extends HTMLElement {
77
32
  return this.hasAttribute("animation");
78
33
  }
79
34
  set animation(value: boolean) {
80
- if (value) this.setAttribute("animation", "");
81
- else this.removeAttribute("animation");
35
+ this.toggleAttribute("animation", value);
82
36
  }
83
37
 
84
38
  /**
@@ -88,8 +42,7 @@ export class Toaster extends HTMLElement {
88
42
  return this.hasAttribute("autohide");
89
43
  }
90
44
  set autoHide(value: boolean) {
91
- if (value) this.setAttribute("autohide", "");
92
- else this.removeAttribute("autohide");
45
+ this.toggleAttribute("autohide", value);
93
46
  }
94
47
 
95
48
  /**
@@ -133,8 +86,7 @@ export class Toaster extends HTMLElement {
133
86
  return value.trim() || null;
134
87
  }
135
88
  set icon(value: string|null) {
136
- if (value) this.setAttribute("icon", value);
137
- else this.removeAttribute("icon");
89
+ this.toggleAttribute("icon", Boolean(value));
138
90
  }
139
91
 
140
92
  /**
@@ -167,10 +119,10 @@ export class Toaster extends HTMLElement {
167
119
  * Shows a toast.
168
120
  * @param context The contextual modifier.
169
121
  * @param caption The title displayed in the toast header.
170
- * @param childContent The child content displayed in the toast body.
122
+ * @param body The child content displayed in the toast body.
171
123
  */
172
- notify(context: Context, caption: string, childContent: DocumentFragment|string): void {
173
- this.show({context, caption, childContent});
124
+ notify(context: Context, caption: string, body: DocumentFragment|string): void {
125
+ this.show({context, caption, body});
174
126
  }
175
127
 
176
128
  /**
@@ -184,8 +136,8 @@ export class Toaster extends HTMLElement {
184
136
 
185
137
  item.animation = toast.animation ?? this.animation;
186
138
  item.autoHide = toast.autoHide ?? this.autoHide;
139
+ item.body = typeof toast.body == "string" ? createDocumentFragment(toast.body) : toast.body;
187
140
  item.caption = toast.caption;
188
- item.childContent = typeof toast.childContent == "string" ? createDocumentFragment(toast.childContent) : toast.childContent;
189
141
  item.context = toast.context ?? this.context;
190
142
  item.culture = toast.culture ?? this.culture;
191
143
  item.delay = toast.delay ?? this.delay;