@shoper/phoenix_design_system 1.1.5 → 1.1.6-1

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 (21) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +13 -13
  2. package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +6 -6
  3. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js +2 -2
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js +47 -16
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +6 -0
  7. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.d.ts +10 -10
  9. package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +13 -13
  10. package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.d.ts +3 -3
  11. package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +6 -6
  12. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.d.ts +1 -1
  13. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.js +2 -2
  14. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controllers_types.d.ts +9 -9
  15. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +9 -2
  16. package/build/esm/packages/phoenix/src/components/form/select/select.js +47 -16
  17. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/select/select_utils.d.ts +2 -0
  19. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +6 -0
  20. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  21. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js CHANGED
@@ -29,16 +29,16 @@ class BaseSelectController {
29
29
  this._optionsObserver = new observer.Observer(this._calculateValuesRelatedToOptions);
30
30
  this.options$.subscribe(this._optionsObserver);
31
31
  }
32
- toggleOption(option) {
33
- option.selected ? this.deselectOption(option) : this.selectOption(option);
32
+ toggle(option) {
33
+ option.selected ? this.deselect(option) : this.select(option);
34
34
  }
35
- removeOption(optionValue) {
35
+ remove(optionValue) {
36
36
  const options = this.options$.getValue();
37
37
  if (!options)
38
38
  return;
39
39
  this.options$.notify(options.filter((option) => option.value !== optionValue));
40
40
  }
41
- addOption(option, position) {
41
+ add(option, position) {
42
42
  var _a;
43
43
  const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
44
44
  if (position === undefined) {
@@ -48,22 +48,22 @@ class BaseSelectController {
48
48
  }
49
49
  this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
50
50
  }
51
- replaceOptions(options) {
51
+ replace(options) {
52
52
  this.options$.notify(options);
53
53
  }
54
- deselectOptions() {
54
+ deselectAll() {
55
55
  var _a;
56
56
  (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
57
57
  this.selectedOptions$.notify([]);
58
- this.requestOptionsUpdate();
58
+ this.requestUpdate();
59
59
  }
60
- deselectOption(option) {
60
+ deselect(option) {
61
61
  var _a;
62
62
  (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
63
63
  this.selectedOptions$.notify([]);
64
- this.requestOptionsUpdate();
64
+ this.requestUpdate();
65
65
  }
66
- filterOptions(value) {
66
+ filter(value) {
67
67
  const selectOptions = this.options$.getValue();
68
68
  if (!selectOptions)
69
69
  return;
@@ -72,16 +72,16 @@ class BaseSelectController {
72
72
  filtered.forEach((option) => {
73
73
  option.hidden = false;
74
74
  });
75
- this.requestOptionsUpdate();
75
+ this.requestUpdate();
76
76
  }
77
- requestOptionsUpdate() {
77
+ requestUpdate() {
78
78
  const selectOptions = this.options$.getValue();
79
79
  if (!selectOptions)
80
80
  return;
81
81
  this.options$.notify([...selectOptions]);
82
82
  this.host.requestUpdate();
83
83
  }
84
- getSelectOption(selectValue) {
84
+ getOption(selectValue) {
85
85
  var _a;
86
86
  return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
87
87
  }
package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js CHANGED
@@ -5,18 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var base_select_controller = require('./base_select_controller.js');
6
6
 
7
7
  class MultiSelectController extends base_select_controller.BaseSelectController {
8
- toggleOption(option) {
9
- option.selected ? this.deselectOption(option) : this.selectOption(option);
8
+ toggle(option) {
9
+ option.selected ? this.deselect(option) : this.select(option);
10
10
  }
11
- selectOption(option) {
11
+ select(option) {
12
12
  option.selected = true;
13
13
  this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
14
- this.requestOptionsUpdate();
14
+ this.requestUpdate();
15
15
  }
16
- deselectOption(option) {
16
+ deselect(option) {
17
17
  option.selected = false;
18
18
  this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
19
- this.requestOptionsUpdate();
19
+ this.requestUpdate();
20
20
  }
21
21
  }
22
22
 
package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js CHANGED
@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var base_select_controller = require('./base_select_controller.js');
6
6
 
7
7
  class SelectController extends base_select_controller.BaseSelectController {
8
- selectOption(option) {
8
+ select(option) {
9
9
  var _a;
10
10
  const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
11
11
  selectedOptions.forEach((option) => (option.selected = false));
12
12
  option.selected = true;
13
13
  this.selectedOptions$.notify([option]);
14
- this.requestOptionsUpdate();
14
+ this.requestUpdate();
15
15
  }
16
16
  }
17
17
 
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -45,10 +45,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
45
45
  this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
46
46
  };
47
47
  this._handleOptionDeselect = (event) => {
48
- const selectedOption = this._selectController.getSelectOption(event.detail);
48
+ const selectedOption = this._selectController.getOption(event.detail);
49
49
  if (!selectedOption)
50
50
  return;
51
- this._selectController.deselectOption(selectedOption);
51
+ this._selectController.deselect(selectedOption);
52
52
  };
53
53
  this._updateOptionsView = (options) => {
54
54
  if (options.length < Object.keys(this._$options).length)
@@ -67,12 +67,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
67
67
  });
68
68
  };
69
69
  this._handleOptionClicked = (event) => {
70
- const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
71
- if (!selectedOption)
72
- return;
73
- this._selectController.toggleOption(selectedOption);
74
- if (!this.multiselect)
75
- this._closeSelect();
70
+ this._selectOption(event.detail.$option.value);
76
71
  };
77
72
  this._handleDropdownHidden = () => {
78
73
  this._searchValue = '';
@@ -85,7 +80,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
85
80
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
86
81
  };
87
82
  this._clearOptions = () => {
88
- this._selectController.deselectOptions();
83
+ this._selectController.deselectAll();
89
84
  };
90
85
  this._handleResize = debounce['default'](() => {
91
86
  this._closeSelect();
@@ -95,6 +90,26 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
95
90
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
96
91
  this.$placeholder = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
97
92
  }
93
+ get selectedIndex() {
94
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
95
+ if (!selectedOptions || selectedOptions.length === 0)
96
+ return -1;
97
+ const htmlOptions = Object.values(this._$options);
98
+ return this.multiselect
99
+ ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
100
+ : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
101
+ }
102
+ set selectedIndex(index) {
103
+ const option = Object.values(this._$options)[index];
104
+ if (!option) {
105
+ this._selectController.deselectAll();
106
+ return;
107
+ }
108
+ this._selectOption(option.value);
109
+ }
110
+ get selectedOptions() {
111
+ return Object.values(this._$options).filter((option) => option.selected);
112
+ }
98
113
  updated(changedProperties) {
99
114
  super.updated(changedProperties);
100
115
  if (changedProperties.has('opened')) {
@@ -173,22 +188,30 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
173
188
  _removeHTMLOptions(optionsValues) {
174
189
  this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
175
190
  }
191
+ _selectOption(value) {
192
+ const option = this._selectController.getOption(value);
193
+ if (!option)
194
+ return;
195
+ this._selectController.toggle(option);
196
+ if (!this.multiselect)
197
+ this._closeSelect();
198
+ }
176
199
  _handleSearch({ detail }) {
177
200
  this._searchValue = detail;
178
201
  }
179
202
  update(changedProperties) {
180
203
  super.update(changedProperties);
181
204
  if (changedProperties.has('_searchValue'))
182
- this._selectController.filterOptions(this._searchValue);
205
+ this._selectController.filter(this._searchValue);
183
206
  }
184
- addOption(option, position) {
185
- this._selectController.addOption(option, position);
207
+ add(option, position) {
208
+ this._selectController.add(option, position);
186
209
  }
187
210
  removeOption(optionValue) {
188
- this._selectController.removeOption(optionValue);
211
+ this._selectController.remove(optionValue);
189
212
  }
190
- replaceOptions(options) {
191
- this._selectController.replaceOptions(options);
213
+ replace(options) {
214
+ this._selectController.replace(options);
192
215
  }
193
216
  disconnectedCallback() {
194
217
  super.disconnectedCallback();
@@ -281,9 +304,13 @@ exports.HSelect._components = {
281
304
  toggler: select_toggler.HSelectToggler
282
305
  };
283
306
  tslib_es6.__decorate([
284
- decorators_js.property({ type: String }),
307
+ decorators_js.property({ type: String, attribute: 'control-name' }),
285
308
  tslib_es6.__metadata("design:type", String)
286
309
  ], exports.HSelect.prototype, "controlName", void 0);
310
+ tslib_es6.__decorate([
311
+ decorators_js.property({ type: String, attribute: 'control-id' }),
312
+ tslib_es6.__metadata("design:type", String)
313
+ ], exports.HSelect.prototype, "controlId", void 0);
287
314
  tslib_es6.__decorate([
288
315
  decorators_js.property({ type: Boolean }),
289
316
  tslib_es6.__metadata("design:type", Boolean)
@@ -304,6 +331,10 @@ tslib_es6.__decorate([
304
331
  decorators_js.property({ type: Boolean }),
305
332
  tslib_es6.__metadata("design:type", Boolean)
306
333
  ], exports.HSelect.prototype, "disabled", void 0);
334
+ tslib_es6.__decorate([
335
+ decorators_js.property({ type: Boolean }),
336
+ tslib_es6.__metadata("design:type", Boolean)
337
+ ], exports.HSelect.prototype, "required", void 0);
307
338
  tslib_es6.__decorate([
308
339
  decorators.state(),
309
340
  tslib_es6.__metadata("design:type", String)
package/build/cjs/packages/phoenix/src/components/form/select/select.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;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/select_utils.js CHANGED
@@ -46,6 +46,12 @@ class SelectControlUtils {
46
46
  }
47
47
  $list.append($option);
48
48
  }
49
+ static getFirstIndexSelectedOption(options) {
50
+ return options.findIndex((option) => option.selected);
51
+ }
52
+ static getLastIndexOfSelectedOption(options) {
53
+ return [...options].reverse().findIndex((option) => option.selected);
54
+ }
49
55
  }
50
56
 
51
57
  exports.SelectControlUtils = SelectControlUtils;
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.d.ts CHANGED
@@ -13,15 +13,15 @@ export declare abstract class BaseSelectController implements ISelectController,
13
13
  constructor({ host }: SelectControllerConstructorOptions);
14
14
  private _setupComputedStateObserver;
15
15
  private _calculateValuesRelatedToOptions;
16
- toggleOption(option: SelectOption): void;
17
- abstract selectOption(option: SelectOption): void;
18
- removeOption(optionValue: string): void;
19
- addOption(option: SelectOption, position?: number): void;
20
- replaceOptions(options: SelectOption[]): void;
21
- deselectOptions(): void;
22
- deselectOption(option: SelectOption): void;
23
- filterOptions(value: string): void;
24
- protected requestOptionsUpdate(): void;
25
- getSelectOption(selectValue: string): SelectOption | undefined;
16
+ toggle(option: SelectOption): void;
17
+ abstract select(option: SelectOption): void;
18
+ remove(optionValue: string): void;
19
+ add(option: SelectOption, position?: number): void;
20
+ replace(options: SelectOption[]): void;
21
+ deselectAll(): void;
22
+ deselect(option: SelectOption): void;
23
+ filter(value: string): void;
24
+ protected requestUpdate(): void;
25
+ getOption(selectValue: string): SelectOption | undefined;
26
26
  hostConnected(): void;
27
27
  }
package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js CHANGED
@@ -25,16 +25,16 @@ class BaseSelectController {
25
25
  this._optionsObserver = new Observer(this._calculateValuesRelatedToOptions);
26
26
  this.options$.subscribe(this._optionsObserver);
27
27
  }
28
- toggleOption(option) {
29
- option.selected ? this.deselectOption(option) : this.selectOption(option);
28
+ toggle(option) {
29
+ option.selected ? this.deselect(option) : this.select(option);
30
30
  }
31
- removeOption(optionValue) {
31
+ remove(optionValue) {
32
32
  const options = this.options$.getValue();
33
33
  if (!options)
34
34
  return;
35
35
  this.options$.notify(options.filter((option) => option.value !== optionValue));
36
36
  }
37
- addOption(option, position) {
37
+ add(option, position) {
38
38
  var _a;
39
39
  const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
40
40
  if (position === undefined) {
@@ -44,22 +44,22 @@ class BaseSelectController {
44
44
  }
45
45
  this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
46
46
  }
47
- replaceOptions(options) {
47
+ replace(options) {
48
48
  this.options$.notify(options);
49
49
  }
50
- deselectOptions() {
50
+ deselectAll() {
51
51
  var _a;
52
52
  (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
53
53
  this.selectedOptions$.notify([]);
54
- this.requestOptionsUpdate();
54
+ this.requestUpdate();
55
55
  }
56
- deselectOption(option) {
56
+ deselect(option) {
57
57
  var _a;
58
58
  (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
59
59
  this.selectedOptions$.notify([]);
60
- this.requestOptionsUpdate();
60
+ this.requestUpdate();
61
61
  }
62
- filterOptions(value) {
62
+ filter(value) {
63
63
  const selectOptions = this.options$.getValue();
64
64
  if (!selectOptions)
65
65
  return;
@@ -68,16 +68,16 @@ class BaseSelectController {
68
68
  filtered.forEach((option) => {
69
69
  option.hidden = false;
70
70
  });
71
- this.requestOptionsUpdate();
71
+ this.requestUpdate();
72
72
  }
73
- requestOptionsUpdate() {
73
+ requestUpdate() {
74
74
  const selectOptions = this.options$.getValue();
75
75
  if (!selectOptions)
76
76
  return;
77
77
  this.options$.notify([...selectOptions]);
78
78
  this.host.requestUpdate();
79
79
  }
80
- getSelectOption(selectValue) {
80
+ getOption(selectValue) {
81
81
  var _a;
82
82
  return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
83
83
  }
package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SelectOption } from "../model/select_option";
2
2
  import { BaseSelectController } from "./base_select_controller";
3
3
  export declare class MultiSelectController extends BaseSelectController {
4
- toggleOption(option: SelectOption): void;
5
- selectOption(option: SelectOption): void;
6
- deselectOption(option: SelectOption): void;
4
+ toggle(option: SelectOption): void;
5
+ select(option: SelectOption): void;
6
+ deselect(option: SelectOption): void;
7
7
  }
package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js CHANGED
@@ -1,18 +1,18 @@
1
1
  import { BaseSelectController } from './base_select_controller.js';
2
2
 
3
3
  class MultiSelectController extends BaseSelectController {
4
- toggleOption(option) {
5
- option.selected ? this.deselectOption(option) : this.selectOption(option);
4
+ toggle(option) {
5
+ option.selected ? this.deselect(option) : this.select(option);
6
6
  }
7
- selectOption(option) {
7
+ select(option) {
8
8
  option.selected = true;
9
9
  this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
10
- this.requestOptionsUpdate();
10
+ this.requestUpdate();
11
11
  }
12
- deselectOption(option) {
12
+ deselect(option) {
13
13
  option.selected = false;
14
14
  this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
15
- this.requestOptionsUpdate();
15
+ this.requestUpdate();
16
16
  }
17
17
  }
18
18
 
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SelectOption } from "../model/select_option";
2
2
  import { BaseSelectController } from "./base_select_controller";
3
3
  export declare class SelectController extends BaseSelectController {
4
- selectOption(option: SelectOption): void;
4
+ select(option: SelectOption): void;
5
5
  }
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { BaseSelectController } from './base_select_controller.js';
2
2
 
3
3
  class SelectController extends BaseSelectController {
4
- selectOption(option) {
4
+ select(option) {
5
5
  var _a;
6
6
  const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
7
7
  selectedOptions.forEach((option) => (option.selected = false));
8
8
  option.selected = true;
9
9
  this.selectedOptions$.notify([option]);
10
- this.requestOptionsUpdate();
10
+ this.requestUpdate();
11
11
  }
12
12
  }
13
13
 
package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controllers_types.d.ts CHANGED
@@ -10,13 +10,13 @@ export interface ISelectController {
10
10
  options$: BehaviorSubject<SelectOption[]>;
11
11
  visibleOptionsCount: number;
12
12
  selectedOptionsCount: number;
13
- deselectOptions(): void;
14
- deselectOption(option: SelectOption): void;
15
- filterOptions(value: string): void;
16
- toggleOption(option: SelectOption): void;
17
- selectOption(option: SelectOption): void;
18
- getSelectOption(selectValue: string): SelectOption | undefined;
19
- removeOption(optionValue: string): void;
20
- addOption(option: SelectOption, position?: number): void;
21
- replaceOptions(options: SelectOption[]): void;
13
+ deselectAll(): void;
14
+ deselect(option: SelectOption): void;
15
+ filter(value: string): void;
16
+ toggle(option: SelectOption): void;
17
+ select(option: SelectOption): void;
18
+ getOption(selectValue: string): SelectOption | undefined;
19
+ remove(optionValue: string): void;
20
+ add(option: SelectOption, position?: number): void;
21
+ replace(options: SelectOption[]): void;
22
22
  }
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -1,14 +1,20 @@
1
1
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ import { HOption } from "./components/option/select_option";
2
3
  import { TemplateResult, PropertyValues } from 'lit';
3
4
  import { SelectOption } from "./model/select_option";
4
5
  export declare class HSelect extends PhoenixLightLitElement {
5
6
  private static _components;
6
7
  controlName: string;
8
+ controlId: string;
7
9
  multiselect: boolean;
8
10
  opened: boolean;
9
11
  offset: number;
10
12
  error: boolean;
11
13
  disabled: boolean;
14
+ required: boolean;
15
+ get selectedIndex(): number;
16
+ set selectedIndex(index: number);
17
+ get selectedOptions(): HOption[];
12
18
  private _searchValue;
13
19
  private _selectController;
14
20
  private _$options;
@@ -33,14 +39,15 @@ export declare class HSelect extends PhoenixLightLitElement {
33
39
  private _appendNewHTMLOption;
34
40
  private _removeHTMLOptions;
35
41
  private _handleOptionClicked;
42
+ private _selectOption;
36
43
  private _handleSearch;
37
44
  private _handleDropdownHidden;
38
45
  private _closeSelect;
39
46
  private _clearOptions;
40
47
  protected update(changedProperties: PropertyValues): void;
41
- addOption(option: SelectOption, position?: number): void;
48
+ add(option: SelectOption, position?: number): void;
42
49
  removeOption(optionValue: string): void;
43
- replaceOptions(options: SelectOption[]): void;
50
+ replace(options: SelectOption[]): void;
44
51
  disconnectedCallback(): void;
45
52
  private _handleResize;
46
53
  private _getDropdownContentWidth;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -41,10 +41,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
41
41
  this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
42
42
  };
43
43
  this._handleOptionDeselect = (event) => {
44
- const selectedOption = this._selectController.getSelectOption(event.detail);
44
+ const selectedOption = this._selectController.getOption(event.detail);
45
45
  if (!selectedOption)
46
46
  return;
47
- this._selectController.deselectOption(selectedOption);
47
+ this._selectController.deselect(selectedOption);
48
48
  };
49
49
  this._updateOptionsView = (options) => {
50
50
  if (options.length < Object.keys(this._$options).length)
@@ -63,12 +63,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
63
63
  });
64
64
  };
65
65
  this._handleOptionClicked = (event) => {
66
- const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
67
- if (!selectedOption)
68
- return;
69
- this._selectController.toggleOption(selectedOption);
70
- if (!this.multiselect)
71
- this._closeSelect();
66
+ this._selectOption(event.detail.$option.value);
72
67
  };
73
68
  this._handleDropdownHidden = () => {
74
69
  this._searchValue = '';
@@ -81,7 +76,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
81
76
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
82
77
  };
83
78
  this._clearOptions = () => {
84
- this._selectController.deselectOptions();
79
+ this._selectController.deselectAll();
85
80
  };
86
81
  this._handleResize = debounce_1(() => {
87
82
  this._closeSelect();
@@ -91,6 +86,26 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
91
86
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
92
87
  this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
93
88
  }
89
+ get selectedIndex() {
90
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
91
+ if (!selectedOptions || selectedOptions.length === 0)
92
+ return -1;
93
+ const htmlOptions = Object.values(this._$options);
94
+ return this.multiselect
95
+ ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
96
+ : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
97
+ }
98
+ set selectedIndex(index) {
99
+ const option = Object.values(this._$options)[index];
100
+ if (!option) {
101
+ this._selectController.deselectAll();
102
+ return;
103
+ }
104
+ this._selectOption(option.value);
105
+ }
106
+ get selectedOptions() {
107
+ return Object.values(this._$options).filter((option) => option.selected);
108
+ }
94
109
  updated(changedProperties) {
95
110
  super.updated(changedProperties);
96
111
  if (changedProperties.has('opened')) {
@@ -169,22 +184,30 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
169
184
  _removeHTMLOptions(optionsValues) {
170
185
  this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
171
186
  }
187
+ _selectOption(value) {
188
+ const option = this._selectController.getOption(value);
189
+ if (!option)
190
+ return;
191
+ this._selectController.toggle(option);
192
+ if (!this.multiselect)
193
+ this._closeSelect();
194
+ }
172
195
  _handleSearch({ detail }) {
173
196
  this._searchValue = detail;
174
197
  }
175
198
  update(changedProperties) {
176
199
  super.update(changedProperties);
177
200
  if (changedProperties.has('_searchValue'))
178
- this._selectController.filterOptions(this._searchValue);
201
+ this._selectController.filter(this._searchValue);
179
202
  }
180
- addOption(option, position) {
181
- this._selectController.addOption(option, position);
203
+ add(option, position) {
204
+ this._selectController.add(option, position);
182
205
  }
183
206
  removeOption(optionValue) {
184
- this._selectController.removeOption(optionValue);
207
+ this._selectController.remove(optionValue);
185
208
  }
186
- replaceOptions(options) {
187
- this._selectController.replaceOptions(options);
209
+ replace(options) {
210
+ this._selectController.replace(options);
188
211
  }
189
212
  disconnectedCallback() {
190
213
  super.disconnectedCallback();
@@ -277,9 +300,13 @@ HSelect._components = {
277
300
  toggler: HSelectToggler
278
301
  };
279
302
  __decorate([
280
- property({ type: String }),
303
+ property({ type: String, attribute: 'control-name' }),
281
304
  __metadata("design:type", String)
282
305
  ], HSelect.prototype, "controlName", void 0);
306
+ __decorate([
307
+ property({ type: String, attribute: 'control-id' }),
308
+ __metadata("design:type", String)
309
+ ], HSelect.prototype, "controlId", void 0);
283
310
  __decorate([
284
311
  property({ type: Boolean }),
285
312
  __metadata("design:type", Boolean)
@@ -300,6 +327,10 @@ __decorate([
300
327
  property({ type: Boolean }),
301
328
  __metadata("design:type", Boolean)
302
329
  ], HSelect.prototype, "disabled", void 0);
330
+ __decorate([
331
+ property({ type: Boolean }),
332
+ __metadata("design:type", Boolean)
333
+ ], HSelect.prototype, "required", void 0);
303
334
  __decorate([
304
335
  state(),
305
336
  __metadata("design:type", String)
package/build/esm/packages/phoenix/src/components/form/select/select.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;AACA;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/select_utils.d.ts CHANGED
@@ -6,4 +6,6 @@ export declare class SelectControlUtils {
6
6
  static syncHTMLOptionWithModel(option: SelectOption, $option: HOption): void;
7
7
  static removeHTMLOptions($options: HOption[], optionsValuesThatExists: string[]): Record<string, HOption>;
8
8
  static appendHTMLOption($option: HOption, $list: HOptions, position?: number): void;
9
+ static getFirstIndexSelectedOption(options: HOption[]): number;
10
+ static getLastIndexOfSelectedOption(options: HOption[]): number;
9
11
  }
package/build/esm/packages/phoenix/src/components/form/select/select_utils.js CHANGED
@@ -42,6 +42,12 @@ class SelectControlUtils {
42
42
  }
43
43
  $list.append($option);
44
44
  }
45
+ static getFirstIndexSelectedOption(options) {
46
+ return options.findIndex((option) => option.selected);
47
+ }
48
+ static getLastIndexOfSelectedOption(options) {
49
+ return [...options].reverse().findIndex((option) => option.selected);
50
+ }
45
51
  }
46
52
 
47
53
  export { SelectControlUtils };
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;"}
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;"}
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.1.5",
5
+ "version": "1.1.6-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",