@shoper/phoenix_design_system 1.10.13 → 1.11.0-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 (16) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +5 -1
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js +1 -1
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js +33 -33
  5. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +2 -5
  6. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +2 -0
  8. package/build/esm/packages/phoenix/src/components/form/search/search.js +5 -1
  9. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/form/search/search_constants.js +1 -1
  11. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/select.js +33 -33
  13. package/build/esm/packages/phoenix/src/components/form/select/select_utils.d.ts +1 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +2 -5
  15. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  16. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -7,6 +7,7 @@ var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
8
8
  var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
10
+ var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
10
11
  var icon_constants = require('../../icon/icon_constants.js');
11
12
  var observer = require('../../../core/classes/observer/observer.js');
12
13
  var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
@@ -15,6 +16,7 @@ var context_provider_controller = require('../../../core/context/context_provide
15
16
  var global_constants = require('../../../global_constants.js');
16
17
  var when = require('../../../../../../external/lit/external/lit-html/directives/when.js');
17
18
  var search_constants = require('./search_constants.js');
19
+ var ref = require('lit/directives/ref');
18
20
 
19
21
  exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLitElement {
20
22
  constructor() {
@@ -31,6 +33,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
31
33
  });
32
34
  this._activeItemId = -1;
33
35
  this._translations = {};
36
+ this._openSearchButtonRef = ref.createRef();
34
37
  this._bindKeys = (ev) => {
35
38
  const searchItemsCount = this._getSearchItemsCount();
36
39
  switch (ev.key) {
@@ -105,6 +108,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
105
108
  this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
106
109
  this._setupInitialSearchPhrase();
107
110
  this._setupListeners();
111
+ this._btnController = new btn_controller.BtnController(this, this._handleOpenSearch);
108
112
  }
109
113
  disconnectedCallback() {
110
114
  super.disconnectedCallback();
@@ -261,7 +265,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
261
265
  }
262
266
  render() {
263
267
  return lit.html `
264
- <div class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon" @click=${this._handleOpenSearch}>
268
+ <div ${ref.ref(this._openSearchButtonRef)} class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon">
265
269
  <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
266
270
  <div class="labeled-icon__signature">${this._translations.search}</div>
267
271
  </div>
package/build/cjs/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js CHANGED
@@ -30,7 +30,7 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
30
30
  search: 'search',
31
31
  updateSearchPhrase: 'updateSearchPhrase',
32
32
  focusin: 'searchFocusIn',
33
- keyup: 'searchKeyUp',
33
+ keyup: 'searchKeyUp'
34
34
  };
35
35
  const baseSearchCssClass = 'search';
36
36
  const SEARCH_CLASS_NAMES = {
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -41,7 +41,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
41
41
  this.type = select_constants.SELECT_TYPES.select;
42
42
  this.noDeselect = false;
43
43
  this._searchValue = '';
44
- this._$options = {};
44
+ this._$options = new Map();
45
45
  this._$dropdown = ref_js.createRef();
46
46
  this._$search = ref_js.createRef();
47
47
  this._$optionsList = ref_js.createRef();
@@ -53,13 +53,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
53
53
  const value = $option.getAttribute('value');
54
54
  if (!value)
55
55
  throw Error('Select option must hava a value');
56
- if (acc[value] !== undefined)
56
+ if (acc.has(value))
57
57
  throw Error('Select options must hava a unique values.');
58
- return {
59
- ...acc,
60
- [value]: $option
61
- };
62
- }, {});
58
+ return acc.set(value, $option);
59
+ }, new Map());
63
60
  const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
64
61
  this._selectController.options$.notify(options);
65
62
  if (options.length)
@@ -68,7 +65,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
68
65
  this._getOptions = () => {
69
66
  let $options;
70
67
  if (this.optionsList) {
71
- $options = this.optionsList.map(option => {
68
+ $options = this.optionsList.map((option) => {
72
69
  return select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option));
73
70
  });
74
71
  }
@@ -89,13 +86,13 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
89
86
  this._dispatchChangeEvent();
90
87
  };
91
88
  this._updateOptionsView = (options) => {
92
- if (options.length < Object.keys(this._$options).length)
89
+ if (options.length < Array.from(this._$options.keys()).length)
93
90
  this._removeHTMLOptions(options.map((option) => option.value));
94
91
  options
95
92
  .filter((option) => !option.inactive)
96
93
  .forEach((option, index) => {
97
94
  const { selected, value } = option;
98
- const $option = this._$options[value];
95
+ const $option = this._$options.get(value);
99
96
  if (!$option) {
100
97
  this._appendNewHTMLOption(option, index + 1);
101
98
  return;
@@ -147,20 +144,20 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
147
144
  const selectedOptions = this._selectController.selectedOptions$.getValue();
148
145
  if (!selectedOptions || selectedOptions.length === 0)
149
146
  return -1;
150
- const htmlOptions = Object.values(this._$options);
147
+ const htmlOptions = Array.from(this._$options.values());
151
148
  return this.multiple
152
149
  ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
153
150
  : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
154
151
  }
155
152
  set selectedIndex(index) {
156
- const option = Object.values(this._$options).filter(($option) => !$option.hidden)[index];
153
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
157
154
  option ? this._selectOption(option.value) : this._selectController.deselectAll();
158
- Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
155
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
159
156
  }
160
157
  get selectedOptions() {
161
158
  var _a;
162
159
  const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
163
- return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
160
+ return selectedOptions.filter((option) => option.selected).map((option) => this._$options.get(option.value));
164
161
  }
165
162
  get name() {
166
163
  return this.controlName;
@@ -169,7 +166,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
169
166
  return this.controlId;
170
167
  }
171
168
  get options() {
172
- return Object.values(this._$options);
169
+ return Array.from(this._$options.values());
173
170
  }
174
171
  updated(changedProperties) {
175
172
  super.updated(changedProperties);
@@ -232,7 +229,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
232
229
  const $option = select_utils.SelectControlUtils.createHTMLOption(option);
233
230
  if (selected)
234
231
  this.updateOptionAriaAttribute($option);
235
- this._$options[value] = $option;
232
+ this._$options.set(value, $option);
236
233
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
237
234
  }
238
235
  updateOptionAriaAttribute($option) {
@@ -241,7 +238,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
241
238
  : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
242
239
  }
243
240
  _removeHTMLOptions(optionsValues) {
244
- this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
241
+ this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
245
242
  }
246
243
  _selectOption(value) {
247
244
  const option = this._selectController.getOption(value);
@@ -269,16 +266,22 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
269
266
  replace(options) {
270
267
  this._selectController.replace(options);
271
268
  }
269
+ getOption(value) {
270
+ return this._selectController.getOption(value);
271
+ }
272
+ select(option) {
273
+ this._selectController.select(option);
274
+ }
272
275
  disconnectedCallback() {
273
276
  super.disconnectedCallback();
274
277
  this._selectController.options$.unsubscribe(this._optionsObserver);
275
- this._$options = {};
278
+ this._$options.clear();
276
279
  }
277
280
  _getClonedPlaceholderElement() {
278
281
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
279
282
  }
280
283
  _searchNoResult() {
281
- return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
284
+ return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
282
285
  }
283
286
  _renderOption(option) {
284
287
  const fragment = document.createDocumentFragment();
@@ -305,10 +308,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
305
308
  ${ref_js.ref(this._$dropdownContent)}
306
309
  name=${this.controlName}
307
310
  >
308
- <h-select-close-btn
309
- class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}"
310
- @close=${this._closeSelect}
311
- ></h-select-close-btn>
311
+ <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
312
312
 
313
313
  <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
314
314
 
@@ -321,16 +321,16 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
321
321
  ></h-select-search>`
322
322
  : lit.nothing}
323
323
 
324
- <h-options
325
- class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
326
- ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
327
- : ''}"
328
- ${ref_js.ref(this._$optionsList)}
329
- @optionClicked=${this._handleOptionClicked}
330
- @optionUpdated=${this._handleOptionUpdated}
331
- >
332
- ${this._$options ? repeat.repeat(Object.values(this._$options), (option) => option.value, (option) => this._renderOption(option)) : lit.nothing}
333
- </h-options>
324
+ <h-options
325
+ class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
326
+ ${ref_js.ref(this._$optionsList)}
327
+ @optionClicked=${this._handleOptionClicked}
328
+ @optionUpdated=${this._handleOptionUpdated}
329
+ >
330
+ ${Array.from(this._$options.entries()).length > 0
331
+ ? repeat.repeat(Array.from(this._$options.values()), (option) => option.value, (option) => this._renderOption(option))
332
+ : lit.nothing}
333
+ </h-options>
334
334
 
335
335
  ${this._searchNoResult()
336
336
  ? lit.html ` <div>
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -30,13 +30,10 @@ class SelectControlUtils {
30
30
  static removeHTMLOptions($options, optionsValuesThatExists) {
31
31
  return $options.reduce((acc, $option) => {
32
32
  if (optionsValuesThatExists.includes($option.value))
33
- return {
34
- ...acc,
35
- [$option.value]: $option
36
- };
33
+ return acc.set($option.value, $option);
37
34
  $option.remove();
38
35
  return acc;
39
- }, {});
36
+ }, new Map());
40
37
  }
41
38
  static appendHTMLOption($option, $list, position) {
42
39
  if (position !== undefined) {
package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -22,6 +22,8 @@ export declare class HSearch extends PhoenixLightLitElement {
22
22
  private _historyContext;
23
23
  private _activeItemId;
24
24
  private _translations;
25
+ private _openSearchButtonRef;
26
+ private _btnController;
25
27
  connectedCallback(): Promise<void>;
26
28
  disconnectedCallback(): void;
27
29
  private _setupContext;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -3,6 +3,7 @@ import { html } from 'lit';
3
3
  import { property, state } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
6
+ import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
6
7
  import { ICONS_SIZES } from '../../icon/icon_constants.js';
7
8
  import { Observer } from '../../../core/classes/observer/observer.js';
8
9
  import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
@@ -11,6 +12,7 @@ import { ContextProviderController } from '../../../core/context/context_provide
11
12
  import { BREAKPOINTS } from '../../../global_constants.js';
12
13
  import { when as n } from '../../../../../../external/lit/external/lit-html/directives/when.js';
13
14
  import { DEFAULT_VIEW, SCROLL_DIRECTIONS, SEARCH_CLASS_NAMES, SEARCH_CONFIGURATION, SEARCH_COMPONENT_NAMES, SEARCH_CONTEXT_NAMES, SEARCH_CUSTOM_EVENT_NAMES } from './search_constants.js';
15
+ import { createRef, ref } from 'lit/directives/ref';
14
16
 
15
17
  let HSearch = class HSearch extends PhoenixLightLitElement {
16
18
  constructor() {
@@ -27,6 +29,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
27
29
  });
28
30
  this._activeItemId = -1;
29
31
  this._translations = {};
32
+ this._openSearchButtonRef = createRef();
30
33
  this._bindKeys = (ev) => {
31
34
  const searchItemsCount = this._getSearchItemsCount();
32
35
  switch (ev.key) {
@@ -101,6 +104,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
101
104
  this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
102
105
  this._setupInitialSearchPhrase();
103
106
  this._setupListeners();
107
+ this._btnController = new BtnController(this, this._handleOpenSearch);
104
108
  }
105
109
  disconnectedCallback() {
106
110
  super.disconnectedCallback();
@@ -257,7 +261,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
257
261
  }
258
262
  render() {
259
263
  return html `
260
- <div class="${SEARCH_CLASS_NAMES.icon} labeled-icon" @click=${this._handleOpenSearch}>
264
+ <div ${ref(this._openSearchButtonRef)} class="${SEARCH_CLASS_NAMES.icon} labeled-icon">
261
265
  <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
262
266
  <div class="labeled-icon__signature">${this._translations.search}</div>
263
267
  </div>
package/build/esm/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/search_constants.js CHANGED
@@ -26,7 +26,7 @@ const SEARCH_CUSTOM_EVENT_NAMES = {
26
26
  search: 'search',
27
27
  updateSearchPhrase: 'updateSearchPhrase',
28
28
  focusin: 'searchFocusIn',
29
- keyup: 'searchKeyUp',
29
+ keyup: 'searchKeyUp'
30
30
  };
31
31
  const baseSearchCssClass = 'search';
32
32
  const SEARCH_CLASS_NAMES = {
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare class HSelect extends PhoenixLightLitElement {
20
20
  noDeselect: boolean;
21
21
  get selectedIndex(): number;
22
22
  set selectedIndex(index: number);
23
- get selectedOptions(): HOption[];
23
+ get selectedOptions(): (HOption | undefined)[];
24
24
  get name(): string;
25
25
  get id(): string;
26
26
  get options(): HOption[];
@@ -60,6 +60,8 @@ export declare class HSelect extends PhoenixLightLitElement {
60
60
  add(option: SelectOption, position?: number): void;
61
61
  removeOption(optionValue: string): void;
62
62
  replace(options: SelectOption[]): void;
63
+ getOption(value: string): SelectOption | undefined;
64
+ select(option: SelectOption): void;
63
65
  disconnectedCallback(): void;
64
66
  private _getClonedPlaceholderElement;
65
67
  private _searchNoResult;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -37,7 +37,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
37
37
  this.type = SELECT_TYPES.select;
38
38
  this.noDeselect = false;
39
39
  this._searchValue = '';
40
- this._$options = {};
40
+ this._$options = new Map();
41
41
  this._$dropdown = createRef();
42
42
  this._$search = createRef();
43
43
  this._$optionsList = createRef();
@@ -49,13 +49,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
49
49
  const value = $option.getAttribute('value');
50
50
  if (!value)
51
51
  throw Error('Select option must hava a value');
52
- if (acc[value] !== undefined)
52
+ if (acc.has(value))
53
53
  throw Error('Select options must hava a unique values.');
54
- return {
55
- ...acc,
56
- [value]: $option
57
- };
58
- }, {});
54
+ return acc.set(value, $option);
55
+ }, new Map());
59
56
  const options = $options.map(SelectOptionMapper.toModel);
60
57
  this._selectController.options$.notify(options);
61
58
  if (options.length)
@@ -64,7 +61,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
64
61
  this._getOptions = () => {
65
62
  let $options;
66
63
  if (this.optionsList) {
67
- $options = this.optionsList.map(option => {
64
+ $options = this.optionsList.map((option) => {
68
65
  return SelectControlUtils.createHTMLOption(SelectOption.create(option));
69
66
  });
70
67
  }
@@ -85,13 +82,13 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
85
82
  this._dispatchChangeEvent();
86
83
  };
87
84
  this._updateOptionsView = (options) => {
88
- if (options.length < Object.keys(this._$options).length)
85
+ if (options.length < Array.from(this._$options.keys()).length)
89
86
  this._removeHTMLOptions(options.map((option) => option.value));
90
87
  options
91
88
  .filter((option) => !option.inactive)
92
89
  .forEach((option, index) => {
93
90
  const { selected, value } = option;
94
- const $option = this._$options[value];
91
+ const $option = this._$options.get(value);
95
92
  if (!$option) {
96
93
  this._appendNewHTMLOption(option, index + 1);
97
94
  return;
@@ -143,20 +140,20 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
143
140
  const selectedOptions = this._selectController.selectedOptions$.getValue();
144
141
  if (!selectedOptions || selectedOptions.length === 0)
145
142
  return -1;
146
- const htmlOptions = Object.values(this._$options);
143
+ const htmlOptions = Array.from(this._$options.values());
147
144
  return this.multiple
148
145
  ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
149
146
  : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
150
147
  }
151
148
  set selectedIndex(index) {
152
- const option = Object.values(this._$options).filter(($option) => !$option.hidden)[index];
149
+ const option = Array.from(this._$options.values()).filter(($option) => !$option.hidden)[index];
153
150
  option ? this._selectOption(option.value) : this._selectController.deselectAll();
154
- Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
151
+ Array.from(this._$options.values()).forEach(($option) => this.updateOptionAriaAttribute($option));
155
152
  }
156
153
  get selectedOptions() {
157
154
  var _a;
158
155
  const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
159
- return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
156
+ return selectedOptions.filter((option) => option.selected).map((option) => this._$options.get(option.value));
160
157
  }
161
158
  get name() {
162
159
  return this.controlName;
@@ -165,7 +162,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
165
162
  return this.controlId;
166
163
  }
167
164
  get options() {
168
- return Object.values(this._$options);
165
+ return Array.from(this._$options.values());
169
166
  }
170
167
  updated(changedProperties) {
171
168
  super.updated(changedProperties);
@@ -228,7 +225,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
228
225
  const $option = SelectControlUtils.createHTMLOption(option);
229
226
  if (selected)
230
227
  this.updateOptionAriaAttribute($option);
231
- this._$options[value] = $option;
228
+ this._$options.set(value, $option);
232
229
  SelectControlUtils.appendHTMLOption($option, $list, position);
233
230
  }
234
231
  updateOptionAriaAttribute($option) {
@@ -237,7 +234,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
237
234
  : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
238
235
  }
239
236
  _removeHTMLOptions(optionsValues) {
240
- this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
237
+ this._$options = SelectControlUtils.removeHTMLOptions(Array.from(this._$options.values()), optionsValues);
241
238
  }
242
239
  _selectOption(value) {
243
240
  const option = this._selectController.getOption(value);
@@ -265,16 +262,22 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
265
262
  replace(options) {
266
263
  this._selectController.replace(options);
267
264
  }
265
+ getOption(value) {
266
+ return this._selectController.getOption(value);
267
+ }
268
+ select(option) {
269
+ this._selectController.select(option);
270
+ }
268
271
  disconnectedCallback() {
269
272
  super.disconnectedCallback();
270
273
  this._selectController.options$.unsubscribe(this._optionsObserver);
271
- this._$options = {};
274
+ this._$options.clear();
272
275
  }
273
276
  _getClonedPlaceholderElement() {
274
277
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
275
278
  }
276
279
  _searchNoResult() {
277
- return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
280
+ return Boolean(!this._selectController.visibleOptionsCount && Array.from(this._$options.keys()).length);
278
281
  }
279
282
  _renderOption(option) {
280
283
  const fragment = document.createDocumentFragment();
@@ -301,10 +304,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
301
304
  ${ref(this._$dropdownContent)}
302
305
  name=${this.controlName}
303
306
  >
304
- <h-select-close-btn
305
- class="${SELECT_CSS_CLASSES.selectCloseMobileButton}"
306
- @close=${this._closeSelect}
307
- ></h-select-close-btn>
307
+ <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
308
308
 
309
309
  <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
310
310
 
@@ -317,16 +317,16 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
317
317
  ></h-select-search>`
318
318
  : nothing}
319
319
 
320
- <h-options
321
- class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
322
- ? SELECT_CSS_CLASSES.selectOptionsEmpty
323
- : ''}"
324
- ${ref(this._$optionsList)}
325
- @optionClicked=${this._handleOptionClicked}
326
- @optionUpdated=${this._handleOptionUpdated}
327
- >
328
- ${this._$options ? repeat(Object.values(this._$options), (option) => option.value, (option) => this._renderOption(option)) : nothing}
329
- </h-options>
320
+ <h-options
321
+ class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult() ? SELECT_CSS_CLASSES.selectOptionsEmpty : ''}"
322
+ ${ref(this._$optionsList)}
323
+ @optionClicked=${this._handleOptionClicked}
324
+ @optionUpdated=${this._handleOptionUpdated}
325
+ >
326
+ ${Array.from(this._$options.entries()).length > 0
327
+ ? repeat(Array.from(this._$options.values()), (option) => option.value, (option) => this._renderOption(option))
328
+ : nothing}
329
+ </h-options>
330
330
 
331
331
  ${this._searchNoResult()
332
332
  ? html ` <div>
package/build/esm/packages/phoenix/src/components/form/select/select_utils.d.ts CHANGED
@@ -4,7 +4,7 @@ import { HOptions } from "./components/select_options";
4
4
  export declare class SelectControlUtils {
5
5
  static createHTMLOption(option: SelectOption): HOption;
6
6
  static syncHTMLOptionWithModel(option: SelectOption, $option: HOption): void;
7
- static removeHTMLOptions($options: HOption[], optionsValuesThatExists: string[]): Record<string, HOption>;
7
+ static removeHTMLOptions($options: HOption[], optionsValuesThatExists: string[]): Map<string, HOption>;
8
8
  static appendHTMLOption($option: HOption, $list: HOptions, position?: number): void;
9
9
  static getFirstIndexSelectedOption(options: HOption[]): number;
10
10
  static getLastIndexOfSelectedOption(options: HOption[]): number;
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -26,13 +26,10 @@ class SelectControlUtils {
26
26
  static removeHTMLOptions($options, optionsValuesThatExists) {
27
27
  return $options.reduce((acc, $option) => {
28
28
  if (optionsValuesThatExists.includes($option.value))
29
- return {
30
- ...acc,
31
- [$option.value]: $option
32
- };
29
+ return acc.set($option.value, $option);
33
30
  $option.remove();
34
31
  return acc;
35
- }, {});
32
+ }, new Map());
36
33
  }
37
34
  static appendHTMLOption($option, $list, position) {
38
35
  if (position !== undefined) {
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.10.13",
5
+ "version": "1.11.0-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",