@shoper/phoenix_design_system 0.22.5-7 → 0.22.5-8

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 (19) hide show
  1. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js +1 -1
  2. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +27 -15
  3. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  4. package/build/cjs/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js +45 -0
  5. package/build/cjs/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js.map +1 -0
  6. package/build/cjs/packages/phoenix/src/index.js +7 -0
  7. package/build/cjs/packages/phoenix/src/index.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js +1 -1
  9. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts +5 -2
  10. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +27 -15
  11. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.d.ts +1 -1
  13. package/build/esm/packages/phoenix/src/components/form/color_swatches/color_swatches_control.d.ts +5 -0
  14. package/build/esm/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js +41 -17
  15. package/build/esm/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js.map +1 -1
  16. package/build/esm/packages/phoenix/src/index.d.ts +1 -0
  17. package/build/esm/packages/phoenix/src/index.js +1 -0
  18. package/build/esm/packages/phoenix/src/index.js.map +1 -1
  19. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js CHANGED
@@ -7,8 +7,8 @@ var decorators = require('lit/decorators');
7
7
  var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
8
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
9
9
  var btn_controller = require('../../../controllers/btn_controller.js');
10
- var color_item_constants = require('./color_item_constants.js');
11
10
  var color_swatches_constants = require('../color_swatches_constants.js');
11
+ var color_item_constants = require('./color_item_constants.js');
12
12
 
13
13
  exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
