@shoper/phoenix_design_system 1.1.5 → 1.1.6-10

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 (36) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js +5 -6
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +13 -13
  4. package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +6 -6
  5. package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js +2 -2
  6. package/build/cjs/packages/phoenix/src/components/form/select/select.js +73 -23
  7. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  8. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +5 -0
  9. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  10. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js +6 -0
  11. package/build/cjs/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  12. package/build/cjs/packages/phoenix/src/components/modal/modal.js +1 -1
  13. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts +2 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js +5 -6
  15. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.d.ts +10 -10
  17. package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +13 -13
  18. package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.d.ts +3 -3
  19. package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +6 -6
  20. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.d.ts +1 -1
  21. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controller.js +2 -2
  22. package/build/esm/packages/phoenix/src/components/form/select/controllers/select_controllers_types.d.ts +9 -9
  23. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +15 -3
  24. package/build/esm/packages/phoenix/src/components/form/select/select.js +74 -24
  25. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  26. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +4 -0
  27. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +5 -1
  28. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  29. package/build/esm/packages/phoenix/src/components/form/select/select_types.d.ts +2 -0
  30. package/build/esm/packages/phoenix/src/components/form/select/select_types.js +2 -0
  31. package/build/esm/packages/phoenix/src/components/form/select/select_types.js.map +1 -0
  32. package/build/esm/packages/phoenix/src/components/form/select/select_utils.d.ts +2 -0
  33. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js +6 -0
  34. package/build/esm/packages/phoenix/src/components/form/select/select_utils.js.map +1 -1
  35. package/build/esm/packages/phoenix/src/components/modal/modal.js +1 -1
  36. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js CHANGED
@@ -9,6 +9,7 @@ var decorators_js = require('@lit/reactive-element/decorators.js');
9
9
  var select_components_constatns = require('../select_components_constatns.js');
10
10
  var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
11
11
  var select_option_constants = require('./select_option_constants.js');
12
+ require('@lit/reactive-element');
12
13
 
13
14
  exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
14
15
  constructor() {
@@ -37,12 +38,10 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
37
38
  _setupEvents() {
38
39
  this.addEventListener('click', this._dispatchClickedEvent);
39
40
  }
40
- attributeChangedCallback(name, _old, value) {
41
- super.attributeChangedCallback(name, _old, value);
42
- switch (name) {
43
- case 'selected':
44
- this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
45
- }
41
+ update(changedProperties) {
42
+ super.update(changedProperties);
43
+ if (changedProperties.has('selected'))
44
+ this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
46
45
  }
47
46
  _addSelectedIcon() {
48
47
  this._$checkedIcon = document.createElement('h-icon');
package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/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
@@ -30,9 +30,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
30
30
  constructor() {
31
31
  var _a;
32
32
  super();
33
- this.multiselect = false;
33
+ this.multiple = false;
34
34
  this.opened = false;
35
35
  this.offset = 2;
36
+ this.type = select_constants.SELECT_TYPES.select;
36
37
  this._searchValue = '';
37
38
  this._$options = {};
38
39
  this._$dropdown = ref_js.createRef();
@@ -45,10 +46,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
45
46
  this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
46
47
  };
47
48
  this._handleOptionDeselect = (event) => {
48
- const selectedOption = this._selectController.getSelectOption(event.detail);
49
+ const selectedOption = this._selectController.getOption(event.detail);
49
50
  if (!selectedOption)
50
51
  return;
51
- this._selectController.deselectOption(selectedOption);
52
+ this._selectController.deselect(selectedOption);
52
53
  };
53
54
  this._updateOptionsView = (options) => {
54
55
  if (options.length < Object.keys(this._$options).length)
@@ -63,16 +64,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
63
64
  select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
64
65
  if (!selected)
65
66
  return;
66
- $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
67
+ $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
67
68
  });
68
69
  };
69
70
  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();
71
+ this._selectOption(event.detail.$option.value);
76
72
  };
77
73
  this._handleDropdownHidden = () => {
78
74
  this._searchValue = '';
@@ -85,7 +81,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
85
81
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
86
82
  };
