@shoper/phoenix_design_system 1.2.11-4 → 1.2.11-6

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 (22) hide show
  1. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +20 -2
  2. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js +24 -5
  4. package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js +2 -1
  6. package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select.js +9 -7
  8. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/index.js +5 -5
  10. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +4 -0
  11. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +21 -3
  12. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  13. package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.d.ts +6 -1
  14. package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js +25 -6
  15. package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js +2 -1
  17. package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +1 -0
  19. package/build/esm/packages/phoenix/src/components/form/select/select.js +9 -7
  20. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/index.js +1 -1
  22. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
+ var utilities = require('@dreamcommerce/utilities');
7
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
9
10
  var color_swatches_constants = require('./color_swatches_constants.js');
@@ -17,7 +18,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
17
18
  this.selectedColors = [];
18
19
  this._handleColorClicked = ({ target }) => {
19
20
  const $colorItem = target;
20
- this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
21
+ this._toggleColorItem($colorItem);
21
22
  };
22
23
  this._dispatchColorChangeEvent = () => {
23
24
  const detail = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
@@ -35,6 +36,19 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
35
36
  }));
36
37
  };
37
38
  }
39
+ selectColors($colors) {
40
+ const colorsArr = utilities.ArrayUtils.makeAsArray($colors);
41
+ if (!colorsArr.length) {
42
+ this.clearAllColors();
43
+ return;
44
+ }
45
+ colorsArr.forEach(($color) => this._toggleColorItem($color));
46
+ }
47
+ clearAllColors() {
48
+ [...this.selectedColors].forEach(($color) => {
49
+ this._toggleColorItem($color);
50
+ });
51
+ }
38
52
  connectedCallback() {
39
53
  super.connectedCallback();
40
54
  this._setupEvents();
@@ -42,6 +56,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
42
56
  this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
43
57
  this._showAllItemsEvent();
44
58
  this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
59
+ this._$colors = [...this.querySelectorAll('h-color-item')];
45
60
  }