14
14
  constructor() {
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js CHANGED
@@ -6,8 +6,8 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
6
6
  var decorators = require('lit/decorators');
7
7
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
8
8
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
9
- var color_item_constants = require('./color_item/color_item_constants.js');
10
9
  var color_swatches_constants = require('./color_swatches_constants.js');
10
+ var color_item_constants = require('./color_item/color_item_constants.js');
11
11
 
12
12
  exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.PhoenixLightLitElement {
13
13
  constructor() {
@@ -21,7 +21,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
21
21
  };
22
22
  this._dispatchColorSelectEvent = () => {
23
23
  const detail = {
24
- colors: this.selectedColors.length > 1 ? this._getColorValuesOnly(this.selectedColors) : this.selectedColors[0].color
24
+ colors: this._setColorsDispatchValue(this.selectedColors)
25
25
  };
26
26
  this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, {
27
27
  bubbles: true,
@@ -42,28 +42,40 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
42
42
  this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
43
43
  }
44
44
  _handleColorClickedForMultipleMode($colorItem) {
45
- if (!this._isColorAlreadyAdded($colorItem)) {
46
- this.selectedColors = [...this.selectedColors, $colorItem];
47
- }
48
- $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
49
- ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
50
- : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
45
+ !this._isColorAlreadyExistInArray($colorItem)
46
+ ? (this.selectedColors = [...this.selectedColors, $colorItem])
47
+ : this._removeExistingColorFromArray($colorItem);
48
+ this._toggleSelectedAttribute($colorItem);
51
49
  this._dispatchColorSelectEvent();
52
50
  }
53
51
  _handleColorClickedForSingleMode($colorItem) {
54
52
  const $previouslySelected = this.selectedColors[0];
55
- $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
56
- ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
57
- : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
53
+ this._toggleSelectedAttribute($colorItem);
58
54
  if ($previouslySelected && $previouslySelected !== $colorItem)
59
55
  $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
60
- this.selectedColors = [$colorItem];
56
+ $previouslySelected === $colorItem ? (this.selectedColors = []) : (this.selectedColors = [$colorItem]);
61
57
  this._dispatchColorSelectEvent();
62
58
  }
63
- _isColorAlreadyAdded($colorItem) {
64
- return this.selectedColors.filter((selectedColor) => selectedColor.color === $colorItem.color).length > 0;
59
+ _toggleSelectedAttribute($colorItem) {
60
+ $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
61
+ ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
62
+ : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
63
+ }
64
+ _isColorAlreadyExistInArray($colorItem) {
65
+ return this.selectedColors.includes($colorItem);
66
+ }
67
+ _removeExistingColorFromArray($colorItem) {
68
+ const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
69
+ this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
70
+ }
71
+ _setColorsDispatchValue(selectedColors) {
72
+ if (this.selectedColors.length > 1)
73
+ return this._getOnlyColorValues(selectedColors);
74
+ if (this.selectedColors.length === 1)
75
+ return selectedColors[0].color;
76
+ return '';
65
77
  }
66
- _getColorValuesOnly(selectedColors) {
78
+ _getOnlyColorValues(selectedColors) {
67
79
  return selectedColors.map((selectedColor) => selectedColor.color);
68
80
  }
69
81
  };
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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js ADDED
@@ -0,0 +1,45 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
6
+ var lit = require('lit');
7
+ var decorators = require('lit/decorators');
8
+ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
+ var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
10
+ var color_swatches_constants = require('../../color_swatches/color_swatches_constants.js');
11
+
12
+ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_light_lit_element.PhoenixLightLitElement {
13
+ connectedCallback() {
14
+ super.connectedCallback();
15
+ this._setupEvents();
16
+ }
17
+ _setupEvents() {
18
+ this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
19
+ this.selectedColors = event.detail.colors;
20
+ });
21
+ }
22
+ render() {
23
+ return lit.html `
24
+ <h-input hidden="true">
25
+ <h-input-control value="${this.selectedColors}"></h-input-control>
26
+ </h-input>
27
+ `;
28
+ }
29
+ };
30
+ tslib_es6.__decorate([
31
+ decorators.property({ type: String }),
32
+ tslib_es6.__metadata("design:type", String)
33
+ ], exports.HColorSwatchesControl.prototype, "name", void 0);
34
+ tslib_es6.__decorate([
35
+ decorators.property({ type: Boolean }),
36
+ tslib_es6.__metadata("design:type", Boolean)
37
+ ], exports.HColorSwatchesControl.prototype, "error", void 0);
38
+ tslib_es6.__decorate([
39
+ decorators.state(),
40
+ tslib_es6.__metadata("design:type", Object)
41
+ ], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
42
+ exports.HColorSwatchesControl = tslib_es6.__decorate([
43
+ phoenix_custom_element.phoenixCustomElement('h-color-swatches-control')
44
+ ], exports.HColorSwatchesControl);
45
+ //# sourceMappingURL=color_swatches_control.js.map
package/build/cjs/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js.map ADDED
@@ -0,0 +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;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
@@ -60,6 +60,7 @@ var toggle_button_group = require('./components/groups/toggle_button_group/toggl
60
60
  var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
61
61
  var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
62
62
  var backdrop = require('./components/backdrop/backdrop.js');
63
+ var color_swatches_control = require('./components/form/color_swatches/color_swatches_control.js');
63
64
  var color_item = require('./components/color_swatches/color_item/color_item.js');
64
65
  var color_swatches = require('./components/color_swatches/color_swatches.js');
65
66
  var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
@@ -344,6 +345,12 @@ Object.defineProperty(exports, 'HBackdrop', {
344
345
  return backdrop.HBackdrop;
345
346
  }
346
347
  });
348
+ Object.defineProperty(exports, 'HColorSwatchesControl', {
349
+ enumerable: true,
350
+ get: function () {
351
+ return color_swatches_control.HColorSwatchesControl;
352
+ }
353
+ });
347
354
  Object.defineProperty(exports, 'HColorItem', {
348
355
  enumerable: true,
349
356
  get: function () {
package/build/cjs/packages/phoenix/src/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/color_item/color_item.js CHANGED
@@ -3,8 +3,8 @@ import { property } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
5
5
  import { BtnController } from '../../../controllers/btn_controller.js';
6
- import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
7
6
  import { COLOR_SWATCHES_CSS_CLASSES } from '../color_swatches_constants.js';
7
+ import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
8
8
 
9
9
  let HColorItem = class HColorItem extends PhoenixLightLitElement {
10
10
  constructor() {
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts CHANGED
@@ -10,7 +10,10 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
10
10
  private _handleColorClicked;
11
11
  private _handleColorClickedForMultipleMode;
12
12
  private _handleColorClickedForSingleMode;
13
- private _isColorAlreadyAdded;
13
+ private _toggleSelectedAttribute;
14
+ private _isColorAlreadyExistInArray;
15
+ private _removeExistingColorFromArray;
14
16
  private _dispatchColorSelectEvent;
15
- private _getColorValuesOnly;
17
+ private _setColorsDispatchValue;
18
+ private _getOnlyColorValues;
16
19
  }
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js CHANGED
@@ -2,8 +2,8 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
2
2
  import { property, state } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
5
- import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
6
5
  import { COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
6
+ import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
7
7
 
8
8
  let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
9
9
  constructor() {
@@ -17,7 +17,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
17
17
  };
18
18
  this._dispatchColorSelectEvent = () => {
19
19
  const detail = {
20
- colors: this.selectedColors.length > 1 ? this._getColorValuesOnly(this.selectedColors) : this.selectedColors[0].color
20
+ colors: this._setColorsDispatchValue(this.selectedColors)
21
21
  };
22
22
  this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.selected, {
23
23
  bubbles: true,
@@ -38,28 +38,40 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
38
38
  this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
39
39
  }
40
40
  _handleColorClickedForMultipleMode($colorItem) {
41
- if (!this._isColorAlreadyAdded($colorItem)) {
42
- this.selectedColors = [...this.selectedColors, $colorItem];
43
- }
44
- $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
45
- ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
46
- : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
41
+ !this._isColorAlreadyExistInArray($colorItem)
42
+ ? (this.selectedColors = [...this.selectedColors, $colorItem])
43
+ : this._removeExistingColorFromArray($colorItem);
44
+ this._toggleSelectedAttribute($colorItem);
47
45
  this._dispatchColorSelectEvent();
48
46
  }
49
47
  _handleColorClickedForSingleMode($colorItem) {
50
48
  const $previouslySelected = this.selectedColors[0];
51
- $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
52
- ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
53
- : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
49
+ this._toggleSelectedAttribute($colorItem);
54
50
  if ($previouslySelected && $previouslySelected !== $colorItem)
55
51
  $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
56
- this.selectedColors = [$colorItem];
52
+ $previouslySelected === $colorItem ? (this.selectedColors = []) : (this.selectedColors = [$colorItem]);
57
53
  this._dispatchColorSelectEvent();
58
54
  }
59
- _isColorAlreadyAdded($colorItem) {
60
- return this.selectedColors.filter((selectedColor) => selectedColor.color === $colorItem.color).length > 0;
55
+ _toggleSelectedAttribute($colorItem) {
56
+ $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
57
+ ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
58
+ : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
59
+ }
60
+ _isColorAlreadyExistInArray($colorItem) {
61
+ return this.selectedColors.includes($colorItem);
62
+ }
63
+ _removeExistingColorFromArray($colorItem) {
64
+ const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
65
+ this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
66
+ }
67
+ _setColorsDispatchValue(selectedColors) {
68
+ if (this.selectedColors.length > 1)
69
+ return this._getOnlyColorValues(selectedColors);
70
+ if (this.selectedColors.length === 1)
71
+ return selectedColors[0].color;
72
+ return '';
61
73
  }
62
- _getColorValuesOnly(selectedColors) {
74
+ _getOnlyColorValues(selectedColors) {
63
75
  return selectedColors.map((selectedColor) => selectedColor.color);
64
76
  }
65
77
  };
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_types.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export interface IColorSelectValue {
2
- colors: string | string[];
2
+ colors: string | string[] | undefined;
3
3
  }
package/build/esm/packages/phoenix/src/components/form/color_swatches/color_swatches_control.d.ts CHANGED
@@ -1,5 +1,10 @@
1
+ import { TemplateResult } from 'lit';
1
2
  import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
2
3
  export declare class HColorSwatchesControl extends PhoenixLightLitElement {
3
4
  name: string;
4
5
  error: boolean;
6
+ selectedColors: string | string[];
7
+ connectedCallback(): void;
8
+ private _setupEvents;
9
+ protected render(): TemplateResult;
5
10
  }
package/build/esm/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js CHANGED
@@ -1,19 +1,43 @@
1
- import { __decorate, __metadata } from "tslib";
2
- import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
3
- import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
4
- import { property } from 'lit/decorators';
5
- let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
6
- };
7
- __decorate([
8
- property({ type: String }),
9
- __metadata("design:type", String)
10
- ], HColorSwatchesControl.prototype, "name", void 0);
11
- __decorate([
12
- property({ type: Boolean }),
13
- __metadata("design:type", Boolean)
14
- ], HColorSwatchesControl.prototype, "error", void 0);
15
- HColorSwatchesControl = __decorate([
16
- phoenixCustomElement('h-color-swatches-control')
1
+ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
2
+ import { html } from 'lit';
3
+ import { property, state } from 'lit/decorators';
4
+ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
+ import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
6
+ import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
7
+
8
+ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
9
+ connectedCallback() {
10
+ super.connectedCallback();
11
+ this._setupEvents();
12
+ }
13
+ _setupEvents() {
14
+ this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
15
+ this.selectedColors = event.detail.colors;
16
+ });
17
+ }
18
+ render() {
19
+ return html `
20
+ <h-input hidden="true">
21
+ <h-input-control value="${this.selectedColors}"></h-input-control>
22
+ </h-input>
23
+ `;
24
+ }
25
+ };
26
+ __decorate([
27
+ property({ type: String }),
28
+ __metadata("design:type", String)
29
+ ], HColorSwatchesControl.prototype, "name", void 0);
30
+ __decorate([
31
+ property({ type: Boolean }),
32
+ __metadata("design:type", Boolean)
33
+ ], HColorSwatchesControl.prototype, "error", void 0);
34
+ __decorate([
35
+ state(),
36
+ __metadata("design:type", Object)
37
+ ], HColorSwatchesControl.prototype, "selectedColors", void 0);
38
+ HColorSwatchesControl = __decorate([
39
+ phoenixCustomElement('h-color-swatches-control')
17
40
  ], HColorSwatchesControl);
41
+
18
42
  export { HColorSwatchesControl };
19
- //# sourceMappingURL=color_swatches_control.js.map
43
+ //# sourceMappingURL=color_swatches_control.js.map
package/build/esm/packages/phoenix/src/components/form/color_swatches/color_swatches_control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color_swatches_control.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/color_swatches/color_swatches_control.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,sBAAsB;CAMhE,CAAA;AAJG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDACN;AALb,qBAAqB;IADjC,oBAAoB,CAAC,0BAA0B,CAAC;GACpC,qBAAqB,CAMjC;SANY,qBAAqB"}
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;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.d.ts CHANGED
@@ -65,6 +65,7 @@ export { RelativePositionController } from './controllers/relative_position_cont
65
65
  export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller';
66
66
  export { HBackdrop } from './components/backdrop/backdrop';
67
67
  export { BackdropController } from "./components/backdrop/controller/backdrop_controller";
68
+ export { HColorSwatchesControl } from './components/form/color_swatches/color_swatches_control';
68
69
  export { HColorSwatches } from './components/color_swatches/color_swatches';
69
70
  export { HColorItem } from './components/color_swatches/color_item/color_item';
70
71
  export { VisibilityController } from './controllers/visibility_controller/visibility_controller';
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -56,6 +56,7 @@ export { HToggleButtonGroup } from './components/groups/toggle_button_group/togg
56
56
  export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
57
57
  export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
58
58
  export { HBackdrop } from './components/backdrop/backdrop.js';
59
+ export { HColorSwatchesControl } from './components/form/color_swatches/color_swatches_control.js';
59
60
  export { HColorItem } from './components/color_swatches/color_item/color_item.js';
60
61
  export { HColorSwatches } from './components/color_swatches/color_swatches.js';
61
62
  export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
package/build/esm/packages/phoenix/src/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "0.22.5-7",
5
+ "version": "0.22.5-8",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",