@sapudex/web-components 2.22.0 → 2.24.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 (226) hide show
  1. package/cypress/specs/CountrySelector.cy.tsx +158 -144
  2. package/cypress/specs/EventRibbon.cy.tsx +3 -1
  3. package/cypress/specs/SelectBox.cy.tsx +173 -206
  4. package/cypress/specs/Tag.cy.tsx +1 -1
  5. package/cypress/specs/TextField.cy.tsx +15 -0
  6. package/cypress/specs/Textarea.cy.tsx +15 -33
  7. package/dist/Checkbox.js +4 -0
  8. package/dist/Checkbox.js.map +1 -1
  9. package/dist/CountrySelector.d.ts +25 -142
  10. package/dist/CountrySelector.js +91 -268
  11. package/dist/CountrySelector.js.map +1 -1
  12. package/dist/FilterMenu.d.ts +14 -2
  13. package/dist/FilterMenu.js +11 -1
  14. package/dist/FilterMenu.js.map +1 -1
  15. package/dist/Footer.js +2 -2
  16. package/dist/Footer.js.map +1 -1
  17. package/dist/FooterTemplate.js +1 -1
  18. package/dist/FooterTemplate.js.map +1 -1
  19. package/dist/List.js +2 -3
  20. package/dist/List.js.map +1 -1
  21. package/dist/ListGroupHeaderBase.d.ts +1 -0
  22. package/dist/ListGroupHeaderBase.js +3 -0
  23. package/dist/ListGroupHeaderBase.js.map +1 -1
  24. package/dist/ListItemBase.d.ts +12 -0
  25. package/dist/ListItemBase.js +17 -2
  26. package/dist/ListItemBase.js.map +1 -1
  27. package/dist/MediaPlayer.js +4 -0
  28. package/dist/MediaPlayer.js.map +1 -1
  29. package/dist/MediaPlayerTemplate.js +4 -4
  30. package/dist/MediaPlayerTemplate.js.map +1 -1
  31. package/dist/SearchableListBase.d.ts +23 -16
  32. package/dist/SearchableListBase.js +48 -72
  33. package/dist/SearchableListBase.js.map +1 -1
  34. package/dist/SelectBase.d.ts +193 -0
  35. package/dist/SelectBase.js +428 -0
  36. package/dist/SelectBase.js.map +1 -0
  37. package/dist/SelectBox.d.ts +30 -152
  38. package/dist/SelectBox.js +139 -348
  39. package/dist/SelectBox.js.map +1 -1
  40. package/dist/TagGroup.d.ts +23 -5
  41. package/dist/TagGroup.js +37 -16
  42. package/dist/TagGroup.js.map +1 -1
  43. package/dist/TagTemplate.js +4 -2
  44. package/dist/TagTemplate.js.map +1 -1
  45. package/dist/TextArea.d.ts +1 -1
  46. package/dist/TextArea.js +5 -5
  47. package/dist/TextArea.js.map +1 -1
  48. package/dist/TextAreaTemplate.d.ts +2 -0
  49. package/dist/TextAreaTemplate.js +13 -0
  50. package/dist/TextAreaTemplate.js.map +1 -0
  51. package/dist/TextField.d.ts +29 -4
  52. package/dist/TextField.js +32 -16
  53. package/dist/TextField.js.map +1 -1
  54. package/dist/TextFieldTemplate.d.ts +2 -0
  55. package/dist/TextFieldTemplate.js +14 -0
  56. package/dist/TextFieldTemplate.js.map +1 -0
  57. package/dist/assets/{InputSuggestions-By00xQan.js → InputSuggestions-63QG0i9j.js} +1 -1
  58. package/dist/assets/{ListItemStandardExpandableTextTemplate-BGtoxRbA.js → ListItemStandardExpandableTextTemplate-B1CpqSCb.js} +1 -1
  59. package/dist/assets/{bundle.esm-9yDdQqR5.js → bundle.esm-lUYJDofa.js} +218 -217
  60. package/dist/assets/fi-BGPAljj_.js +1 -0
  61. package/dist/assets/gl-DqaooM6m.js +1 -0
  62. package/dist/assets/{video.es-DIP_dh4I.js → video.es-BDeHzm02.js} +32 -32
  63. package/dist/css/themes/Checkbox.css +1 -1
  64. package/dist/css/themes/CountrySelector.css +1 -1
  65. package/dist/css/themes/EventRibbon.css +1 -1
  66. package/dist/css/themes/Footer.css +1 -1
  67. package/dist/css/themes/ImageGridTickerItem.css +1 -1
  68. package/dist/css/themes/InputGroup.css +1 -1
  69. package/dist/css/themes/Link.css +1 -1
  70. package/dist/css/themes/ListItem.css +1 -1
  71. package/dist/css/themes/MastheadItem.css +1 -1
  72. package/dist/css/themes/MastheadMobileMenu.css +1 -1
  73. package/dist/css/themes/RadioButton.css +1 -1
  74. package/dist/css/themes/RatingIndicator.css +1 -1
  75. package/dist/css/themes/Search.css +1 -1
  76. package/dist/css/themes/SelectBase.css +1 -0
  77. package/dist/css/themes/SelectBox.css +1 -1
  78. package/dist/css/themes/Slider.css +1 -1
  79. package/dist/css/themes/StatusMessage.css +1 -1
  80. package/dist/css/themes/TagGroup.css +1 -1
  81. package/dist/css/themes/TextField.css +1 -1
  82. package/dist/custom-elements-internal.json +1088 -1284
  83. package/dist/custom-elements.json +284 -934
  84. package/dist/generated/templates/CountrySelectorTemplate.lit.js +3 -3
  85. package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
  86. package/dist/generated/templates/ListItemTemplate.lit.js +1 -1
  87. package/dist/generated/templates/ListItemTemplate.lit.js.map +1 -1
  88. package/dist/generated/templates/SelectBoxTemplate.lit.js +10 -9
  89. package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
  90. package/dist/generated/themes/Checkbox.css.d.ts +1 -1
  91. package/dist/generated/themes/Checkbox.css.js +1 -1
  92. package/dist/generated/themes/Checkbox.css.js.map +1 -1
  93. package/dist/generated/themes/CountrySelector.css.d.ts +1 -1
  94. package/dist/generated/themes/CountrySelector.css.js +1 -1
  95. package/dist/generated/themes/CountrySelector.css.js.map +1 -1
  96. package/dist/generated/themes/EventRibbon.css.d.ts +1 -1
  97. package/dist/generated/themes/EventRibbon.css.js +1 -1
  98. package/dist/generated/themes/EventRibbon.css.js.map +1 -1
  99. package/dist/generated/themes/Footer.css.d.ts +1 -1
  100. package/dist/generated/themes/Footer.css.js +1 -1
  101. package/dist/generated/themes/Footer.css.js.map +1 -1
  102. package/dist/generated/themes/ImageGridTickerItem.css.d.ts +1 -1
  103. package/dist/generated/themes/ImageGridTickerItem.css.js +1 -1
  104. package/dist/generated/themes/ImageGridTickerItem.css.js.map +1 -1
  105. package/dist/generated/themes/InputGroup.css.d.ts +1 -1
  106. package/dist/generated/themes/InputGroup.css.js +1 -1
  107. package/dist/generated/themes/InputGroup.css.js.map +1 -1
  108. package/dist/generated/themes/Link.css.d.ts +1 -1
  109. package/dist/generated/themes/Link.css.js +1 -1
  110. package/dist/generated/themes/Link.css.js.map +1 -1
  111. package/dist/generated/themes/ListItem.css.d.ts +1 -1
  112. package/dist/generated/themes/ListItem.css.js +1 -1
  113. package/dist/generated/themes/ListItem.css.js.map +1 -1
  114. package/dist/generated/themes/MastheadItem.css.d.ts +1 -1
  115. package/dist/generated/themes/MastheadItem.css.js +1 -1
  116. package/dist/generated/themes/MastheadItem.css.js.map +1 -1
  117. package/dist/generated/themes/MastheadMobileMenu.css.d.ts +1 -1
  118. package/dist/generated/themes/MastheadMobileMenu.css.js +1 -1
  119. package/dist/generated/themes/MastheadMobileMenu.css.js.map +1 -1
  120. package/dist/generated/themes/RadioButton.css.d.ts +1 -1
  121. package/dist/generated/themes/RadioButton.css.js +1 -1
  122. package/dist/generated/themes/RadioButton.css.js.map +1 -1
  123. package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
  124. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  125. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  126. package/dist/generated/themes/Search.css.d.ts +1 -1
  127. package/dist/generated/themes/Search.css.js +1 -1
  128. package/dist/generated/themes/Search.css.js.map +1 -1
  129. package/dist/generated/themes/SelectBase.css.d.ts +2 -0
  130. package/dist/generated/themes/SelectBase.css.js +8 -0
  131. package/dist/generated/themes/SelectBase.css.js.map +1 -0
  132. package/dist/generated/themes/SelectBox.css.d.ts +1 -1
  133. package/dist/generated/themes/SelectBox.css.js +1 -1
  134. package/dist/generated/themes/SelectBox.css.js.map +1 -1
  135. package/dist/generated/themes/Slider.css.d.ts +1 -1
  136. package/dist/generated/themes/Slider.css.js +1 -1
  137. package/dist/generated/themes/Slider.css.js.map +1 -1
  138. package/dist/generated/themes/StatusMessage.css.d.ts +1 -1
  139. package/dist/generated/themes/StatusMessage.css.js +1 -1
  140. package/dist/generated/themes/StatusMessage.css.js.map +1 -1
  141. package/dist/generated/themes/TagGroup.css.d.ts +1 -1
  142. package/dist/generated/themes/TagGroup.css.js +1 -1
  143. package/dist/generated/themes/TagGroup.css.js.map +1 -1
  144. package/dist/generated/themes/TextField.css.d.ts +1 -1
  145. package/dist/generated/themes/TextField.css.js +1 -1
  146. package/dist/generated/themes/TextField.css.js.map +1 -1
  147. package/dist/types/common.d.ts +1 -1
  148. package/dist/types/common.js +1 -1
  149. package/dist/types/common.js.map +1 -1
  150. package/dist/vscode.html-custom-data.json +23 -234
  151. package/dist/web-types.json +256 -811
  152. package/package.json +2 -2
  153. package/src/Checkbox.ts +4 -0
  154. package/src/CountrySelector.hbs +6 -61
  155. package/src/CountrySelector.ts +93 -375
  156. package/src/FilterMenu.ts +13 -3
  157. package/src/Footer.ts +2 -2
  158. package/src/FooterTemplate.tsx +5 -4
  159. package/src/List.ts +2 -3
  160. package/src/ListGroupHeaderBase.ts +4 -0
  161. package/src/ListItem.hbs +0 -1
  162. package/src/ListItemBase.ts +17 -3
  163. package/src/MediaPlayer.ts +4 -0
  164. package/src/MediaPlayerTemplate.tsx +0 -1
  165. package/src/SearchableListBase.ts +68 -83
  166. package/src/SelectBase.ts +580 -0
  167. package/src/SelectBox.hbs +118 -107
  168. package/src/SelectBox.ts +155 -445
  169. package/src/TagGroup.ts +53 -19
  170. package/src/TagTemplate.tsx +4 -2
  171. package/src/TextArea.ts +5 -5
  172. package/src/TextAreaTemplate.tsx +67 -0
  173. package/src/TextField.ts +57 -24
  174. package/src/TextFieldTemplate.tsx +90 -0
  175. package/src/generated/templates/CountrySelectorTemplate.lit.ts +2 -2
  176. package/src/generated/templates/ListItemTemplate.lit.ts +1 -1
  177. package/src/generated/templates/SelectBoxTemplate.lit.ts +10 -9
  178. package/src/generated/themes/Checkbox.css.ts +1 -1
  179. package/src/generated/themes/CountrySelector.css.ts +1 -1
  180. package/src/generated/themes/EventRibbon.css.ts +1 -1
  181. package/src/generated/themes/Footer.css.ts +1 -1
  182. package/src/generated/themes/ImageGridTickerItem.css.ts +1 -1
  183. package/src/generated/themes/InputGroup.css.ts +1 -1
  184. package/src/generated/themes/Link.css.ts +1 -1
  185. package/src/generated/themes/ListItem.css.ts +1 -1
  186. package/src/generated/themes/MastheadItem.css.ts +1 -1
  187. package/src/generated/themes/MastheadMobileMenu.css.ts +1 -1
  188. package/src/generated/themes/RadioButton.css.ts +1 -1
  189. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  190. package/src/generated/themes/Search.css.ts +1 -1
  191. package/src/generated/themes/SelectBase.css.ts +9 -0
  192. package/src/generated/themes/SelectBox.css.ts +1 -1
  193. package/src/generated/themes/Slider.css.ts +1 -1
  194. package/src/generated/themes/StatusMessage.css.ts +1 -1
  195. package/src/generated/themes/TagGroup.css.ts +1 -1
  196. package/src/generated/themes/TextField.css.ts +1 -1
  197. package/src/themes/Checkbox.css +21 -15
  198. package/src/themes/CountrySelector.css +42 -115
  199. package/src/themes/EventRibbon.css +21 -13
  200. package/src/themes/Footer.css +3 -2
  201. package/src/themes/ImageGridTickerItem.css +1 -1
  202. package/src/themes/InputGroup.css +11 -6
  203. package/src/themes/Link.css +2 -0
  204. package/src/themes/ListItem.css +6 -0
  205. package/src/themes/MastheadItem.css +0 -2
  206. package/src/themes/MastheadMobileMenu.css +2 -0
  207. package/src/themes/RadioButton.css +29 -6
  208. package/src/themes/Search.css +0 -1
  209. package/src/themes/SelectBase.css +239 -0
  210. package/src/themes/SelectBox.css +13 -195
  211. package/src/themes/StatusMessage.css +1 -2
  212. package/src/themes/TagGroup.css +0 -1
  213. package/src/themes/TextField.css +7 -7
  214. package/src/types/common.ts +1 -1
  215. package/dist/assets/fi-hYXoEotT.js +0 -1
  216. package/dist/assets/gl-eZFVp-ap.js +0 -1
  217. package/dist/generated/templates/TextAreaTemplate.lit.d.ts +0 -3
  218. package/dist/generated/templates/TextAreaTemplate.lit.js +0 -13
  219. package/dist/generated/templates/TextAreaTemplate.lit.js.map +0 -1
  220. package/dist/generated/templates/TextFieldTemplate.lit.d.ts +0 -3
  221. package/dist/generated/templates/TextFieldTemplate.lit.js +0 -14
  222. package/dist/generated/templates/TextFieldTemplate.lit.js.map +0 -1
  223. package/src/TextArea.hbs +0 -54
  224. package/src/TextField.hbs +0 -78
  225. package/src/generated/templates/TextAreaTemplate.lit.ts +0 -17
  226. package/src/generated/templates/TextFieldTemplate.lit.ts +0 -18
