@supersoniks/concorde 2.0.1 → 2.0.3

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 (102) hide show
  1. package/README.md +1 -0
  2. package/concorde-core.bundle.js +748 -690
  3. package/concorde-core.es.js +3754 -2953
  4. package/core/_types/types.d.ts +2 -4
  5. package/core/components/functional/date/date.d.ts +4 -2
  6. package/core/components/functional/date/date.js +28 -13
  7. package/core/components/functional/fetch/fetch.d.ts +9 -10
  8. package/core/components/functional/fetch/fetch.js +21 -5
  9. package/core/components/functional/list/list.d.ts +7 -10
  10. package/core/components/functional/list/list.js +19 -4
  11. package/core/components/functional/queue/queue.d.ts +3 -2
  12. package/core/components/functional/queue/queue.js +66 -61
  13. package/core/components/functional/router/router.d.ts +1 -0
  14. package/core/components/functional/router/router.js +12 -1
  15. package/core/components/functional/sdui/sdui.d.ts +2 -7
  16. package/core/components/functional/submit/submit.js +11 -4
  17. package/core/components/ui/_css/scroll.js +13 -11
  18. package/core/components/ui/_css/size.js +1 -1
  19. package/core/components/ui/alert/alert.d.ts +14 -3
  20. package/core/components/ui/alert/alert.js +34 -4
  21. package/core/components/ui/badge/badge.js +10 -3
  22. package/core/components/ui/button/button.d.ts +19 -10
  23. package/core/components/ui/button/button.js +77 -22
  24. package/core/components/ui/captcha/captcha.d.ts +5 -4
  25. package/core/components/ui/captcha/captcha.js +33 -9
  26. package/core/components/ui/divider/divider.d.ts +2 -0
  27. package/core/components/ui/divider/divider.js +17 -2
  28. package/core/components/ui/form/checkbox/checkbox.d.ts +24 -9
  29. package/core/components/ui/form/checkbox/checkbox.js +4 -6
  30. package/core/components/ui/form/css/form-control.js +40 -7
  31. package/core/components/ui/form/fieldset/fieldset.d.ts +1 -0
  32. package/core/components/ui/form/fieldset/fieldset.js +14 -1
  33. package/core/components/ui/form/fieldset/legend-description.js +3 -3
  34. package/core/components/ui/form/fieldset/legend.js +2 -8
  35. package/core/components/ui/form/input/input.d.ts +4 -5
  36. package/core/components/ui/form/input/input.js +17 -14
  37. package/core/components/ui/form/input-autocomplete/input-autocomplete.d.ts +19 -6
  38. package/core/components/ui/form/input-autocomplete/input-autocomplete.js +40 -9
  39. package/core/components/ui/form/select/select.d.ts +4 -1
  40. package/core/components/ui/form/select/select.js +25 -18
  41. package/core/components/ui/form/textarea/textarea.d.ts +4 -5
  42. package/core/components/ui/form/textarea/textarea.js +19 -10
  43. package/core/components/ui/group/group.js +3 -3
  44. package/core/components/ui/icon/icon.js +2 -1
  45. package/core/components/ui/icon/icons.d.ts +0 -4
  46. package/core/components/ui/icon/icons.js +5 -18
  47. package/core/components/ui/link/link.d.ts +5 -2
  48. package/core/components/ui/link/link.js +31 -2
  49. package/core/components/ui/loader/loader.d.ts +4 -1
  50. package/core/components/ui/loader/loader.js +11 -3
  51. package/core/components/ui/loader/styles/inline.js +14 -16
  52. package/core/components/ui/menu/menu-item.js +2 -1
  53. package/core/components/ui/menu/menu.js +6 -22
  54. package/core/components/ui/modal/modal-close.js +2 -1
  55. package/core/components/ui/modal/modal.d.ts +13 -1
  56. package/core/components/ui/modal/modal.js +70 -10
  57. package/core/components/ui/pop/pop.d.ts +9 -3
  58. package/core/components/ui/pop/pop.js +46 -23
  59. package/core/components/ui/table/table-tr.d.ts +10 -2
  60. package/core/components/ui/table/table-tr.js +30 -2
  61. package/core/components/ui/table/table.d.ts +1 -0
  62. package/core/components/ui/table/table.js +7 -1
  63. package/core/components/ui/theme/theme-collection/core-variables.js +8 -19
  64. package/core/components/ui/theme/theme.d.ts +6 -0
  65. package/core/components/ui/theme/theme.js +11 -13
  66. package/core/components/ui/toast/message-subscriber.d.ts +0 -8
  67. package/core/components/ui/toast/message-subscriber.js +0 -46
  68. package/core/components/ui/toast/toast-item.js +31 -40
  69. package/core/components/ui/toast/toast.d.ts +5 -1
  70. package/core/components/ui/toast/toast.js +80 -13
  71. package/core/components/ui/tooltip/tooltip.d.ts +3 -1
  72. package/core/components/ui/tooltip/tooltip.js +22 -0
  73. package/core/decorators/Subscriber.d.ts +3 -3
  74. package/core/decorators/Subscriber.js +64 -21
  75. package/core/directives/DataProvider.d.ts +12 -7
  76. package/core/directives/DataProvider.js +23 -8
  77. package/core/directives/Wording.d.ts +42 -0
  78. package/core/directives/Wording.js +202 -0
  79. package/core/mixins/Fetcher.d.ts +8 -11
  80. package/core/mixins/Fetcher.js +38 -22
  81. package/core/mixins/FormCheckable.d.ts +1 -4
  82. package/core/mixins/FormElement.d.ts +1 -0
  83. package/core/mixins/FormElement.js +3 -6
  84. package/core/mixins/FormInput.d.ts +3 -5
  85. package/core/mixins/FormInput.js +4 -0
  86. package/core/mixins/Subscriber.d.ts +0 -4
  87. package/core/mixins/Subscriber.js +13 -89
  88. package/core/mixins/TemplatesContainer.js +9 -0
  89. package/core/utils/Format.d.ts +1 -0
  90. package/core/utils/Format.js +16 -0
  91. package/core/utils/HTML.d.ts +13 -0
  92. package/core/utils/HTML.js +42 -3
  93. package/core/utils/Objects.d.ts +1 -0
  94. package/core/utils/Objects.js +5 -0
  95. package/core/utils/PublisherProxy.d.ts +16 -10
  96. package/core/utils/PublisherProxy.js +100 -64
  97. package/core/utils/Utils.d.ts +1 -0
  98. package/core/utils/Utils.js +5 -0
  99. package/core/utils/api.d.ts +26 -0
  100. package/core/utils/api.js +135 -3
  101. package/mixins.d.ts +6 -16
  102. package/package.json +7 -2
