@everymatrix/helper-accordion 1.52.6 → 1.53.10

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.
@@ -6,29 +6,29 @@
6
6
 
7
7
  .Header {
8
8
  border-radius: 5px;
9
- background: #009993;
9
+ background: var(--emw--color-background, #009993);
10
10
  display: flex;
11
11
  gap: 30px;
12
- border: 1px solid #009993;
12
+ border: 1px solid var(--emw--color-typography, #009993);
13
13
  padding: 8px 10px;
14
14
  user-select: none;
15
15
  margin-bottom: 1px;
16
16
  cursor: pointer;
17
17
  }
18
18
  .Header:hover {
19
- background: #00ABA4;
19
+ background: var(--emw--color-background-secondary, #00ABA4);
20
20
  }
21
21
  .Header .Title,
22
22
  .Header .Subtitle,
23
23
  .Header .Description {
24
24
  margin: 0;
25
25
  font-size: 14px;
26
- color: #fff;
26
+ color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
27
27
  text-transform: capitalize;
28
28
  }
29
29
  .Header .Expand {
30
30
  margin-left: auto;
31
- color: #FFF;
31
+ color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
32
32
  width: 17px;
33
33
  height: 17px;
34
34
  cursor: pointer;
@@ -40,28 +40,28 @@
40
40
 
41
41
  .HeaderTicketHistory {
42
42
  border-radius: 4px;
43
- background: #F1F1F1;
43
+ background: var(--emw--color-gray-50, #F1F1F1);
44
44
  display: flex;
45
45
  gap: 30px;
46
- border: 1px solid #009993;
46
+ border: 1px solid var(--emw--color-typography, #009993);
47
47
  padding: 8px 10px;
48
48
  user-select: none;
49
49
  margin-bottom: 5px;
50
50
  cursor: pointer;
51
51
  }
52
52
  .HeaderTicketHistory:hover {
53
- background: #00ABA4;
53
+ background: var(--emw--color-secondary, #00ABA4);
54
54
  }
55
55
  .HeaderTicketHistory .Title,
56
56
  .HeaderTicketHistory .Subtitle,
57
57
  .HeaderTicketHistory .Description {
58
58
  margin: 0;
59
59
  font-size: 14px;
60
- color: #000;
60
+ color: var(--emw--button-text-color, #000);
61
61
  }
62
62
  .HeaderTicketHistory .Expand {
63
63
  margin-left: auto;
64
- color: #FFF;
64
+ color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
65
65
  width: 17px;
66
66
  height: 17px;
67
67
  cursor: pointer;
@@ -73,29 +73,29 @@
73
73
 
74
74
  .Content {
75
75
  border-radius: 0 0 4px 4px;
76
- background: #fff;
77
- border: 1px solid #009993;
76
+ background: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
77
+ border: 1px solid var(--emw--button-border-color, #009993);
78
78
  padding: 10px 15px;
79
79
  user-select: none;
80
- color: #000;
80
+ color: var(--emw--button-text-color, #000);
81
81
  margin-bottom: 10px;
82
82
  }
83
83
 
84
84
  .ActionButton {
85
85
  cursor: pointer;
86
86
  display: inline-block;
87
- border-radius: 4px;
87
+ border-radius: var(--emw--button-border-radius, 4px);
88
88
  margin: 20px 0 10px;
89
89
  text-transform: uppercase;
90
90
  font-size: 12px;
91
91
  text-align: center;
92
92
  padding: 8px 20px;
93
93
  min-width: 80px;
94
- background: #FF3D00;
95
- border: 1px solid #FF3D00;
96
- color: #FFF;
94
+ background: var(--emw--color-error, #FF3D00);
95
+ border: 1px solid var(--emw--color-error, #FF3D00);
96
+ color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
97
97
  }
98
98
  .ActionButton:hover {
99
- background: #FF6536;
100
- border: 1px solid #FF3D00;
99
+ background: var(--emw--color-secondary, #FF6536);
100
+ border: 1px solid var(--emw--color-error, #FF3D00);
101
101
  }
@@ -2,32 +2,67 @@ import { h } from "@stencil/core";
2
2
  import { translate } from "../../utils/locale.utils";
3
3
  export class HelperAccordion {
4
4
  constructor() {
5
- this.setClientStyling = () => {
6
- let sheet = document.createElement('style');
7
- sheet.innerHTML = this.clientStyling;
8
- this.stylingContainer.prepend(sheet);
9
- };
10
- this.setClientStylingURL = () => {
11
- let cssFile = document.createElement('style');
12
- setTimeout(() => {
13
- cssFile.innerHTML = this.clientStylingUrlContent;
14
- this.stylingContainer.prepend(cssFile);
15
- }, 1);
16
- };
5
+ /**
6
+ * Flag for ticket history
7
+ */
17
8
  this.ticketHistoryFlag = false;
9
+ /**
10
+ * Title (top header)
11
+ */
18
12
  this.headerTitle = '';
13
+ /**
14
+ * SubTitle (top header)
15
+ */
19
16
  this.headerSubtitle = '';
17
+ /**
18
+ * Description
19
+ */
20
20
  this.description = '';
21
+ /**
22
+ * Enables footer content
23
+ */
21
24
  this.footer = false;
25
+ /**
26
+ * Enables footer button for tab deletion
27
+ */
22
28
  this.deleteTab = false;
29
+ /**
30
+ * Activates postMessages as events for actions from the widget
31
+ */
23
32
  this.postMessage = false;
33
+ /**
34
+ * Name of the event emitter by the action button
35
+ */
24
36
  this.eventName = 'helperAccordionAction';
37
+ /**
38
+ * Collapsed
39
+ */
25
40
  this.collapsed = true;
41
+ /**
42
+ * Language
43
+ */
26
44
  this.language = 'en';
45
+ /**
46
+ * Client custom styling via string
47
+ */
27
48
  this.clientStyling = '';
49
+ /**
50
+ * Client custom styling via url content
51
+ */
28
52
  this.clientStylingUrlContent = '';
29
- this.showContent = undefined;
30
53
  this.limitStylingAppends = false;
54
+ this.setClientStyling = () => {
55
+ let sheet = document.createElement('style');
56
+ sheet.innerHTML = this.clientStyling;
57
+ this.stylingContainer.prepend(sheet);
58
+ };
59
+ this.setClientStylingURL = () => {
60
+ let cssFile = document.createElement('style');
61
+ setTimeout(() => {
62
+ cssFile.innerHTML = this.clientStylingUrlContent;
63
+ this.stylingContainer.prepend(cssFile);
64
+ }, 1);
65
+ };
31
66
  }
32
67
  // @TODO fix the `any` type :)
33
68
  connectedCallback() {
@@ -88,6 +123,8 @@ export class HelperAccordion {
88
123
  "tags": [],
89
124
  "text": "Flag for ticket history"
90
125
  },
126
+ "getter": false,
127
+ "setter": false,
91
128
  "attribute": "ticket-history-flag",
92
129
  "reflect": true,
93
130
  "defaultValue": "false"
@@ -106,6 +143,8 @@ export class HelperAccordion {
106
143
  "tags": [],
107
144
  "text": "Title (top header)"
108
145
  },
146
+ "getter": false,
147
+ "setter": false,
109
148
  "attribute": "header-title",
110
149
  "reflect": true,
111
150
  "defaultValue": "''"
@@ -124,6 +163,8 @@ export class HelperAccordion {
124
163
  "tags": [],
125
164
  "text": "SubTitle (top header)"
126
165
  },
166
+ "getter": false,
167
+ "setter": false,
127
168
  "attribute": "header-subtitle",
128
169
  "reflect": true,
129
170
  "defaultValue": "''"
@@ -142,6 +183,8 @@ export class HelperAccordion {
142
183
  "tags": [],
143
184
  "text": "Description"
144
185
  },
186
+ "getter": false,
187
+ "setter": false,
145
188
  "attribute": "description",
146
189
  "reflect": true,
147
190
  "defaultValue": "''"
@@ -160,6 +203,8 @@ export class HelperAccordion {
160
203
  "tags": [],
161
204
  "text": "Enables footer content"
162
205
  },
206
+ "getter": false,
207
+ "setter": false,
163
208
  "attribute": "footer",
164
209
  "reflect": true,
165
210
  "defaultValue": "false"
@@ -178,6 +223,8 @@ export class HelperAccordion {
178
223
  "tags": [],
179
224
  "text": "Enables footer button for tab deletion"
180
225
  },
226
+ "getter": false,
227
+ "setter": false,
181
228
  "attribute": "delete-tab",
182
229
  "reflect": true,
183
230
  "defaultValue": "false"
@@ -196,6 +243,8 @@ export class HelperAccordion {
196
243
  "tags": [],
197
244
  "text": "Activates postMessages as events for actions from the widget"
198
245
  },
246
+ "getter": false,
247
+ "setter": false,
199
248
  "attribute": "post-message",
200
249
  "reflect": true,
201
250
  "defaultValue": "false"
@@ -214,6 +263,8 @@ export class HelperAccordion {
214
263
  "tags": [],
215
264
  "text": "Name of the event emitter by the action button"
216
265
  },
266
+ "getter": false,
267
+ "setter": false,
217
268
  "attribute": "event-name",
218
269
  "reflect": true,
219
270
  "defaultValue": "'helperAccordionAction'"
@@ -232,6 +283,8 @@ export class HelperAccordion {
232
283
  "tags": [],
233
284
  "text": "Collapsed"
234
285
  },
286
+ "getter": false,
287
+ "setter": false,
235
288
  "attribute": "collapsed",
236
289
  "reflect": true,
237
290
  "defaultValue": "true"
@@ -250,6 +303,8 @@ export class HelperAccordion {
250
303
  "tags": [],
251
304
  "text": "Language"
252
305
  },
306
+ "getter": false,
307
+ "setter": false,
253
308
  "attribute": "language",
254
309
  "reflect": true,
255
310
  "defaultValue": "'en'"
@@ -268,6 +323,8 @@ export class HelperAccordion {
268
323
  "tags": [],
269
324
  "text": "Client custom styling via string"
270
325
  },
326
+ "getter": false,
327
+ "setter": false,
271
328
  "attribute": "client-styling",
272
329
  "reflect": true,
273
330
  "defaultValue": "''"
@@ -286,6 +343,8 @@ export class HelperAccordion {
286
343
  "tags": [],
287
344
  "text": "Client custom styling via url content"
288
345
  },
346
+ "getter": false,
347
+ "setter": false,
289
348
  "attribute": "client-styling-url-content",
290
349
  "reflect": true,
291
350
  "defaultValue": "''"
@@ -1,4 +1,5 @@
1
1
  const DEFAULT_LANGUAGE = 'en';
2
+ const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
2
3
  const TRANSLATIONS = {
3
4
  en: {
4
5
  deleteTicket: 'Delete ticket'
@@ -18,5 +19,5 @@ const TRANSLATIONS = {
18
19
  };
19
20
  export const translate = (key, customLang) => {
20
21
  const lang = customLang;
21
- return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
22
+ return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
22
23
  };
@@ -1,6 +1,7 @@
1
- import { r as registerInstance, c as createEvent, h } from './index-fc19def9.js';
1
+ import { r as registerInstance, c as createEvent, h } from './index-fee9f353.js';
2
2
 
3
3
  const DEFAULT_LANGUAGE = 'en';
4
+ const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
4
5
  const TRANSLATIONS = {
5
6
  en: {
6
7
  deleteTicket: 'Delete ticket'
@@ -20,42 +21,77 @@ const TRANSLATIONS = {
20
21
  };
21
22
  const translate = (key, customLang) => {
22
23
  const lang = customLang;
23
- return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
24
+ return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
24
25
  };
25
26
 
26
- const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:5px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:1px;cursor:pointer}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff;text-transform:capitalize}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px;cursor:pointer}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
27
+ const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:5px;background:var(--emw--color-background, #009993);display:flex;gap:30px;border:1px solid var(--emw--color-typography, #009993);padding:8px 10px;user-select:none;margin-bottom:1px;cursor:pointer}.Header:hover{background:var(--emw--color-background-secondary, #00ABA4)}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));text-transform:capitalize}.Header .Expand{margin-left:auto;color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:var(--emw--color-gray-50, #F1F1F1);display:flex;gap:30px;border:1px solid var(--emw--color-typography, #009993);padding:8px 10px;user-select:none;margin-bottom:5px;cursor:pointer}.HeaderTicketHistory:hover{background:var(--emw--color-secondary, #00ABA4)}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:var(--emw--button-text-color, #000)}.HeaderTicketHistory .Expand{margin-left:auto;color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));border:1px solid var(--emw--button-border-color, #009993);padding:10px 15px;user-select:none;color:var(--emw--button-text-color, #000);margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:var(--emw--button-border-radius, 4px);margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:var(--emw--color-error, #FF3D00);border:1px solid var(--emw--color-error, #FF3D00);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.ActionButton:hover{background:var(--emw--color-secondary, #FF6536);border:1px solid var(--emw--color-error, #FF3D00)}";
27
28
  const HelperAccordionStyle0 = helperAccordionCss;
28
29
 
29
30
  const HelperAccordion = class {
30
31
  constructor(hostRef) {
31
32
  registerInstance(this, hostRef);
32
33
  this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
33
- this.setClientStyling = () => {
34
- let sheet = document.createElement('style');
35
- sheet.innerHTML = this.clientStyling;
36
- this.stylingContainer.prepend(sheet);
37
- };
38
- this.setClientStylingURL = () => {
39
- let cssFile = document.createElement('style');
40
- setTimeout(() => {
41
- cssFile.innerHTML = this.clientStylingUrlContent;
42
- this.stylingContainer.prepend(cssFile);
43
- }, 1);
44
- };
34
+ /**
35
+ * Flag for ticket history
36
+ */
45
37
  this.ticketHistoryFlag = false;
38
+ /**
39
+ * Title (top header)
40
+ */
46
41
  this.headerTitle = '';
42
+ /**
43
+ * SubTitle (top header)
44
+ */
47
45
  this.headerSubtitle = '';
46
+ /**
47
+ * Description
48
+ */
48
49
  this.description = '';
50
+ /**
51
+ * Enables footer content
52
+ */
49
53
  this.footer = false;
54
+ /**
55
+ * Enables footer button for tab deletion
56
+ */
50
57
  this.deleteTab = false;
58
+ /**
59
+ * Activates postMessages as events for actions from the widget
60
+ */
51
61
  this.postMessage = false;
62
+ /**
63
+ * Name of the event emitter by the action button
64
+ */
52
65
  this.eventName = 'helperAccordionAction';
66
+ /**
67
+ * Collapsed
68
+ */
53
69
  this.collapsed = true;
70
+ /**
71
+ * Language
72
+ */
54
73
  this.language = 'en';
74
+ /**
75
+ * Client custom styling via string
76
+ */
55
77
  this.clientStyling = '';
78
+ /**
79
+ * Client custom styling via url content
80
+ */
56
81
  this.clientStylingUrlContent = '';
57
- this.showContent = undefined;
58
82
  this.limitStylingAppends = false;
83
+ this.setClientStyling = () => {
84
+ let sheet = document.createElement('style');
85
+ sheet.innerHTML = this.clientStyling;
86
+ this.stylingContainer.prepend(sheet);
87
+ };
88
+ this.setClientStylingURL = () => {
89
+ let cssFile = document.createElement('style');
90
+ setTimeout(() => {
91
+ cssFile.innerHTML = this.clientStylingUrlContent;
92
+ this.stylingContainer.prepend(cssFile);
93
+ }, 1);
94
+ };
59
95
  }
60
96
  // @TODO fix the `any` type :)
61
97
  connectedCallback() {
@@ -1,9 +1,9 @@
1
- import { p as promiseResolve, b as bootstrapLazy } from './index-fc19def9.js';
2
- export { s as setNonce } from './index-fc19def9.js';
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-fee9f353.js';
2
+ export { s as setNonce } from './index-fee9f353.js';
3
3
  import { g as globalScripts } from './app-globals-0f993ce5.js';
4
4
 
5
5
  /*
6
- Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
6
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
7
7
  */
8
8
  var patchBrowser = () => {
9
9
  const importMeta = import.meta.url;