@@ -0,0 +1,193 @@
1
+ import type { UDExListItemBase } from "./List.js";
2
+ import type Popover from "@ui5/webcomponents/dist/Popover.js";
3
+ import type UDExList from "./List.js";
4
+ import type UDExSearch from "./Search.js";
5
+ import "@ui5/webcomponents-icons/dist/decline.js";
6
+ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
7
+ import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
8
+ import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
9
+ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
10
+ import UDExSearchableListBase from "./SearchableListBase.js";
11
+ import UDExValueState from "./types/common.js";
12
+ import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
13
+ export type UDExSelectBaseEvents = {
14
+ "open": void;
15
+ "close": void;
16
+ "before-close": void;
17
+ "before-open": void;
18
+ } & UDExSearchableListBaseEvents;
19
+ /**
20
+ * @class
21
+ *
22
+ * <h3 class="comment-api-title">Overview</h3>
23
+ *
24
+ *
25
+ * <h3>Usage</h3>
26
+ *
27
+ * For the <code>udex-select-box</code>
28
+ * <h3>ES6 Module Import</h3>
29
+ *
30
+ * <code>import "@sapudex/web-components/dist/UDExSelectBox.js";</code>
31
+ *
32
+ * @constructor
33
+ * @extends UDExSearchableListBase
34
+ * @tagname udex-select-box
35
+ * @public
36
+ */
37
+ declare class UDExSelectBase extends UDExSearchableListBase {
38
+ eventDetails: UDExSelectBaseEvents;
39
+ /**
40
+ * Defines whether the component is required.
41
+ *
42
+ * @default false
43
+ * @public
44
+ */
45
+ required: boolean;
46
+ /**
47
+ * Defines whether the component is in disabled state.
48
+ *
49
+ * @default false
50
+ * @public
51
+ */
52
+ disabled: boolean;
53
+ /**
54
+ * Defines label text for field container.
55
+ *
56
+ * @default ""
57
+ * @public
58
+ */
59
+ label: string;
60
+ /**
61
+ * Defines the accessible ARIA name of the component.
62
+ *
63
+ * @default undefined
64
+ * @public
65
+ */
66
+ accessibleName?: string;
67
+ /**
68
+ * Receives id (or many ids) of the elements that label the component.
69
+ * @default undefined
70
+ * @public
71
+ */
72
+ accessibleNameRef?: string;
73
+ /**
74
+ * Defines whether the component is read-only.
75
+ *
76
+ * @default false
77
+ * @public
78
+ */
79
+ readonly: boolean;
80
+ /**
81
+ * Defines whether the component is display-only.
82
+ *
83
+ * @default false
84
+ * @public
85
+ */
86
+ displayonly: boolean;
87
+ /**
88
+ * Defines the value state of the trigger container.
89
+ *
90
+ * @default "Standard"
91
+ * @public
92
+ */
93
+ valueState: `${UDExValueState}`;
94
+ /**
95
+ * Defines supporting text under the trigger container.
96
+ *
97
+ * @default undefined
98
+ * @public
99
+ */
100
+ supportingText?: string;
101
+ /**
102
+ * @private
103
+ */
104
+ _direction?: string;
105
+ /**
106
+ * @default false
107
+ * @private
108
+ */
109
+ _focused: boolean;
110
+ /**
111
+ * @default false
112
+ * @private
113
+ */
114
+ _open: boolean;
115
+ /**
116
+ * Defines selected option for Single Select Mode.
117
+ *
118
+ * @default undefined
119
+ * @private
120
+ */
121
+ _selectedOption: string;
122
+ /**
123
+ * Defines if the component should reset.
124
+ *
125
+ * @default false
126
+ * @private
127
+ */
128
+ _requestRender: boolean;
129
+ _paneWidthVariableName: string;
130
+ _labelBaseClass: string;
131
+ _dropdownClass: string;
132
+ _listBoxRole: string;
133
+ _rootClass: string;
134
+ _stickyClass: string;
135
+ _ariaAutoComplete: string;
136
+ _trigger: HTMLElement;
137
+ _search: UDExSearch | HTMLInputElement;
138
+ _popover: Popover;
139
+ _list: UDExList;
140
+ _inputValue: string;
141
+ _lastSelectedItemId: string;
142
+ _handleResizeBound: ResizeObserverCallback;
143
+ constructor();
144
+ onEnterDOM(): void;
145
+ onExitDOM(): void;
146
+ onAfterRendering(): void;
147
+ _handleResize(): void;
148
+ handleKeyDownDropdown(e: KeyboardEvent): void;
149
+ handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[]): void;
150
+ handleEndKeyPress(items: UDExListItemBase[], lastItemIndex: number): void;
151
+ handleHomeKeyPress(items: UDExListItemBase[]): void;
152
+ handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number): void;
153
+ handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number): void;
154
+ handleLetterKeyPress(e: KeyboardEvent): void;
155
+ handleEscKeyPress(e: KeyboardEvent): void;
156
+ handleItemSelection(e: CustomEvent): void;
157
+ onKeyDownSearch(e: KeyboardEvent): void;
158
+ focusFirstItem(items: UDExListItemBase[]): void;
159
+ handleSearchChange(e: CustomEvent): void;
160
+ handleDirection(): void;
161
+ handleDropdownBeforeClose(): void;
162
+ dropdownBeforeOpen(): void;
163
+ fireEventDropdownOpen(): void;
164
+ fireEventDropdownClose(): void;
165
+ handleButtonClick(): void;
166
+ handleInputClick(): void;
167
+ openDropdown(): void;
168
+ closeDropdown(): void;
169
+ inputFocusIn(): void;
170
+ resetSearchState(): void;
171
+ setSelectOption(): void;
172
+ updatePopoverWidth(): void;
173
+ handleImagePosition(items: UDExListItemBase[], index: number): void;
174
+ get ariaDescribedbyText(): string;
175
+ get trigger(): HTMLElement;
176
+ get isDisabled(): boolean;
177
+ get labelClass(): string;
178
+ get isReadOrDisplayOnly(): boolean;
179
+ get hasSelectedItems(): boolean;
180
+ get additionalClassName(): string;
181
+ get accInfo(): {
182
+ ariaLabel: string;
183
+ };
184
+ get popoverId(): string;
185
+ get listboxRole(): string;
186
+ get hideDropdownSearch(): boolean;
187
+ get showImageFlags(): boolean;
188
+ get searchableList(): object;
189
+ get countryFlag(): object;
190
+ static get countryFlagTemplate(): typeof CountrySelectorTemplate;
191
+ static get searchableListBaseTemplate(): typeof SearchableListBaseTemplate;
192
+ }
193
+ export default UDExSelectBase;
@@ -0,0 +1,428 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
8
+ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
9
+ import { isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
10
+ import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
11
+ import "@ui5/webcomponents-icons/dist/decline.js";
12
+ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
13
+ import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
14
+ import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
15
+ import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
16
+ import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
17
+ import UDExSearchableListBase from "./SearchableListBase.js";
18
+ import UDExValueState from "./types/common.js";
19
+ import { getTokensCountText } from "@ui5/webcomponents/dist/Tokenizer.js";
20
+ import isLetterKey from "./utils/isLetterKeyPressed.js";
21
+ /**
22
+ * @class
23
+ *
24
+ * <h3 class="comment-api-title">Overview</h3>
25
+ *
26
+ *
27
+ * <h3>Usage</h3>
28
+ *
29
+ * For the <code>udex-select-box</code>
30
+ * <h3>ES6 Module Import</h3>
31
+ *
32
+ * <code>import "@sapudex/web-components/dist/UDExSelectBox.js";</code>
33
+ *
34
+ * @constructor
35
+ * @extends UDExSearchableListBase
36
+ * @tagname udex-select-box
37
+ * @public
38
+ */
39
+ class UDExSelectBase extends UDExSearchableListBase {
40
+ constructor() {
41
+ super();
42
+ /**
43
+ * Defines the value state of the trigger container.
44
+ *
45
+ * @default "Standard"
46
+ * @public
47
+ */
48
+ this.valueState = UDExValueState.Standard;
49
+ /**
50
+ * @default false
51
+ * @private
52
+ */
53
+ this._open = false;
54
+ /**
55
+ * Defines if the component should reset.
56
+ *
57
+ * @default false
58
+ * @private
59
+ */
60
+ this._requestRender = false;
61
+ this._paneWidthVariableName = "--udex-dropdown-pane-width";
62
+ this._labelBaseClass = "udex-text-field__label";
63
+ this._dropdownClass = "udex-select-box__dropdown";
64
+ this._listBoxRole = "listbox";
65
+ this._rootClass = "udex-select-box__root";
66
+ this._stickyClass = "udex-list__sticky";
67
+ this._ariaAutoComplete = "list";
68
+ this._inputValue = "";
69
+ this._lastSelectedItemId = "";
70
+ this._handleResizeBound = this._handleResize.bind(this);
71
+ }
72
+ onEnterDOM() {
73
+ ResizeHandler.register(this, this._handleResizeBound);
74
+ if (this.modeSingleSelect) {
75
+ this.setSelectOption();
76
+ }
77
+ }
78
+ onExitDOM() {
79
+ ResizeHandler.deregister(this, this._handleResizeBound);
80
+ }
81
+ onAfterRendering() {
82
+ this._popover = this.getPopover();
83
+ this._search = this.getSearch();
84
+ this._list = this.getList();
85
+ this._trigger = this.trigger;
86
+ this.handleDirection();
87
+ if (this._requestRender) {
88
+ this._requestRender = false;
89
+ }
90
+ }
91
+ _handleResize() {
92
+ this.updatePopoverWidth();
93
+ }
94
+ handleKeyDownDropdown(e) {
95
+ const items = this._list?.getKeyboardNavigationItems();
96
+ if (isLetterKey(e.key)) {
97
+ this.handleLetterKeyPress(e);
98
+ return;
99
+ }
100
+ if (isTabPrevious(e) && !this.tabNavigationEnabled) {
101
+ e.preventDefault();
102
+ this._search.focus();
103
+ return;
104
+ }
105
+ if (isTabNext(e) && !this.tabNavigationEnabled) {
106
+ this.closeDropdown();
107
+ return;
108
+ }
109
+ if (isEscape(e)) {
110
+ this.handleEscKeyPress(e);
111
+ return;
112
+ }
113
+ if (!items || this.tabNavigationEnabled) {
114
+ return;
115
+ }
116
+ this.handleListNavigationKeys(e, items);
117
+ }
118
+ handleListNavigationKeys(e, items) {
119
+ const currentSelectedIndex = this._list?.getCurrentIndex(items, e.target);
120
+ const lastItemIndex = items.length - 1;
121
+ if (isDown(e)) {
122
+ e.preventDefault();
123
+ this.handleDownKeyPress(items, currentSelectedIndex, lastItemIndex);
124
+ return;
125
+ }
126
+ if (isUp(e)) {
127
+ e.preventDefault();
128
+ this.handleUpKeyPress(items, currentSelectedIndex, lastItemIndex);
129
+ return;
130
+ }
131
+ if (isHome(e)) {
132
+ e.preventDefault();
133
+ this.handleHomeKeyPress(items);
134
+ return;
135
+ }
136
+ if (isEnd(e)) {
137
+ e.preventDefault();
138
+ this.handleEndKeyPress(items, lastItemIndex);
139
+ }
140
+ }
141
+ handleEndKeyPress(items, lastItemIndex) {
142
+ if (this.showImageFlags) {
143
+ this.handleImagePosition(items, lastItemIndex);
144
+ }
145
+ this._selectedOption = items[lastItemIndex].label;
146
+ }
147
+ handleHomeKeyPress(items) {
148
+ this._selectedOption = items[0].label;
149
+ if (this.showImageFlags) {
150
+ this.handleImagePosition(items, 0);
151
+ }
152
+ }
153
+ handleDownKeyPress(items, currentSelectedIndex, lastItemIndex) {
154
+ const nextIndex = currentSelectedIndex + 1;
155
+ const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
156
+ this._selectedOption = items[nextSelectIndex].label;
157
+ if (this.showImageFlags) {
158
+ this.handleImagePosition(items, nextSelectIndex);
159
+ }
160
+ }
161
+ handleUpKeyPress(items, currentSelectedIndex, lastItemIndex) {
162
+ const prevIndex = currentSelectedIndex - 1;
163
+ const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
164
+ this._selectedOption = items[previousSelectIndex].label;
165
+ if (this.showImageFlags) {
166
+ this.handleImagePosition(items, previousSelectIndex);
167
+ }
168
+ }
169
+ handleLetterKeyPress(e) {
170
+ e.stopPropagation();
171
+ e.preventDefault();
172
+ this._selectedOption = "";
173
+ this._search.value = e.key;
174
+ this._search.focus();
175
+ this.onSearch(this._search.value);
176
+ }
177
+ handleEscKeyPress(e) {
178
+ e.preventDefault();
179
+ this.closeDropdown();
180
+ this._search.focus();
181
+ if (!this.tabNavigationEnabled) {
182
+ this._selectedOption = "";
183
+ }
184
+ }
185
+ handleItemSelection(e) {
186
+ this.onItemPress(e);
187
+ const item = e.detail.item;
188
+ this._lastSelectedItemId = this.getDataTokenId(item);
189
+ this.resetSearchState();
190
+ if (this.modeSingleSelect) {
191
+ this._search.focus();
192
+ this.closeDropdown();
193
+ }
194
+ }
195
+ onKeyDownSearch(e) {
196
+ e.stopPropagation();
197
+ const items = this._list?.getKeyboardNavigationItems();
198
+ const hasItems = items && items.length > 0;
199
+ const popoverOpened = this._popover.open;
200
+ const isEscAndPopoverOpened = isEscape(e) && popoverOpened;
201
+ const isDownAndPopoverClosed = isDown(e) && !popoverOpened;
202
+ const isDownAndPopoverOpened = isDown(e) && popoverOpened;
203
+ if (!hasItems) {
204
+ return;
205
+ }
206
+ if (isEscAndPopoverOpened) {
207
+ return this.closeDropdown();
208
+ }
209
+ if (isDownAndPopoverClosed) {
210
+ e.preventDefault();
211
+ this.openDropdown();
212
+ this.focusFirstItem(items);
213
+ if (this.showImageFlags) {
214
+ this.handleImagePosition(items, 0);
215
+ }
216
+ return;
217
+ }
218
+ if (isDownAndPopoverOpened) {
219
+ e.preventDefault();
220
+ if (this.showImageFlags) {
221
+ this.handleImagePosition(items, 0);
222
+ }
223
+ return this.focusFirstItem(items);
224
+ }
225
+ }
226
+ focusFirstItem(items) {
227
+ this._list.setTabIndexByIndex(items, 0);
228
+ if (!this.tabNavigationEnabled) {
229
+ this._selectedOption = items[0].label;
230
+ }
231
+ if (items[0].isGroup) {
232
+ this._list.focusHeader(items[0]);
233
+ }
234
+ else {
235
+ items[0].focus();
236
+ }
237
+ }
238
+ handleSearchChange(e) {
239
+ const inputValue = e.target?.value || "";
240
+ this._inputValue = inputValue;
241
+ if (inputValue) {
242
+ this._selectedOption = "";
243
+ }
244
+ this.onSearch(inputValue);
245
+ if (!this._popover.open) {
246
+ this.openDropdown();
247
+ }
248
+ }
249
+ handleDirection() {
250
+ const directionStyles = window.getComputedStyle(this).getPropertyValue("direction");
251
+ this._direction = directionStyles || "ltr";
252
+ }
253
+ handleDropdownBeforeClose() {
254
+ this.fireDecoratorEvent("before-close");
255
+ }
256
+ dropdownBeforeOpen() {
257
+ if (this.height) {
258
+ this._setContentHeight();
259
+ }
260
+ this.fireDecoratorEvent("before-open");
261
+ }
262
+ fireEventDropdownOpen() {
263
+ this.fireDecoratorEvent("open");
264
+ }
265
+ fireEventDropdownClose() {
266
+ this.fireDecoratorEvent("close");
267
+ }
268
+ handleButtonClick() {
269
+ if (!this.isDisabled) {
270
+ this._search.focus();
271
+ if (this._popover.open) {
272
+ this.closeDropdown();
273
+ }
274
+ else {
275
+ this.openDropdown();
276
+ }
277
+ }
278
+ }
279
+ handleInputClick() {
280
+ if (!this.isDisabled) {
281
+ this._search.focus();
282
+ this.openDropdown();
283
+ }
284
+ }
285
+ openDropdown() {
286
+ this._popover.opener = this._trigger;
287
+ this._popover.open = true;
288
+ this._open = true;
289
+ }
290
+ closeDropdown() {
291
+ if (this._popover.open) {
292
+ this._open = false;
293
+ this._popover.open = false;
294
+ }
295
+ }
296
+ inputFocusIn() {
297
+ if (!this.isDisabled) {
298
+ this._focused = true;
299
+ }
300
+ }
301
+ resetSearchState() {
302
+ this._inputValue = "";
303
+ setTimeout(() => this.resetSearch(), 0);
304
+ if (this.modeSingleSelect) {
305
+ this.setSelectOption();
306
+ }
307
+ }
308
+ setSelectOption() {
309
+ this._selectedOption = this.selectedItems[0]?.label || "";
310
+ }
311
+ updatePopoverWidth() {
312
+ this._popover.style.setProperty(this._paneWidthVariableName, `${this._trigger.offsetWidth}px`);
313
+ }
314
+ handleImagePosition(items, index) {
315
+ const image = items[index].querySelector(".udex-text-field__image");
316
+ const imagePlaceholder = this.shadowRoot.querySelector(".udex-text-field__input > .udex-text-field__image");
317
+ if (imagePlaceholder) {
318
+ imagePlaceholder.style.backgroundPosition = image?.style?.backgroundPosition || "";
319
+ }
320
+ }
321
+ get ariaDescribedbyText() {
322
+ if (this.modeSingleSelect) {
323
+ return this._selectedOption;
324
+ }
325
+ const tags = this.selectedItems.filter(item => !item.isGroup);
326
+ return getTokensCountText(tags.length);
327
+ }
328
+ get trigger() {
329
+ return this.shadowRoot.querySelector(".udex-text-field__wrap");
330
+ }
331
+ get isDisabled() {
332
+ return this.readonly || this.displayonly || this.disabled;
333
+ }
334
+ get labelClass() {
335
+ const baseClass = this._labelBaseClass;
336
+ const isActive = [
337
+ this._inputValue,
338
+ this._focused,
339
+ this._open,
340
+ this._selectedOption,
341
+ this.hasSelectedItems,
342
+ ].some(Boolean);
343
+ return isActive ? `${baseClass} ${baseClass}_active` : baseClass;
344
+ }
345
+ get isReadOrDisplayOnly() {
346
+ return this.readonly || this.displayonly;
347
+ }
348
+ get hasSelectedItems() {
349
+ return this.selectedItems.length > 0;
350
+ }
351
+ get additionalClassName() {
352
+ return this._stickyClass;
353
+ }
354
+ get accInfo() {
355
+ return {
356
+ "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || UDExSelectBase.i18nBundle.getText(COUNTRY_SELECT),
357
+ };
358
+ }
359
+ get popoverId() {
360
+ return `${this._id}_${this._dropdownClass}`;
361
+ }
362
+ get listboxRole() {
363
+ return this._listBoxRole;
364
+ }
365
+ get hideDropdownSearch() {
366
+ return true;
367
+ }
368
+ get showImageFlags() {
369
+ return false;
370
+ }
371
+ get searchableList() {
372
+ this.defaultAccessibleRole = this._listBoxRole;
373
+ return executeTemplate(UDExSelectBase.searchableListBaseTemplate, this);
374
+ }
375
+ get countryFlag() {
376
+ return executeTemplate(UDExSelectBase.countryFlagTemplate, this);
377
+ }
378
+ static get countryFlagTemplate() {
379
+ return CountrySelectorTemplate;
380
+ }
381
+ static get searchableListBaseTemplate() {
382
+ return SearchableListBaseTemplate;
383
+ }
384
+ }
385
+ __decorate([
386
+ property({ type: Boolean })
387
+ ], UDExSelectBase.prototype, "required", void 0);
388
+ __decorate([
389
+ property({ type: Boolean })
390
+ ], UDExSelectBase.prototype, "disabled", void 0);
391
+ __decorate([
392
+ property({ type: String })
393
+ ], UDExSelectBase.prototype, "label", void 0);
394
+ __decorate([
395
+ property()
396
+ ], UDExSelectBase.prototype, "accessibleName", void 0);
397
+ __decorate([
398
+ property()
399
+ ], UDExSelectBase.prototype, "accessibleNameRef", void 0);
400
+ __decorate([
401
+ property({ type: Boolean })
402
+ ], UDExSelectBase.prototype, "readonly", void 0);
403
+ __decorate([
404
+ property({ type: Boolean })
405
+ ], UDExSelectBase.prototype, "displayonly", void 0);
406
+ __decorate([
407
+ property()
408
+ ], UDExSelectBase.prototype, "valueState", void 0);
409
+ __decorate([
410
+ property({ type: String })
411
+ ], UDExSelectBase.prototype, "supportingText", void 0);
412
+ __decorate([
413
+ property({ type: String, noAttribute: true })
414
+ ], UDExSelectBase.prototype, "_direction", void 0);
415
+ __decorate([
416
+ property({ type: Boolean })
417
+ ], UDExSelectBase.prototype, "_focused", void 0);
418
+ __decorate([
419
+ property({ type: Boolean })
420
+ ], UDExSelectBase.prototype, "_open", void 0);
421
+ __decorate([
422
+ property()
423
+ ], UDExSelectBase.prototype, "_selectedOption", void 0);
424
+ __decorate([
425
+ property({ type: Boolean, noAttribute: true })
426
+ ], UDExSelectBase.prototype, "_requestRender", void 0);
427
+ export default UDExSelectBase;
428
+ //# sourceMappingURL=SelectBase.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SelectBase.js","sourceRoot":"","sources":["../src/SelectBase.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport {\n isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getAllAccessibleNameRefTexts } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport type { UDExListItemBase } from \"./List.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type UDExList from \"./List.js\";\nimport type UDExSearch from \"./Search.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport { COUNTRY_SELECT } from \"./generated/i18n/i18n-defaults.js\";\nimport SearchableListBaseTemplate from \"./generated/templates/SearchableListBaseTemplate.lit.js\";\nimport CountrySelectorTemplate from \"./generated/templates/CountrySelectorTemplate.lit.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/delegate/ResizeHandler.js\";\nimport UDExSearchableListBase from \"./SearchableListBase.js\";\nimport UDExValueState from \"./types/common.js\";\nimport type { UDExSearchableListBaseEvents } from \"./SearchableListBase.js\";\nimport { getTokensCountText } from \"@ui5/webcomponents/dist/Tokenizer.js\";\nimport isLetterKey from \"./utils/isLetterKeyPressed.js\";\n\nexport type UDExSelectBaseEvents = {\n \"open\": void,\n \"close\": void,\n \"before-close\": void,\n \"before-open\": void,\n} & UDExSearchableListBaseEvents;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-select-box</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n *\n * @constructor\n * @extends UDExSearchableListBase\n * @tagname udex-select-box\n * @public\n */\n\nclass UDExSelectBase extends UDExSearchableListBase {\n eventDetails!: UDExSelectBaseEvents;\n\n /**\n * Defines whether the component is required.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n required!: boolean;\n\n /**\n * Defines whether the component is in disabled state.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n disabled!: boolean;\n\n /**\n * Defines label text for field container.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n label!: string;\n\n /**\n * Defines the accessible ARIA name of the component.\n *\n * @default undefined\n * @public\n */\n @property()\n accessibleName?: string;\n\n /**\n * Receives id (or many ids) of the elements that label the component.\n * @default undefined\n * @public\n */\n @property()\n accessibleNameRef?: string;\n\n /**\n * Defines whether the component is read-only.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n readonly!: boolean;\n\n /**\n * Defines whether the component is display-only.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n displayonly!: boolean;\n\n /**\n * Defines the value state of the trigger container.\n *\n * @default \"Standard\"\n * @public\n */\n @property()\n valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n /**\n * Defines supporting text under the trigger container.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n supportingText?: string;\n\n /**\n * @private\n */\n @property({ type: String, noAttribute: true })\n _direction?: string;\n\n /**\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _focused!: boolean;\n\n /**\n * @default false\n * @private\n */\n @property({ type: Boolean })\n _open: boolean = false;\n\n /**\n * Defines selected option for Single Select Mode.\n *\n * @default undefined\n * @private\n */\n @property()\n _selectedOption!: string;\n\n /**\n * Defines if the component should reset.\n *\n * @default false\n * @private\n */\n @property({ type: Boolean, noAttribute: true })\n _requestRender = false;\n\n _paneWidthVariableName = \"--udex-dropdown-pane-width\";\n _labelBaseClass = \"udex-text-field__label\";\n _dropdownClass = \"udex-select-box__dropdown\";\n _listBoxRole = \"listbox\";\n _rootClass = \"udex-select-box__root\";\n _stickyClass = \"udex-list__sticky\";\n _ariaAutoComplete = \"list\";\n _trigger!: HTMLElement;\n _search!: UDExSearch | HTMLInputElement;\n _popover!: Popover;\n _list!: UDExList;\n _inputValue: string = \"\";\n _lastSelectedItemId: string = \"\";\n _handleResizeBound: ResizeObserverCallback;\n\n constructor() {\n super();\n this._handleResizeBound = this._handleResize.bind(this);\n }\n\n onEnterDOM() {\n ResizeHandler.register(this, this._handleResizeBound);\n if (this.modeSingleSelect) {\n this.setSelectOption();\n }\n }\n\n onExitDOM() {\n ResizeHandler.deregister(this, this._handleResizeBound);\n }\n\n onAfterRendering() {\n this._popover = this.getPopover();\n this._search = this.getSearch();\n this._list = this.getList();\n this._trigger = this.trigger;\n this.handleDirection();\n\n if (this._requestRender) {\n this._requestRender = false;\n }\n }\n\n _handleResize() {\n this.updatePopoverWidth();\n }\n\n handleKeyDownDropdown(e: KeyboardEvent) {\n const items = this._list?.getKeyboardNavigationItems();\n\n if (isLetterKey(e.key)) {\n this.handleLetterKeyPress(e);\n return;\n }\n\n if (isTabPrevious(e) && !this.tabNavigationEnabled) {\n e.preventDefault();\n this._search.focus();\n return;\n }\n\n if (isTabNext(e) && !this.tabNavigationEnabled) {\n this.closeDropdown();\n return;\n }\n\n if (isEscape(e)) {\n this.handleEscKeyPress(e);\n return;\n }\n\n if (!items || this.tabNavigationEnabled) {\n return;\n }\n\n this.handleListNavigationKeys(e, items);\n }\n\n handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[]) {\n const currentSelectedIndex = this._list?.getCurrentIndex(items, e.target as UDExListItemBase);\n const lastItemIndex = items.length - 1;\n\n if (isDown(e)) {\n e.preventDefault();\n this.handleDownKeyPress(items, currentSelectedIndex, lastItemIndex);\n\n return;\n }\n\n if (isUp(e)) {\n e.preventDefault();\n this.handleUpKeyPress(items, currentSelectedIndex, lastItemIndex);\n\n return;\n }\n\n if (isHome(e)) {\n e.preventDefault();\n this.handleHomeKeyPress(items);\n\n return;\n }\n\n if (isEnd(e)) {\n e.preventDefault();\n this.handleEndKeyPress(items, lastItemIndex);\n }\n }\n\n handleEndKeyPress(items: UDExListItemBase[], lastItemIndex: number) {\n if (this.showImageFlags) {\n this.handleImagePosition(items, lastItemIndex);\n }\n\n this._selectedOption = items[lastItemIndex].label;\n }\n\n handleHomeKeyPress(items: UDExListItemBase[]) {\n this._selectedOption = items[0].label;\n\n if (this.showImageFlags) {\n this.handleImagePosition(items, 0);\n }\n }\n\n handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {\n const nextIndex = currentSelectedIndex + 1;\n const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;\n this._selectedOption = items[nextSelectIndex].label;\n\n if (this.showImageFlags) {\n this.handleImagePosition(items, nextSelectIndex);\n }\n }\n\n handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {\n const prevIndex = currentSelectedIndex - 1;\n const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;\n this._selectedOption = items[previousSelectIndex].label;\n\n if (this.showImageFlags) {\n this.handleImagePosition(items, previousSelectIndex);\n }\n }\n\n handleLetterKeyPress(e: KeyboardEvent) {\n e.stopPropagation();\n e.preventDefault();\n this._selectedOption = \"\";\n this._search.value = e.key;\n this._search.focus();\n this.onSearch(this._search.value);\n }\n\n handleEscKeyPress(e: KeyboardEvent) {\n e.preventDefault();\n this.closeDropdown();\n this._search.focus();\n\n if (!this.tabNavigationEnabled) {\n this._selectedOption = \"\";\n }\n }\n\n handleItemSelection(e:CustomEvent) {\n this.onItemPress(e);\n const item = e.detail.item as UDExListItemBase;\n this._lastSelectedItemId = this.getDataTokenId(item);\n this.resetSearchState();\n\n if (this.modeSingleSelect) {\n this._search.focus();\n this.closeDropdown();\n }\n }\n\n onKeyDownSearch(e: KeyboardEvent) {\n e.stopPropagation();\n const items = this._list?.getKeyboardNavigationItems();\n const hasItems = items && items.length > 0;\n const popoverOpened = this._popover.open;\n const isEscAndPopoverOpened = isEscape(e) && popoverOpened;\n const isDownAndPopoverClosed = isDown(e) && !popoverOpened;\n const isDownAndPopoverOpened = isDown(e) && popoverOpened;\n\n if (!hasItems) {\n return;\n }\n\n if (isEscAndPopoverOpened) {\n return this.closeDropdown();\n }\n\n if (isDownAndPopoverClosed) {\n e.preventDefault();\n this.openDropdown();\n this.focusFirstItem(items);\n if (this.showImageFlags) {\n this.handleImagePosition(items, 0);\n }\n return;\n }\n\n if (isDownAndPopoverOpened) {\n e.preventDefault();\n if (this.showImageFlags) {\n this.handleImagePosition(items, 0);\n }\n return this.focusFirstItem(items);\n }\n }\n\n focusFirstItem(items: UDExListItemBase[]): void {\n this._list.setTabIndexByIndex(items, 0);\n if (!this.tabNavigationEnabled) {\n this._selectedOption = items[0].label;\n }\n\n if (items[0].isGroup) {\n this._list.focusHeader(items[0]);\n } else {\n items[0].focus();\n }\n }\n\n handleSearchChange(e: CustomEvent) {\n const inputValue = (e.target as HTMLInputElement)?.value || \"\";\n this._inputValue = inputValue;\n\n if (inputValue) {\n this._selectedOption = \"\";\n }\n\n this.onSearch(inputValue);\n\n if (!this._popover.open) {\n this.openDropdown();\n }\n }\n\n handleDirection() {\n const directionStyles = window.getComputedStyle(this).getPropertyValue(\"direction\");\n this._direction = directionStyles || \"ltr\";\n }\n\n handleDropdownBeforeClose() {\n this.fireDecoratorEvent(\"before-close\");\n }\n\n dropdownBeforeOpen() {\n if (this.height) {\n this._setContentHeight();\n }\n\n this.fireDecoratorEvent(\"before-open\");\n }\n\n fireEventDropdownOpen() {\n this.fireDecoratorEvent(\"open\");\n }\n\n fireEventDropdownClose() {\n this.fireDecoratorEvent(\"close\");\n }\n\n handleButtonClick() {\n if (!this.isDisabled) {\n this._search.focus();\n\n if (this._popover.open) {\n this.closeDropdown();\n } else {\n this.openDropdown();\n }\n }\n }\n\n handleInputClick() {\n if (!this.isDisabled) {\n this._search.focus();\n this.openDropdown();\n }\n }\n\n openDropdown() {\n this._popover.opener = this._trigger;\n this._popover.open = true;\n this._open = true;\n }\n\n closeDropdown() {\n if (this._popover.open) {\n this._open = false;\n this._popover.open = false;\n }\n }\n\n inputFocusIn() {\n if (!this.isDisabled) {\n this._focused = true;\n }\n }\n\n resetSearchState() {\n this._inputValue = \"\";\n setTimeout(() => this.resetSearch(), 0);\n\n if (this.modeSingleSelect) {\n this.setSelectOption();\n }\n }\n\n setSelectOption() {\n this._selectedOption = this.selectedItems[0]?.label || \"\";\n }\n\n updatePopoverWidth() {\n this._popover.style.setProperty(this._paneWidthVariableName, `${this._trigger.offsetWidth}px`);\n }\n\n handleImagePosition(items: UDExListItemBase[], index: number) {\n const image = items[index].querySelector<HTMLElement>(\".udex-text-field__image\");\n const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(\".udex-text-field__input > .udex-text-field__image\");\n\n if (imagePlaceholder) {\n imagePlaceholder.style.backgroundPosition = image?.style?.backgroundPosition || \"\";\n }\n }\n\n get ariaDescribedbyText(): string {\n if (this.modeSingleSelect) {\n return this._selectedOption;\n }\n const tags = this.selectedItems.filter(item => !item.isGroup);\n return getTokensCountText(tags.length);\n }\n\n get trigger(): HTMLElement {\n return this.shadowRoot!.querySelector(\".udex-text-field__wrap\")!;\n }\n\n get isDisabled(): boolean {\n return this.readonly || this.displayonly || this.disabled;\n }\n\n get labelClass(): string {\n const baseClass = this._labelBaseClass;\n const isActive = [\n this._inputValue,\n this._focused,\n this._open,\n this._selectedOption,\n this.hasSelectedItems,\n ].some(Boolean);\n return isActive ? `${baseClass} ${baseClass}_active` : baseClass;\n }\n\n get isReadOrDisplayOnly(): boolean {\n return this.readonly || this.displayonly;\n }\n\n get hasSelectedItems(): boolean {\n return this.selectedItems.length > 0;\n }\n\n get additionalClassName(): string {\n return this._stickyClass;\n }\n\n get accInfo(): { ariaLabel: string } {\n return {\n \"ariaLabel\": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || UDExSelectBase.i18nBundle.getText(COUNTRY_SELECT),\n };\n }\n\n get popoverId(): string {\n return `${this._id}_${this._dropdownClass}`;\n }\n\n get listboxRole(): string {\n return this._listBoxRole;\n }\n\n get hideDropdownSearch(): boolean {\n return true;\n }\n\n get showImageFlags(): boolean {\n return false;\n }\n\n get searchableList() {\n this.defaultAccessibleRole = this._listBoxRole;\n return executeTemplate(UDExSelectBase.searchableListBaseTemplate, this);\n }\n\n get countryFlag() {\n return executeTemplate(UDExSelectBase.countryFlagTemplate, this);\n }\n\n static get countryFlagTemplate() {\n return CountrySelectorTemplate;\n }\n\n static get searchableListBaseTemplate() {\n return SearchableListBaseTemplate;\n }\n}\n\nexport default UDExSelectBase;\n"]}