@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
@@ -4,31 +4,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- var UDExCountrySelector_1;
8
7
  import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
9
8
  import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
10
9
  import property from "@ui5/webcomponents-base/dist/decorators/property.js";
11
- import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
12
- import { isEscape, isTabPrevious, isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
13
- import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
14
- import Button from "@ui5/webcomponents/dist/Button.js";
15
- import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
10
+ import UI5Button from "@ui5/webcomponents/dist/Button.js";
16
11
  import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
17
12
  import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
18
13
  import { CountryListDB } from "./data/CountryListISO3166.js";
19
- import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
20
- import Search from "./Search.js";
14
+ import UDExSearch from "./Search.js";
21
15
  import UDExDropdown from "./Dropdown.js";
22
16
  import UDExList from "./List.js";
23
- import UDExSearchableListBase from "./SearchableListBase.js";
17
+ import UDExSelectBase from "./SelectBase.js";
24
18
  import UDExListItem from "./ListItem.js";
25
19
  import UDExTextField from "./TextField.js";
26
- import UDExValueState from "./types/common.js";
27
- import StatusMessage from "./StatusMessage.js";
28
- import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
29
- import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
20
+ import UDExStatusMessage from "./StatusMessage.js";
21
+ import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
30
22
  // Styles
31
23
  import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
24
+ import TextFieldCss from "./generated/themes/TextField.css.js";
25
+ import SelectBaseCss from "./generated/themes/SelectBase.css.js";
26
+ import SearchableListCss from "./generated/themes/SearchableList.css.js";
27
+ import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
32
28
  /**
33
29
  * @class
34
30
  *
@@ -47,138 +43,90 @@ import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
47
43
  * @tagname udex-country-selector
48
44
  * @public
49
45
  */
50
- let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector extends UDExSearchableListBase {
46
+ let UDExCountrySelector = class UDExCountrySelector extends UDExSelectBase {
51
47
  constructor() {
52
- super();
48
+ super(...arguments);
53
49
  /**
54
- * Receives id (or many ids) of the elements that label the component.
55
- * @default ""
56
- * @public
57
- */
58
- this.accessibleNameRef = "";
59
- /**
60
- * Defines the value state of the component.
50
+ * Indicates whether the country selector is enabled.
61
51
  *
62
- * @default "Standard"
63
- * @public
52
+ * @default true
53
+ * @private
64
54
  */
65
- this.valueState = UDExValueState.Standard;
66
- this._open = false;
67
- this.countryList = CountryListDB;
68
- this._shouldFilterItems = false;
69
- this._handleResizeBound = this._handleResize.bind(this);
70
- this._filteredItems = [];
55
+ this._countrySelector = true;
56
+ this._countryList = CountryListDB;
71
57
  }
72
- onEnterDOM() {
73
- ResizeHandler.register(this, this._handleResizeBound);
74
- }
75
- onExitDOM() {
76
- ResizeHandler.deregister(this, this._handleResizeBound);
58
+ onAfterRendering() {
59
+ super.onAfterRendering();
60
+ this.handleOutsideClick();
77
61
  }
78
62
  onBeforeRendering() {
79
- if (this.blockedCountryCodes?.length) {
80
- const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
81
- this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
82
- }
83
- if (!this.selectedCountry) {
84
- this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry?.toUpperCase());
85
- }
63
+ super.onBeforeRendering();
64
+ this.filterBlockedCountries();
65
+ this.setPreselectedCountry();
86
66
  this.prepareCountrySelectorItems();
87
- if (!this._shouldFilterItems) {
88
- this._filteredItems = this.getProcessedItems();
89
- }
90
- }
91
- onAfterRendering() {
92
- this._dropdown = this.getDropdown();
93
- this._search = this.getSearch();
94
- this._trigger = this.getTrigger();
95
- }
96
- getTrigger() {
97
- return this.shadowRoot.querySelector("[udex-text-field]");
98
67
  }
99
- _dropdownClose() {
100
- this.fireDecoratorEvent("close");
101
- this._trigger.iconActive = false;
68
+ handleItemPress(e) {
69
+ this.handleItemSelection(e);
70
+ this.selectCountryByElement(e.target);
71
+ }
72
+ handleInputFocusIn() {
73
+ this.inputFocusIn();
74
+ }
75
+ handleInputFocusOut(e) {
76
+ const relatedTarget = e.relatedTarget;
77
+ const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);
78
+ if (!isInsideComponent) {
79
+ this.closeDropdown();
80
+ this.resetSearchState();
81
+ this.updateImagePosition();
82
+ }
83
+ this._focused = false;
102
84
  }
103
- _dropdownOpen() {
104
- this.fireDecoratorEvent("open");
105
- this._trigger.iconActive = true;
85
+ handleKeyDownSearch(e) {
86
+ this.onKeyDownSearch(e);
106
87
  }
107
- _dropdownBeforeOpen() {
108
- this._open = true;
109
- this.onResetSearch();
110
- this.fireDecoratorEvent("before-open");
88
+ handleDropdownBeforeOpen() {
89
+ this.dropdownBeforeOpen();
111
90
  }
112
- _dropdownBeforeClose() {
91
+ handleDropdownClose() {
113
92
  this._open = false;
114
- this.fireDecoratorEvent("before-close");
115
- }
116
- get searchableList() {
117
- this.defaultAccessibleRole = "listbox";
118
- return executeTemplate(UDExCountrySelector_1.searchableListBaseTemplate, this);
119
- }
120
- static get searchableListBaseTemplate() {
121
- return SearchableListBaseTemplate;
93
+ this.fireEventDropdownClose();
122
94
  }
123
- _handleResize() {
124
- this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this._trigger.offsetWidth}px`);
125
- }
126
- handleCloseSearch() {
127
- this.getTextField()?.shadowRoot.querySelector("[udex-control-button]")?.focus();
128
- }
129
- handleItemPress(e) {
130
- this.onItemPress(e);
131
- const target = e.target;
132
- const item = this.getItemFromList(target?.getAttribute("data-token-id"));
133
- this.selectedCountry = this.countryList.find(country => country.iso === item._id);
134
- this.dropDownClose();
135
- }
136
- handleKeyPress(keyEvent) {
137
- const key = keyEvent.key;
138
- this._dropdown.open = true;
139
- this._search.focus();
140
- this._search.value = key;
141
- this.fireChangeSearch();
142
- }
143
- handleInputMouseDown(e) {
144
- e.preventDefault();
95
+ handleOutsideClick() {
96
+ document.addEventListener("click", (e) => {
97
+ if (e.target !== this) {
98
+ this._open = this._popover.open;
99
+ }
100
+ });
145
101
  }
146
- handleTriggerClick() {
147
- if (!this.isOpenerDisabled) {
148
- this._dropdown.opener = this.getTextField()._inputHolder;
149
- this._dropdown.open = !this._dropdown.open;
102
+ updateImagePosition() {
103
+ const imagePlaceholder = this.shadowRoot.querySelector(".udex-text-field__input > .udex-text-field__image");
104
+ if (imagePlaceholder) {
105
+ imagePlaceholder.style.backgroundPosition = this.selectedCountryFlagX || "";
150
106
  }
151
107
  }
152
- handleValueSearch(e) {
153
- this.onSearch(e);
154
- this.fireChangeSearch();
155
- }
156
- handleSubmitSearch() {
157
- this.onSubmitSearch();
158
- }
159
- handleKeyDownSearch(keyEvent) {
160
- const { detail: { e } } = keyEvent;
161
- if (isTabPrevious(e) || isEscape(e)) {
162
- e.preventDefault();
163
- this.dropDownClose();
164
- this.handleCloseSearch();
108
+ filterBlockedCountries() {
109
+ if (this.blockedCountryCodes?.length) {
110
+ const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
111
+ this._countryList = this._countryList.filter(country => !blockedCountryCodesArray.includes(country.iso.toUpperCase()));
165
112
  }
166
113
  }
167
- handleKeyDownDropdown(e) {
168
- if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
169
- this.dropDownClose();
114
+ setPreselectedCountry() {
115
+ if (!this._selectedCountry && this.preselectedCountry) {
116
+ const preselectedISO = this.preselectedCountry.toUpperCase();
117
+ this._selectedCountry = this._countryList.find(({ iso }) => iso.toUpperCase() === preselectedISO);
170
118
  }
171
119
  }
172
- dropDownClose() {
173
- this._dropdown.open = false;
174
- }
175
- handleResetSearch() {
176
- this.onResetSearch();
120
+ selectCountryByElement(el) {
121
+ const tokenId = el?.getAttribute("data-token-id") || "";
122
+ const itemObj = this.getItemFromList(tokenId);
123
+ this._selectedCountry = this._countryList.find(country => country.iso === itemObj?._id);
124
+ this._selectedOption = this.selectedCountryName || "";
177
125
  }
178
126
  prepareCountrySelectorItems() {
179
127
  this.items.length = 0;
180
- this.countryList.forEach(country => {
181
- const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();
128
+ this._countryList.forEach(country => {
129
+ const selected = country.iso.toUpperCase() === this._selectedCountry?.iso.toUpperCase();
182
130
  this.items.push({
183
131
  label: this.getCountryLabel(country.countryName, country.localName),
184
132
  innerHTML: this.getItemTemplate(country),
@@ -187,187 +135,62 @@ let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector exte
187
135
  });
188
136
  });
189
137
  }
190
- fireChangeSearch() {
191
- this.fireDecoratorEvent("change-search", { value: this._search.value });
192
- }
193
138
  getItemTemplate(country) {
194
- return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
139
+ return this.hideFlagImages ? undefined : `<span class="udex-text-field__image" style="background-position:${country.flagX}">`;
195
140
  }
196
141
  getCountryLabel(countryName, localName) {
197
142
  return localName ? `${countryName} (${localName})` : countryName || null;
198
143
  }
199
- get ariaControls() {
200
- const list = this.shadowRoot.querySelector("[udex-list]");
201
- return list?.getAttribute("id");
202
- }
203
- get selectedCountryFlagX() {
204
- return this.selectedCountry?.flagX;
205
- }
206
- get selectedCountryFlagY() {
207
- return this.selectedCountry?.flagY;
208
- }
209
144
  get selectedCountryName() {
210
- return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
145
+ return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
211
146
  }
212
147
  get flagAriaLabel() {
213
- return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
148
+ return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || "None";
214
149
  }
215
- get triggerIcon() {
216
- if (!this.displayonly) {
217
- return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
218
- }
219
- }
220
- get countrySelectorClasses() {
221
- const baseClass = "udex-country-selector__dropdown";
222
- return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
223
- }
224
- get countrySelectorTriggerClasses() {
225
- const baseClass = "udex-country-selector__trigger";
226
- const classes = [baseClass];
227
- if (this.disabled) {
228
- classes.push(`${baseClass}--disabled`);
229
- }
230
- if (this.readonly) {
231
- classes.push(`${baseClass}--readonly`);
232
- }
233
- if (this.displayonly) {
234
- classes.push(`${baseClass}--displayonly`);
235
- }
236
- return classes.join(" ");
237
- }
238
- get showFlagImages() {
239
- return !this.hideFlagImages;
240
- }
241
- get isOpenerDisabled() {
242
- return this.readonly || this.displayonly || this.disabled;
243
- }
244
- getSearch() {
245
- return this.shadowRoot.querySelector("[udex-search]");
246
- }
247
- getDropdownPopover() {
248
- return this._dropdown.shadowRoot.querySelector("[ui5-popover]");
249
- }
250
- getDropdown() {
251
- return this.shadowRoot.querySelector("[udex-dropdown]");
150
+ get selectedCountryFlagX() {
151
+ return this._selectedCountry?.flagX;
252
152
  }
253
- getTextField() {
254
- return this.shadowRoot.querySelector("[udex-text-field]");
153
+ get selectedCountryFlagY() {
154
+ return this._selectedCountry?.flagY;
255
155
  }
256
- get effectiveAriaLabel() {
257
- return this.label || this.accessibleName || UDExCountrySelector_1.i18nBundle.getText(COUNTRY_SELECT);
156
+ get showImageFlags() {
157
+ return true;
258
158
  }
259
159
  };
260
- __decorate([
261
- property({ type: String })
262
- ], UDExCountrySelector.prototype, "label", void 0);
263
- __decorate([
264
- property()
265
- ], UDExCountrySelector.prototype, "accessibleName", void 0);
266
- __decorate([
267
- property()
268
- ], UDExCountrySelector.prototype, "accessibleNameRef", void 0);
269
- __decorate([
270
- property({ type: Boolean })
271
- ], UDExCountrySelector.prototype, "required", void 0);
272
- __decorate([
273
- property({ type: String })
274
- ], UDExCountrySelector.prototype, "height", void 0);
275
- __decorate([
276
- property({ type: Boolean })
277
- ], UDExCountrySelector.prototype, "disabled", void 0);
278
- __decorate([
279
- property({ type: Boolean })
280
- ], UDExCountrySelector.prototype, "readonly", void 0);
281
- __decorate([
282
- property({ type: Boolean })
283
- ], UDExCountrySelector.prototype, "displayonly", void 0);
284
160
  __decorate([
285
161
  property({ type: String })
286
162
  ], UDExCountrySelector.prototype, "preselectedCountry", void 0);
287
163
  __decorate([
288
164
  property({ type: String })
289
165
  ], UDExCountrySelector.prototype, "blockedCountryCodes", void 0);
290
- __decorate([
291
- property({ type: String })
292
- ], UDExCountrySelector.prototype, "searchPlaceholder", void 0);
293
- __decorate([
294
- property()
295
- ], UDExCountrySelector.prototype, "valueState", void 0);
296
- __decorate([
297
- property({ type: String })
298
- ], UDExCountrySelector.prototype, "supportingText", void 0);
299
166
  __decorate([
300
167
  property({ type: Boolean })
301
168
  ], UDExCountrySelector.prototype, "hideFlagImages", void 0);
302
169
  __decorate([
303
170
  property({ type: Boolean })
304
- ], UDExCountrySelector.prototype, "_open", void 0);
305
- UDExCountrySelector = UDExCountrySelector_1 = __decorate([
171
+ ], UDExCountrySelector.prototype, "_countrySelector", void 0);
172
+ UDExCountrySelector = __decorate([
306
173
  customElement({
307
174
  tag: "udex-country-selector",
308
175
  renderer: litRender,
309
- styles: CountrySelectorCss,
310
- template: CountrySelectorTemplate,
176
+ styles: [
177
+ TextFieldCss,
178
+ SelectBaseCss,
179
+ CountrySelectorCss,
180
+ SearchableListCss,
181
+ getEffectiveScrollbarStyle(),
182
+ ],
183
+ template: SelectBoxTemplate,
311
184
  dependencies: [
312
- Search,
313
- Button,
185
+ UI5Button,
314
186
  UDExList,
187
+ UDExSearch,
315
188
  UDExListItem,
316
189
  UDExDropdown,
317
190
  UDExTextField,
318
- StatusMessage,
191
+ UDExStatusMessage,
319
192
  ],
320
193
  })
321
- /**
322
- * Fired before the dropdown pane is opened.
323
- *
324
- * @public
325
- */
326
- ,
327
- event("before-open", { bubbles: true })
328
- /**
329
- * Fired after the dropdown pane is opened.
330
- *
331
- * @public
332
- */
333
- ,
334
- event("open", { bubbles: true })
335
- /**
336
- * Fired before the dropdown pane is closed.
337
- *
338
- * @public
339
- */
340
- ,
341
- event("before-close", { bubbles: true })
342
- /**
343
- * Fired after the dropdown pane is closed.
344
- *
345
- * @public
346
- */
347
- ,
348
- event("close", { bubbles: true })
349
- /**
350
- * Fired event when the user submitted the value in the search.
351
- *
352
- * @public
353
- * @param {string} value The current value of the search field
354
- */
355
- ,
356
- event("change-search", { bubbles: true })
357
- /**
358
- * Fired event when the user clicks on the reset button in the search.
359
- *
360
- * @public
361
- */
362
- ,
363
- event("reset-search", { bubbles: true })
364
- /**
365
- * Fired event when the user clicks on the submitted icon in the search.
366
- *
367
- * @public
368
- */
369
- ,
370
- event("submit-search", { bubbles: true })
371
194
  ], UDExCountrySelector);
372
195
  UDExCountrySelector.define();
373
196
  export default UDExCountrySelector;
@@ -1 +1 @@
1
- {"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport { isEscape, isTabPrevious, isTabNext } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport { COUNTRY_SELECT } from \"./generated/i18n/i18n-defaults.js\";\nimport Search from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExSearchableListBase from \"./SearchableListBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExValueState from \"./types/common.js\";\nimport StatusMessage from \"./StatusMessage.js\";\nimport type { UDExSearchKeydownEventDetail } from \"./Search.js\";\nimport type { UDExSearchableListBaseEvents } from \"./SearchableListBase.js\";\nimport CountrySelectorTemplate from \"./generated/templates/CountrySelectorTemplate.lit.js\";\nimport SearchableListBaseTemplate from \"./generated/templates/SearchableListBaseTemplate.lit.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\n\ntype UDExCountrySelectorChangeSearchEventDetail = {\n value: string,\n}\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-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @extends UDExSearchableListBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n tag: \"udex-country-selector\",\n renderer: litRender,\n styles: CountrySelectorCss,\n template: CountrySelectorTemplate,\n dependencies: [\n Search,\n Button,\n UDExList,\n UDExListItem,\n UDExDropdown,\n UDExTextField,\n StatusMessage,\n ],\n})\n\n/**\n * Fired before the dropdown pane is opened.\n *\n * @public\n */\n@event(\"before-open\", { bubbles: true })\n\n/**\n * Fired after the dropdown pane is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired before the dropdown pane is closed.\n *\n * @public\n */\n@event(\"before-close\", { bubbles: true })\n\n/**\n * Fired after the dropdown pane is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\n/**\n * Fired event when the user submitted the value in the search.\n *\n * @public\n * @param {string} value The current value of the search field\n */\n@event(\"change-search\", { bubbles: true })\n\n/**\n * Fired event when the user clicks on the reset button in the search.\n *\n * @public\n */\n@event(\"reset-search\", { bubbles: true })\n\n/**\n * Fired event when the user clicks on the submitted icon in the search.\n *\n * @public\n */\n@event(\"submit-search\", { bubbles: true })\n\nclass UDExCountrySelector extends UDExSearchableListBase {\n eventDetails!: {\n \"open\": void,\n \"close\": void,\n \"before-close\": void,\n \"before-open\": void,\n \"change-search\": UDExCountrySelectorChangeSearchEventDetail,\n } & Omit<UDExSearchableListBaseEvents, \"change-search\">;\n\n /**\n * Defines label text for the input field.\n *\n * @default undefined\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 \"\"\n * @public\n */\n @property()\n accessibleNameRef: string = \"\";\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 * Allows control over the height.\n *\n * @public\n */\n @property({ type: String })\n height?: string;\n\n /**\n * Defines whether the component is in disabled state.\n * <br><br>\n * <b>Note:</b> A disabled component is completely noninteractive.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n disabled!: boolean;\n\n /**\n * Defines whether the component is read-only.\n * <br><br>\n * <b>Note:</b> A read-only component is not editable,\n * but still provides visual feedback upon user interaction.\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 * <br><br>\n * <b>Note:</b> A display-only component is not editable,\n * but still provides visual feedback upon user interaction, input border is not visible.\n *\n * @default false\n * @public\n */\n\n @property({ type: Boolean })\n displayonly!: boolean;\n\n /**\n * Allows to define the initially preselected country.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n preselectedCountry!: string;\n\n /**\n * Allows to define the list of blocked country.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n blockedCountryCodes?: string;\n\n /**\n * Defines the placeholder of the search.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n searchPlaceholder!: string;\n\n /**\n * Defines the value state of the component.\n *\n * @default \"Standard\"\n * @public\n */\n @property()\n valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n /**\n * Defines supporting text under the country selector.\n *\n * @default undefined\n * @public\n */\n @property({ type: String })\n supportingText?: string;\n\n /**\n *\n * @public\n */\n @property({ type: Boolean })\n hideFlagImages?: boolean;\n\n @property({ type: Boolean })\n _open?: boolean = false;\n\n countryList: Country[] = CountryListDB;\n selectedCountry!: Country | undefined;\n _trigger!: UDExTextField;\n\n _dropdown!: UDExDropdown;\n _search!: Search;\n _handleResizeBound: ResizeObserverCallback;\n\n constructor() {\n super();\n this._shouldFilterItems = false;\n this._handleResizeBound = this._handleResize.bind(this);\n this._filteredItems = [];\n }\n\n onEnterDOM(): void {\n ResizeHandler.register(this, this._handleResizeBound);\n }\n\n onExitDOM(): void {\n ResizeHandler.deregister(this, this._handleResizeBound);\n }\n\n onBeforeRendering(): void {\n if (this.blockedCountryCodes?.length) {\n const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));\n }\n\n if (!this.selectedCountry) {\n this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry?.toUpperCase());\n }\n\n this.prepareCountrySelectorItems();\n\n if (!this._shouldFilterItems) {\n this._filteredItems = this.getProcessedItems();\n }\n }\n\n onAfterRendering() {\n this._dropdown = this.getDropdown();\n this._search = this.getSearch();\n this._trigger = this.getTrigger();\n }\n\n getTrigger(): UDExTextField {\n return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n }\n\n _dropdownClose() {\n this.fireDecoratorEvent(\"close\");\n this._trigger.iconActive = false;\n }\n\n _dropdownOpen() {\n this.fireDecoratorEvent(\"open\");\n this._trigger.iconActive = true;\n }\n\n _dropdownBeforeOpen() {\n this._open = true;\n this.onResetSearch();\n this.fireDecoratorEvent(\"before-open\");\n }\n\n _dropdownBeforeClose() {\n this._open = false;\n this.fireDecoratorEvent(\"before-close\");\n }\n\n get searchableList() {\n this.defaultAccessibleRole = \"listbox\";\n return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);\n }\n\n static get searchableListBaseTemplate() {\n return SearchableListBaseTemplate;\n }\n\n _handleResize() {\n this._dropdown.style.setProperty(\"--udex-dropdown-pane-width\", `${this._trigger.offsetWidth}px`);\n }\n\n handleCloseSearch() {\n this.getTextField()?.shadowRoot!.querySelector<Button>(\"[udex-control-button]\")?.focus();\n }\n\n handleItemPress(e: CustomEvent) {\n this.onItemPress(e);\n const target = e.target as HTMLElement;\n const item: any = this.getItemFromList(target?.getAttribute(\"data-token-id\") as string);\n this.selectedCountry = this.countryList.find(country => country.iso === item._id);\n this.dropDownClose();\n }\n\n handleKeyPress(keyEvent: KeyboardEvent) {\n const key = keyEvent.key;\n this._dropdown.open = true;\n this._search.focus();\n this._search.value = key;\n this.fireChangeSearch();\n }\n\n handleInputMouseDown(e: CustomEvent): void {\n e.preventDefault();\n }\n\n handleTriggerClick() {\n if (!this.isOpenerDisabled) {\n this._dropdown.opener = this.getTextField()._inputHolder;\n this._dropdown.open = !this._dropdown.open;\n }\n }\n\n handleValueSearch(e: CustomEvent): void {\n this.onSearch(e);\n this.fireChangeSearch();\n }\n\n handleSubmitSearch(): void {\n this.onSubmitSearch();\n }\n\n handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {\n const { detail: { e } } = keyEvent;\n\n if (isTabPrevious(e) || isEscape(e)) {\n e.preventDefault();\n this.dropDownClose();\n this.handleCloseSearch();\n }\n }\n\n handleKeyDownDropdown(e: KeyboardEvent) {\n if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {\n this.dropDownClose();\n }\n }\n\n dropDownClose(): void {\n this._dropdown.open = false;\n }\n\n handleResetSearch() {\n this.onResetSearch();\n }\n\n prepareCountrySelectorItems(): void {\n this.items.length = 0;\n this.countryList.forEach(country => {\n const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();\n this.items.push({\n label: this.getCountryLabel(country.countryName, country.localName),\n innerHTML: this.getItemTemplate(country),\n selected,\n _id: country.iso.toUpperCase(),\n } as UDExListItem);\n });\n }\n\n fireChangeSearch(): void {\n this.fireDecoratorEvent(\"change-search\", { value: this._search.value });\n }\n\n getItemTemplate(country: Country) {\n return this.hideFlagImages ? undefined : `<span class=\"udex-country-selector-item__image\" style=\"background-position:${country.flagX}\">`;\n }\n\n getCountryLabel(countryName?: string, localName?: string): string | null {\n return localName ? `${countryName} (${localName})` : countryName || null;\n }\n\n get ariaControls(): string | null | undefined {\n const list = this.shadowRoot!.querySelector<UDExList>(\"[udex-list]\");\n return list?.getAttribute(\"id\");\n }\n\n get selectedCountryFlagX(): string | undefined {\n return this.selectedCountry?.flagX;\n }\n\n get selectedCountryFlagY(): string | undefined {\n return this.selectedCountry?.flagY;\n }\n\n get selectedCountryName(): string | null {\n return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : \"\";\n }\n\n get flagAriaLabel(): string {\n return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || \"None\";\n }\n\n get triggerIcon(): string | undefined {\n if (!this.displayonly) {\n return this._open ? \"navigation-up-arrow\" : \"navigation-down-arrow\";\n }\n }\n\n get countrySelectorClasses(): string {\n const baseClass = \"udex-country-selector__dropdown\";\n return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;\n }\n\n get countrySelectorTriggerClasses(): string {\n const baseClass = \"udex-country-selector__trigger\";\n const classes = [baseClass];\n\n if (this.disabled) {\n classes.push(`${baseClass}--disabled`);\n }\n\n if (this.readonly) {\n classes.push(`${baseClass}--readonly`);\n }\n\n if (this.displayonly) {\n classes.push(`${baseClass}--displayonly`);\n }\n\n return classes.join(\" \");\n }\n\n get showFlagImages(): boolean {\n return !this.hideFlagImages;\n }\n\n get isOpenerDisabled(): boolean {\n return this.readonly || this.displayonly || this.disabled;\n }\n\n getSearch(): Search {\n return this.shadowRoot!.querySelector<Search>(\"[udex-search]\")!;\n }\n\n getDropdownPopover(): Popover {\n return this._dropdown.shadowRoot!.querySelector<Popover>(\"[ui5-popover]\")!;\n }\n\n getDropdown(): UDExDropdown {\n return this.shadowRoot!.querySelector<UDExDropdown>(\"[udex-dropdown]\")!;\n }\n\n getTextField(): UDExTextField {\n return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n }\n\n get effectiveAriaLabel(): string {\n return this.label || this.accessibleName || UDExCountrySelector.i18nBundle.getText(COUNTRY_SELECT);\n }\n}\n\nUDExCountrySelector.define();\n\nexport default UDExCountrySelector;\nexport type { UDExCountrySelectorChangeSearchEventDetail };\n"]}
1
+ {"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Button from \"@ui5/webcomponents/dist/Button.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport UDExSearch from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExSelectBase from \"./SelectBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport SelectBoxTemplate from \"./generated/templates/SelectBoxTemplate.lit.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\nimport TextFieldCss from \"./generated/themes/TextField.css.js\";\nimport SelectBaseCss from \"./generated/themes/SelectBase.css.js\";\nimport SearchableListCss from \"./generated/themes/SearchableList.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\ntype UDExCountrySelectorChangeSearchEventDetail = {\n value: string,\n}\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-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @extends UDExSearchableListBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n tag: \"udex-country-selector\",\n renderer: litRender,\n styles: [\n TextFieldCss,\n SelectBaseCss,\n CountrySelectorCss,\n SearchableListCss,\n getEffectiveScrollbarStyle(),\n ],\n template: SelectBoxTemplate,\n dependencies: [\n UI5Button,\n UDExList,\n UDExSearch,\n UDExListItem,\n UDExDropdown,\n UDExTextField,\n UDExStatusMessage,\n ],\n})\n\nclass UDExCountrySelector extends UDExSelectBase {\n /**\n * Allows to define the initially preselected country.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n preselectedCountry!: string;\n\n /**\n * Allows to define the list of blocked country.\n *\n * @default \"\"\n * @public\n */\n @property({ type: String })\n blockedCountryCodes?: string;\n\n /**\n * Allows to hide the flag images in the country selector.\n *\n * @default false\n * @public\n */\n @property({ type: Boolean })\n hideFlagImages?: boolean;\n\n /**\n * Indicates whether the country selector is enabled.\n *\n * @default true\n * @private\n */\n @property({ type: Boolean })\n _countrySelector: boolean = true;\n\n _countryList: Country[] = CountryListDB;\n _selectedCountry!: Country | undefined;\n\n onAfterRendering(): void {\n super.onAfterRendering();\n this.handleOutsideClick();\n }\n\n onBeforeRendering(): void {\n super.onBeforeRendering();\n this.filterBlockedCountries();\n this.setPreselectedCountry();\n this.prepareCountrySelectorItems();\n }\n\n handleItemPress(e: CustomEvent): void {\n this.handleItemSelection(e);\n this.selectCountryByElement(e.target as HTMLElement);\n }\n\n handleInputFocusIn(): void {\n this.inputFocusIn();\n }\n\n handleInputFocusOut(e: FocusEvent): void {\n const relatedTarget = e.relatedTarget as HTMLElement;\n const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);\n\n if (!isInsideComponent) {\n this.closeDropdown();\n this.resetSearchState();\n this.updateImagePosition();\n }\n\n this._focused = false;\n }\n\n handleKeyDownSearch(e: KeyboardEvent): void {\n this.onKeyDownSearch(e);\n }\n\n handleDropdownBeforeOpen(): void {\n this.dropdownBeforeOpen();\n }\n\n handleDropdownClose(): void {\n this._open = false;\n this.fireEventDropdownClose();\n }\n\n handleOutsideClick(): void {\n document.addEventListener(\"click\", (e: Event) => {\n if (e.target !== this) {\n this._open = this._popover.open;\n }\n });\n }\n\n updateImagePosition(): void {\n const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(\".udex-text-field__input > .udex-text-field__image\");\n if (imagePlaceholder) {\n imagePlaceholder.style.backgroundPosition = this.selectedCountryFlagX || \"\";\n }\n }\n\n filterBlockedCountries(): void {\n if (this.blockedCountryCodes?.length) {\n const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n this._countryList = this._countryList.filter(country => !blockedCountryCodesArray.includes(country.iso.toUpperCase()));\n }\n }\n\n setPreselectedCountry(): void {\n if (!this._selectedCountry && this.preselectedCountry) {\n const preselectedISO = this.preselectedCountry.toUpperCase();\n this._selectedCountry = this._countryList.find(({ iso }) => iso.toUpperCase() === preselectedISO);\n }\n }\n\n selectCountryByElement(el: HTMLElement): void {\n const tokenId = el?.getAttribute(\"data-token-id\") || \"\";\n const itemObj = this.getItemFromList(tokenId);\n this._selectedCountry = this._countryList.find(country => country.iso === itemObj?._id);\n this._selectedOption = this.selectedCountryName || \"\";\n }\n\n prepareCountrySelectorItems(): void {\n this.items.length = 0;\n this._countryList.forEach(country => {\n const selected = country.iso.toUpperCase() === this._selectedCountry?.iso.toUpperCase();\n this.items.push({\n label: this.getCountryLabel(country.countryName, country.localName),\n innerHTML: this.getItemTemplate(country),\n selected,\n _id: country.iso.toUpperCase(),\n } as UDExListItem);\n });\n }\n\n getItemTemplate(country: Country) :string | undefined {\n return this.hideFlagImages ? undefined : `<span class=\"udex-text-field__image\" style=\"background-position:${country.flagX}\">`;\n }\n\n getCountryLabel(countryName?: string, localName?: string): string | null {\n return localName ? `${countryName} (${localName})` : countryName || null;\n }\n\n get selectedCountryName(): string | null {\n return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : \"\";\n }\n\n get flagAriaLabel(): string {\n return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || \"None\";\n }\n\n get selectedCountryFlagX(): string | undefined {\n return this._selectedCountry?.flagX;\n }\n\n get selectedCountryFlagY(): string | undefined {\n return this._selectedCountry?.flagY;\n }\n\n get showImageFlags(): boolean {\n return true;\n }\n}\n\nUDExCountrySelector.define();\n\nexport default UDExCountrySelector;\nexport type { UDExCountrySelectorChangeSearchEventDetail };\n"]}
@@ -168,10 +168,20 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
168
168
  * @public
169
169
  */
170
170
  triggerAccessibleRole: string;
171
+ /**
172
+ * Determines whether the filter should be applied.
173
+ * @default false
174
+ * @private
175
+ */
171
176
  _shouldApplyFilter: boolean;
177
+ /**
178
+ * Determines whether the component should be re-rendered.
179
+ * @default false
180
+ * @private
181
+ */
172
182
  _requestRender: boolean;
173
183
  _trigger: UDExButton;
174
- _search: UDExSearch;
184
+ _search: UDExSearch | HTMLInputElement;
175
185
  _popover: Popover;
176
186
  _breakpointSizeXS: number;
177
187
  _initialState: Array<initialItemState>;
@@ -181,7 +191,9 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
181
191
  handleSelectAll(e: CustomEvent): void;
182
192
  handleItemPress(e: CustomEvent): void;
183
193
  handleHeaderPress(e: CustomEvent): void;
184
- handleValueSearch(e: CustomEvent): void;
194
+ handleValueSearch(e: CustomEvent<{
195
+ value: string;
196
+ }>): void;
185
197
  handleSubmitSearch(): void;
186
198
  handleResetSearch(): void;
187
199
  handleReset(): void;
@@ -122,7 +122,17 @@ let UDExFilterMenu = UDExFilterMenu_1 = class UDExFilterMenu extends UDExSearcha
122
122
  * @public
123
123
  */
124
124
  this.triggerAccessibleRole = "combobox";
125
+ /**
126
+ * Determines whether the filter should be applied.
127
+ * @default false
128
+ * @private
129
+ */
125
130
  this._shouldApplyFilter = false;
131
+ /**
132
+ * Determines whether the component should be re-rendered.
133
+ * @default false
134
+ * @private
135
+ */
126
136
  this._requestRender = false;
127
137
  this._breakpointSizeXS = 640;
128
138
  this._initialState = [];
@@ -153,7 +163,7 @@ let UDExFilterMenu = UDExFilterMenu_1 = class UDExFilterMenu extends UDExSearcha
153
163
  this.onHeaderPress(e);
154
164
  }
155
165
  handleValueSearch(e) {
156
- this.onSearch(e);
166
+ this.onSearch(e.detail.value);
157
167
  }
158
168
  handleSubmitSearch() {
159
169
  this.onDropdownClose();