@@ -2,8 +2,7 @@ import { css } from "lit";
2
2
  export const coreVariables = css `
3
3
  :host {
4
4
  /* polices*/
5
- --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui,
6
- BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
5
+ --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
7
6
  sans-serif;
8
7
  --sc-font-weight-base: 400;
9
8
  --sc-font-style-base: normal;
@@ -30,37 +29,27 @@ export const coreVariables = css `
30
29
  /* 4 for rounded full*/
31
30
  --sc-btn-rounded-intensity: 1.4;
32
31
  --sc-btn-font-weight: 500;
33
- --sc-btn-rounded: calc(
34
- (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
35
- var(--sc-btn-rounded-intensity)
36
- );
32
+ --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity));
37
33
 
38
34
  /* Placeholder */
39
35
  --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
40
36
 
41
37
  /* OMBRES */
42
- --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
43
- 0 1px 2px -1px rgb(0 0 0 / 0.1);
44
- --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
45
- 0 2px 4px -2px rgb(0 0 0 / 0.1);
46
- --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1),
47
- 0 4px 6px -4px rgb(0 0 0 / 0.1);
48
- --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
49
- 0 8px 10px -6px rgb(0 0 0 / 0.1);
38
+ --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
39
+ --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
40
+ --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
41
+ --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
50
42
  --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
