q2-tecton-elements 1.55.6 → 1.55.7

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 (161) hide show
  1. package/dist/bundle-report.json +184 -182
  2. package/dist/cjs/{index-905f4c87.js → index-ac3330d8.js} +33 -1
  3. package/dist/cjs/index-ac3330d8.js.map +1 -0
  4. package/dist/cjs/q2-action-group.cjs.entry.js +1 -1
  5. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  6. package/dist/cjs/q2-badge_7.cjs.entry.js +1 -1
  7. package/dist/cjs/q2-calendar.cjs.entry.js +1 -1
  8. package/dist/cjs/q2-card.cjs.entry.js +1 -1
  9. package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
  10. package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
  11. package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
  12. package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
  13. package/dist/cjs/q2-chart-donut.cjs.entry.js +1 -1
  14. package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
  15. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  16. package/dist/cjs/q2-data-table.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-detail.cjs.entry.js +1 -1
  18. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-dropdown.cjs.entry.js +4 -2
  20. package/dist/cjs/q2-dropdown.cjs.entry.js.map +1 -1
  21. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  22. package/dist/cjs/q2-file-picker.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-item_3.cjs.entry.js +1 -1
  24. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  25. package/dist/cjs/q2-message.cjs.entry.js +1 -1
  26. package/dist/cjs/q2-modal.cjs.entry.js +1 -1
  27. package/dist/cjs/q2-month-picker.cjs.entry.js +1 -1
  28. package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
  29. package/dist/cjs/q2-option-list_2.cjs.entry.js +19 -14
  30. package/dist/cjs/q2-option-list_2.cjs.entry.js.map +1 -1
  31. package/dist/cjs/q2-option.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-pagination.cjs.entry.js +1 -1
  33. package/dist/cjs/q2-pill.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-radio.cjs.entry.js +1 -1
  36. package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
  37. package/dist/cjs/q2-section.cjs.entry.js +1 -1
  38. package/dist/cjs/q2-select.cjs.entry.js +43 -3
  39. package/dist/cjs/q2-select.cjs.entry.js.map +1 -1
  40. package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
  41. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
  42. package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
  43. package/dist/cjs/q2-tag.cjs.entry.js +1 -1
  44. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  45. package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
  46. package/dist/collection/components/q2-dropdown/q2-dropdown.js +3 -1
  47. package/dist/collection/components/q2-dropdown/q2-dropdown.js.map +1 -1
  48. package/dist/collection/components/q2-popover/q2-popover.js +19 -14
  49. package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
  50. package/dist/collection/components/q2-popover/test/q2-popover-test.spec.js +230 -147
  51. package/dist/collection/components/q2-popover/test/q2-popover-test.spec.js.map +1 -1
  52. package/dist/collection/components/q2-select/q2-select.js +42 -2
  53. package/dist/collection/components/q2-select/q2-select.js.map +1 -1
  54. package/dist/collection/components/q2-select/test/q2-select-test.spec.js +146 -6
  55. package/dist/collection/components/q2-select/test/q2-select-test.spec.js.map +1 -1
  56. package/dist/collection/utils/index.js +37 -0
  57. package/dist/collection/utils/index.js.map +1 -1
  58. package/dist/components/index2.js +32 -1
  59. package/dist/components/index2.js.map +1 -1
  60. package/dist/components/q2-dropdown.js +3 -1
  61. package/dist/components/q2-dropdown.js.map +1 -1
  62. package/dist/components/q2-popover2.js +19 -14
  63. package/dist/components/q2-popover2.js.map +1 -1
  64. package/dist/components/q2-select2.js +43 -3
  65. package/dist/components/q2-select2.js.map +1 -1
  66. package/dist/esm/{index-f2a66217.js → index-e4c2bfff.js} +33 -2
  67. package/dist/{cjs/index-905f4c87.js.map → esm/index-e4c2bfff.js.map} +1 -1
  68. package/dist/esm/q2-action-group.entry.js +1 -1
  69. package/dist/esm/q2-action-sheet.entry.js +1 -1
  70. package/dist/esm/q2-badge_7.entry.js +1 -1
  71. package/dist/esm/q2-calendar.entry.js +1 -1
  72. package/dist/esm/q2-card.entry.js +1 -1
  73. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  74. package/dist/esm/q2-carousel.entry.js +1 -1
  75. package/dist/esm/q2-chart-area.entry.js +1 -1
  76. package/dist/esm/q2-chart-bar.entry.js +1 -1
  77. package/dist/esm/q2-chart-donut.entry.js +1 -1
  78. package/dist/esm/q2-checkbox-group.entry.js +1 -1
  79. package/dist/esm/q2-checkbox.entry.js +1 -1
  80. package/dist/esm/q2-data-table.entry.js +1 -1
  81. package/dist/esm/q2-detail.entry.js +1 -1
  82. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  83. package/dist/esm/q2-dropdown.entry.js +4 -2
  84. package/dist/esm/q2-dropdown.entry.js.map +1 -1
  85. package/dist/esm/q2-editable-field.entry.js +1 -1
  86. package/dist/esm/q2-file-picker.entry.js +1 -1
  87. package/dist/esm/q2-item_3.entry.js +1 -1
  88. package/dist/esm/q2-loc.entry.js +1 -1
  89. package/dist/esm/q2-message.entry.js +1 -1
  90. package/dist/esm/q2-modal.entry.js +1 -1
  91. package/dist/esm/q2-month-picker.entry.js +1 -1
  92. package/dist/esm/q2-optgroup.entry.js +1 -1
  93. package/dist/esm/q2-option-list_2.entry.js +19 -14
  94. package/dist/esm/q2-option-list_2.entry.js.map +1 -1
  95. package/dist/esm/q2-option.entry.js +1 -1
  96. package/dist/esm/q2-pagination.entry.js +1 -1
  97. package/dist/esm/q2-pill.entry.js +1 -1
  98. package/dist/esm/q2-radio-group.entry.js +1 -1
  99. package/dist/esm/q2-radio.entry.js +1 -1
  100. package/dist/esm/q2-relative-time.entry.js +1 -1
  101. package/dist/esm/q2-section.entry.js +1 -1
  102. package/dist/esm/q2-select.entry.js +43 -3
  103. package/dist/esm/q2-select.entry.js.map +1 -1
  104. package/dist/esm/q2-stepper-pane.entry.js +1 -1
  105. package/dist/esm/q2-stepper-vertical.entry.js +1 -1
  106. package/dist/esm/q2-stepper.entry.js +1 -1
  107. package/dist/esm/q2-tag.entry.js +1 -1
  108. package/dist/esm/q2-textarea.entry.js +1 -1
  109. package/dist/esm/q2-tooltip.entry.js +1 -1
  110. package/dist/jest.setup.js +11 -0
  111. package/dist/jest.setup.js.map +1 -1
  112. package/dist/q2-tecton-elements/{index-f2a66217.js → index-e4c2bfff.js} +71 -46
  113. package/dist/q2-tecton-elements/index-e4c2bfff.js.map +1 -0
  114. package/dist/q2-tecton-elements/q2-action-group.entry.js +1 -1
  115. package/dist/q2-tecton-elements/q2-action-sheet.entry.js +1 -1
  116. package/dist/q2-tecton-elements/q2-badge_7.entry.js +1 -1
  117. package/dist/q2-tecton-elements/q2-calendar.entry.js +1 -1
  118. package/dist/q2-tecton-elements/q2-card.entry.js +1 -1
  119. package/dist/q2-tecton-elements/q2-carousel-pane.entry.js +1 -1
  120. package/dist/q2-tecton-elements/q2-carousel.entry.js +1 -1
  121. package/dist/q2-tecton-elements/q2-chart-area.entry.js +1 -1
  122. package/dist/q2-tecton-elements/q2-chart-bar.entry.js +1 -1
  123. package/dist/q2-tecton-elements/q2-chart-donut.entry.js +1 -1
  124. package/dist/q2-tecton-elements/q2-checkbox-group.entry.js +4 -4
  125. package/dist/q2-tecton-elements/q2-checkbox.entry.js +1 -1
  126. package/dist/q2-tecton-elements/q2-data-table.entry.js +1 -1
  127. package/dist/q2-tecton-elements/q2-detail.entry.js +1 -1
  128. package/dist/q2-tecton-elements/q2-dropdown-item.entry.js +1 -1
  129. package/dist/q2-tecton-elements/q2-dropdown.entry.js +68 -66
  130. package/dist/q2-tecton-elements/q2-dropdown.entry.js.map +1 -1
  131. package/dist/q2-tecton-elements/q2-editable-field.entry.js +1 -1
  132. package/dist/q2-tecton-elements/q2-file-picker.entry.js +1 -1
  133. package/dist/q2-tecton-elements/q2-item_3.entry.js +1 -1
  134. package/dist/q2-tecton-elements/q2-loc.entry.js +1 -1
  135. package/dist/q2-tecton-elements/q2-message.entry.js +16 -16
  136. package/dist/q2-tecton-elements/q2-modal.entry.js +1 -1
  137. package/dist/q2-tecton-elements/q2-month-picker.entry.js +17 -17
  138. package/dist/q2-tecton-elements/q2-optgroup.entry.js +1 -1
  139. package/dist/q2-tecton-elements/q2-option-list_2.entry.js +53 -48
  140. package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map +1 -1
  141. package/dist/q2-tecton-elements/q2-option.entry.js +1 -1
  142. package/dist/q2-tecton-elements/q2-pagination.entry.js +1 -1
  143. package/dist/q2-tecton-elements/q2-pill.entry.js +1 -1
  144. package/dist/q2-tecton-elements/q2-radio-group.entry.js +1 -1
  145. package/dist/q2-tecton-elements/q2-radio.entry.js +1 -1
  146. package/dist/q2-tecton-elements/q2-relative-time.entry.js +4 -4
  147. package/dist/q2-tecton-elements/q2-section.entry.js +1 -1
  148. package/dist/q2-tecton-elements/q2-select.entry.js +44 -5
  149. package/dist/q2-tecton-elements/q2-select.entry.js.map +1 -1
  150. package/dist/q2-tecton-elements/q2-stepper-pane.entry.js +1 -1
  151. package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +1 -1
  152. package/dist/q2-tecton-elements/q2-stepper.entry.js +1 -1
  153. package/dist/q2-tecton-elements/q2-tag.entry.js +1 -1
  154. package/dist/q2-tecton-elements/q2-textarea.entry.js +1 -1
  155. package/dist/q2-tecton-elements/q2-tooltip.entry.js +1 -1
  156. package/dist/types/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/.stencil/jest.setup.d.ts +9 -0
  157. package/dist/types/components/q2-select/q2-select.d.ts +4 -0
  158. package/dist/types/utils/index.d.ts +3 -0
  159. package/package.json +3 -3
  160. package/dist/esm/index-f2a66217.js.map +0 -1
  161. package/dist/q2-tecton-elements/index-f2a66217.js.map +0 -1
