q2-tecton-elements 1.26.0 → 1.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (188) hide show
  1. package/dist/cjs/{index-d62f5a7e.js → index-ffd19146.js} +2 -2
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  4. package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
  5. package/dist/cjs/q2-badge_2.cjs.entry.js +4 -4
  6. package/dist/cjs/q2-btn_2.cjs.entry.js +7 -5
  7. package/dist/cjs/q2-calendar.cjs.entry.js +3 -3
  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 +6 -5
  15. package/dist/cjs/q2-checkbox.cjs.entry.js +3 -3
  16. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-dropdown.cjs.entry.js +2 -2
  18. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-icon.cjs.entry.js +1 -1
  20. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  21. package/dist/cjs/q2-message.cjs.entry.js +2 -2
  22. package/dist/cjs/q2-month-picker.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-optgroup_2.cjs.entry.js +2 -2
  24. package/dist/cjs/q2-option-list_2.cjs.entry.js +66 -25
  25. package/dist/cjs/q2-pagination.cjs.entry.js +18 -16
  26. package/dist/cjs/q2-pill.cjs.entry.js +82 -14
  27. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  28. package/dist/cjs/q2-radio.cjs.entry.js +2 -2
  29. package/dist/cjs/q2-section.cjs.entry.js +1 -1
  30. package/dist/cjs/q2-select.cjs.entry.js +24 -19
  31. package/dist/cjs/q2-stepper-pane.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
  33. package/dist/cjs/q2-stepper.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-tab-container.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-tag.cjs.entry.js +11 -4
  36. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  37. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  38. package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
  39. package/dist/collection/components/q2-avatar/styles.css +22 -14
  40. package/dist/collection/components/q2-btn/index.js +22 -3
  41. package/dist/collection/components/q2-btn/styles.css +26 -11
  42. package/dist/collection/components/q2-calendar/index.js +1 -1
  43. package/dist/collection/components/q2-calendar/styles.css +7 -1
  44. package/dist/collection/components/q2-carousel-pane/index.js +15 -6
  45. package/dist/collection/components/q2-checkbox/index.js +6 -3
  46. package/dist/collection/components/q2-checkbox/styles.css +1 -0
  47. package/dist/collection/components/q2-checkbox-group/index.js +5 -4
  48. package/dist/collection/components/q2-dropdown/index.js +1 -1
  49. package/dist/collection/components/q2-input/index.js +6 -6
  50. package/dist/collection/components/q2-input/styles.css +4 -0
  51. package/dist/collection/components/q2-message/index.js +1 -1
  52. package/dist/collection/components/q2-option/index.js +21 -9
  53. package/dist/collection/components/q2-option-list/index.js +55 -14
  54. package/dist/collection/components/q2-pagination/index.js +16 -14
  55. package/dist/collection/components/q2-pagination/styles.css +5 -0
  56. package/dist/collection/components/q2-pill/index.js +84 -14
  57. package/dist/collection/components/q2-popover/index.js +10 -10
  58. package/dist/collection/components/q2-radio/index.js +20 -8
  59. package/dist/collection/components/q2-radio/styles.css +2 -0
  60. package/dist/collection/components/q2-select/index.js +40 -17
  61. package/dist/collection/components/q2-select/styles.css +41 -3
  62. package/dist/collection/components/q2-stepper/index.js +5 -2
  63. package/dist/collection/components/q2-stepper-pane/index.js +5 -2
  64. package/dist/collection/components/q2-tab-pane/index.js +20 -8
  65. package/dist/collection/components/q2-tag/index.js +10 -3
  66. package/dist/collection/utils/index.js +1 -1
  67. package/dist/components/index10.js +1 -1
  68. package/dist/components/index12.js +1 -1
  69. package/dist/components/index13.js +55 -14
  70. package/dist/components/index14.js +10 -10
  71. package/dist/components/index15.js +2 -2
  72. package/dist/components/index3.js +1 -1
  73. package/dist/components/index5.js +7 -4
  74. package/dist/components/index8.js +4 -4
  75. package/dist/components/q2-calendar.js +2 -2
  76. package/dist/components/q2-checkbox-group.js +5 -4
  77. package/dist/components/q2-checkbox.js +2 -2
  78. package/dist/components/q2-dropdown.js +1 -1
  79. package/dist/components/q2-pagination.js +18 -16
  80. package/dist/components/q2-pill.js +82 -14
  81. package/dist/components/q2-radio.js +1 -1
  82. package/dist/components/q2-select.js +25 -19
  83. package/dist/components/q2-tag.js +10 -3
  84. package/dist/docs.json +145 -46
  85. package/dist/esm/{index-5040cd84.js → index-a0cc60e3.js} +2 -2
  86. package/dist/esm/loader.js +1 -1
  87. package/dist/esm/q2-action-sheet.entry.js +1 -1
  88. package/dist/esm/q2-avatar.entry.js +1 -1
  89. package/dist/esm/q2-badge_2.entry.js +4 -4
  90. package/dist/esm/q2-btn_2.entry.js +7 -5
  91. package/dist/esm/q2-calendar.entry.js +3 -3
  92. package/dist/esm/q2-card.entry.js +1 -1
  93. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  94. package/dist/esm/q2-carousel.entry.js +1 -1
  95. package/dist/esm/q2-chart-area.entry.js +1 -1
  96. package/dist/esm/q2-chart-bar.entry.js +1 -1
  97. package/dist/esm/q2-chart-donut.entry.js +1 -1
  98. package/dist/esm/q2-checkbox-group.entry.js +6 -5
  99. package/dist/esm/q2-checkbox.entry.js +3 -3
  100. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  101. package/dist/esm/q2-dropdown.entry.js +2 -2
  102. package/dist/esm/q2-editable-field.entry.js +1 -1
  103. package/dist/esm/q2-icon.entry.js +1 -1
  104. package/dist/esm/q2-loc.entry.js +1 -1
  105. package/dist/esm/q2-message.entry.js +2 -2
  106. package/dist/esm/q2-month-picker.entry.js +1 -1
  107. package/dist/esm/q2-optgroup_2.entry.js +2 -2
  108. package/dist/esm/q2-option-list_2.entry.js +66 -25
  109. package/dist/esm/q2-pagination.entry.js +18 -16
  110. package/dist/esm/q2-pill.entry.js +82 -14
  111. package/dist/esm/q2-radio-group.entry.js +1 -1
  112. package/dist/esm/q2-radio.entry.js +2 -2
  113. package/dist/esm/q2-section.entry.js +1 -1
  114. package/dist/esm/q2-select.entry.js +24 -19
  115. package/dist/esm/q2-stepper-pane.entry.js +1 -1
  116. package/dist/esm/q2-stepper-vertical.entry.js +1 -1
  117. package/dist/esm/q2-stepper.entry.js +1 -1
  118. package/dist/esm/q2-tab-container.entry.js +1 -1
  119. package/dist/esm/q2-tag.entry.js +11 -4
  120. package/dist/esm/q2-tecton-elements.js +1 -1
  121. package/dist/esm/q2-textarea.entry.js +1 -1
  122. package/dist/esm/q2-tooltip.entry.js +1 -1
  123. package/dist/q2-tecton-elements/p-04b9a7ee.entry.js +1 -0
  124. package/dist/q2-tecton-elements/{p-c506314d.entry.js → p-05bdc0aa.entry.js} +1 -1
  125. package/dist/q2-tecton-elements/{p-f5c9ef75.entry.js → p-0b8943da.entry.js} +1 -1
  126. package/dist/q2-tecton-elements/{p-ece7a1ca.entry.js → p-12e65423.entry.js} +1 -1
  127. package/dist/q2-tecton-elements/{p-f3096cce.entry.js → p-1d28c600.entry.js} +1 -1
  128. package/dist/q2-tecton-elements/{p-839ef27d.js → p-2453cd92.js} +1 -1
  129. package/dist/q2-tecton-elements/{p-a1f91d8c.entry.js → p-256e5161.entry.js} +1 -1
  130. package/dist/q2-tecton-elements/{p-5878b8bd.entry.js → p-25ea01d3.entry.js} +1 -1
  131. package/dist/q2-tecton-elements/p-2b8a8981.entry.js +1 -0
  132. package/dist/q2-tecton-elements/p-396fd275.entry.js +1 -0
  133. package/dist/q2-tecton-elements/p-3dca7465.entry.js +1 -0
  134. package/dist/q2-tecton-elements/p-414ca427.entry.js +1 -0
  135. package/dist/q2-tecton-elements/p-521c9085.entry.js +1 -0
  136. package/dist/q2-tecton-elements/{p-bfaff58b.entry.js → p-5a670d93.entry.js} +1 -1
  137. package/dist/q2-tecton-elements/p-72374b8e.entry.js +1 -0
  138. package/dist/q2-tecton-elements/p-8545c3cb.entry.js +1 -0
  139. package/dist/q2-tecton-elements/p-85e780b2.entry.js +1 -0
  140. package/dist/q2-tecton-elements/{p-18808c27.entry.js → p-869e899c.entry.js} +1 -1
  141. package/dist/q2-tecton-elements/p-8e652d59.entry.js +1 -0
  142. package/dist/q2-tecton-elements/{p-74ac19cd.entry.js → p-9292bd80.entry.js} +1 -1
  143. package/dist/q2-tecton-elements/{p-fbe8b4c0.entry.js → p-9367dc29.entry.js} +1 -1
  144. package/dist/q2-tecton-elements/{p-bc8a507b.entry.js → p-949fa312.entry.js} +1 -1
  145. package/dist/q2-tecton-elements/{p-a8258fb1.entry.js → p-a298cbfb.entry.js} +1 -1
  146. package/dist/q2-tecton-elements/p-aae8b9fc.entry.js +1 -0
  147. package/dist/q2-tecton-elements/{p-bea1fda1.entry.js → p-ac6dd5b1.entry.js} +1 -1
  148. package/dist/q2-tecton-elements/{p-8b5639a1.entry.js → p-bafb5e70.entry.js} +1 -1
  149. package/dist/q2-tecton-elements/{p-a411f2f3.entry.js → p-be0d3bfe.entry.js} +1 -1
  150. package/dist/q2-tecton-elements/{p-a7679912.entry.js → p-ce67d77a.entry.js} +1 -1
  151. package/dist/q2-tecton-elements/{p-1cc42a02.entry.js → p-d06d752f.entry.js} +1 -1
  152. package/dist/q2-tecton-elements/{p-7b124d8c.entry.js → p-d69cb7d1.entry.js} +1 -1
  153. package/dist/q2-tecton-elements/{p-bda877fe.entry.js → p-edcf49fd.entry.js} +1 -1
  154. package/dist/q2-tecton-elements/{p-8954cc63.entry.js → p-ef657f8f.entry.js} +1 -1
  155. package/dist/q2-tecton-elements/{p-0cbad3bc.entry.js → p-f3e4bb52.entry.js} +1 -1
  156. package/dist/q2-tecton-elements/{p-7d35c1a1.entry.js → p-fb768d19.entry.js} +1 -1
  157. package/dist/q2-tecton-elements/{p-87cecc80.entry.js → p-fcad1609.entry.js} +1 -1
  158. package/dist/q2-tecton-elements/{p-7eca74d4.entry.js → p-fe3625ad.entry.js} +1 -1
  159. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  160. package/dist/test/helpers.js +1 -1
  161. package/dist/types/components/q2-btn/index.d.ts +2 -0
  162. package/dist/types/components/q2-carousel-pane/index.d.ts +12 -0
  163. package/dist/types/components/q2-checkbox/index.d.ts +4 -0
  164. package/dist/types/components/q2-checkbox-group/index.d.ts +1 -1
  165. package/dist/types/components/q2-input/index.d.ts +1 -1
  166. package/dist/types/components/q2-option/index.d.ts +16 -0
  167. package/dist/types/components/q2-option-list/index.d.ts +6 -0
  168. package/dist/types/components/q2-pagination/index.d.ts +1 -1
  169. package/dist/types/components/q2-pill/index.d.ts +6 -2
  170. package/dist/types/components/q2-radio/index.d.ts +16 -0
  171. package/dist/types/components/q2-select/index.d.ts +3 -2
  172. package/dist/types/components/q2-stepper/index.d.ts +4 -0
  173. package/dist/types/components/q2-stepper-pane/index.d.ts +4 -0
  174. package/dist/types/components/q2-tab-pane/index.d.ts +16 -0
  175. package/dist/types/components/q2-tag/index.d.ts +1 -1
  176. package/dist/types/components.d.ts +148 -0
  177. package/package.json +3 -3
  178. package/dist/q2-tecton-elements/p-09639e95.entry.js +0 -1
  179. package/dist/q2-tecton-elements/p-0b82891e.entry.js +0 -1
  180. package/dist/q2-tecton-elements/p-224d3c31.entry.js +0 -1
  181. package/dist/q2-tecton-elements/p-4734a577.entry.js +0 -1
  182. package/dist/q2-tecton-elements/p-55d192b3.entry.js +0 -1
  183. package/dist/q2-tecton-elements/p-721d0aee.entry.js +0 -1
  184. package/dist/q2-tecton-elements/p-73643653.entry.js +0 -1
  185. package/dist/q2-tecton-elements/p-8d703466.entry.js +0 -1
  186. package/dist/q2-tecton-elements/p-aafb9537.entry.js +0 -1
  187. package/dist/q2-tecton-elements/p-b8420bfe.entry.js +0 -1
  188. package/dist/q2-tecton-elements/p-e4aa271e.entry.js +0 -1