46
61
  _addCssClasses() {
47
62
  this.querySelectorAll(color_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -66,6 +81,9 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
66
81
  _setupEvents() {
67
82
  this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
68
83
  }
84
+ _toggleColorItem($colorItem) {
85
+ this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
86
+ }
69
87
  _handleColorClickedForMultipleMode($colorItem) {
70
88
  !this._isColorAlreadyExistInArray($colorItem)
71
89
  ? (this.selectedColors = [...this.selectedColors, $colorItem])
@@ -103,7 +121,7 @@ tslib_es6.__decorate([
103
121
  tslib_es6.__metadata("design:type", Number)
104
122
  ], exports.HColorSwatches.prototype, "numberOfVisibleColors", void 0);
105
123
  tslib_es6.__decorate([
106
- decorators.state(),
124
+ decorators.property(),
107
125
  tslib_es6.__metadata("design:type", Array)
108
126
  ], exports.HColorSwatches.prototype, "selectedColors", void 0);
109
127
  exports.HColorSwatches = tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches_control/color_swatches_control.js CHANGED
@@ -17,6 +17,18 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
17
17
  super(...arguments);
18
18
  this.selectedColors = [];
19
19
  }
20
+ selectColors(values) {
21
+ if (!this._$colorSwatches)
22
+ return;
23
+ const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
24
+ this._$colorSwatches.selectColors($colors);
25
+ this.requestUpdate();
26
+ }
27
+ clearAllColors() {
28
+ var _a;
29
+ (_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
30
+ this.requestUpdate();
31
+ }
20
32
  connectedCallback() {
21
33
  super.connectedCallback();
22
34
  this._setupEvents();
@@ -25,12 +37,19 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
25
37
  [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
26
38
  [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
27
39
  });
40
+ this._$colorSwatches = this.querySelector('h-color-swatches');
28
41
  if (cssClasses)
29
42
  this.classList.add(cssClasses);
30
- this._getInitiallySelectedColors();
43
+ this._getSelectedColors();
44
+ }
45
+ _getSelectedColors() {
46
+ this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
47
+ }
48
+ _getAllColorItems() {
49
+ return [...this.querySelectorAll('h-color-item[selected]')];
31
50
  }
32
- _getInitiallySelectedColors() {
33
- this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')].map((selectedColor) => selectedColor.value ? selectedColor.value : selectedColor.color);
51
+ _getSelectedColorItems() {
52
+ return this._getAllColorItems().filter(($color) => $color.selected);
34
53
  }
35
54
  _setupEvents() {
36
55
  this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
@@ -38,7 +57,7 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
38
57
  this.selectedColors = event.detail.values;
39
58
  this.dispatchEvent(new CustomEvent(color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
40
59
  bubbles: true,
41
- detail: event.detail.values
60
+ detail: event.detail
42
61
  }));
43
62
  });
44
63
  }
@@ -71,7 +90,7 @@ tslib_es6.__decorate([
71
90
  tslib_es6.__metadata("design:type", Boolean)
72
91
  ], exports.HColorSwatchesControl.prototype, "error", void 0);
73
92
  tslib_es6.__decorate([
74
- decorators.state(),
93
+ decorators.property(),
75
94
  tslib_es6.__metadata("design:type", Array)
76
95
  ], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
77
96
  exports.HColorSwatchesControl = tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/file_picker/file_picker.js CHANGED
@@ -63,6 +63,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
63
63
  super.connectedCallback();
64
64
  this._addEventListeners();
65
65
  const cssClasses = index['default']({
66
+ [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
66
67
  [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
67
68
  [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
68
69
  [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
@@ -95,7 +96,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
95
96
  />`
96
97
  : lit.nothing}
97
98
  ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
98
- ? lit.html `<h-file
99
+ ? lit.html ` <h-file
99
100
  name="${this._file.name}"
100
101
  id="${this._file.id}"
101
102
  remove-button-text="${this.removeButtonText}"
package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js CHANGED
@@ -75,7 +75,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
75
75
  select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
76
76
  if (!selected)
77
77
  return;
78
- $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
78
+ this.updateOptionAriaAttribute($option);
79
79
  });
80
80
  };
81
81
  this._handleOptionClicked = (event) => {
@@ -121,11 +121,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
121
121
  }
122
122
  set selectedIndex(index) {
123
123
  const option = Object.values(this._$options)[index];
124
- if (!option) {
125
- this._selectController.deselectAll();
126
- return;
127
- }
128
- this._selectOption(option.value);
124
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
125
+ Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
129
126
  }
130
127
  get selectedOptions() {
131
128
  var _a;
@@ -212,10 +209,15 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
212
209
  const { value, selected } = option;
213
210
  const $option = select_utils.SelectControlUtils.createHTMLOption(option);
214
211
  if (selected)
215
- $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
212
+ this.updateOptionAriaAttribute($option);
216
213
  this._$options[value] = $option;
217
214
  select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
218
215
  }
216
+ updateOptionAriaAttribute($option) {
217
+ !$option.selected
218
+ ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
219
+ : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
220
+ }
219
221
  _removeHTMLOptions(optionsValues) {
220
222
  this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
221
223
  }
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;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;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -71,8 +71,8 @@ var click_outside_controller_messages = require('./controllers/click_outside_con
71
71
  var backdrop = require('./components/backdrop/backdrop.js');
72
72
  var color_swatches_control_constants = require('./components/form/color_swatches_control/color_swatches_control_constants.js');
73
73
  var color_item = require('./components/color_swatches/color_item/color_item.js');
74
- var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
75
74
  var color_swatches = require('./components/color_swatches/color_swatches.js');
75
+ var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
76
76
  var show_more = require('./components/color_swatches/show-more/show_more.js');
77
77
  var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
78
78
  var slider = require('./components/slider/slider.js');
@@ -429,16 +429,16 @@ Object.defineProperty(exports, 'HColorItem', {
429
429
  return color_item.HColorItem;
430
430
  }
431
431
  });
432
- Object.defineProperty(exports, 'HColorSwatchesControl', {
432
+ Object.defineProperty(exports, 'HColorSwatches', {
433
433
  enumerable: true,
434
434
  get: function () {
435
- return color_swatches_control.HColorSwatchesControl;
435
+ return color_swatches.HColorSwatches;
436
436
  }
437
437
  });
438
- Object.defineProperty(exports, 'HColorSwatches', {
438
+ Object.defineProperty(exports, 'HColorSwatchesControl', {
439
439
  enumerable: true,
440
440
  get: function () {
441
- return color_swatches.HColorSwatches;
441
+ return color_swatches_control.HColorSwatchesControl;
442
442
  }
443
443
  });
444
444
  Object.defineProperty(exports, 'HColorSwatchesShowMore', {
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts CHANGED
@@ -4,12 +4,16 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
4
4
  multiple: boolean;
5
5
  numberOfVisibleColors: number;
6
6
  selectedColors: HColorItem[];
7
+ private _$colors;
8
+ selectColors($colors: HColorItem[] | HColorItem): void;
9
+ clearAllColors(): void;
7
10
  connectedCallback(): void;
8
11
  private _addCssClasses;
9
12
  private _hideItems;
10
13
  private _showAllItemsEvent;
11
14
  private _setupEvents;
12
15
  private _handleColorClicked;
16
+ private _toggleColorItem;
13
17
  private _handleColorClickedForMultipleMode;
14
18
  private _handleColorClickedForSingleMode;
15
19
  private _toggleSelectedAttribute;
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import { property, state } from 'lit/decorators';
2
+ import { property } from 'lit/decorators';
3
+ import { ArrayUtils } from '@dreamcommerce/utilities';
3
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
5
6
  import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
@@ -13,7 +14,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
13
14
  this.selectedColors = [];
14
15
  this._handleColorClicked = ({ target }) => {
15
16
  const $colorItem = target;
16
- this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
17
+ this._toggleColorItem($colorItem);
17
18
  };
18
19
  this._dispatchColorChangeEvent = () => {
19
20
  const detail = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
@@ -31,6 +32,19 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
31
32
  }));
32
33
  };
33
34
  }
35
+ selectColors($colors) {
36
+ const colorsArr = ArrayUtils.makeAsArray($colors);
37
+ if (!colorsArr.length) {
38
+ this.clearAllColors();
39
+ return;
40
+ }
41
+ colorsArr.forEach(($color) => this._toggleColorItem($color));
42
+ }
43
+ clearAllColors() {
44
+ [...this.selectedColors].forEach(($color) => {
45
+ this._toggleColorItem($color);
46
+ });
47
+ }
34
48
  connectedCallback() {
35
49
  super.connectedCallback();
36
50
  this._setupEvents();
@@ -38,6 +52,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
38
52
  this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
39
53
  this._showAllItemsEvent();
40
54
  this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
55
+ this._$colors = [...this.querySelectorAll('h-color-item')];
41
56
  }
42
57
  _addCssClasses() {
43
58
  this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -62,6 +77,9 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
62
77
  _setupEvents() {
63
78
  this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
64
79
  }
80
+ _toggleColorItem($colorItem) {
81
+ this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
82
+ }
65
83
  _handleColorClickedForMultipleMode($colorItem) {
66
84
  !this._isColorAlreadyExistInArray($colorItem)
67
85
  ? (this.selectedColors = [...this.selectedColors, $colorItem])
@@ -99,7 +117,7 @@ __decorate([
99
117
  __metadata("design:type", Number)
100
118
  ], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
101
119
  __decorate([
102
- state(),
120
+ property(),
103
121
  __metadata("design:type", Array)
104
122
  ], HColorSwatches.prototype, "selectedColors", void 0);
105
123
  HColorSwatches = __decorate([
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches_control/color_swatches_control.d.ts CHANGED
@@ -7,8 +7,13 @@ export declare class HColorSwatchesControl extends PhoenixLightLitElement {
7
7
  required: boolean;
8
8
  error: boolean;
9
9
  selectedColors: string[];
10
+ selectColors(values: string[]): void;
11
+ clearAllColors(): void;
12
+ private _$colorSwatches;
10
13
  connectedCallback(): void;
11
- private _getInitiallySelectedColors;
14
+ private _getSelectedColors;
15
+ private _getAllColorItems;
16
+ private _getSelectedColorItems;
12
17
  private _setupEvents;
13
18
  protected render(): TemplateResult | void;
14
19
  }
package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
2
2
  import { html } from 'lit';
3
- import { property, state } from 'lit/decorators';
3
+ import { property } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
6
6
  import classnames from '../../../../external/classnames/index.js';
@@ -13,6 +13,18 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
13
13
  super(...arguments);
14
14
  this.selectedColors = [];
15
15
  }
16
+ selectColors(values) {
17
+ if (!this._$colorSwatches)
18
+ return;
19
+ const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
20
+ this._$colorSwatches.selectColors($colors);
21
+ this.requestUpdate();
22
+ }
23
+ clearAllColors() {
24
+ var _a;
25
+ (_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
26
+ this.requestUpdate();
27
+ }
16
28
  connectedCallback() {
17
29
  super.connectedCallback();
18
30
  this._setupEvents();
@@ -21,12 +33,19 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
21
33
  [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
22
34
  [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
23
35
  });
36
+ this._$colorSwatches = this.querySelector('h-color-swatches');
24
37
  if (cssClasses)
25
38
  this.classList.add(cssClasses);
26
- this._getInitiallySelectedColors();
39
+ this._getSelectedColors();
40
+ }
41
+ _getSelectedColors() {
42
+ this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
43
+ }
44
+ _getAllColorItems() {
45
+ return [...this.querySelectorAll('h-color-item[selected]')];
27
46
  }
28
- _getInitiallySelectedColors() {
29
- this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')].map((selectedColor) => selectedColor.value ? selectedColor.value : selectedColor.color);
47
+ _getSelectedColorItems() {
48
+ return this._getAllColorItems().filter(($color) => $color.selected);
30
49
  }
31
50
  _setupEvents() {
32
51
  this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
@@ -34,7 +53,7 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
34
53
  this.selectedColors = event.detail.values;
35
54
  this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
36
55
  bubbles: true,
37
- detail: event.detail.values
56
+ detail: event.detail
38
57
  }));
39
58
  });
40
59
  }
@@ -67,7 +86,7 @@ __decorate([
67
86
  __metadata("design:type", Boolean)
68
87
  ], HColorSwatchesControl.prototype, "error", void 0);
69
88
  __decorate([
70
- state(),
89
+ property(),
71
90
  __metadata("design:type", Array)
72
91
  ], HColorSwatchesControl.prototype, "selectedColors", void 0);
73
92
  HColorSwatchesControl = __decorate([
package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/file_picker/file_picker.js CHANGED
@@ -59,6 +59,7 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
59
59
  super.connectedCallback();
60
60
  this._addEventListeners();
61
61
  const cssClasses = classnames({
62
+ [FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
62
63
  [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
63
64
  [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
64
65
  [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
@@ -91,7 +92,7 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
91
92
  />`
92
93
  : nothing}
93
94
  ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
94
- ? html `<h-file
95
+ ? html ` <h-file
95
96
  name="${this._file.name}"
96
97
  id="${this._file.id}"
97
98
  remove-button-text="${this.removeButtonText}"
package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -42,6 +42,7 @@ export declare class HSelect extends PhoenixLightLitElement {
42
42
  private _handleOptionDeselect;
43
43
  private _updateOptionsView;
44
44
  private _appendNewHTMLOption;
45
+ updateOptionAriaAttribute($option: HOption): void;
45
46
  private _removeHTMLOptions;
46
47
  private _handleOptionClicked;
47
48
  private _selectOption;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -71,7 +71,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
71
71
  SelectControlUtils.syncHTMLOptionWithModel(option, $option);
72
72
  if (!selected)
73
73
  return;
74
- $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
74
+ this.updateOptionAriaAttribute($option);
75
75
  });
76
76
  };
77
77
  this._handleOptionClicked = (event) => {
@@ -117,11 +117,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
117
117
  }
118
118
  set selectedIndex(index) {
119
119
  const option = Object.values(this._$options)[index];
120
- if (!option) {
121
- this._selectController.deselectAll();
122
- return;
123
- }
124
- this._selectOption(option.value);
120
+ option ? this._selectOption(option.value) : this._selectController.deselectAll();
121
+ Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
125
122
  }
126
123
  get selectedOptions() {
127
124
  var _a;
@@ -208,10 +205,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
208
205
  const { value, selected } = option;
209
206
  const $option = SelectControlUtils.createHTMLOption(option);
210
207
  if (selected)
211
- $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
208
+ this.updateOptionAriaAttribute($option);
212
209
  this._$options[value] = $option;
213
210
  SelectControlUtils.appendHTMLOption($option, $list, position);
214
211
  }
212
+ updateOptionAriaAttribute($option) {
213
+ !$option.selected
214
+ ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
215
+ : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
216
+ }
215
217
  _removeHTMLOptions(optionsValues) {
216
218
  this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
217
219
  }
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;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;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;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;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/index.js CHANGED
@@ -67,8 +67,8 @@ export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_c
67
67
  export { HBackdrop } from './components/backdrop/backdrop.js';
68
68
  export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
69
69
  export { HColorItem } from './components/color_swatches/color_item/color_item.js';
70
- export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
71
70
  export { HColorSwatches } from './components/color_swatches/color_swatches.js';
71
+ export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
72
72
  export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
73
73
  export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
74
74
  export { HSlider } from './components/slider/slider.js';
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.2.11-4",
5
+ "version": "1.2.11-6",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",