@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.
- package/cypress/specs/CountrySelector.cy.tsx +158 -144
- package/cypress/specs/EventRibbon.cy.tsx +3 -1
- package/cypress/specs/SelectBox.cy.tsx +173 -206
- package/cypress/specs/Tag.cy.tsx +1 -1
- package/cypress/specs/TextField.cy.tsx +15 -0
- package/cypress/specs/Textarea.cy.tsx +15 -33
- package/dist/Checkbox.js +4 -0
- package/dist/Checkbox.js.map +1 -1
- package/dist/CountrySelector.d.ts +25 -142
- package/dist/CountrySelector.js +91 -268
- package/dist/CountrySelector.js.map +1 -1
- package/dist/FilterMenu.d.ts +14 -2
- package/dist/FilterMenu.js +11 -1
- package/dist/FilterMenu.js.map +1 -1
- package/dist/Footer.js +2 -2
- package/dist/Footer.js.map +1 -1
- package/dist/FooterTemplate.js +1 -1
- package/dist/FooterTemplate.js.map +1 -1
- package/dist/List.js +2 -3
- package/dist/List.js.map +1 -1
- package/dist/ListGroupHeaderBase.d.ts +1 -0
- package/dist/ListGroupHeaderBase.js +3 -0
- package/dist/ListGroupHeaderBase.js.map +1 -1
- package/dist/ListItemBase.d.ts +12 -0
- package/dist/ListItemBase.js +17 -2
- package/dist/ListItemBase.js.map +1 -1
- package/dist/MediaPlayer.js +4 -0
- package/dist/MediaPlayer.js.map +1 -1
- package/dist/MediaPlayerTemplate.js +4 -4
- package/dist/MediaPlayerTemplate.js.map +1 -1
- package/dist/SearchableListBase.d.ts +23 -16
- package/dist/SearchableListBase.js +48 -72
- package/dist/SearchableListBase.js.map +1 -1
- package/dist/SelectBase.d.ts +193 -0
- package/dist/SelectBase.js +428 -0
- package/dist/SelectBase.js.map +1 -0
- package/dist/SelectBox.d.ts +30 -152
- package/dist/SelectBox.js +139 -348
- package/dist/SelectBox.js.map +1 -1
- package/dist/TagGroup.d.ts +23 -5
- package/dist/TagGroup.js +37 -16
- package/dist/TagGroup.js.map +1 -1
- package/dist/TagTemplate.js +4 -2
- package/dist/TagTemplate.js.map +1 -1
- package/dist/TextArea.d.ts +1 -1
- package/dist/TextArea.js +5 -5
- package/dist/TextArea.js.map +1 -1
- package/dist/TextAreaTemplate.d.ts +2 -0
- package/dist/TextAreaTemplate.js +13 -0
- package/dist/TextAreaTemplate.js.map +1 -0
- package/dist/TextField.d.ts +29 -4
- package/dist/TextField.js +32 -16
- package/dist/TextField.js.map +1 -1
- package/dist/TextFieldTemplate.d.ts +2 -0
- package/dist/TextFieldTemplate.js +14 -0
- package/dist/TextFieldTemplate.js.map +1 -0
- package/dist/assets/{InputSuggestions-By00xQan.js → InputSuggestions-63QG0i9j.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-BGtoxRbA.js → ListItemStandardExpandableTextTemplate-B1CpqSCb.js} +1 -1
- package/dist/assets/{bundle.esm-9yDdQqR5.js → bundle.esm-lUYJDofa.js} +218 -217
- package/dist/assets/fi-BGPAljj_.js +1 -0
- package/dist/assets/gl-DqaooM6m.js +1 -0
- package/dist/assets/{video.es-DIP_dh4I.js → video.es-BDeHzm02.js} +32 -32
- package/dist/css/themes/Checkbox.css +1 -1
- package/dist/css/themes/CountrySelector.css +1 -1
- package/dist/css/themes/EventRibbon.css +1 -1
- package/dist/css/themes/Footer.css +1 -1
- package/dist/css/themes/ImageGridTickerItem.css +1 -1
- package/dist/css/themes/InputGroup.css +1 -1
- package/dist/css/themes/Link.css +1 -1
- package/dist/css/themes/ListItem.css +1 -1
- package/dist/css/themes/MastheadItem.css +1 -1
- package/dist/css/themes/MastheadMobileMenu.css +1 -1
- package/dist/css/themes/RadioButton.css +1 -1
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Search.css +1 -1
- package/dist/css/themes/SelectBase.css +1 -0
- package/dist/css/themes/SelectBox.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/css/themes/StatusMessage.css +1 -1
- package/dist/css/themes/TagGroup.css +1 -1
- package/dist/css/themes/TextField.css +1 -1
- package/dist/custom-elements-internal.json +1088 -1284
- package/dist/custom-elements.json +284 -934
- package/dist/generated/templates/CountrySelectorTemplate.lit.js +3 -3
- package/dist/generated/templates/CountrySelectorTemplate.lit.js.map +1 -1
- package/dist/generated/templates/ListItemTemplate.lit.js +1 -1
- package/dist/generated/templates/ListItemTemplate.lit.js.map +1 -1
- package/dist/generated/templates/SelectBoxTemplate.lit.js +10 -9
- package/dist/generated/templates/SelectBoxTemplate.lit.js.map +1 -1
- package/dist/generated/themes/Checkbox.css.d.ts +1 -1
- package/dist/generated/themes/Checkbox.css.js +1 -1
- package/dist/generated/themes/Checkbox.css.js.map +1 -1
- package/dist/generated/themes/CountrySelector.css.d.ts +1 -1
- package/dist/generated/themes/CountrySelector.css.js +1 -1
- package/dist/generated/themes/CountrySelector.css.js.map +1 -1
- package/dist/generated/themes/EventRibbon.css.d.ts +1 -1
- package/dist/generated/themes/EventRibbon.css.js +1 -1
- package/dist/generated/themes/EventRibbon.css.js.map +1 -1
- package/dist/generated/themes/Footer.css.d.ts +1 -1
- package/dist/generated/themes/Footer.css.js +1 -1
- package/dist/generated/themes/Footer.css.js.map +1 -1
- package/dist/generated/themes/ImageGridTickerItem.css.d.ts +1 -1
- package/dist/generated/themes/ImageGridTickerItem.css.js +1 -1
- package/dist/generated/themes/ImageGridTickerItem.css.js.map +1 -1
- package/dist/generated/themes/InputGroup.css.d.ts +1 -1
- package/dist/generated/themes/InputGroup.css.js +1 -1
- package/dist/generated/themes/InputGroup.css.js.map +1 -1
- package/dist/generated/themes/Link.css.d.ts +1 -1
- package/dist/generated/themes/Link.css.js +1 -1
- package/dist/generated/themes/Link.css.js.map +1 -1
- package/dist/generated/themes/ListItem.css.d.ts +1 -1
- package/dist/generated/themes/ListItem.css.js +1 -1
- package/dist/generated/themes/ListItem.css.js.map +1 -1
- package/dist/generated/themes/MastheadItem.css.d.ts +1 -1
- package/dist/generated/themes/MastheadItem.css.js +1 -1
- package/dist/generated/themes/MastheadItem.css.js.map +1 -1
- package/dist/generated/themes/MastheadMobileMenu.css.d.ts +1 -1
- package/dist/generated/themes/MastheadMobileMenu.css.js +1 -1
- package/dist/generated/themes/MastheadMobileMenu.css.js.map +1 -1
- package/dist/generated/themes/RadioButton.css.d.ts +1 -1
- package/dist/generated/themes/RadioButton.css.js +1 -1
- package/dist/generated/themes/RadioButton.css.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/Search.css.d.ts +1 -1
- package/dist/generated/themes/Search.css.js +1 -1
- package/dist/generated/themes/Search.css.js.map +1 -1
- package/dist/generated/themes/SelectBase.css.d.ts +2 -0
- package/dist/generated/themes/SelectBase.css.js +8 -0
- package/dist/generated/themes/SelectBase.css.js.map +1 -0
- package/dist/generated/themes/SelectBox.css.d.ts +1 -1
- package/dist/generated/themes/SelectBox.css.js +1 -1
- package/dist/generated/themes/SelectBox.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/generated/themes/StatusMessage.css.d.ts +1 -1
- package/dist/generated/themes/StatusMessage.css.js +1 -1
- package/dist/generated/themes/StatusMessage.css.js.map +1 -1
- package/dist/generated/themes/TagGroup.css.d.ts +1 -1
- package/dist/generated/themes/TagGroup.css.js +1 -1
- package/dist/generated/themes/TagGroup.css.js.map +1 -1
- package/dist/generated/themes/TextField.css.d.ts +1 -1
- package/dist/generated/themes/TextField.css.js +1 -1
- package/dist/generated/themes/TextField.css.js.map +1 -1
- package/dist/types/common.d.ts +1 -1
- package/dist/types/common.js +1 -1
- package/dist/types/common.js.map +1 -1
- package/dist/vscode.html-custom-data.json +23 -234
- package/dist/web-types.json +256 -811
- package/package.json +2 -2
- package/src/Checkbox.ts +4 -0
- package/src/CountrySelector.hbs +6 -61
- package/src/CountrySelector.ts +93 -375
- package/src/FilterMenu.ts +13 -3
- package/src/Footer.ts +2 -2
- package/src/FooterTemplate.tsx +5 -4
- package/src/List.ts +2 -3
- package/src/ListGroupHeaderBase.ts +4 -0
- package/src/ListItem.hbs +0 -1
- package/src/ListItemBase.ts +17 -3
- package/src/MediaPlayer.ts +4 -0
- package/src/MediaPlayerTemplate.tsx +0 -1
- package/src/SearchableListBase.ts +68 -83
- package/src/SelectBase.ts +580 -0
- package/src/SelectBox.hbs +118 -107
- package/src/SelectBox.ts +155 -445
- package/src/TagGroup.ts +53 -19
- package/src/TagTemplate.tsx +4 -2
- package/src/TextArea.ts +5 -5
- package/src/TextAreaTemplate.tsx +67 -0
- package/src/TextField.ts +57 -24
- package/src/TextFieldTemplate.tsx +90 -0
- package/src/generated/templates/CountrySelectorTemplate.lit.ts +2 -2
- package/src/generated/templates/ListItemTemplate.lit.ts +1 -1
- package/src/generated/templates/SelectBoxTemplate.lit.ts +10 -9
- package/src/generated/themes/Checkbox.css.ts +1 -1
- package/src/generated/themes/CountrySelector.css.ts +1 -1
- package/src/generated/themes/EventRibbon.css.ts +1 -1
- package/src/generated/themes/Footer.css.ts +1 -1
- package/src/generated/themes/ImageGridTickerItem.css.ts +1 -1
- package/src/generated/themes/InputGroup.css.ts +1 -1
- package/src/generated/themes/Link.css.ts +1 -1
- package/src/generated/themes/ListItem.css.ts +1 -1
- package/src/generated/themes/MastheadItem.css.ts +1 -1
- package/src/generated/themes/MastheadMobileMenu.css.ts +1 -1
- package/src/generated/themes/RadioButton.css.ts +1 -1
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Search.css.ts +1 -1
- package/src/generated/themes/SelectBase.css.ts +9 -0
- package/src/generated/themes/SelectBox.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/generated/themes/StatusMessage.css.ts +1 -1
- package/src/generated/themes/TagGroup.css.ts +1 -1
- package/src/generated/themes/TextField.css.ts +1 -1
- package/src/themes/Checkbox.css +21 -15
- package/src/themes/CountrySelector.css +42 -115
- package/src/themes/EventRibbon.css +21 -13
- package/src/themes/Footer.css +3 -2
- package/src/themes/ImageGridTickerItem.css +1 -1
- package/src/themes/InputGroup.css +11 -6
- package/src/themes/Link.css +2 -0
- package/src/themes/ListItem.css +6 -0
- package/src/themes/MastheadItem.css +0 -2
- package/src/themes/MastheadMobileMenu.css +2 -0
- package/src/themes/RadioButton.css +29 -6
- package/src/themes/Search.css +0 -1
- package/src/themes/SelectBase.css +239 -0
- package/src/themes/SelectBox.css +13 -195
- package/src/themes/StatusMessage.css +1 -2
- package/src/themes/TagGroup.css +0 -1
- package/src/themes/TextField.css +7 -7
- package/src/types/common.ts +1 -1
- package/dist/assets/fi-hYXoEotT.js +0 -1
- package/dist/assets/gl-eZFVp-ap.js +0 -1
- package/dist/generated/templates/TextAreaTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TextAreaTemplate.lit.js +0 -13
- package/dist/generated/templates/TextAreaTemplate.lit.js.map +0 -1
- package/dist/generated/templates/TextFieldTemplate.lit.d.ts +0 -3
- package/dist/generated/templates/TextFieldTemplate.lit.js +0 -14
- package/dist/generated/templates/TextFieldTemplate.lit.js.map +0 -1
- package/src/TextArea.hbs +0 -54
- package/src/TextField.hbs +0 -78
- package/src/generated/templates/TextAreaTemplate.lit.ts +0 -17
- package/src/generated/templates/TextFieldTemplate.lit.ts +0 -18
package/dist/CountrySelector.js
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
17
|
+
import UDExSelectBase from "./SelectBase.js";
|
|
24
18
|
import UDExListItem from "./ListItem.js";
|
|
25
19
|
import UDExTextField from "./TextField.js";
|
|
26
|
-
import
|
|
27
|
-
import
|
|
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 =
|
|
46
|
+
let UDExCountrySelector = class UDExCountrySelector extends UDExSelectBase {
|
|
51
47
|
constructor() {
|
|
52
|
-
super();
|
|
48
|
+
super(...arguments);
|
|
53
49
|
/**
|
|
54
|
-
*
|
|
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
|
|
63
|
-
* @
|
|
52
|
+
* @default true
|
|
53
|
+
* @private
|
|
64
54
|
*/
|
|
65
|
-
this.
|
|
66
|
-
this.
|
|
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
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
onExitDOM() {
|
|
76
|
-
ResizeHandler.deregister(this, this._handleResizeBound);
|
|
58
|
+
onAfterRendering() {
|
|
59
|
+
super.onAfterRendering();
|
|
60
|
+
this.handleOutsideClick();
|
|
77
61
|
}
|
|
78
62
|
onBeforeRendering() {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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
|
-
|
|
100
|
-
this.
|
|
101
|
-
this.
|
|
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
|
-
|
|
104
|
-
this.
|
|
105
|
-
this._trigger.iconActive = true;
|
|
85
|
+
handleKeyDownSearch(e) {
|
|
86
|
+
this.onKeyDownSearch(e);
|
|
106
87
|
}
|
|
107
|
-
|
|
108
|
-
this.
|
|
109
|
-
this.onResetSearch();
|
|
110
|
-
this.fireDecoratorEvent("before-open");
|
|
88
|
+
handleDropdownBeforeOpen() {
|
|
89
|
+
this.dropdownBeforeOpen();
|
|
111
90
|
}
|
|
112
|
-
|
|
91
|
+
handleDropdownClose() {
|
|
113
92
|
this._open = false;
|
|
114
|
-
this.
|
|
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
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
-
|
|
153
|
-
this.
|
|
154
|
-
|
|
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
|
-
|
|
168
|
-
if (
|
|
169
|
-
this.
|
|
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
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
this.
|
|
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.
|
|
181
|
-
const selected = country.iso.toUpperCase() === this.
|
|
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-
|
|
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.
|
|
145
|
+
return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
|
|
211
146
|
}
|
|
212
147
|
get flagAriaLabel() {
|
|
213
|
-
return this.getCountryLabel(this.
|
|
148
|
+
return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || "None";
|
|
214
149
|
}
|
|
215
|
-
get
|
|
216
|
-
|
|
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
|
-
|
|
254
|
-
return this.
|
|
153
|
+
get selectedCountryFlagY() {
|
|
154
|
+
return this._selectedCountry?.flagY;
|
|
255
155
|
}
|
|
256
|
-
get
|
|
257
|
-
return
|
|
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, "
|
|
305
|
-
UDExCountrySelector =
|
|
171
|
+
], UDExCountrySelector.prototype, "_countrySelector", void 0);
|
|
172
|
+
UDExCountrySelector = __decorate([
|
|
306
173
|
customElement({
|
|
307
174
|
tag: "udex-country-selector",
|
|
308
175
|
renderer: litRender,
|
|
309
|
-
styles:
|
|
310
|
-
|
|
176
|
+
styles: [
|
|
177
|
+
TextFieldCss,
|
|
178
|
+
SelectBaseCss,
|
|
179
|
+
CountrySelectorCss,
|
|
180
|
+
SearchableListCss,
|
|
181
|
+
getEffectiveScrollbarStyle(),
|
|
182
|
+
],
|
|
183
|
+
template: SelectBoxTemplate,
|
|
311
184
|
dependencies: [
|
|
312
|
-
|
|
313
|
-
Button,
|
|
185
|
+
UI5Button,
|
|
314
186
|
UDExList,
|
|
187
|
+
UDExSearch,
|
|
315
188
|
UDExListItem,
|
|
316
189
|
UDExDropdown,
|
|
317
190
|
UDExTextField,
|
|
318
|
-
|
|
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"]}
|
package/dist/FilterMenu.d.ts
CHANGED
|
@@ -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
|
|
194
|
+
handleValueSearch(e: CustomEvent<{
|
|
195
|
+
value: string;
|
|
196
|
+
}>): void;
|
|
185
197
|
handleSubmitSearch(): void;
|
|
186
198
|
handleResetSearch(): void;
|
|
187
199
|
handleReset(): void;
|
package/dist/FilterMenu.js
CHANGED
|
@@ -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();
|