@@ -25,9 +25,14 @@ export declare class Q2OptionList implements ComponentInterface {
25
25
  hasOptions: boolean;
26
26
  contentElement: HTMLElement;
27
27
  activeIndex: number;
28
+ pivotIndex: number;
28
29
  scheduledAfterRender: (() => void)[];
29
30
  searchString: string;
30
31
  searchStringTimer: number;
32
+ keyStore: {
33
+ queue: string[];
34
+ lastPressedAt: Date;
35
+ };
31
36
  hostElement: HTMLElement;
32
37
  componentWillLoad(): void;
33
38
  componentDidLoad(): void;
@@ -49,6 +54,7 @@ export declare class Q2OptionList implements ComponentInterface {
49
54
  selectOption(selectedOption: HTMLQ2OptionElement): void;
50
55
  adjustActiveOptionAndScroll(numToAdd: number): void;
51
56
  resetTimer(): void;
57
+ searchAndFocus: (keyValue: string, shouldSelect: boolean) => void;
52
58
  searchOptions(key: string, shouldSelect?: boolean): void;
53
59
  showSelectedUpdated(showSelected: boolean): void;
54
60
  selectedOptionsUpdated(): void;
@@ -25,6 +25,6 @@ export declare class Q2Pagination implements ComponentInterface {
25
25
  get currentRange(): string;
26
26
  get totalPages(): number;
27
27
  handlePageChange: (page: number) => void;
28
- checkSize(): void;
28
+ checkSize: () => void;
29
29
  render(): any;
30
30
  }
@@ -33,21 +33,25 @@ export declare class Q2Pill implements ComponentInterface {
33
33
  disconnectedCallback(): void;
34
34
  get buttonContent(): string;
35
35
  get truncatedButtonContent(): string;
36
+ syncValueProperties: () => void;
37
+ getOption: (value: string) => Promise<HTMLQ2OptionElement>;
36
38
  updateSelectedOptionElements: () => Promise<void>;
37
39
  determineHasOptions: () => void;
38
40
  executeActionSheet(event: MouseEvent | KeyboardEvent): Promise<void>;
39
41
  handleSelectionChanges(changeDetails: {
40
42
  value?: string;
41
43
  values?: IOptionValue[];
42
- }): void;
44
+ }): Promise<void>;
43
45
  clearSelectedOptions: () => void;
44
- selectedOptionsWatcher(): void;
46
+ valueChanged(newValue: any): Promise<void>;
47
+ selectedOptionsChanged(newValue: any): void;
45
48
  delegateFocus(event: FocusEvent): void;
46
49
  popoverStateHandler({ detail: { open } }: CustomEvent<{
47
50
  open: boolean;
48
51
  }>): void;
49
52
  handleClick: (event: MouseEvent) => Promise<void>;
50
53
  handleKeydown: (event: KeyboardEvent) => Promise<void>;
54
+ handleButtonFocusout: (event: FocusEvent) => Promise<void>;
51
55
  handleChange: (event: any) => void;
52
56
  handleWrapperClick: () => void;
53
57
  onClickElsewhere: (event: CustomEvent) => void;
@@ -5,9 +5,25 @@ export declare class Q2Radio implements ComponentInterface {
5
5
  value: string;
6
6
  disabled: boolean;
7
7
  checked: boolean;
8
+ /**
9
+ * Used by q2-radio-group to apply a name to all options in the group
10
+ * @private
11
+ */
8
12
  name: string;
13
+ /**
14
+ * Used by q2-radio-group to disable all options in the group
15
+ * @private
16
+ */
9
17
  groupDisabled: boolean;
18
+ /**
19
+ * Used by q2-radio-group to make all options in the group readonly
20
+ * @private
21
+ */
10
22
  groupReadonly: boolean;
23
+ /**
24
+ * Used by q2-radio-group to make the options display as tiles
25
+ * @private
26
+ */
11
27
  groupTileLayout: boolean;
12
28
  /** @deprecated */
13
29
  ariaLabel: string;
@@ -10,6 +10,7 @@ export declare class Q2Select implements ComponentInterface {
10
10
  disabled: boolean;
11
11
  readonly: boolean;
12
12
  invalid: boolean;
13
+ listLabel: string;
13
14
  errors: string[];
14
15
  multiple: boolean;
15
16
  minRows: number;
@@ -72,8 +73,8 @@ export declare class Q2Select implements ComponentInterface {
72
73
  value?: string;
73
74
  values?: IOptionValue[];
74
75
  }): void;
75
- showSelectedOptions: (event: MouseEvent) => void;
76
- showAllOptions: (event?: MouseEvent) => void;
76
+ showSelectedOptions: () => void;
77
+ showAllOptions: () => void;
77
78
  clearValue(): void;
78
79
  calculateMultiSelectSelectedDisplay(): string;
79
80
  calculateSingleSelectSelectedDisplay(): string;
@@ -1,6 +1,10 @@
1
1
  import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
2
2
  export declare class Q2Stepper implements ComponentInterface {
3
3
  currentStep: number;
4
+ /**
5
+ * Used to determine the number of steps in the stepper.
6
+ * @private
7
+ */
4
8
  stepCount: number;
5
9
  lastEnabledStep: number;
6
10
  hostElement: HTMLElement;
@@ -8,6 +8,10 @@ export interface IStepperPaneEvent {
8
8
  export declare class Q2StepperPane implements ComponentInterface {
9
9
  label: string;
10
10
  description: string;
11
+ /**
12
+ * Used by q2-stepper and q2-stepper-vertical to determine which pane is active
13
+ * @private
14
+ */
11
15
  isActive: boolean;
12
16
  showWithChildren: boolean;
13
17
  status: 'complete' | 'error' | 'locked';
@@ -3,13 +3,29 @@ import { Q2Badge } from '../q2-badge';
3
3
  export declare class Q2TabPane implements ComponentInterface {
4
4
  value: string;
5
5
  label: string;
6
+ /**
7
+ * Used by q2-tab-container to apply a name to all options in the group
8
+ * @private
9
+ */
6
10
  name: string;
11
+ /**
12
+ * Used by q2-tab-container to indicate the option is selected
13
+ * @private
14
+ */
7
15
  selected: boolean;
8
16
  badgeCount: number;
9
17
  badgeDescription: string;
10
18
  badgeTheme: Q2Badge['theme'];
11
19
  badgeStatus: Q2Badge['status'];
20
+ /**
21
+ * Used by q2-tab-container to indicate the pane's index
22
+ * @private
23
+ */
12
24
  index: number;
25
+ /**
26
+ * Used by q2-tab-container to apply a unique id to each tab pane
27
+ * @private
28
+ */
13
29
  guid: number;
14
30
  badge: EventEmitter<boolean>;
15
31
  badgeObserver(): void;
@@ -27,7 +27,7 @@ export declare class Q2Tag implements ComponentInterface {
27
27
  handleChange: (event: any) => void;
28
28
  handleClick: (event: MouseEvent) => Promise<void>;
29
29
  handleKeydown: (event: KeyboardEvent) => Promise<void>;
30
- handleButtonFocusout: (event: FocusEvent) => void;
30
+ handleButtonFocusout: (event: FocusEvent) => Promise<void>;
31
31
  handleWrapperClick: () => void;
32
32
  render(): any;
33
33
  }
@@ -48,6 +48,7 @@ export namespace Components {
48
48
  * @deprecated
49
49
  */
50
50
  "ariaLabel": string;
51
+ "ariaPressed": string;
51
52
  "ariaSelected": string;
52
53
  "badge": boolean;
53
54
  "block": boolean;
@@ -131,9 +132,21 @@ export namespace Components {
131
132
  "showNavigationArrows": boolean;
132
133
  }
133
134
  interface Q2CarouselPane {
135
+ /**
136
+ * Used by q2-carousel to determine the pane's index
137
+ * @private
138
+ */
134
139
  "index": number;
140
+ /**
141
+ * Used by q2-carousel to indicate which pane is currently active
142
+ * @private
143
+ */
135
144
  "isActivePane": boolean;
136
145
  "label": string;
146
+ /**
147
+ * Used by q2-carousel to indicate how many panes are in the carousel
148
+ * @private
149
+ */
137
150
  "siblingCount": number;
138
151
  }
139
152
  interface Q2ChartArea {
@@ -199,6 +212,10 @@ export namespace Components {
199
212
  "checked": boolean;
200
213
  "description": string;
201
214
  "disabled": boolean;
215
+ /**
216
+ * Used by q2-checkbox-group to disable all checkboxes in the group
217
+ * @private
218
+ */
202
219
  "groupDisabled": boolean;
203
220
  /**
204
221
  * @deprecated
@@ -350,13 +367,29 @@ export namespace Components {
350
367
  }
351
368
  interface Q2Option {
352
369
  "_multiSelectHidden": boolean;
370
+ /**
371
+ * Used by q2-option-list to indicate the option is active
372
+ * @private
373
+ */
353
374
  "active": boolean;
354
375
  "disabled": boolean;
376
+ /**
377
+ * Used by q2-radio-group to disable all options in the group
378
+ * @private
379
+ */
355
380
  "disabledGroup": boolean;
356
381
  "display": string;
357
382
  "hidden": boolean;
358
383
  "multiline": boolean;
384
+ /**
385
+ * Used by q2-option-list to set a role on the option
386
+ * @private
387
+ */
359
388
  "role": 'option' | 'menuitem';
389
+ /**
390
+ * Used by q2-option-list to indicate the option is selected
391
+ * @private
392
+ */
360
393
  "selected": boolean;
361
394
  "value": string;
362
395
  }
@@ -415,11 +448,27 @@ export namespace Components {
415
448
  "ariaLabel": string;
416
449
  "checked": boolean;
417
450
  "disabled": boolean;
451
+ /**
452
+ * Used by q2-radio-group to disable all options in the group
453
+ * @private
454
+ */
418
455
  "groupDisabled": boolean;
456
+ /**
457
+ * Used by q2-radio-group to make all options in the group readonly
458
+ * @private
459
+ */
419
460
  "groupReadonly": boolean;
461
+ /**
462
+ * Used by q2-radio-group to make the options display as tiles
463
+ * @private
464
+ */
420
465
  "groupTileLayout": boolean;
421
466
  "hideLabel": boolean;
422
467
  "label": string;
468
+ /**
469
+ * Used by q2-radio-group to apply a name to all options in the group
470
+ * @private
471
+ */
423
472
  "name": string;
424
473
  "value": string;
425
474
  }
@@ -455,6 +504,7 @@ export namespace Components {
455
504
  "hoist": boolean;
456
505
  "invalid": boolean;
457
506
  "label": string;
507
+ "listLabel": string;
458
508
  "minRows": number;
459
509
  "multilineOptions": boolean;
460
510
  "multiple": boolean;
@@ -469,10 +519,18 @@ export namespace Components {
469
519
  interface Q2Stepper {
470
520
  "currentStep": number;
471
521
  "lastEnabledStep": number;
522
+ /**
523
+ * Used to determine the number of steps in the stepper.
524
+ * @private
525
+ */
472
526
  "stepCount": number;
473
527
  }
474
528
  interface Q2StepperPane {
475
529
  "description": string;
530
+ /**
531
+ * Used by q2-stepper and q2-stepper-vertical to determine which pane is active
532
+ * @private
533
+ */
476
534
  "isActive": boolean;
477
535
  "label": string;
478
536
  "showWithChildren": boolean;
@@ -493,10 +551,26 @@ export namespace Components {
493
551
  "badgeDescription": string;
494
552
  "badgeStatus": Q2Badge['status'];
495
553
  "badgeTheme": Q2Badge['theme'];
554
+ /**
555
+ * Used by q2-tab-container to apply a unique id to each tab pane
556
+ * @private
557
+ */
496
558
  "guid": number;
559
+ /**
560
+ * Used by q2-tab-container to indicate the pane's index
561
+ * @private
562
+ */
497
563
  "index": number;
498
564
  "label": string;
565
+ /**
566
+ * Used by q2-tab-container to apply a name to all options in the group
567
+ * @private
568
+ */
499
569
  "name": string;
570
+ /**
571
+ * Used by q2-tab-container to indicate the option is selected
572
+ * @private
573
+ */
500
574
  "selected": boolean;
501
575
  "value": string;
502
576
  }
@@ -1007,6 +1081,7 @@ declare namespace LocalJSX {
1007
1081
  * @deprecated
1008
1082
  */
1009
1083
  "ariaLabel"?: string;
1084
+ "ariaPressed"?: string;
1010
1085
  "ariaSelected"?: string;
1011
1086
  "badge"?: boolean;
1012
1087
  "block"?: boolean;
@@ -1095,10 +1170,22 @@ declare namespace LocalJSX {
1095
1170
  "showNavigationArrows"?: boolean;
1096
1171
  }
1097
1172
  interface Q2CarouselPane {
1173
+ /**
1174
+ * Used by q2-carousel to determine the pane's index
1175
+ * @private
1176
+ */
1098
1177
  "index"?: number;
1178
+ /**
1179
+ * Used by q2-carousel to indicate which pane is currently active
1180
+ * @private
1181
+ */
1099
1182
  "isActivePane"?: boolean;
1100
1183
  "label"?: string;
1101
1184
  "onClickCarouselPane"?: (event: Q2CarouselPaneCustomEvent<any>) => void;
1185
+ /**
1186
+ * Used by q2-carousel to indicate how many panes are in the carousel
1187
+ * @private
1188
+ */
1102
1189
  "siblingCount"?: number;
1103
1190
  }
1104
1191
  interface Q2ChartArea {
@@ -1164,6 +1251,10 @@ declare namespace LocalJSX {
1164
1251
  "checked"?: boolean;
1165
1252
  "description"?: string;
1166
1253
  "disabled"?: boolean;
1254
+ /**
1255
+ * Used by q2-checkbox-group to disable all checkboxes in the group
1256
+ * @private
1257
+ */
1167
1258
  "groupDisabled"?: boolean;
1168
1259
  /**
1169
1260
  * @deprecated
@@ -1323,13 +1414,29 @@ declare namespace LocalJSX {
1323
1414
  }
1324
1415
  interface Q2Option {
1325
1416
  "_multiSelectHidden"?: boolean;
1417
+ /**
1418
+ * Used by q2-option-list to indicate the option is active
1419
+ * @private
1420
+ */
1326
1421
  "active"?: boolean;
1327
1422
  "disabled"?: boolean;
1423
+ /**
1424
+ * Used by q2-radio-group to disable all options in the group
1425
+ * @private
1426
+ */
1328
1427
  "disabledGroup"?: boolean;
1329
1428
  "display"?: string;
1330
1429
  "hidden"?: boolean;
1331
1430
  "multiline"?: boolean;
1431
+ /**
1432
+ * Used by q2-option-list to set a role on the option
1433
+ * @private
1434
+ */
1332
1435
  "role"?: 'option' | 'menuitem';
1436
+ /**
1437
+ * Used by q2-option-list to indicate the option is selected
1438
+ * @private
1439
+ */
1333
1440
  "selected"?: boolean;
1334
1441
  "value"?: string;
1335
1442
  }
@@ -1388,11 +1495,27 @@ declare namespace LocalJSX {
1388
1495
  "ariaLabel"?: string;
1389
1496
  "checked"?: boolean;
1390
1497
  "disabled"?: boolean;
1498
+ /**
1499
+ * Used by q2-radio-group to disable all options in the group
1500
+ * @private
1501
+ */
1391
1502
  "groupDisabled"?: boolean;
1503
+ /**
1504
+ * Used by q2-radio-group to make all options in the group readonly
1505
+ * @private
1506
+ */
1392
1507
  "groupReadonly"?: boolean;
1508
+ /**
1509
+ * Used by q2-radio-group to make the options display as tiles
1510
+ * @private
1511
+ */
1393
1512
  "groupTileLayout"?: boolean;
1394
1513
  "hideLabel"?: boolean;
1395
1514
  "label"?: string;
1515
+ /**
1516
+ * Used by q2-radio-group to apply a name to all options in the group
1517
+ * @private
1518
+ */
1396
1519
  "name"?: string;
1397
1520
  "onChange"?: (event: Q2RadioCustomEvent<any>) => void;
1398
1521
  "value"?: string;
@@ -1431,6 +1554,7 @@ declare namespace LocalJSX {
1431
1554
  "hoist"?: boolean;
1432
1555
  "invalid"?: boolean;
1433
1556
  "label"?: string;
1557
+ "listLabel"?: string;
1434
1558
  "minRows"?: number;
1435
1559
  "multilineOptions"?: boolean;
1436
1560
  "multiple"?: boolean;
@@ -1448,10 +1572,18 @@ declare namespace LocalJSX {
1448
1572
  "currentStep"?: number;
1449
1573
  "lastEnabledStep"?: number;
1450
1574
  "onChange"?: (event: Q2StepperCustomEvent<any>) => void;
1575
+ /**
1576
+ * Used to determine the number of steps in the stepper.
1577
+ * @private
1578
+ */
1451
1579
  "stepCount"?: number;
1452
1580
  }
1453
1581
  interface Q2StepperPane {
1454
1582
  "description"?: string;
1583
+ /**
1584
+ * Used by q2-stepper and q2-stepper-vertical to determine which pane is active
1585
+ * @private
1586
+ */
1455
1587
  "isActive"?: boolean;
1456
1588
  "label"?: string;
1457
1589
  "onActiveChange"?: (event: Q2StepperPaneCustomEvent<IStepperPaneEvent>) => void;
@@ -1477,11 +1609,27 @@ declare namespace LocalJSX {
1477
1609
  "badgeDescription"?: string;
1478
1610
  "badgeStatus"?: Q2Badge['status'];
1479
1611
  "badgeTheme"?: Q2Badge['theme'];
1612
+ /**
1613
+ * Used by q2-tab-container to apply a unique id to each tab pane
1614
+ * @private
1615
+ */
1480
1616
  "guid"?: number;
1617
+ /**
1618
+ * Used by q2-tab-container to indicate the pane's index
1619
+ * @private
1620
+ */
1481
1621
  "index"?: number;
1482
1622
  "label"?: string;
1623
+ /**
1624
+ * Used by q2-tab-container to apply a name to all options in the group
1625
+ * @private
1626
+ */
1483
1627
  "name"?: string;
1484
1628
  "onBadge"?: (event: Q2TabPaneCustomEvent<boolean>) => void;
1629
+ /**
1630
+ * Used by q2-tab-container to indicate the option is selected
1631
+ * @private
1632
+ */
1485
1633
  "selected"?: boolean;
1486
1634
  "value"?: string;
1487
1635
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "q2-tecton-elements",
3
- "version": "1.26.0",
3
+ "version": "1.27.0",
4
4
  "description": "Q2 Tecton Custom Elements",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -50,9 +50,9 @@
50
50
  "dependencies": {
51
51
  "@stencil/core": "2.19.2",
52
52
  "puppeteer": "^10.4.0",
53
- "q2-tecton-common": "^1.26.0",
53
+ "q2-tecton-common": "^1.27.0",
54
54
  "smoothscroll-polyfill": "^0.4.4",
55
55
  "swiper": "8.4.4"
56
56
  },
57
- "gitHead": "8b96b69cce0cd2fa1867728582159f8b0350c878"
57
+ "gitHead": "615181d24c9a59e1711856815aca09eb92d47bed"
58
58
  }
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as o,g as r}from"./p-926a3e80.js";import{c as i,h as a,o as c,l as s}from"./p-839ef27d.js";const n=class{constructor(o){t(this,o),this.change=e(this,"change",7),this._id=`radio-${i()}`,this.isLoaded=!1,this.inputChange=t=>{if(t.stopPropagation(),this.groupReadonly)return t.preventDefault(),!1;t.target instanceof HTMLInputElement&&(this.checked=t.target.checked)},this.label=void 0,this.hideLabel=void 0,this.value=void 0,this.disabled=!1,this.checked=!1,this.name=void 0,this.groupDisabled=!1,this.groupReadonly=!1,this.groupTileLayout=!1,this.ariaLabel=void 0}componentWillLoad(){a(this)}componentDidLoad(){this.isLoaded=!0,c(this.hostElement),this.hostElement.click=()=>this.inputField.click()}ariaLabelObserver(){a(this)}checkedObserver(){this.isLoaded&&this.checked&&this.change.emit({value:this.value})}onHostClick(t){this.disabled&&t.stopImmediatePropagation()}delegateFocus(t){t.target===this.hostElement&&this.inputField.focus()}render(){return o("div",{class:this.groupTileLayout?"radio-tile":"radio-container"},o("input",{ref:t=>this.inputField=t,class:"sr",id:this._id,type:"radio",name:this.name,value:this.value,disabled:this.disabled||this.groupDisabled,checked:this.checked,"aria-label":this.label&&this.hideLabel?s(this.label):void 0,onChange:this.inputChange,"test-id":"q2RadioInnerRadioBox"}),o("label",{htmlFor:this._id,"test-id":"radioButton"},!this.groupTileLayout&&o("svg",{viewBox:"0 0 18 18"},o("circle",{stroke:"none",fill:"none",cx:"9",cy:"9",r:"8"}),o("circle",{stroke:"none",fill:"none",cx:"9",cy:"9",r:"4"})),!this.hideLabel&&o("div",{class:"label-content"},this.label&&s(this.label)||"",o("slot",null))))}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"],checked:["checkedObserver"]}}};n.style='*{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 #33b4ff #06C)}: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}.radio-container{margin-top:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));margin-right:var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));margin-bottom:var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px))}.radio-container label[for]{font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){background-color:var(--tct-radio-checked-bg, transparent);stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';export{n as q2_radio}
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as i,g as r}from"./p-926a3e80.js";import{c as o,l as s}from"./p-839ef27d.js";const a=class{constructor(i){t(this,i),this.change=e(this,"change",7),this._id=`checkbox-group-${o()}`,this.onMutationObserved=()=>{this.valueUpdated(),this.disabledUpdated()},this.onInnerCheckboxChange=t=>{t.stopImmediatePropagation();const e={};this.checkboxElements.forEach((t=>{e[t.value]=!!t.checked})),this.change.emit(e)},this.label=void 0,this.value=void 0,this.disabled=!1,this.readonly=!1,this.optional=!1,this.hasError=!1}get checkboxElements(){return Array.from(this.hostElement.querySelectorAll("q2-checkbox"))}get protectedValue(){return this.value||{}}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:!0}),this.mutationObserver=t,this.onMutationObserved()}disconnectedCallback(){this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null)}valueUpdated(){this.readonly||this.checkboxElements.forEach((t=>{this.protectedValue.hasOwnProperty(t.value)&&(t.checked=this.value[t.value])}))}disabledUpdated(){this.checkboxElements.forEach((t=>{t.groupDisabled=this.disabled}))}onHostElementChange(t){t.target!==this.hostElement||this.hostElement.onchange||(this.value=t.detail)}render(){return i("div",null,this.label||this.optional?i("div",{class:"group-legend"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",i("fieldset",{class:"q2-checkbox-fieldset "+(this.hasError?"has-error":""),onChange:this.onInnerCheckboxChange,"aria-required":`${!this.optional}`},this.label||this.optional?i("legend",{class:"sr-only"},this.label&&s(this.label),this.optional?i("span",{class:"optional-tag"},s("tecton.element.input.optional")):""):"",this.hasError?i("div",{class:"error-icon-container "+(this.label||this.optional?"":"no-label")},i("q2-icon",{class:"h(4) w(4) mrg-b(2)",type:"error"})):"",this.inputDom()))}inputDom(){return i("slot",null)}get hostElement(){return r(this)}static get watchers(){return{value:["valueUpdated"],disabled:["disabledUpdated"]}}};a.style="*{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 #33b4ff #06C)}: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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";export{a as q2_checkbox_group}
@@ -1 +0,0 @@
1
- import{r as t,h as s,g as a}from"./p-926a3e80.js";import{k as e,o,n as r,a as i}from"./p-839ef27d.js";const n=class{constructor(s){t(this,s),this.type="info",this.appearance="standard",this.description=!1,this.presentToggle=void 0}get isFirefox(){return e()}componentDidLoad(){o(this.hostElement)}async present(){const{isFirefox:t}=this;this.presentToggle=!this.presentToggle,t&&r((()=>{this.presentToggle=!1}))}delegateFocus(t){i(t,this.hostElement)&&this.hostElement.shadowRoot.querySelector(".message").focus()}render(){const{isFirefox:t}=this,a=t&&this.presentToggle,e=!t&&this.presentToggle,{description:o}=this;return s("div",{tabindex:"-1",class:"message",role:o?void 0:"alert","aria-live":o?void 0:"assertive","aria-atomic":o?void 0:"true","aria-relevant":o?void 0:"all"},"standard"===this.appearance?function(t){const a={success:"success",warning:"warning",danger:"error",error:"error",info:"info"};return s("q2-icon",{type:a[t]||a.info,class:"message-icon"})}(this.type):"",e&&s("div",{class:"sr"}),s("div",{class:"message-content","aria-hidden":a?"true":void 0},s("slot",null)))}get hostElement(){return a(this)}};n.style="*{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 #33b4ff #06C)}: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-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){padding-left:var(--tct-scale-l3, var(--app-scale-3x, 15px))}:host(:not([appearance])),:host([appearance=standard]){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}: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){margin:var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0}: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, #f0b400))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}";export{n as q2_message}
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as i,g as s}from"./p-926a3e80.js";import{h as l,o,l as a,d as n,a as r,e as h}from"./p-839ef27d.js";import{s as c,a as d}from"./p-a1926e65.js";const p=class{constructor(i){var s;t(this,i),this.change=e(this,"change",7),this.input=e(this,"input",7),this.scheduledAfterRender=[],this.showSelectedOptions=t=>{t.stopPropagation(),this.showSelected=!0},this.showAllOptions=t=>{null==t||t.stopPropagation(),this.showSelected=!1},this.onMutationObserved=()=>{const t=this.hostElement.querySelector(".custom-display-content"),e=this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]'),i=e?e.assignedNodes().length>0:t.children.length>0;this.hasCustomDisplay!==i&&(this.hasCustomDisplay=i)},this.onOptionListChange=t=>{t.stopPropagation();const{values:e}=t.detail;0===e.length&&this.showAllOptions(),this.handleSelectionChanges(t.detail)},this.popoverStateChanged=({detail:{open:t}})=>{this.open!==t&&(this.open=t,t&&!this.searchText||(this.optionList.setActiveElement(null),this.inputField.focus()))},this.inputKeydownHandler=t=>{if(!this.readonly&&!this.disabled)return c(this,t)?this.executeActionSheet(t):void(this.searchable&&!["ArrowDown","ArrowUp","PageDown","PageUp","Home","End","Escape","Tab"].includes(t.key)||(this.shouldClearSearchText(t)&&this.clearSearchText(),this.optionList.handleExternalKeydown(t)))},this.visibilityToggleKeyDown=t=>{const e=t.key;["ArrowDown","ArrowUp"].includes(e)?this.optionList.handleExternalKeydown(t):["Enter"," "].includes(e)&&t.target.dispatchEvent(new MouseEvent("click"))},this.inputClickHandler=async t=>{if(t.stopPropagation(),c(this))return this.executeActionSheet(t);this.toggleDropdown(),this.focusInput()},this.inputInputHandler=t=>{t.stopPropagation();const e=t.detail.value;!!this.value&&this.inputField.value!==e&&this.clearValue(),this.open||this.openDropdownWithoutActiveElement(),this.prioritizeSearch=!0,this.searchText=e,this.input.emit({query:e})},this.inputFocusHandler=()=>{this.inputFocused=!0},this.inputBlurHandler=()=>{this.inputFocused=!1},this.inputChangeHandler=t=>{t.stopPropagation()},this.clickedElsewhere=t=>{"click-elsewhere"===t.target.localName&&(t.stopPropagation(),this.open&&this.closeDropdown())},this.onCustomDisplayClick=t=>{t.stopPropagation(),this.focusInput(),this.toggleDropdown()},this.label=void 0,this.hideLabel=void 0,this.value=void 0,this.selectedOptions=[],this.disabled=!1,this.readonly=!1,this.invalid=void 0,this.errors=void 0,this.multiple=!1,this.minRows=3,this.popDirection=void 0,this.searchable=!1,this.multilineOptions=!1,this.optional=!1,this.placeholder=void 0,this.hoist=!!(null===(s=window.Tecton)||void 0===s?void 0:s.useActionSheets),this.ariaLabel=void 0,this.open=!1,this.showSelected=!1,this.searchText="",this.hasCustomDisplay=!1,this.inputFocused=!1,this.statusMessage=void 0,this.prioritizeSearch=!1,this.structuredSelectedOptions=[]}componentWillLoad(){l(this),this.buildStructuredSelectedOptions(),this.handleMultilineOptionsUpdate(this.multilineOptions,!1)}componentDidLoad(){const t=new MutationObserver(this.onMutationObserved);t.observe(this.hostElement,{childList:!0,subtree:!0}),this.mutationObserver=t,this.onMutationObserved(),o(this.hostElement),setTimeout((()=>this.checkSelectedDisplay()),0)}componentDidRender(){setTimeout((()=>{this.scheduledAfterRender.forEach((t=>t())),this.scheduledAfterRender=[]}),25)}disconnectedCallback(){var t;null===(t=this.mutationObserver)||void 0===t||t.disconnect(),this.mutationObserver=null}get innerInputField(){var t,e;return null===(e=null===(t=this.inputField)||void 0===t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector(".input-field")}get badgeValue(){var t,e;if(!this.multiple)return null;const i=null!==(e=null===(t=this.selectedOptions)||void 0===t?void 0:t.length)&&void 0!==e?e:0;return this.open&&this.searchable?i?`${i}`:null:i>1?"+"+(i-1):null}get popoverMinHeight(){const{minRows:t}=this,e=this.hostElement.querySelector("q2-option:not([hidden])");let i=e&&window.getComputedStyle(e).minHeight;return i&&"0px"!==i||(i="44px"),t*parseInt(i)}get selectedDisplay(){return this.prioritizeSearch||this.searchText?this.searchText:this.hasCustomDisplay?"":this.multiple?this.calculateMultiSelectSelectedDisplay():this.calculateSingleSelectSelectedDisplay()}get selectedDisplaySlot(){return this.hostElement.querySelector('[slot="_selected-display"]')}get firstSelectedValue(){var t;return this.multiple?null===(t=this.selectedOptions)||void 0===t?void 0:t[0]:this.value}get firstSelectedOptionElement(){const{firstSelectedValue:t}=this;return t?this.optionElements.find((({value:e})=>e===t)):null}get optionElements(){return Array.from(this.hostElement.querySelectorAll("q2-option"))}get wrapperClasses(){const{errors:t}=this,e=["q2-select-container"];return Array.isArray(t)&&t.length>0&&e.push("has-error"),this.inputFocused&&e.push("is-focused"),this.searchable&&e.push("is-searchable"),e.join(" ")}buildStructuredSelectedOptions(){const{multiple:t,selectedOptions:e,value:i}=this;this.structuredSelectedOptions=t?(null==e?void 0:e.length)?e.map((t=>"string"==typeof t?{value:t}:t)):[]:i?[{value:i}]:[]}ariaLabelObserver(){l(this)}valueUpdated(){this.multiple||this.clearSearchText()}handleMultilineOptionsUpdate(t,e){t!==e&&this.optionElements.forEach((e=>e.multiline=t))}openChanged(t){this.scheduledAfterRender.push((()=>{const{multiple:e,multiSelectHeader:i,popoverElement:s}=this,l=t&&e&&(null==i?void 0:i.offsetHeight)||0;l?s.style.setProperty("--comp-multi-select-header-height",`${l}px`):s.style.removeProperty("--comp-multi-select-header-height")}))}keydownHandler(t){this.inputKeydownHandler(t)}onHostElementChange(t){this.readonly||this.disabled||t.target!==this.hostElement||this.hostElement.onchange||(this.multiple?(this.value=null,this.selectedOptions=t.detail.selectedOptions):(this.value=t.detail.value,this.selectedOptions=[]))}onHostElementInput(t){if(!this.searchable||t.target!==this.hostElement||this.hostElement.oninput)return;const e=this.optionElements,i=this.searchText.trim().toLocaleLowerCase();let s=0;e.forEach((t=>{var e;if(""===i)return void(t.hidden=!1);const l="Q2-CARD"===(null===(e=t.firstElementChild)||void 0===e?void 0:e.tagName)?t.firstElementChild.title:null,{display:o="",innerText:a=""}=t,n=[o,l,a].some((t=>{var e;return null!==(e=null==t?void 0:t.toLocaleLowerCase().includes(i))&&void 0!==e&&e}));t.hidden=!n,n&&s++})),this.setStatusMessage(a(i?"tecton.element.select.searchable.results":"tecton.element.select.allOptions",[i?s:e.length]))}delegateFocus(t){const e=n(t,this.hostElement);(this.prioritizeSearch=e&&this.searchable)?this.clearSelectedDisplay():r(t,this.hostElement)&&this.inputField.shadowRoot.querySelector(".input-field").focus()}handleFocusout(t){const e=h(t,this.hostElement);e&&this.closeDropdown(),this.prioritizeSearch=!e&&this.searchable}async executeActionSheet(t){const e=await d(this,t);this.handleSelectionChanges(e)}handleSelectionChanges(t){const{value:e="",values:i=[]}=t,s=i.map((t=>t.value)),{multiple:l}=this;this.hostElement.onchange||(this.selectedOptions=s),this.change.emit({value:l?void 0:e,selectedOptions:l?s:void 0})}clearValue(){const{multiple:t}=this;this.value="",this.selectedOptions=[],this.change.emit({value:t?void 0:"",selectedOptions:t?[]:void 0})}calculateMultiSelectSelectedDisplay(){var t;const{firstSelectedOptionElement:e,firstSelectedValue:i,multilineOptions:s}=this;return i?(null==e?void 0:e.display)?a(e.display):s&&this.searchable?this.searchText:s?"":null!==(t=null==e?void 0:e.value)&&void 0!==t?t:i:""}calculateSingleSelectSelectedDisplay(){const{firstSelectedOptionElement:t}=this;return(null==t?void 0:t.display)&&a(t.display)||this.value||""}openDropdownWithoutActiveElement(){this.readonly||this.disabled||(this.optionList.setActiveElement(null),this.open=!0)}closeDropdown(){this.open=!1,this.clearSearchText()}clearSearchText(){this.searchText&&(this.searchText="",this.input.emit({query:""}))}toggleDropdown(){this.readonly||this.disabled||(this.open&&!this.searchText?this.closeDropdown():this.openDropdownWithoutActiveElement())}focusInput(){var t;null===(t=this.inputField)||void 0===t||t.dispatchEvent(new FocusEvent("focus"))}setStatusMessage(t){clearTimeout(this.statusMessageTimer),this.statusMessage="",this.statusMessageTimer=setTimeout((()=>{this.statusMessage=t}),1e3)}clearSelectedDisplay(){var t;null===(t=this.selectedDisplaySlot)||void 0===t||t.remove()}checkSelectedDisplay(){let t=this.selectedDisplaySlot;const{value:e,multiple:i,selectedOptions:s,multilineOptions:l,firstSelectedOptionElement:o,prioritizeSearch:a}=this;if(a||!l||!e&&i&&!(null==s?void 0:s.length))return this.clearSelectedDisplay();if(!o||o.display)return this.clearSelectedDisplay();const n=o.firstElementChild.cloneNode(!0);return n.querySelectorAll("[hide-on-select]").forEach((t=>t.remove())),t?(t.style.setProperty("--comp-selected-display-height",0===t.clientHeight?"auto":`${t.clientHeight}px`),t.firstElementChild.outerHTML!==n.outerHTML&&t.replaceChild(n,t.firstElementChild)):(t=document.createElement("div"),t.slot="_selected-display",t.appendChild(n),this.hostElement.appendChild(t)),t}checkSelectedDisplayHeight(){const{selectedDisplaySlot:t}=this;t&&t.style.setProperty("--comp-selected-display-height","44px")}shouldClearSearchText(t){return this.searchable&&!!this.searchText&&"Escape"===t.key}renderCustomDisplay(){if(this.checkSelectedDisplay())return this.checkSelectedDisplayHeight(),i("slot",{name:"_selected-display",slot:"custom-display"})}render(){const t=!this.searchable;return i("click-elsewhere",{class:this.wrapperClasses,onChange:this.clickedElsewhere},i("div",{"aria-live":"polite","aria-atomic":"true",role:"status",class:"sr"},this.statusMessage),i("q2-input",{ref:t=>this.inputField=t,class:"q2-select-input",label:this.label&&a(this.label)||"",value:this.selectedDisplay,errors:Array.isArray(this.errors)&&this.errors.length>0&&this.errors.map((t=>a(t)))||this.invalid&&["tecton.element.select.invalid"]||[],disabled:this.disabled,optional:this.optional,readonly:this.readonly,placeholder:this.placeholder||void 0,hideLabel:this.hideLabel,ariaExpanded:`${!!this.open}`,ariaOwns:"option-list",ariaHaspopup:"listbox",role:this.searchable?"combobox":null,pseudo:t,"test-id":"toggleDropdown","hide-messages":!0,iconRight:"chevron-down",onClick:this.inputClickHandler,onInput:this.inputInputHandler,onKeyDown:this.inputKeydownHandler,onFocus:this.inputFocusHandler,onBlur:this.inputBlurHandler,onChange:this.inputChangeHandler,badgeValue:this.badgeValue,badgeTheme:this.inputFocused?"primary":void 0},this.renderCustomDisplay()),i("div",{class:"custom-display-content",hidden:!this.hasCustomDisplay||!!this.searchText,onClick:this.onCustomDisplayClick},i("slot",{name:"q2-select-display"})),this.optionsDropdown())}optionsDropdown(){return i("q2-popover",{ref:t=>this.popoverElement=t,controlElement:this.innerInputField,open:this.open,minHeight:this.popoverMinHeight,direction:this.popDirection,onPopoverStateChanged:this.popoverStateChanged,block:!0},this.multiple?this.visibilityToggle():"",i("q2-option-list",{ref:t=>this.optionList=t,id:"option-list","show-selected":this.showSelected,multiple:this.multiple,selectedOptions:this.structuredSelectedOptions,onChange:this.onOptionListChange},i("slot",null)))}visibilityToggle(){var t,e;const s=null!==(e=null===(t=this.selectedOptions)||void 0===t?void 0:t.length)&&void 0!==e?e:0,{showSelected:l}=this;return i("div",{class:"multi-select-header",ref:t=>this.multiSelectHeader=t},i("span",null,a("tecton.element.select.multiHeader.showing")),i("q2-btn",{class:l?"":"selected",badge:!0,"aria-selected":!l||void 0,"test-id":"allOptionsButton",onClick:this.showAllOptions,onKeyDown:this.visibilityToggleKeyDown,label:a("tecton.element.select.multiHeader.allAriaLabel"),"hide-label":!0},a("tecton.element.select.multiHeader.all")),i("q2-btn",{class:l?"selected":"","aria-selected":l||void 0,disabled:0===s,badge:!0,"test-id":"selectedOptionsButton",onClick:this.showSelectedOptions,onKeyDown:this.visibilityToggleKeyDown,label:a("tecton.element.select.multiHeader.selectedAriaLabel",[s]),"hide-label":!0},a("tecton.element.select.multiHeader.selected",[s])))}get hostElement(){return s(this)}static get watchers(){return{value:["buildStructuredSelectedOptions","valueUpdated"],selectedOptions:["buildStructuredSelectedOptions"],ariaLabel:["ariaLabelObserver"],multilineOptions:["handleMultilineOptionsUpdate"],open:["openChanged"]}}};p.style="*{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 #33b4ff #06C)}: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:inline-grid;grid-template-columns:repeat(3, auto);gap:var(--app-scale-2x, 10px);align-items:center}";export{p as q2_select}
@@ -1 +0,0 @@
1
- import{r as t,h as o,g as r}from"./p-926a3e80.js";import{h as a,p as e,o as n,a as i,l as s}from"./p-839ef27d.js";import{s as l}from"./p-92e1faf8.js";const c=class{constructor(o){t(this,o),this.handleSlotChange=()=>{this.handleIcons()},this.ariaExpanded=void 0,this.ariaHasPopup=void 0,this.ariaControls=void 0,this.ariaSelected=void 0,this.label=void 0,this.hideLabel=void 0,this.tabIndex=void 0,this.intent=void 0,this.disabled=void 0,this.type=void 0,this.loading=void 0,this.badge=void 0,this.active=void 0,this.block=void 0,this.color=void 0,this.fab=void 0,this.ariaLabel=void 0,this.iconPosition=void 0}componentWillLoad(){this.handleIcons(),a(this),e(this)}componentDidLoad(){n(this.hostElement)}disable(t){this.disabled&&t.stopImmediatePropagation()}delegateFocus(t){i(t,this.hostElement)&&this.hostElement.shadowRoot.querySelector("button").focus()}ariaLabelObserver(){a(this)}handleIcons(){const t=Array.from(this.hostElement.querySelectorAll(":scope > q2-icon")).reduce(((t,o)=>(t?o.remove():t=o,t)),null),o=!!t,r=!!this.hostElement.querySelector("q2-loc"),a=!!this.hostElement.textContent.trim(),e=(r||a)&&o&&this.hostElement.firstElementChild===t,n=(r||a)&&o&&this.hostElement.lastElementChild===t;let i;e||n||!o?e?i="left":n&&(i="right"):i="only",this.iconPosition=i}render(){const{ariaExpanded:t,ariaHasPopup:r,ariaSelected:a,disabled:e,type:n,tabindex:i}=this.buttonAttributes,{iconPosition:l,loading:c,badge:b,label:d,hideLabel:h}=this,v=l||c,p=!l||b;return o("button",{"aria-expanded":t,"aria-haspopup":r,"aria-label":h&&s(d),"aria-selected":a,disabled:e,type:n,tabindex:i,"test-id":"q2BtnInnerButton",class:l?`icon-${l}`:""},o("div",null,v&&o("q2-loading",{hidden:!c,modifiers:p?"inline":void 0}),!h&&d?s(d):o("slot",{onSlotchange:this.handleSlotChange})))}get buttonAttributes(){var t,o,r;return{ariaExpanded:void 0!==this.ariaExpanded?`${"true"===(null===(t=this.ariaExpanded)||void 0===t?void 0:t.toString())}`:void 0,ariaHasPopup:void 0!==this.ariaHasPopup?`${"true"===(null===(o=this.ariaHasPopup)||void 0===o?void 0:o.toString())}`:void 0,ariaLabel:this.label&&this.hideLabel?s(this.label):void 0,ariaSelected:void 0!==this.ariaSelected?`${"true"===(null===(r=this.ariaSelected)||void 0===r?void 0:r.toString())}`:void 0,disabled:this.disabled||!1,type:this.type||"button",tabindex:this.tabIndex||void 0}}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};c.style='*{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 #33b4ff #06C)}: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}:host([hidden]){display:none}:host([block]){display:block;width:100%}:host{--comp-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));--comp-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-btn-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);--comp-btn-neutral-fallback-hover-box-shadow:0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);--comp-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:0;background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent));border-width:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0));border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent));border-width:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg)));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, var(--t-btn-neutral-bg, transparent)));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent));border-width:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled,:host([intent=neutral]) button:focus:active:enabled{box-shadow:var(--const-double-focus-ring), var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg)));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, 0))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}';const b=class{constructor(r){t(this,r),this.halfCircleSpinner=()=>o("div",{class:"q2-loading-animation half-circle-spinner","aria-label":this.localizedLabel},o("div",{class:"circle circle-1"}),o("div",{class:"circle circle-2"})),this.spinner=()=>this.halfCircleSpinner(),this.skeletonLoader=()=>o("div",{class:"q2-loading-skeleton","aria-label":this.localizedLabel},"custom"===this.shape?o("slot",null):this.skeletonShape,o("div",{class:"q2-loading-skeleton-shimmer"})),this.type=void 0,this.shape=void 0,this.modifiers=void 0,this.counts=void 0,this.label=void 0,this.inline=void 0,this.ariaLabel=void 0}get loader(){const t={default:this.spinner,spinner:this.spinner,skeleton:this.skeletonLoader};return t[this.type]||t.default}get modifiersSet(){if("skeleton"===this.type&&this.modifiers)return new Set(this.modifiers.split("-"))}get countsArray(){if("skeleton"===this.type&&this.counts)return this.counts.split("x").map(Number)}get skeletonShape(){var t,o;return null!==(o=null===(t=l[this.shape])||void 0===t?void 0:t.call(l,this.countsArray,this.modifiersSet))&&void 0!==o?o:""}get spinnerShape(){const t={default:this.halfCircleSpinner,"half-circle":this.halfCircleSpinner};return t[this.type]||t.default}get localizedLabel(){return s(this.label||"tecton.element.loading.ariaLabel")}componentWillLoad(){a(this)}ariaLabelObserver(){a(this)}render(){return this.loader()}get hostElement(){return r(this)}static get watchers(){return{ariaLabel:["ariaLabelObserver"]}}};b.style="*{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 #33b4ff #06C)}: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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background-color:var(--tct-loading-skeleton-element-bg, var(--tct-gray-l3, var(--t-gray-14, #f2f2f2)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";export{c as q2_btn,b as q2_loading}