87
83
  this._clearOptions = () => {
88
- this._selectController.deselectOptions();
84
+ this._selectController.deselectAll();
89
85
  };
90
86
  this._handleResize = debounce['default'](() => {
91
87
  this._closeSelect();
@@ -94,6 +90,39 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
94
90
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
95
91
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
96
92
  this.$placeholder = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
93
+ if (this.multiple)
94
+ this.type = select_constants.SELECT_TYPES.multiple;
95
+ }
96
+ get selectedIndex() {
97
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
98
+ if (!selectedOptions || selectedOptions.length === 0)
99
+ return -1;
100
+ const htmlOptions = Object.values(this._$options);
101
+ return this.multiple
102
+ ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
103
+ : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
104
+ }
105
+ set selectedIndex(index) {
106
+ const option = Object.values(this._$options)[index];
107
+ if (!option) {
108
+ this._selectController.deselectAll();
109
+ return;
110
+ }
111
+ this._selectOption(option.value);
112
+ }
113
+ get selectedOptions() {
114
+ var _a;
115
+ const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
116
+ return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
117
+ }
118
+ get name() {
119
+ return this.controlName;
120
+ }
121
+ get id() {
122
+ return this.controlId;
123
+ }
124
+ get options() {
125
+ return Object.values(this._$options);
97
126
  }
98
127
  updated(changedProperties) {
99
128
  super.updated(changedProperties);
@@ -120,9 +149,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
120
149
  connectedCallback() {
121
150
  super.connectedCallback();
122
151
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
123
- this._selectController = this.multiselect ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
152
+ this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
124
153
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
125
- this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiselect);
154
+ this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
126
155
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
127
156
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
128
157
  this._selectController.options$.subscribe(this._optionsObserver);
@@ -166,29 +195,38 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
166
195
  const { value, selected } = option;
167
196
  const $option = select_utils.SelectControlUtils.createHTMLOption(option);
168
197
  if (selected)
169
- $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
198
+ $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
170
199
  this._$options[value] = $option;
171
200
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
172
201
  }
173
202
  _removeHTMLOptions(optionsValues) {
174
203
  this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
175
204
  }
205
+ _selectOption(value) {
206
+ const option = this._selectController.getOption(value);
207
+ if (!option)
208
+ return;
209
+ this._selectController.toggle(option);
210
+ if (!this.multiple)
211
+ this._closeSelect();
212
+ this.dispatchEvent(new Event('change'));
213
+ }
176
214
  _handleSearch({ detail }) {
177
215
  this._searchValue = detail;
178
216
  }
179
217
  update(changedProperties) {
180
218
  super.update(changedProperties);
181
219
  if (changedProperties.has('_searchValue'))
182
- this._selectController.filterOptions(this._searchValue);
220
+ this._selectController.filter(this._searchValue);
183
221
  }
184
- addOption(option, position) {
185
- this._selectController.addOption(option, position);
222
+ add(option, position) {
223
+ this._selectController.add(option, position);
186
224
  }
187
225
  removeOption(optionValue) {
188
- this._selectController.removeOption(optionValue);
226
+ this._selectController.remove(optionValue);
189
227
  }
190
- replaceOptions(options) {
191
- this._selectController.replaceOptions(options);
228
+ replace(options) {
229
+ this._selectController.replace(options);
192
230
  }
193
231
  disconnectedCallback() {
194
232
  super.disconnectedCallback();
@@ -257,7 +295,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
257
295
  </p>
258
296
  </div>`
259
297
  : lit.nothing}
260
- ${this.multiselect && this._selectController.selectedOptionsCount >= 1
298
+ ${this.multiple && this._selectController.selectedOptionsCount >= 1
261
299
  ? lit.html `
262
300
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
263
301
  <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
@@ -281,13 +319,17 @@ exports.HSelect._components = {
281
319
  toggler: select_toggler.HSelectToggler
282
320
  };
283
321
  tslib_es6.__decorate([
284
- decorators_js.property({ type: String }),
322
+ decorators_js.property({ type: String, attribute: 'control-name' }),
285
323
  tslib_es6.__metadata("design:type", String)
286
324
  ], exports.HSelect.prototype, "controlName", void 0);
325
+ tslib_es6.__decorate([
326
+ decorators_js.property({ type: String, attribute: 'control-id' }),
327
+ tslib_es6.__metadata("design:type", String)
328
+ ], exports.HSelect.prototype, "controlId", void 0);
287
329
  tslib_es6.__decorate([
288
330
  decorators_js.property({ type: Boolean }),
289
331
  tslib_es6.__metadata("design:type", Boolean)
290
- ], exports.HSelect.prototype, "multiselect", void 0);
332
+ ], exports.HSelect.prototype, "multiple", void 0);
291
333
  tslib_es6.__decorate([
292
334
  decorators_js.property({ type: Boolean }),
293
335
  tslib_es6.__metadata("design:type", Boolean)
@@ -304,6 +346,14 @@ tslib_es6.__decorate([
304
346
  decorators_js.property({ type: Boolean }),
305
347
  tslib_es6.__metadata("design:type", Boolean)
306
348
  ], exports.HSelect.prototype, "disabled", void 0);
349
+ tslib_es6.__decorate([
350
+ decorators_js.property({ type: String }),
351
+ tslib_es6.__metadata("design:type", String)
352
+ ], exports.HSelect.prototype, "type", void 0);
353
+ tslib_es6.__decorate([
354
+ decorators_js.property({ type: Boolean }),
355
+ tslib_es6.__metadata("design:type", Boolean)
356
+ ], exports.HSelect.prototype, "required", void 0);
307
357
  tslib_es6.__decorate([
308
358
  decorators.state(),
309
359
  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;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_constants.js CHANGED
@@ -10,6 +10,10 @@ const SELECT_SLOT_NAMES = {
10
10
  content: 'content',
11
11
  toggler: 'toggler'
12
12
  };
13
+ const SELECT_TYPES = {
14
+ select: 'select-one',
15
+ multiple: 'select-multiple'
16
+ };
13
17
  const SELECT_EVENT_NAMES = {
14
18
  selectOption: 'selectOption.select',
15
19
  deselectOption: 'selectOption.deselect'
@@ -42,4 +46,5 @@ exports.SELECT_CSS_CLASSES = SELECT_CSS_CLASSES;
42
46
  exports.SELECT_EVENT_NAMES = SELECT_EVENT_NAMES;
43
47
  exports.SELECT_RESIZE_DEBOUNCE_TIME = SELECT_RESIZE_DEBOUNCE_TIME;
44
48
  exports.SELECT_SLOT_NAMES = SELECT_SLOT_NAMES;
49
+ exports.SELECT_TYPES = SELECT_TYPES;
45
50
  //# sourceMappingURL=select_constants.js.map
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.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;"}
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;"}
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/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -6,11 +6,11 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
7
7
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
8
8
  var decorators_js = require('@lit/reactive-element/decorators.js');
9
+ require('@lit/reactive-element');
9
10
  var litHtml = require('lit-html');
10
11
  var ref_js = require('lit-html/directives/ref.js');
11
12
  var portal_constants = require('../portal/portal_constants.js');
12
13
  var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
13
- require('@lit/reactive-element');
14
14
  var modal_constants = require('./modal_constants.js');
15
15
 
16
16
  var HModal_1;
package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
+ import { PropertyValues } from '@lit/reactive-element';
2
3
  export declare class HOption extends PhoenixLightLitElement {
3
4
  value: string;
4
5
  selected: boolean;
@@ -9,7 +10,7 @@ export declare class HOption extends PhoenixLightLitElement {
9
10
  connectedCallback(): void;
10
11
  private _setupEvents;
11
12
  private _dispatchClickedEvent;
12
- attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
13
+ update(changedProperties: PropertyValues): void;
13
14
  private _addSelectedIcon;
14
15
  private _removeSelectedIcon;
15
16
  }
package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js CHANGED
@@ -5,6 +5,7 @@ import { property } from '@lit/reactive-element/decorators.js';
5
5
  import { SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
6
6
  import { BtnController } from '../../../../../controllers/btn_controller/btn_controller.js';
7
7
  import { SELECT_OPTION_CSS_CLASSES } from './select_option_constants.js';
8
+ import '@lit/reactive-element';
8
9
 
9
10
  let HOption = class HOption extends PhoenixLightLitElement {
10
11
  constructor() {
@@ -33,12 +34,10 @@ let HOption = class HOption extends PhoenixLightLitElement {
33
34
  _setupEvents() {
34
35
  this.addEventListener('click', this._dispatchClickedEvent);
35
36
  }
36
- attributeChangedCallback(name, _old, value) {
37
- super.attributeChangedCallback(name, _old, value);
38
- switch (name) {
39
- case 'selected':
40
- this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
41
- }
37
+ update(changedProperties) {
38
+ super.update(changedProperties);
39
+ if (changedProperties.has('selected'))
40
+ this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
42
41
  }
43
42
  _addSelectedIcon() {
44
43
  this._$checkedIcon = document.createElement('h-icon');
package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;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;"}
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,25 @@
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";
5
+ import type { TSelectType } from "./select_types";
4
6
  export declare class HSelect extends PhoenixLightLitElement {
5
7
  private static _components;
6
8
  controlName: string;
7
- multiselect: boolean;
9
+ controlId: string;
10
+ multiple: boolean;
8
11
  opened: boolean;
9
12
  offset: number;
10
13
  error: boolean;
11
14
  disabled: boolean;
15
+ type: TSelectType;
16
+ required: boolean;
17
+ get selectedIndex(): number;
18
+ set selectedIndex(index: number);
19
+ get selectedOptions(): HOption[];
20
+ get name(): string;
21
+ get id(): string;
22
+ get options(): HOption[];
12
23
  private _searchValue;
13
24
  private _selectController;
14
25
  private _$options;
@@ -33,14 +44,15 @@ export declare class HSelect extends PhoenixLightLitElement {
33
44
  private _appendNewHTMLOption;
34
45
  private _removeHTMLOptions;
35
46
  private _handleOptionClicked;
47
+ private _selectOption;
36
48
  private _handleSearch;
37
49
  private _handleDropdownHidden;
38
50
  private _closeSelect;
39
51
  private _clearOptions;
40
52
  protected update(changedProperties: PropertyValues): void;
41
- addOption(option: SelectOption, position?: number): void;
53
+ add(option: SelectOption, position?: number): void;
42
54
  removeOption(optionValue: string): void;
43
- replaceOptions(options: SelectOption[]): void;
55
+ replace(options: SelectOption[]): void;
44
56
  disconnectedCallback(): void;
45
57
  private _handleResize;
46
58
  private _getDropdownContentWidth;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -7,7 +7,7 @@ import { property } from '@lit/reactive-element/decorators.js';
7
7
  import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME } from './components/select_components_constatns.js';
8
8
  import { Observer } from '../../../core/classes/observer/observer.js';
9
9
  import { HIcon } from '../../icon/icon.js';
10
- import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
10
+ import { SELECT_TYPES, SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
11
11
  import { observe } from '../../../directives/observable_directive.js';
12
12
  import { HSelectToggler } from './components/toggler/select_toggler.js';
13
13
  import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
@@ -26,9 +26,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
26
26
  constructor() {
27
27
  var _a;
28
28
  super();
29
- this.multiselect = false;
29
+ this.multiple = false;
30
30
  this.opened = false;
31
31
  this.offset = 2;
32
+ this.type = SELECT_TYPES.select;
32
33
  this._searchValue = '';
33
34
  this._$options = {};
34
35
  this._$dropdown = createRef();
@@ -41,10 +42,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
41
42
  this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
42
43
  };
43
44
  this._handleOptionDeselect = (event) => {
44
- const selectedOption = this._selectController.getSelectOption(event.detail);
45
+ const selectedOption = this._selectController.getOption(event.detail);
45
46
  if (!selectedOption)
46
47
  return;
47
- this._selectController.deselectOption(selectedOption);
48
+ this._selectController.deselect(selectedOption);
48
49
  };
49
50
  this._updateOptionsView = (options) => {
50
51
  if (options.length < Object.keys(this._$options).length)
@@ -59,16 +60,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
59
60
  SelectControlUtils.syncHTMLOptionWithModel(option, $option);
60
61
  if (!selected)
61
62
  return;
62
- $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
63
+ $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
63
64
  });
64
65
  };
65
66
  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();
67
+ this._selectOption(event.detail.$option.value);
72
68
  };
73
69
  this._handleDropdownHidden = () => {
74
70
  this._searchValue = '';
@@ -81,7 +77,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
81
77
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
82
78
  };
83
79
  this._clearOptions = () => {
84
- this._selectController.deselectOptions();
80
+ this._selectController.deselectAll();
85
81
  };
86
82
  this._handleResize = debounce_1(() => {
87
83
  this._closeSelect();
@@ -90,6 +86,39 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
90
86
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
91
87
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
92
88
  this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
89
+ if (this.multiple)
90
+ this.type = SELECT_TYPES.multiple;
91
+ }
92
+ get selectedIndex() {
93
+ const selectedOptions = this._selectController.selectedOptions$.getValue();
94
+ if (!selectedOptions || selectedOptions.length === 0)
95
+ return -1;
96
+ const htmlOptions = Object.values(this._$options);
97
+ return this.multiple
98
+ ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
99
+ : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
100
+ }
101
+ set selectedIndex(index) {
102
+ const option = Object.values(this._$options)[index];
103
+ if (!option) {
104
+ this._selectController.deselectAll();
105
+ return;
106
+ }
107
+ this._selectOption(option.value);
108
+ }
109
+ get selectedOptions() {
110
+ var _a;
111
+ const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
112
+ return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
113
+ }
114
+ get name() {
115
+ return this.controlName;
116
+ }
117
+ get id() {
118
+ return this.controlId;
119
+ }
120
+ get options() {
121
+ return Object.values(this._$options);
93
122
  }
94
123
  updated(changedProperties) {
95
124
  super.updated(changedProperties);
@@ -116,9 +145,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
116
145
  connectedCallback() {
117
146
  super.connectedCallback();
118
147
  this.classList.add(SELECT_CSS_CLASSES.select);
119
- this._selectController = this.multiselect ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
148
+ this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
120
149
  this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
121
- this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
150
+ this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
122
151
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
123
152
  this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
124
153
  this._selectController.options$.subscribe(this._optionsObserver);
@@ -162,29 +191,38 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
162
191
  const { value, selected } = option;
163
192
  const $option = SelectControlUtils.createHTMLOption(option);
164
193
  if (selected)
165
- $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
194
+ $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
166
195
  this._$options[value] = $option;
167
196
  SelectControlUtils.appendHTMLOption($option, $list, position);
168
197
  }
169
198
  _removeHTMLOptions(optionsValues) {
170
199
  this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
171
200
  }
201
+ _selectOption(value) {
202
+ const option = this._selectController.getOption(value);
203
+ if (!option)
204
+ return;
205
+ this._selectController.toggle(option);
206
+ if (!this.multiple)
207
+ this._closeSelect();
208
+ this.dispatchEvent(new Event('change'));
209
+ }
172
210
  _handleSearch({ detail }) {
173
211
  this._searchValue = detail;
174
212
  }
175
213
  update(changedProperties) {
176
214
  super.update(changedProperties);
177
215
  if (changedProperties.has('_searchValue'))
178
- this._selectController.filterOptions(this._searchValue);
216
+ this._selectController.filter(this._searchValue);
179
217
  }
180
- addOption(option, position) {
181
- this._selectController.addOption(option, position);
218
+ add(option, position) {
219
+ this._selectController.add(option, position);
182
220
  }
183
221
  removeOption(optionValue) {
184
- this._selectController.removeOption(optionValue);
222
+ this._selectController.remove(optionValue);
185
223
  }
186
- replaceOptions(options) {
187
- this._selectController.replaceOptions(options);
224
+ replace(options) {
225
+ this._selectController.replace(options);
188
226
  }
189
227
  disconnectedCallback() {
190
228
  super.disconnectedCallback();
@@ -253,7 +291,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
253
291
  </p>
254
292
  </div>`
255
293
  : nothing}
256
- ${this.multiselect && this._selectController.selectedOptionsCount >= 1
294
+ ${this.multiple && this._selectController.selectedOptionsCount >= 1
257
295
  ? html `
258
296
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
259
297
  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
@@ -277,13 +315,17 @@ HSelect._components = {
277
315
  toggler: HSelectToggler
278
316
  };
279
317
  __decorate([
280
- property({ type: String }),
318
+ property({ type: String, attribute: 'control-name' }),
281
319
  __metadata("design:type", String)
282
320
  ], HSelect.prototype, "controlName", void 0);
321
+ __decorate([
322
+ property({ type: String, attribute: 'control-id' }),
323
+ __metadata("design:type", String)
324
+ ], HSelect.prototype, "controlId", void 0);
283
325
  __decorate([
284
326
  property({ type: Boolean }),
285
327
  __metadata("design:type", Boolean)
286
- ], HSelect.prototype, "multiselect", void 0);
328
+ ], HSelect.prototype, "multiple", void 0);
287
329
  __decorate([
288
330
  property({ type: Boolean }),
289
331
  __metadata("design:type", Boolean)
@@ -300,6 +342,14 @@ __decorate([
300
342
  property({ type: Boolean }),
301
343
  __metadata("design:type", Boolean)
302
344
  ], HSelect.prototype, "disabled", void 0);
345
+ __decorate([
346
+ property({ type: String }),
347
+ __metadata("design:type", String)
348
+ ], HSelect.prototype, "type", void 0);
349
+ __decorate([
350
+ property({ type: Boolean }),
351
+ __metadata("design:type", Boolean)
352
+ ], HSelect.prototype, "required", void 0);
303
353
  __decorate([
304
354
  state(),
305
355
  __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;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_constants.d.ts CHANGED
@@ -6,6 +6,10 @@ export declare const SELECT_SLOT_NAMES: {
6
6
  readonly content: "content";
7
7
  readonly toggler: "toggler";
8
8
  };
9
+ export declare const SELECT_TYPES: {
10
+ readonly select: "select-one";
11
+ readonly multiple: "select-multiple";
12
+ };
9
13
  export declare const SELECT_EVENT_NAMES: {
10
14
  readonly selectOption: "selectOption.select";
11
15
  readonly deselectOption: "selectOption.deselect";
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -6,6 +6,10 @@ const SELECT_SLOT_NAMES = {
6
6
  content: 'content',
7
7
  toggler: 'toggler'
8
8
  };
9
+ const SELECT_TYPES = {
10
+ select: 'select-one',
11
+ multiple: 'select-multiple'
12
+ };
9
13
  const SELECT_EVENT_NAMES = {
10
14
  selectOption: 'selectOption.select',
11
15
  deselectOption: 'selectOption.deselect'
@@ -32,5 +36,5 @@ const SELECT_CSS_CLASSES = {
32
36
  selectLabel: `${baseSelectClass}__label`
33
37
  };
34
38
 
35
- export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
39
+ export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES, SELECT_TYPES };
36
40
  //# sourceMappingURL=select_constants.js.map
package/build/esm/packages/phoenix/src/components/form/select/select_constants.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/select_types.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { SELECT_TYPES } from "./select_constants";
2
+ export declare type TSelectType = typeof SELECT_TYPES[keyof typeof SELECT_TYPES];
package/build/esm/packages/phoenix/src/components/form/select/select_types.js ADDED
@@ -0,0 +1,2 @@
1
+ import '@phoenixRoot/components/form/select/select_constants';
2
+ //# sourceMappingURL=select_types.js.map
package/build/esm/packages/phoenix/src/components/form/select/select_types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/select/select_types.ts"],"names":[],"mappings":"AAAA,OAA6B,sDAAsD,CAAC"}
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/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -2,11 +2,11 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
2
2
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
3
3
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
4
4
  import { property, state } from '@lit/reactive-element/decorators.js';
5
+ import '@lit/reactive-element';
5
6
  import { html } from 'lit-html';
6
7
  import { createRef, ref } from 'lit-html/directives/ref.js';
7
8
  import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
8
9
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
9
- import '@lit/reactive-element';
10
10
  import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
11
11
 
12
12
  var HModal_1;
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-10",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",