51
43
 
52
44
  /* Forms */
53
45
  --sc-border-width: max(1px, 0.12rem);
54
- --sc-border-color: var(--sc-base-200);
46
+ --sc-border-color: var(--sc-base-100);
55
47
  --sc-form-height: 2.5em;
56
48
  --sc-form-border-width: var(--sc-border-width);
57
49
  --sc-input-bg: var(--sc-base-100);
58
50
  --sc-input-border-color: var(--sc-input-bg);
59
51
  --sc-input-rounded-intensity: 1.4;
60
- --sc-input-rounded: calc(
61
- (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
62
- var(--sc-input-rounded-intensity)
63
- );
52
+ --sc-input-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity));
64
53
  --sc-label-font-weight: 500;
65
54
 
66
55
  /* Contrast -- ex : Text on images */
@@ -1,6 +1,12 @@
1
1
  import { LitElement } from "lit";
2
2
  export declare class Theme extends LitElement {
3
3
  static styles: import("lit").CSSResult[];
4
+ static instance: Theme | undefined;
5
+ constructor();
6
+ /**
7
+ * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
8
+ */
9
+ static getPopContainer(): HTMLElement;
4
10
  theme: string;
5
11
  background: boolean;
6
12
  color: boolean;
@@ -14,15 +14,23 @@ import { PublisherManager } from "@supersoniks/concorde/utils";
14
14
  const tagName = "sonic-theme";
15
15
  let Theme = Theme_1 = class Theme extends LitElement {
16
16
  constructor() {
17
- super(...arguments);
17
+ super();
18
18
  this.theme = "light";
19
19
  this.background = false;
20
20
  this.color = false;
21
21
  this.font = false;
22
+ Theme_1.instance = this;
23
+ }
24
+ /**
25
+ * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
26
+ */
27
+ static getPopContainer() {
28
+ return Theme_1.instance || document.body;
22
29
  }
23
30
  connectedCallback() {
24
31
  super.connectedCallback();
25
32
  window.addEventListener("message", (e) => this.receiveMessage(e), false);
33
+ window.dispatchEvent(new CustomEvent("SonicThemeReady"));
26
34
  this.postCSSVars();
27
35
  }
28
36
  postCSSVars() {
@@ -31,8 +39,7 @@ let Theme = Theme_1 = class Theme extends LitElement {
31
39
  const fontUrls = [];
32
40
  for (let i = 0; i < ssLength; i++) {
33
41
  const ss = stylesheets[i];
34
- if (ss.href &&
35
- (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
42
+ if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
36
43
  fontUrls.push(ss.href);
37
44
  }
38
45
  const theme = {
@@ -53,10 +60,7 @@ let Theme = Theme_1 = class Theme extends LitElement {
53
60
  }
54
61
  getCssVariables() {
55
62
  const names = [];
56
- const stylesheets = [
57
- ...Theme_1.styles.map((s) => s.styleSheet),
58
- ...Array.from(document.styleSheets),
59
- ];
63
+ const stylesheets = [...Theme_1.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)];
60
64
  for (const stylesheet of stylesheets) {
61
65
  try {
62
66
  if (!stylesheet)
@@ -91,12 +95,6 @@ Theme.styles = [
91
95
  dark,
92
96
  coreVariables,
93
97
  css `
94
- :host([background]) {
95
- display: block !important;
96
- background: var(--sc-body-bg) !important;
97
- min-height: 100vh;
98
- }
99
-
100
98
  :host([color]) {
101
99
  color: var(--sc-base-content);
102
100
  }
@@ -11,16 +11,8 @@ type APIResult = {
11
11
  declare const MessageSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<APIResult>) & typeof LitElement;
12
12
  export declare class MessageSubscriber extends MessageSubscriber_base {
13
13
  _messages: Array<Message>;
14
- success: boolean | null;
15
- status: boolean | null;
16
14
  get messages(): Message[];
17
15
  set messages(value: Message[]);
18
- _message: string;
19
- get message(): string;
20
- set message(value: string);
21
- _data: object | string;
22
- get data(): string | object;
23
- set data(value: string | object);
24
16
  render(): symbol;
25
17
  }
26
18
  export {};
@@ -14,10 +14,6 @@ let MessageSubscriber = class MessageSubscriber extends Subscriber(LitElement, {
14
14
  constructor() {
15
15
  super(...arguments);
16
16
  this._messages = [];
17
- this.success = null;
18
- this.status = null;
19
- this._message = "";
20
- this._data = ""; //👍 quel plaisir mmmm.... 😭😭😭
21
17
  }
22
18
  get messages() {
23
19
  return this._messages;
@@ -31,55 +27,13 @@ let MessageSubscriber = class MessageSubscriber extends Subscriber(LitElement, {
31
27
  SonicToast.add({ text: message.content || "", status: message.status });
32
28
  });
33
29
  }
34
- get message() {
35
- return this._message;
36
- }
37
- set message(value) {
38
- this._message = value;
39
- if (!this.message)
40
- return;
41
- if (this.props?.success !== false)
42
- return;
43
- if (this.props?.public_message)
44
- return;
45
- //OUi OUi il faut afficher "message" que si success est parfaitement égal à false et qu'il n'y a rien dans public_message.
46
- SonicToast.add({ text: this.message, status: "error" });
47
- }
48
- get data() {
49
- return this._data;
50
- }
51
- set data(value) {
52
- this._data = value;
53
- const toastOptions = { text: "Votre produit a bien été ajouté", status: "success" };
54
- if (Array.isArray(this.data) && this.props?.success === true)
55
- SonicToast.add(toastOptions);
56
- if (this.data == "" && this.props?.status === true)
57
- SonicToast.add(toastOptions);
58
- if (this.props?.success !== false)
59
- return;
60
- if (this.props?.public_message)
61
- return;
62
- SonicToast.add({ text: this.data, status: "error" });
63
- }
64
30
  render() {
65
31
  return nothing;
66
32
  }
67
33
  };
68
- __decorate([
69
- property({ type: Boolean })
70
- ], MessageSubscriber.prototype, "success", void 0);
71
- __decorate([
72
- property({ type: Boolean })
73
- ], MessageSubscriber.prototype, "status", void 0);
74
34
  __decorate([
75
35
  property({ type: Array })
76
36
  ], MessageSubscriber.prototype, "messages", null);
77
- __decorate([
78
- property({ type: String })
79
- ], MessageSubscriber.prototype, "message", null);
80
- __decorate([
81
- property()
82
- ], MessageSubscriber.prototype, "data", null);
83
37
  MessageSubscriber = __decorate([
84
38
  customElement(tagName)
85
39
  ], MessageSubscriber);
@@ -26,13 +26,15 @@ let SonicToastItem = class SonicToastItem extends LitElement {
26
26
  this.ghost = false;
27
27
  this.preserve = false;
28
28
  this.dismissForever = false;
29
- this.maxHeight = '10rem';
29
+ this.maxHeight = "10rem";
30
30
  this.visible = true;
31
31
  }
32
+ // @queryAssignedElements({flatten: true, slot: main"})
33
+ // textSlot!: HTMLElement[];
32
34
  render() {
33
35
  // check if the toast is dismissed
34
36
  if (this.dismissForever) {
35
- const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
37
+ const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
36
38
  const dismissedObj = JSON.parse(dismissed);
37
39
  if (dismissedObj[this.id]) {
38
40
  return nothing;
@@ -41,39 +43,32 @@ let SonicToastItem = class SonicToastItem extends LitElement {
41
43
  if (!this.visible) {
42
44
  return nothing;
43
45
  }
44
- return html `<div
45
- class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
46
- >
47
-
48
- <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
49
- <sonic-icon name="cancel" size="lg"></sonic-icon>
50
- </button>
51
- <div class="sonic-toast-content custom-scroll" style="max-height: ${this.maxHeight} ;">
52
-
53
- ${this.status &&
54
- html `<sonic-icon name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
55
-
56
-
57
- <div class="sonic-toast-text">
58
- ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
59
- ${this.text ? unsafeHTML(this.text) : ""}
46
+ return html `<div class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}">
47
+ <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
48
+ <sonic-icon name="cancel" size="lg"></sonic-icon>
49
+ </button>
50
+ <div class="sonic-toast-content custom-scroll" style="max-height: ${this.maxHeight} ;">
51
+ ${this.status && html `<sonic-icon name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
52
+
53
+ <div class="sonic-toast-text">
54
+ ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""} ${this.text ? unsafeHTML(this.text) : ""}
60
55
  <slot></slot>
61
- </div>
62
-
63
- ${!this.preserve ? this.autoHide() : ""}
64
56
  </div>
57
+
58
+ ${!this.preserve ? this.autoHide() : ""}
59
+ </div>
65
60
  </div>`;
66
61
  }
67
62
  hide() {
68
- if (!this.closest('sonic-toast')) {
63
+ if (!this.closest("sonic-toast")) {
69
64
  this.visible = false;
70
65
  }
71
66
  if (this.dismissForever) {
72
67
  // set in local Storage an Object with the id as key and if it's dismissed as value
73
- const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
68
+ const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
74
69
  const dismissedObj = JSON.parse(dismissed);
75
70
  dismissedObj[this.id] = true;
76
- localStorage.setItem('sonic-toast-dismissed', JSON.stringify(dismissedObj));
71
+ localStorage.setItem("sonic-toast-dismissed", JSON.stringify(dismissedObj));
77
72
  }
78
73
  this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
79
74
  }
@@ -83,7 +78,7 @@ let SonicToastItem = class SonicToastItem extends LitElement {
83
78
  autoHide() {
84
79
  setTimeout(() => {
85
80
  this.hide();
86
- }, 4200);
81
+ }, 6000);
87
82
  }
88
83
  };
89
84
  SonicToastItem.styles = [
@@ -115,7 +110,7 @@ SonicToastItem.styles = [
115
110
  .sonic-toast {
116
111
  position: relative;
117
112
  pointer-events: auto;
118
- overflow:hidden;
113
+ overflow: hidden;
119
114
  line-height: 1.25;
120
115
  color: var(--sc-toast-color);
121
116
  box-shadow: var(--sc-toast-shadow);
@@ -128,14 +123,14 @@ SonicToastItem.styles = [
128
123
  display: flex;
129
124
  gap: 0.5rem;
130
125
  overflow: auto;
131
- position:relative;
132
- }
126
+ position: relative;
127
+ }
133
128
 
134
129
  .sonic-toast-text {
135
130
  align-self: center;
136
131
  margin-top: auto;
137
132
  margin-bottom: auto;
138
- max-width:70ch;
133
+ max-width: 70ch;
139
134
  line-height: 1.2;
140
135
  }
141
136
 
@@ -153,20 +148,19 @@ SonicToastItem.styles = [
153
148
 
154
149
  ::slotted(li),
155
150
  .sonic-toast-text li {
156
- margin-bottom: .15em !important;
151
+ margin-bottom: 0.15em !important;
157
152
  }
158
153
 
159
- ::slotted( :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child),
154
+ ::slotted(:is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child),
160
155
  .sonic-toast-text > :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child {
161
156
  margin-bottom: 0 !important;
162
- }
163
-
157
+ }
164
158
 
165
159
  /*BUTTON CLOSE*/
166
160
  .sonic-toast-close {
167
161
  all: unset;
168
162
  position: absolute;
169
- z-index:4;
163
+ z-index: 4;
170
164
  pointer-events: initial;
171
165
  right: 0.5em;
172
166
  top: 0.5em;
@@ -245,7 +239,7 @@ SonicToastItem.styles = [
245
239
  border-radius: var(--sc-toast-rounded);
246
240
  background-color: var(--sc-toast-status-color);
247
241
  }
248
-
242
+
249
243
  .sonic-toast:hover:before {
250
244
  opacity: 0.025;
251
245
  }
@@ -258,17 +252,14 @@ SonicToastItem.styles = [
258
252
  }
259
253
 
260
254
  .sonic-toast-icon {
261
- position:sticky;
262
- top:0;
255
+ position: sticky;
256
+ top: 0;
263
257
  }
264
258
 
265
259
  .ghost {
266
260
  opacity: 0.85;
267
261
  pointer-events: none;
268
262
  }
269
-
270
-
271
-
272
263
  `,
273
264
  ];
274
265
  __decorate([
@@ -4,9 +4,12 @@ import "@supersoniks/concorde/core/components/ui/toast/toast-item";
4
4
  import { Toast } from "@supersoniks/concorde/core/components/ui/toast/types";
5
5
  export declare class SonicToast extends LitElement {
6
6
  toasts: Toast[];
7
+ static delegateToasts: boolean;
7
8
  createRenderRoot(): this;
8
9
  render(): import("lit-html").TemplateResult<1> | typeof nothing;
9
10
  static removeAll(): void;
11
+ static instance?: SonicToast;
12
+ static getInstance(): SonicToast;
10
13
  static add(conf: Toast): {
11
14
  id: string | number;
12
15
  text: string;
@@ -15,7 +18,8 @@ export declare class SonicToast extends LitElement {
15
18
  preserve: boolean | undefined;
16
19
  ghost: boolean | undefined;
17
20
  dismissForever: boolean | undefined;
18
- } | null;
21
+ } | null | undefined;
22
+ static handleExistingToastDelegation(): void;
19
23
  static removeItem(toastToRemove?: Toast): void;
20
24
  removeItem(toastToRemove?: Toast): void;
21
25
  }
@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
+ var SonicToast_1;
7
8
  import { html, LitElement, nothing } from "lit";
8
9
  import { customElement, property } from "lit/decorators.js";
9
10
  import { repeat } from "lit/directives/repeat.js";
@@ -14,8 +15,9 @@ import { ifDefined } from "lit/directives/if-defined.js";
14
15
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
15
16
  import { styleMap } from "lit/directives/style-map.js";
16
17
  import "@supersoniks/concorde/core/components/ui/toast/toast-item";
18
+ import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
17
19
  const tagName = "sonic-toast";
18
- let SonicToast = class SonicToast extends LitElement {
20
+ let SonicToast = SonicToast_1 = class SonicToast extends LitElement {
19
21
  constructor() {
20
22
  super(...arguments);
21
23
  this.toasts = [];
@@ -45,6 +47,7 @@ let SonicToast = class SonicToast extends LitElement {
45
47
  };
46
48
  }
47
49
  // ${window.parent == window ? "fixed-area" : ""}
50
+ SonicToast_1.handleExistingToastDelegation();
48
51
  if (!this.toasts)
49
52
  return nothing;
50
53
  return html `<div aria-live="polite" style=${styleMap(styles)}>
@@ -82,21 +85,32 @@ let SonicToast = class SonicToast extends LitElement {
82
85
  </div>`;
83
86
  }
84
87
  static removeAll() {
85
- const toastComponent = document.querySelector("sonic-toast");
88
+ if (SonicToast_1.delegateToasts) {
89
+ SonicToast_1.handleExistingToastDelegation();
90
+ window.parent.postMessage({ type: "removeAllToasts" }, "*");
91
+ return;
92
+ }
93
+ const toastComponent = SonicToast_1.getInstance();
86
94
  if (!toastComponent)
87
95
  return;
88
96
  toastComponent.toasts = toastComponent.toasts.filter((item) => item.ghost);
89
97
  }
90
- // ADD TOAST
98
+ static getInstance() {
99
+ if (SonicToast_1.instance)
100
+ return SonicToast_1.instance;
101
+ SonicToast_1.instance = document.createElement("sonic-toast");
102
+ Theme.getPopContainer().prepend(SonicToast_1.instance);
103
+ return SonicToast_1.instance;
104
+ }
91
105
  static add(conf) {
92
- // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
93
- if (!document.querySelector("sonic-toast")) {
94
- const toastComponent = document.createElement("sonic-toast");
95
- const container = document.querySelector("sonic-theme") || document.body;
96
- container.prepend(toastComponent);
106
+ if (SonicToast_1.delegateToasts) {
107
+ SonicToast_1.handleExistingToastDelegation();
108
+ window.parent.postMessage({ type: "addToast", toast: conf }, "*");
109
+ return;
97
110
  }
111
+ // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
112
+ const toastComponent = SonicToast_1.getInstance();
98
113
  // Ajoute le toast à la liste
99
- const toastComponent = document.querySelector("sonic-toast");
100
114
  const nextId = conf.id ?? new Date().valueOf();
101
115
  const interactiveRegExp = new RegExp("</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>");
102
116
  const hasInteractive = interactiveRegExp.test(conf.text);
@@ -117,7 +131,7 @@ let SonicToast = class SonicToast extends LitElement {
117
131
  return null;
118
132
  }
119
133
  }
120
- if (toastComponent.toasts.length > 0) {
134
+ if (toastComponent?.toasts.length) {
121
135
  const toastA = { ...currentToast };
122
136
  for (const toast of toastComponent.toasts) {
123
137
  const toastB = { ...toast };
@@ -127,11 +141,25 @@ let SonicToast = class SonicToast extends LitElement {
127
141
  }
128
142
  }
129
143
  }
130
- toastComponent.toasts = [...toastComponent.toasts, currentToast];
144
+ if (toastComponent) {
145
+ toastComponent.toasts = [...toastComponent.toasts, currentToast];
146
+ }
131
147
  return currentToast;
132
148
  }
149
+ static handleExistingToastDelegation() {
150
+ if (!this.delegateToasts)
151
+ return;
152
+ const toastComponent = SonicToast_1.getInstance();
153
+ window.parent.postMessage({ type: "addToasts", toasts: toastComponent.toasts }, "*");
154
+ toastComponent.toasts = [];
155
+ }
133
156
  static removeItem(toastToRemove) {
134
- const toastComponent = document.querySelector("sonic-toast");
157
+ if (SonicToast_1.delegateToasts) {
158
+ SonicToast_1.handleExistingToastDelegation();
159
+ window.parent.postMessage({ type: "removeToast", toast: toastToRemove }, "*");
160
+ return;
161
+ }
162
+ const toastComponent = SonicToast_1.getInstance();
135
163
  if (!toastComponent)
136
164
  return;
137
165
  toastComponent.removeItem(toastToRemove);
@@ -147,13 +175,52 @@ let SonicToast = class SonicToast extends LitElement {
147
175
  });
148
176
  }
149
177
  };
178
+ SonicToast.delegateToasts = false;
150
179
  __decorate([
151
180
  property({ type: Array })
152
181
  ], SonicToast.prototype, "toasts", void 0);
153
- SonicToast = __decorate([
182
+ SonicToast = SonicToast_1 = __decorate([
154
183
  customElement(tagName)
155
184
  ], SonicToast);
156
185
  export { SonicToast };
157
186
  if (typeof window !== "undefined") {
158
187
  window.SonicToast = SonicToast;
159
188
  }
189
+ /**
190
+ * Handles the context of iframes and performs necessary actions based on received messages.
191
+ */
192
+ function handleIframeContexts() {
193
+ const onPostMessage = (e) => {
194
+ if (e.data.type == "querySonicToastAvailability") {
195
+ e.source.postMessage({ type: "sonicToastAvailable" }, "*");
196
+ }
197
+ if (e.data.type == "sonicToastAvailable") {
198
+ SonicToast.delegateToasts = true;
199
+ SonicToast.handleExistingToastDelegation();
200
+ }
201
+ if (e.data.type == "addToasts") {
202
+ SonicToast.getInstance().toasts = [...SonicToast.getInstance().toasts, ...e.data.toasts];
203
+ }
204
+ if (e.data.type == "removeAllToasts") {
205
+ SonicToast.removeAll();
206
+ }
207
+ if (e.data.type == "removeToast") {
208
+ SonicToast.removeItem(e.data.toast);
209
+ }
210
+ if (e.data.type == "addToast") {
211
+ SonicToast.add(e.data.toast);
212
+ }
213
+ };
214
+ const isIframe = !(window.parent == window);
215
+ window.addEventListener("message", onPostMessage, false);
216
+ if (isIframe) {
217
+ window.parent.postMessage({ type: "querySonicToastAvailability" }, "*");
218
+ }
219
+ // tell iframes that sonic-toast is available
220
+ if (!isIframe) {
221
+ for (const iframe of document.querySelectorAll("iframe")) {
222
+ iframe.contentWindow?.postMessage({ type: "sonicToastAvailable" }, "*");
223
+ }
224
+ }
225
+ }
226
+ handleIframeContexts();
@@ -2,7 +2,9 @@ import { LitElement } from "lit";
2
2
  export declare class Tooltip extends LitElement {
3
3
  static styles: import("lit").CSSResult[];
4
4
  label: string;
5
- placement?: "top" | "bottom" | "left" | "right";
5
+ placement?: "top" | "top-start" | "top-end" | "bottom" | "left" | "right";
6
6
  disabled: boolean;
7
+ focusable: boolean;
8
+ connectedCallback(): void;
7
9
  render(): import("lit-html").TemplateResult<1>;
8
10
  }
@@ -12,6 +12,13 @@ let Tooltip = class Tooltip extends LitElement {
12
12
  super(...arguments);
13
13
  this.label = "";
14
14
  this.disabled = false;
15
+ this.focusable = false;
16
+ }
17
+ connectedCallback() {
18
+ if (this.focusable) {
19
+ this.setAttribute("tabindex", "0");
20
+ }
21
+ super.connectedCallback();
15
22
  }
16
23
  render() {
17
24
  const disabledClass = this.disabled || this.label == "" ? "disabled" : "";
@@ -49,6 +56,7 @@ Tooltip.styles = [
49
56
  white-space: pre-line;
50
57
  font-weight: var(--sc-tooltip-fw);
51
58
  }
59
+ :host(:focus-within) .tooltip:not(.disabled):before,
52
60
  .tooltip:not(.disabled):hover:before {
53
61
  opacity: 1;
54
62
  display: block;
@@ -61,6 +69,17 @@ Tooltip.styles = [
61
69
  transform: translateX(-50%);
62
70
  }
63
71
 
72
+ :host([placement="top-end"]) .tooltip:before {
73
+ bottom: calc(100% + 0.25rem);
74
+ right: 0;
75
+ transform: translateX(0);
76
+ }
77
+ :host([placement="top-start"]) .tooltip:before {
78
+ bottom: calc(100% + 0.25rem);
79
+ left: 0;
80
+ transform: translateX(0);
81
+ }
82
+
64
83
  :host([placement="bottom"]) .tooltip:before {
65
84
  top: calc(100% + 0.25rem);
66
85
  left: 50%;
@@ -89,6 +108,9 @@ __decorate([
89
108
  __decorate([
90
109
  property({ type: Boolean })
91
110
  ], Tooltip.prototype, "disabled", void 0);
111
+ __decorate([
112
+ property({ type: Boolean })
113
+ ], Tooltip.prototype, "focusable", void 0);
92
114
  Tooltip = __decorate([
93
115
  customElement(tagName)
94
116
  ], Tooltip);
@@ -1,4 +1,4 @@
1
- export declare function bind(value: string): (target: any, propertyKey: string) => void;
2
- export declare function onAssign(values: Array<string>): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void;
1
+ export declare function bind(value: string): (target: unknown, propertyKey: string) => void;
2
+ export declare function onAssign(...values: Array<string>): (target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) => void;
3
3
  export declare function autoSubscribe(): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void;
4
- export declare function autoFill(values: string[]): (target: any) => void;
4
+ export declare function autoFill(values: string[]): (target: unknown) => void;