@@ -1,39 +1,39 @@
1
- import { r as t, h as e, F as i, g as n } from "./index-7a5365e2.js";
1
+ import { r as t, h as i, F as e, g as n } from "./index-7a5365e2.js";
2
2
 
3
3
  import { s as o, a as s } from "./action-sheet-1e24cb38.js";
4
4
 
5
- import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-f2a66217.js";
5
+ import { o as d, i as r, w as a, j as h, a as l, l as c } from "./index-e4c2bfff.js";
6
6
 
7
7
  const u = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
8
8
 
9
9
  const p = u;
10
10
 
11
11
  const f = class {
12
- constructor(e) {
13
- t(this, e);
14
- var i;
12
+ constructor(i) {
13
+ t(this, i);
14
+ var e;
15
15
  this.dropdownItemSelector = "q2-dropdown-item:not([disabled]):not([separator])";
16
16
  this.optionSelector = "q2-option:not([disabled]):not([separator])";
17
17
  this.focusToggle = () => {
18
18
  this.controlElement.focus();
19
19
  };
20
20
  this.handleFocusOut = t => {
21
- var e;
22
- const i = t.relatedTarget;
23
- if ((e = this.popoverElement) === null || e === void 0 ? void 0 : e.contains(i)) return;
24
- if (this.hostElement.contains(i)) return;
21
+ var i;
22
+ const e = t.relatedTarget;
23
+ if ((i = this.popoverElement) === null || i === void 0 ? void 0 : i.contains(e)) return;
24
+ if (this.hostElement.contains(e)) return;
25
25
  this.open = false;
26
26
  };
27
27
  this.onClickElsewhere = t => {
28
- const e = t.target;
29
- if (e.localName === "q2-option-list") {
28
+ const i = t.target;
29
+ if (i.localName === "q2-option-list") {
30
30
  t.stopPropagation();
31
31
  }
32
- if (e.localName === "click-elsewhere") {
32
+ if (i.localName === "click-elsewhere") {
33
33
  t.stopPropagation();
34
- const {popoverElement: e} = this;
35
- if (!e) return;
36
- e.open = false;
34
+ const {popoverElement: i} = this;
35
+ if (!i) return;
36
+ i.open = false;
37
37
  }
38
38
  };
39
39
  this.onPopoverState = t => {
@@ -42,6 +42,7 @@ const f = class {
42
42
  };
43
43
  this.onToggleClick = async t => {
44
44
  t.stopPropagation();
45
+ this.popoverElement.controlElement = this.controlElement;
45
46
  if (o(this)) {
46
47
  this._handleActionSheet(t);
47
48
  } else {
@@ -49,9 +50,10 @@ const f = class {
49
50
  }
50
51
  };
51
52
  this.onToggleKeydown = async t => {
52
- const e = t.metaKey || t.ctrlKey || t.key === "Tab";
53
- if (e) return;
53
+ const i = t.metaKey || t.ctrlKey || t.key === "Tab";
54
+ if (i) return;
54
55
  t.preventDefault();
56
+ this.popoverElement.controlElement = this.controlElement;
55
57
  if (o(this, t)) {
56
58
  this._handleActionSheet(t);
57
59
  } else {
@@ -66,7 +68,7 @@ const f = class {
66
68
  this.contextValue = undefined;
67
69
  this.disabled = undefined;
68
70
  this.hideLabel = undefined;
69
- this.hoist = !!((i = window.Tecton) === null || i === void 0 ? void 0 : i.useActionSheets);
71
+ this.hoist = !!((e = window.Tecton) === null || e === void 0 ? void 0 : e.useActionSheets);
70
72
  this.icon = undefined;
71
73
  this.label = undefined;
72
74
  this.name = undefined;
@@ -99,9 +101,9 @@ const f = class {
99
101
  this.focusToggle();
100
102
  }
101
103
  popoverStateChangeHandler({detail: {open: t}}) {
102
- var e;
104
+ var i;
103
105
  if (this.open !== t) this.open = t;
104
- (e = this.popoverElement) === null || e === void 0 ? void 0 : e.scrollContainerTo({
106
+ (i = this.popoverElement) === null || i === void 0 ? void 0 : i.scrollContainerTo({
105
107
  top: 0
106
108
  });
107
109
  if (!t) {
@@ -133,12 +135,12 @@ const f = class {
133
135
  * If the value does not match any item's value, this method does nothing.
134
136
  * @testOnly
135
137
  */ async selectItem(t) {
136
- var e;
137
- const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
138
- const n = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".dropdown-item");
139
- if (!i || this.disabled) return;
138
+ var i;
139
+ const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
140
+ const n = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".dropdown-item");
141
+ if (!e || this.disabled) return;
140
142
  if (!this.open) {
141
- (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
143
+ (i = this.controlElement) === null || i === void 0 ? void 0 : i.click();
142
144
  await a();
143
145
  }
144
146
  n.click();
@@ -154,12 +156,12 @@ const f = class {
154
156
  * - Item has the `removable` property enabled
155
157
  * @testOnly
156
158
  */ async selectRemoveItem(t) {
157
- var e;
158
- const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
159
- const n = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".remove-dropdown-item");
160
- if (!i || !n || this.disabled) return;
159
+ var i;
160
+ const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
161
+ const n = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".remove-dropdown-item");
162
+ if (!e || !n || this.disabled) return;
161
163
  if (!this.open) {
162
- (e = this.controlElement) === null || e === void 0 ? void 0 : e.click();
164
+ (i = this.controlElement) === null || i === void 0 ? void 0 : i.click();
163
165
  await a();
164
166
  }
165
167
  n.click();
@@ -201,14 +203,14 @@ const f = class {
201
203
  }
202
204
  get toggleButtonProps() {
203
205
  const t = [ "primary", "secondary", "neutral" ];
204
- const e = [ "icon", "fab", "custom", ...t ];
205
- const i = e.includes(this.type) ? this.type : "";
206
- const n = i === "icon";
207
- const o = i === "fab";
208
- const s = i === "custom";
206
+ const i = [ "icon", "fab", "custom", ...t ];
207
+ const e = i.includes(this.type) ? this.type : "";
208
+ const n = e === "icon";
209
+ const o = e === "fab";
210
+ const s = e === "custom";
209
211
  let d;
210
- if (t.includes(i)) {
211
- d = i === "neutral" ? i : `workflow-${i}`;
212
+ if (t.includes(e)) {
213
+ d = e === "neutral" ? e : `workflow-${e}`;
212
214
  }
213
215
  const r = this.open;
214
216
  const a = !!this.disabled;
@@ -226,16 +228,16 @@ const f = class {
226
228
  };
227
229
  }
228
230
  _clickItem(t) {
229
- var e;
231
+ var i;
230
232
  if (!t || this.disabled) return;
231
- const i = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
233
+ const e = this.hostElement.querySelector(`${this.dropdownItemSelector}[value="${t}"]`);
232
234
  const n = this.hostElement.querySelector(`${this.optionSelector}[value="${t}"]`);
233
- (e = i === null || i === void 0 ? void 0 : i.shadowRoot.querySelector(".dropdown-item")) === null || e === void 0 ? void 0 : e.click();
235
+ (i = e === null || e === void 0 ? void 0 : e.shadowRoot.querySelector(".dropdown-item")) === null || i === void 0 ? void 0 : i.click();
234
236
  n === null || n === void 0 ? void 0 : n.click();
235
237
  }
236
238
  async _handleActionSheet(t) {
237
- const {value: e} = await s(this, t);
238
- this._clickItem(e);
239
+ const {value: i} = await s(this, t);
240
+ this._clickItem(i);
239
241
  this.controlElement.focus();
240
242
  }
241
243
  _togglePopover() {
@@ -270,24 +272,24 @@ const f = class {
270
272
  }
271
273
  resolveMenuItemElements() {
272
274
  return this.resolveMenu().then((t => t.map((t => {
273
- let e;
274
275
  let i;
276
+ let e;
275
277
  if (t["tct-ctxid"]) {
276
- i = {};
277
- i[t.contextIdParamName] = t["tct-ctxid"];
278
+ e = {};
279
+ e[t.contextIdParamName] = t["tct-ctxid"];
278
280
  }
279
281
  switch (t.action) {
280
282
  case "navigateTo":
281
- e = function() {
282
- var e, n;
283
- return (n = (e = window.TectonElements) === null || e === void 0 ? void 0 : e.navigateTo) === null || n === void 0 ? void 0 : n.call(e, t.featureName, t.moduleName, i);
283
+ i = function() {
284
+ var i, n;
285
+ return (n = (i = window.TectonElements) === null || i === void 0 ? void 0 : i.navigateTo) === null || n === void 0 ? void 0 : n.call(i, t.featureName, t.moduleName, e);
284
286
  };
285
287
  break;
286
288
 
287
289
  case "showOverpanel":
288
- e = function() {
289
- var e, n;
290
- return (n = (e = window.TectonElements) === null || e === void 0 ? void 0 : e.showOverpanel) === null || n === void 0 ? void 0 : n.call(e, `${t.featureName}.${t.moduleName}`, i, undefined, true);
290
+ i = function() {
291
+ var i, n;
292
+ return (n = (i = window.TectonElements) === null || i === void 0 ? void 0 : i.showOverpanel) === null || n === void 0 ? void 0 : n.call(i, `${t.featureName}.${t.moduleName}`, e, undefined, true);
291
293
  };
292
294
  break;
293
295
  }
@@ -295,7 +297,7 @@ const f = class {
295
297
  n.setAttribute("value", t.itemLabel);
296
298
  n.classList.add("resolved-menu-item");
297
299
  n.textContent = t.itemLabel;
298
- n.onclick = e;
300
+ n.onclick = i;
299
301
  return n;
300
302
  }))));
301
303
  }
@@ -303,13 +305,13 @@ const f = class {
303
305
  // #region Render Methods
304
306
  render() {
305
307
  const t = this.toggleButtonProps;
306
- return e("click-elsewhere", {
307
- key: "e03e38faaa27ea520e902acbb03875e7cdec33c6",
308
+ return i("click-elsewhere", {
309
+ key: "3a2cbf50b72c93eb55c86b4f8025656c76029fc2",
308
310
  class: this.open ? "dropdown-open" : "",
309
311
  onChange: this.onClickElsewhere,
310
312
  "test-id": "dropdownContainer"
311
- }, e("q2-btn", {
312
- key: "cb379d4cb55631a5ba148df0716bbc7e19575c70",
313
+ }, i("q2-btn", {
314
+ key: "19e9f60637e1a4908718e9a7473f514e9366bf13",
313
315
  ref: t => this.controlElement = t,
314
316
  class: t.className,
315
317
  onClick: this.onToggleClick,
@@ -326,17 +328,17 @@ const f = class {
326
328
  "test-id": "dropdownButton",
327
329
  block: this.block,
328
330
  description: c("tecton.element.dropdown.itemCount", [ this.determineDropdownItemCount ])
329
- }, this.hasCustomControl ? e("div", {
331
+ }, this.hasCustomControl ? i("div", {
330
332
  "test-id": "dropdownControl",
331
333
  class: t.custom ? "" : "hidden"
332
- }, e("slot", {
334
+ }, i("slot", {
333
335
  name: "control"
334
- })) : e(i, null, this.icon ? e("q2-icon", {
336
+ })) : i(e, null, this.icon ? i("q2-icon", {
335
337
  type: this.icon
336
- }) : " ", this.label && !this.hideLabel && e("span", {
338
+ }) : " ", this.label && !this.hideLabel && i("span", {
337
339
  class: "dropdown-button-text"
338
- }, c(this.label)))), e("q2-popover", {
339
- key: "bfad0484d72855a359bd45aeecf9107ff879e81b",
340
+ }, c(this.label)))), i("q2-popover", {
341
+ key: "74367bfdd51c997623d71861aae404d5d9b817eb",
340
342
  ref: t => this.popoverElement = t,
341
343
  controlElement: this.controlElement,
342
344
  open: this.open,
@@ -347,16 +349,16 @@ const f = class {
347
349
  align: this.popoverAlignment,
348
350
  mode: this.popoverMode || undefined,
349
351
  block: this.block
350
- }, e("q2-option-list", {
351
- key: "9b6f172128fa8265e92330b2333cbef501e060f1",
352
+ }, i("q2-option-list", {
353
+ key: "1ca3e8692d33c7a70d9041c52a3bf3d9dabcd01e",
352
354
  onPopoverState: this.onPopoverState,
353
355
  id: "option-list",
354
356
  ref: t => this.optionList = t,
355
357
  type: "menu",
356
358
  label: c("tecton.element.optionList.label", [ this.optionListLabel ]),
357
359
  "no-select": true
358
- }, e("slot", {
359
- key: "6460a769807e87648b6caea209d4f679035eb362"
360
+ }, i("slot", {
361
+ key: "631d86526d95bcf8156e90ee6f317358a2b9b4ad"
360
362
  }))));
361
363
  }
362
364
  get hostElement() {
@@ -1 +1 @@
1
- {"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","optionSelector","focusToggle","controlElement","focus","handleFocusOut","event","relatedTarget","_a","popoverElement","contains","hostElement","open","onClickElsewhere","target","localName","stopPropagation","onPopoverState","detail","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","option","showActionSheetList","dispatchEvent","FocusEvent","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","TectonElements","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","_b","navigateTo","call","featureName","moduleName","showOverpanel","undefined","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\nq2-icon {\n pointer-events: none;\n margin-block: -100px;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/** @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot. */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n // #region Own Properties\n\n controlElement?: HTMLQ2BtnElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n optionList: HTMLQ2OptionListElement;\n popoverElement?: HTMLQ2PopoverElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true })\n additionalContext: string;\n\n /** @deprecated */\n @Prop({ reflect: true })\n alignment: 'left' | 'right';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /** If `true`, component expands to fill the width of its parent element. */\n @Prop({ reflect: true })\n block: boolean;\n\n /**\n * Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n context: string;\n\n /**\n * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n contextValue: string;\n\n /** Indicates the menu cannot be focused or interacted with. */\n @Prop({ reflect: true })\n disabled: boolean;\n\n /**\n * Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n */\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /**\n * Instructs the component to use the action sheet workflow for displaying its options.\n *\n * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n */\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n @Prop({ reflect: true })\n icon: string;\n\n /**\n * The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /**\n * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n name: string;\n\n /**\n * Determine whether the popover is open or closed.\n *\n * @readonly\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /** Determines the label that is applied to the option list for accessibility purposes. */\n @Prop()\n optionListLabel: string;\n\n /** @deprecated */\n @Prop({ reflect: true })\n popDirection: 'up' | 'down';\n\n /** Aligns the popover dropdown to the left or right side of the input field. */\n @Prop({ mutable: true })\n popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n /**\n * Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ mutable: true })\n popoverDirection: 'up' | 'down';\n\n /**\n * Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n */\n @Prop()\n popoverMaxHeight: number;\n\n /** @deprecated */\n @Prop()\n popoverMinHeight: number;\n\n /**\n * Determines the display mode of the popover.\n *\n * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n *\n * @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n */\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /**\n * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n resolvedType: string;\n\n /** The type of button used as the menu toggle.\n * @info\n * Type must be \"custom\" to use the custom button slot.\n */\n @Prop({ reflect: true })\n type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n if (!open) {\n this.optionList.setActiveElement(null);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /**\n * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n * @testOnly\n */\n @Method()\n async closePopover() {\n if (!this.open || this.disabled) return;\n this._togglePopover();\n }\n\n /**\n * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n * @testOnly\n */\n @Method()\n async openPopover() {\n if (this.open || this.disabled) return;\n this._togglePopover();\n }\n\n /**\n * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n *\n * If the dropdown is closed, this will open it before selecting the item.\n *\n * If the value does not match any item's value, this method does nothing.\n * @testOnly\n */\n @Method()\n async selectItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n if (!item || this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n itemBtn.click();\n await waitForNextPaint();\n }\n\n /**\n * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n *\n * If the dropdown is closed, this will open it before selecting the remove item button.\n *\n * Requirements for this method to work properly:\n * - Provided `value` matches the item's `value` property\n * - Item has the `removable` property enabled\n * @testOnly\n */\n @Method()\n async selectRemoveItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n if (!item || !removeButton || this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n removeButton.click();\n await waitForNextPaint();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n // #endregion\n // #region Local Methods\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get hasCustomControl() {\n return !!this.hostElement.querySelector('[slot=control]');\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n _clickItem(value: string) {\n if (!value || this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\n }\n\n _togglePopover() {\n const { controlElement } = this;\n if (!controlElement) return;\n controlElement.click();\n controlElement.focus();\n controlElement.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name || !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.textContent = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n onFocusout={this.handleFocusOut}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomControl ? (\n <div\n test-id=\"dropdownControl\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"control\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n max-height={this.popoverMaxHeight}\n onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode || undefined}\n block={this.block}\n >\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["q2DropdownCss","Q2DropdownStyle0","Q2Dropdown","this","dropdownItemSelector","optionSelector","focusToggle","controlElement","focus","handleFocusOut","event","relatedTarget","_a","popoverElement","contains","hostElement","open","onClickElsewhere","target","localName","stopPropagation","onPopoverState","detail","onToggleClick","async","shouldShowActionSheet","_handleActionSheet","toggle","onToggleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","key","preventDefault","optionList","handleExternalKeydown","window","Tecton","useActionSheets","componentWillLoad","popDirectionHandler","alignmentHandler","ariaLabelHandler","componentDidLoad","orchestrateResolvedMenuItems","overrideFocus","delegateFocus","isEventFromElement","popoverStateChangeHandler","scrollContainerTo","top","setActiveElement","closePopover","disabled","_togglePopover","openPopover","selectItem","value","item","querySelector","itemBtn","shadowRoot","click","waitForNextPaint","selectRemoveItem","removeButton","additionalContextHandler","handleRenamedProp","handleAriaLabel","contextHandler","contextValueHandler","nameHandler","resolvedTypeHandler","determineDropdownItemCount","querySelectorAll","length","hasCustomControl","toggleButtonProps","allowedIntents","allowedTypes","type","includes","icon","fab","custom","intent","active","ariaExpanded","className","_clickItem","option","showActionSheetList","dispatchEvent","FocusEvent","name","context","removeResolvedElements","resolveMenuItemElements","then","data","forEach","element","appendChild","catch","err","resolvedElements","removeChild","resolveMenu","TectonElements","contextValue","resolvedType","additionalContext","datas","map","menuItemData","onClickFn","queryParams","contextIdParamName","action","_b","navigateTo","call","featureName","moduleName","showOverpanel","undefined","newDropdownItem","document","createElement","setAttribute","itemLabel","classList","add","textContent","onclick","render","btnProps","h","class","onChange","ref","el","onClick","onKeyDown","onFocusout","label","hideLabel","loc","ariaHasPopup","block","description","Fragment","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align","popoverAlignment","mode","popoverMode","id","optionListLabel"],"sources":["src/components/q2-dropdown/q2-dropdown.scss?tag=q2-dropdown&encapsulation=shadow","src/components/q2-dropdown/q2-dropdown.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n display: inline-flex;\n}\n\n:host([block]) {\n display: block;\n}\n\nq2-icon {\n pointer-events: none;\n margin-block: -100px;\n}\n\nclick-elsewhere {\n position: relative;\n display: block;\n}\n\nq2-popover {\n --tct-popover-min-width: #{var-list(var-prefixer(dropdown-width))};\n}\n","import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n handleAriaLabel,\n handleRenamedProp,\n isEventFromElement,\n loc,\n overrideFocus,\n waitForNextPaint,\n} from 'src/utils';\n\n/** @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot. */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n // #region Own Properties\n\n controlElement?: HTMLQ2BtnElement;\n dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n optionList: HTMLQ2OptionListElement;\n popoverElement?: HTMLQ2PopoverElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n @Prop({ reflect: true })\n additionalContext: string;\n\n /** @deprecated */\n @Prop({ reflect: true })\n alignment: 'left' | 'right';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true })\n ariaLabel: string;\n\n /** If `true`, component expands to fill the width of its parent element. */\n @Prop({ reflect: true })\n block: boolean;\n\n /**\n * Tells the outlet what the type of object being passed in as contextValue.\n * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n context: string;\n\n /**\n * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n *\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n contextValue: string;\n\n /** Indicates the menu cannot be focused or interacted with. */\n @Prop({ reflect: true })\n disabled: boolean;\n\n /**\n * Hide's the field's `<label>` element from view.\n * @warning\n * Only use when a visible label is impractical.\n */\n @Prop({ reflect: true, mutable: true })\n hideLabel: boolean;\n\n /**\n * Instructs the component to use the action sheet workflow for displaying its options.\n *\n * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n */\n @Prop()\n hoist: boolean = !!window.Tecton?.useActionSheets;\n\n /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n @Prop({ reflect: true })\n icon: string;\n\n /**\n * The text that appears within the button.\n * @warning\n * This property should not be used if the `type` is `icon`.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true })\n label: string;\n\n /**\n * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n name: string;\n\n /**\n * Determine whether the popover is open or closed.\n *\n * @readonly\n */\n @Prop({ reflect: true, mutable: true })\n open: boolean;\n\n /** Determines the label that is applied to the option list for accessibility purposes. */\n @Prop()\n optionListLabel: string;\n\n /** @deprecated */\n @Prop({ reflect: true })\n popDirection: 'up' | 'down';\n\n /** Aligns the popover dropdown to the left or right side of the input field. */\n @Prop({ mutable: true })\n popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n /**\n * Force the direction of the popover dropdown when it opens.\n * If no value is passed, the component will auto-detect the direction based on available space.\n */\n @Prop({ mutable: true })\n popoverDirection: 'up' | 'down';\n\n /**\n * Force the maximum height of the popover. This value will be interpreted as pixels.\n * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n */\n @Prop()\n popoverMaxHeight: number;\n\n /** @deprecated */\n @Prop()\n popoverMinHeight: number;\n\n /**\n * Determines the display mode of the popover.\n *\n * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n *\n * @info\n * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n * when nested inside of elements with transform properties. This will be removed once the popover API is available\n * for use.\n */\n @Prop({ mutable: true })\n popoverMode: 'legacy' = null;\n\n /**\n * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n * @info\n * Only applicable when using `<q2-dropdown>` for outlets.\n */\n @Prop({ reflect: true })\n resolvedType: string;\n\n /** The type of button used as the menu toggle.\n * @info\n * Type must be \"custom\" to use the custom button slot.\n */\n @Prop({ reflect: true })\n type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n // #endregion\n // #region Component Lifecycle Events\n\n componentWillLoad() {\n this.popDirectionHandler();\n this.alignmentHandler();\n this.ariaLabelHandler();\n }\n\n componentDidLoad() {\n this.orchestrateResolvedMenuItems();\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.focusToggle();\n }\n\n @Listen('popoverStateChanged')\n popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n if (this.open !== open) this.open = open;\n this.popoverElement?.scrollContainerTo({ top: 0 });\n if (!open) {\n this.optionList.setActiveElement(null);\n }\n }\n\n // #endregion\n // #region Public Methods API\n\n /**\n * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n * @testOnly\n */\n @Method()\n async closePopover() {\n if (!this.open || this.disabled) return;\n this._togglePopover();\n }\n\n /**\n * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n * @testOnly\n */\n @Method()\n async openPopover() {\n if (this.open || this.disabled) return;\n this._togglePopover();\n }\n\n /**\n * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).\n *\n * If the dropdown is closed, this will open it before selecting the item.\n *\n * If the value does not match any item's value, this method does nothing.\n * @testOnly\n */\n @Method()\n async selectItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n if (!item || this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n itemBtn.click();\n await waitForNextPaint();\n }\n\n /**\n * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n *\n * If the dropdown is closed, this will open it before selecting the remove item button.\n *\n * Requirements for this method to work properly:\n * - Provided `value` matches the item's `value` property\n * - Item has the `removable` property enabled\n * @testOnly\n */\n @Method()\n async selectRemoveItem(value: string) {\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n if (!item || !removeButton || this.disabled) return;\n if (!this.open) {\n this.controlElement?.click();\n await waitForNextPaint();\n }\n removeButton.click();\n await waitForNextPaint();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('additionalContext')\n additionalContextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('alignment')\n alignmentHandler() {\n handleRenamedProp(this, 'alignment', 'popoverAlignment');\n }\n\n @Watch('ariaLabel')\n ariaLabelHandler() {\n handleAriaLabel(this);\n }\n\n @Watch('context')\n contextHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('contextValue')\n contextValueHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('name')\n nameHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n @Watch('popDirection')\n popDirectionHandler() {\n handleRenamedProp(this, 'popDirection', 'popoverDirection');\n }\n\n @Watch('resolvedType')\n resolvedTypeHandler() {\n this.orchestrateResolvedMenuItems();\n }\n\n // #endregion\n // #region Local Methods\n\n get determineDropdownItemCount() {\n return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n }\n\n get hasCustomControl() {\n return !!this.hostElement.querySelector('[slot=control]');\n }\n\n get toggleButtonProps() {\n const allowedIntents = ['primary', 'secondary', 'neutral'];\n const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n const type = allowedTypes.includes(this.type) ? this.type : '';\n const icon = type === 'icon';\n const fab = type === 'fab';\n const custom = type === 'custom';\n let intent;\n if (allowedIntents.includes(type)) {\n intent = type === 'neutral' ? type : `workflow-${type}`;\n }\n const active = this.open;\n const disabled = !!this.disabled;\n const ariaExpanded = this.open;\n const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n return {\n icon,\n fab,\n intent,\n active,\n disabled,\n ariaExpanded,\n className,\n custom,\n };\n }\n\n _clickItem(value: string) {\n if (!value || this.disabled) return;\n const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n `${this.dropdownItemSelector}[value=\"${value}\"]`\n );\n const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n option?.click();\n }\n\n async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n const { value } = await showActionSheetList(this, event);\n this._clickItem(value);\n this.controlElement.focus();\n }\n\n _togglePopover() {\n const { controlElement } = this;\n if (!controlElement) return;\n controlElement.click();\n controlElement.focus();\n controlElement.dispatchEvent(new FocusEvent('focus'));\n }\n\n focusToggle = () => {\n this.controlElement.focus();\n };\n\n handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n if (this.popoverElement?.contains(relatedTarget)) return;\n if (this.hostElement.contains(relatedTarget)) return;\n this.open = false;\n };\n\n onClickElsewhere = (event: CustomEvent) => {\n const target = event.target as HTMLElement;\n if (target.localName === 'q2-option-list') {\n event.stopPropagation();\n }\n if (target.localName === 'click-elsewhere') {\n event.stopPropagation();\n const { popoverElement } = this;\n if (!popoverElement) return;\n popoverElement.open = false;\n }\n };\n\n onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n if (event.detail.open) return;\n this.controlElement.focus();\n };\n\n onToggleClick = async (event: MouseEvent) => {\n event.stopPropagation();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this)) {\n this._handleActionSheet(event);\n } else {\n await this.popoverElement.toggle();\n }\n };\n\n onToggleKeydown = async (event: KeyboardEvent) => {\n const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n if (isTabMetaOrCtrl) return;\n\n event.preventDefault();\n this.popoverElement.controlElement = this.controlElement;\n if (shouldShowActionSheet(this, event)) {\n this._handleActionSheet(event);\n } else {\n this.optionList.handleExternalKeydown(event);\n }\n };\n\n orchestrateResolvedMenuItems() {\n if (!this.name || !this.context) {\n // this is only for contextual menu outlets\n this.removeResolvedElements();\n return;\n }\n\n this.resolveMenuItemElements()\n .then(data => {\n this.removeResolvedElements();\n data.forEach(element => {\n this.hostElement.appendChild(element);\n });\n })\n .catch(err => {\n this.removeResolvedElements();\n throw err;\n });\n }\n\n removeResolvedElements() {\n const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n resolvedElements.forEach(element => this.hostElement.removeChild(element));\n }\n\n resolveMenu() {\n return (\n this.name &&\n window.TectonElements &&\n window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n );\n }\n\n resolveMenuItemElements() {\n return this.resolveMenu().then(datas => {\n return datas.map(menuItemData => {\n let onClickFn;\n let queryParams;\n if (menuItemData['tct-ctxid']) {\n queryParams = {};\n queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n }\n\n switch (menuItemData.action) {\n case 'navigateTo':\n onClickFn = function () {\n return window.TectonElements?.navigateTo?.(\n menuItemData.featureName,\n menuItemData.moduleName,\n queryParams\n );\n };\n break;\n case 'showOverpanel':\n onClickFn = function () {\n return window.TectonElements?.showOverpanel?.(\n `${menuItemData.featureName}.${menuItemData.moduleName}`,\n queryParams,\n undefined,\n true\n );\n };\n break;\n }\n\n const newDropdownItem = document.createElement('q2-dropdown-item');\n newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n newDropdownItem.classList.add('resolved-menu-item');\n newDropdownItem.textContent = menuItemData.itemLabel;\n newDropdownItem.onclick = onClickFn;\n\n return newDropdownItem;\n });\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n const btnProps = this.toggleButtonProps;\n\n return (\n <click-elsewhere\n class={this.open ? 'dropdown-open' : ''}\n onChange={this.onClickElsewhere}\n test-id=\"dropdownContainer\"\n >\n <q2-btn\n ref={el => (this.controlElement = el)}\n class={btnProps.className}\n onClick={this.onToggleClick}\n onKeyDown={this.onToggleKeydown}\n fab={btnProps.fab}\n intent={btnProps.intent}\n onFocusout={this.handleFocusOut}\n active={btnProps.active}\n disabled={btnProps.disabled}\n ariaExpanded={`${!!btnProps.ariaExpanded}`}\n label={this.hideLabel && this.label ? loc(this.label) : undefined}\n hideLabel={this.hideLabel}\n ariaHasPopup=\"menu\"\n test-id=\"dropdownButton\"\n block={this.block}\n description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n >\n {this.hasCustomControl ? (\n <div\n test-id=\"dropdownControl\"\n class={btnProps.custom ? '' : 'hidden'}\n >\n <slot name=\"control\" />\n </div>\n ) : (\n <Fragment>\n {this.icon ? <q2-icon type={this.icon} /> : ' '}\n {this.label && !this.hideLabel && (\n <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n )}\n </Fragment>\n )}\n </q2-btn>\n <q2-popover\n ref={el => (this.popoverElement = el)}\n controlElement={this.controlElement}\n open={this.open}\n max-height={this.popoverMaxHeight}\n onFocusout={this.handleFocusOut}\n minHeight={this.popoverMinHeight}\n direction={this.popoverDirection}\n align={this.popoverAlignment}\n mode={this.popoverMode || undefined}\n block={this.block}\n >\n <q2-option-list\n onPopoverState={this.onPopoverState}\n id=\"option-list\"\n ref={el => (this.optionList = el)}\n type=\"menu\"\n label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n no-select\n >\n <slot />\n </q2-option-list>\n </q2-popover>\n </click-elsewhere>\n );\n }\n\n // #endregion\n}\n"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { r as t, c as i, h as e, g as s } from "./index-7a5365e2.js";
2
2
 
3
- import { a as n, o as a, i as h, w as r, l as d } from "./index-f2a66217.js";
3
+ import { a as n, o as a, i as h, w as r, l as d } from "./index-e4c2bfff.js";
4
4
 
5
5
  const l = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;max-width:100%}.q2-editable-field-wrapper:not([hidden]){display:flex}.q2-editable-field-wrapper.editing{align-items:flex-end}:host([block]){display:block;width:100%}:host([block]) .q2-editable-field-wrapper:not([hidden]){display:grid;grid-template-columns:1fr auto auto}q2-input,.text-wrapper{margin:0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0}q2-input{flex:1 1 auto;min-width:170px}.text-wrapper{flex:0 auto;align-self:center;display:inline-block}:host([truncated]) .text-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}q2-btn{flex:0 0 44px}dl{margin:var(--tct-scale-0, var(--app-scale-0x, 0))}dt{font-weight:600}dd{margin-left:var(--tct-scale-0, var(--app-scale-0x, 0));display:flex;align-items:center}";
6
6
 
@@ -1,6 +1,6 @@
1
1
  import { r as t, c as e, h as i, F as r, g as o } from "./index-7a5365e2.js";
2
2
 
3
- import { l as s, e as a } from "./index-f2a66217.js";
3
+ import { l as s, e as a } from "./index-e4c2bfff.js";
4
4
 
5
5
  const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-width:var(--tct-file-picker-drop-zone-border-width, 2px);border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:4px;--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";
6
6
 
@@ -1,6 +1,6 @@
1
1
  import { r as t, h as e, g as i, c as o } from "./index-7a5365e2.js";
2
2
 
3
- import { o as n, e as r } from "./index-f2a66217.js";
3
+ import { o as n, e as r } from "./index-e4c2bfff.js";
4
4
 
5
5
  const a = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
6
6
 
@@ -1,6 +1,6 @@
1
1
  import { r as t, g as s } from "./index-7a5365e2.js";
2
2
 
3
- import { l as i } from "./index-f2a66217.js";
3
+ import { l as i } from "./index-e4c2bfff.js";
4
4
 
5
5
  const e = class {
6
6
  constructor(s) {
@@ -1,14 +1,14 @@
1
- import { r as t, h as a, g as e } from "./index-7a5365e2.js";
1
+ import { r as t, h as e, g as a } from "./index-7a5365e2.js";
2
2
 
3
- import { o as s, i as o, n as r, t as i, l as n } from "./index-f2a66217.js";
3
+ import { o as s, i as o, n as r, t as i, l as n } from "./index-e4c2bfff.js";
4
4
 
5
5
  const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
6
6
 
7
7
  const p = c;
8
8
 
9
9
  const d = class {
10
- constructor(a) {
11
- t(this, a);
10
+ constructor(e) {
11
+ t(this, e);
12
12
  this.presentToggle = undefined;
13
13
  this.appearance = "standard";
14
14
  this.description = false;
@@ -44,15 +44,15 @@ const d = class {
44
44
  return i();
45
45
  }
46
46
  messageIcon(t) {
47
- const e = {
47
+ const a = {
48
48
  success: "success",
49
49
  warning: "warning",
50
50
  danger: "error",
51
51
  error: "error",
52
52
  info: "info"
53
53
  };
54
- const s = e[t] || e.info;
55
- return a("q2-icon", {
54
+ const s = a[t] || a.info;
55
+ return e("q2-icon", {
56
56
  type: s,
57
57
  class: "message-icon"
58
58
  });
@@ -61,35 +61,35 @@ const d = class {
61
61
  // #region Render Methods
62
62
  render() {
63
63
  const {isFirefox: t} = this;
64
- const e = t && this.presentToggle;
64
+ const a = t && this.presentToggle;
65
65
  const s = !t && this.presentToggle;
66
66
  const {description: o} = this;
67
67
  const r = n(`tecton.element.message.type.${this.type ? this.type : "info"}`);
68
- return a("div", {
68
+ return e("div", {
69
69
  key: "f4161e85adba8c023d8ad135c955a312e145ad9a",
70
70
  tabindex: "-1",
71
71
  class: "message",
72
72
  role: o ? undefined : "alert",
73
73
  "aria-live": o ? undefined : "assertive",
74
74
  "aria-atomic": o ? undefined : "true",
75
- "aria-relevant": o && e ? undefined : "all",
75
+ "aria-relevant": o && a ? undefined : "all",
76
76
  "test-id": "messageContainer"
77
- }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && a("div", {
77
+ }, this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
78
78
  key: "75a17b9f1d17e1c051e7ed986d1382f83da6747b",
79
79
  class: "sr"
80
- }), a("div", {
80
+ }), e("div", {
81
81
  key: "4d1761c6d6391d2f6ed982add6effc441f7284f3",
82
82
  class: "sr message-label"
83
- }, r), a("div", {
83
+ }, r), e("div", {
84
84
  key: "035a1040c019d8aa6eb6899e275469ab9edfc69d",
85
85
  class: "message-content",
86
- "aria-hidden": e ? "true" : undefined
87
- }, a("slot", {
86
+ "aria-hidden": a ? "true" : undefined
87
+ }, e("slot", {
88
88
  key: "59187a716f498e899c6c5bf6c81aca27dbfb32c2"
89
89
  })));
90
90
  }
91
91
  get hostElement() {
92
- return e(this);
92
+ return a(this);
93
93
  }
94
94
  };
95
95
 
@@ -1,6 +1,6 @@
1
1
  import { r as t, c as i, h as o, g as a } from "./index-7a5365e2.js";
2
2
 
3
- import { p as e, w as r, e as s } from "./index-f2a66217.js";
3
+ import { p as e, w as r, e as s } from "./index-e4c2bfff.js";
4
4
 
5
5
  import { s as d } from "./sanitize-html-string-735c19f5.js";
6
6