@shoper/phoenix_design_system 1.1.1 → 1.1.3-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js +20 -5
  2. package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js +1 -1
  4. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +8 -6
  5. package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +1 -2
  7. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  8. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js +3 -1
  9. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  10. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +13 -8
  11. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.d.ts +3 -0
  13. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js +20 -5
  14. package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.js +1 -1
  16. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts +2 -1
  17. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js +8 -6
  18. package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js.map +1 -1
  19. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +1 -2
  20. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  21. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts +1 -0
  22. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js +3 -2
  23. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  24. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +1 -1
  25. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +15 -10
  26. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  27. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.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 btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
@@ -15,6 +16,8 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
15
16
  super();
16
17
  this.disabled = false;
17
18
  this.selected = false;
19
+ this.small = false;
20
+ this.unclickable = false;
18
21
  this._dispatchClickedEvent = () => {
19
22
  this.dispatchEvent(new Event(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, {
20
23
  bubbles: true
@@ -25,11 +28,12 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
25
28
  connectedCallback() {
26
29
  super.connectedCallback();
27
30
  this.setupEvents();
28
- this.style.backgroundColor = this.color;
31
+ this.style.backgroundColor = this.setBgColor(this.disabled);
29
32
  this._syncAriaPressed();
30
33
  this.setAttribute('aria-label', this.label ? this.label : this.color);
31
- this.disabled && this.removeAttribute('tabindex');
34
+ this.unclickable && this.removeAttribute('tabindex');
32
35
  this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
36
+ this.small && this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
33
37
  }
34
38
  attributeChangedCallback(name, value, newValue) {
35
39
  super.attributeChangedCallback(name, value, newValue);
@@ -44,7 +48,10 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
44
48
  this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
45
49
  }
46
50
  setupEvents() {
47
- !this.disabled && this.addEventListener('click', this._dispatchClickedEvent);
51
+ !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
52
+ }
53
+ setBgColor(itemIsDisabled) {
54
+ return itemIsDisabled ? utilities.ColorUtils.hexToRgba(this.color, 0.5) : this.color;
48
55
  }
49
56
  };
50
57
  tslib_es6.__decorate([
@@ -56,13 +63,21 @@ tslib_es6.__decorate([
56
63
  tslib_es6.__metadata("design:type", String)
57
64
  ], exports.HColorItem.prototype, "label", void 0);
58
65
  tslib_es6.__decorate([
59
- decorators.property({ type: Boolean, attribute: true }),
66
+ decorators.property({ type: Boolean, reflect: true }),
60
67
  tslib_es6.__metadata("design:type", Boolean)
61
68
  ], exports.HColorItem.prototype, "disabled", void 0);
62
69
  tslib_es6.__decorate([
63
- decorators.property({ type: Boolean, attribute: true }),
70
+ decorators.property({ type: Boolean, reflect: true }),
64
71
  tslib_es6.__metadata("design:type", Boolean)
65
72
  ], exports.HColorItem.prototype, "selected", void 0);
73
+ tslib_es6.__decorate([
74
+ decorators.property({ type: Boolean }),
75
+ tslib_es6.__metadata("design:type", Boolean)
76
+ ], exports.HColorItem.prototype, "small", void 0);
77
+ tslib_es6.__decorate([
78
+ decorators.property({ type: Boolean }),
79
+ tslib_es6.__metadata("design:type", Boolean)
80
+ ], exports.HColorItem.prototype, "unclickable", void 0);
66
81
  exports.HColorItem = tslib_es6.__decorate([
67
82
  phoenix_custom_element.phoenixCustomElement('h-color-item'),
68
83
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/color_swatches/color_item/color_item.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/color_swatches.js CHANGED
@@ -99,7 +99,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
99
99
  };
100
100
  tslib_es6.__decorate([
101
101
  decorators.property({ type: Boolean }),
102
- tslib_es6.__metadata("design:type", Object)
102
+ tslib_es6.__metadata("design:type", Boolean)
103
103
  ], exports.HColorSwatches.prototype, "multiple", void 0);
104
104
  tslib_es6.__decorate([
105
105
  decorators.property({ type: Number, attribute: 'number-of-visible-colors' }),
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js CHANGED
@@ -2,16 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const baseCssClass = 'color-swatches';
5
+ const colorSwatchesBaseCssClass = 'color-swatches';
6
+ const colorItemBaseCssClass = 'color-item';
6
7
  const COLOR_ITEM_TAG_NAME = 'h-color-item';
7
8
  const COLOR_SWATCHES_CSS_CLASSES = {
8
- colorItem: 'color-item',
9
- colorSwatches: baseCssClass,
10
- colorSwatchesItem: `${baseCssClass}__color-item`,
11
- colorSwatchesItems: `${baseCssClass}__color-items`
9
+ colorItem: colorItemBaseCssClass,
10
+ colorItemSmall: `${colorItemBaseCssClass}_small`,
11
+ colorSwatches: colorSwatchesBaseCssClass,
12
+ colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
12
13
  };
13
14
  const COLOR_SWATCHES_EVENT_NAMES = {
14
- selected: 'colorSwatchesSelected'
15
+ selected: 'colorSwatchesSelected',
16
+ markDisabledItems: 'markDisabledItems'
15
17
  };
16
18
  const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
17
19
 
package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -273,10 +273,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
273
273
  return this._findRootDropdown(element.parentElement || document.body);
274
274
  }
275
275
  _setupListeners() {
276
- var _a;
277
276
  this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
278
277
  this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
279
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
278
+ this.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
280
279
  document.addEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
281
280
  window.addEventListener('resize', this._observeScrollToggling);
282
281
  document.addEventListener('keydown', this._closeDropdownOnEscape);
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_constants.js CHANGED
@@ -20,7 +20,8 @@ const DROPDOWN_CONTENT_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__content`;
20
20
  const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
21
21
  const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
22
22
  const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
23
- const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
23
+ const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
24
+ const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
24
25
 
25
26
  exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
26
27
  exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
@@ -34,4 +35,5 @@ exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
34
35
  exports.DROPDOWN_NAME = DROPDOWN_NAME;
35
36
  exports.DROPDOWN_TOGGLER_CSS_CLASS = DROPDOWN_TOGGLER_CSS_CLASS;
36
37
  exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
38
+ exports.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME;
37
39
  //# sourceMappingURL=dropdown_constants.js.map
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -8,6 +8,7 @@ var utilities = require('@dreamcommerce/utilities');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
10
  var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
11
+ var global_constants = require('../../global_constants.js');
11
12
  var dropdown_constants = require('./dropdown_constants.js');
12
13
  var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
13
14
 
@@ -15,11 +16,15 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
15
16
  constructor() {
16
17
  super();
17
18
  this.name = '';
18
- this.toggleOnHover = false;
19
19
  this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
20
20
  ev.stopImmediatePropagation();
21
21
  this._dispatchToggleDropdownEvent(ev);
22
22
  };
23
+ this._dispatchToggleDropdownEventOnMobile = (ev) => {
24
+ if (window.innerWidth > global_constants.BREAKPOINTS.xs)
25
+ return;
26
+ this._dispatchToggleDropdownEvent(ev);
27
+ };
23
28
  this._dispatchToggleDropdownEvent = (ev) => {
24
29
  ev.preventDefault();
25
30
  const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
@@ -46,15 +51,19 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
46
51
  var _a;
47
52
  super.connectedCallback();
48
53
  this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
49
- this._$dropdown = this.parentElement;
54
+ this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
50
55
  if (this._$dropdown.isOpened)
51
56
  this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
52
57
  host: this,
53
58
  initialAriaExpandedValue: this._$dropdown.isOpened()
54
59
  });
55
- this.toggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute('toggleOnHover')) !== null;
56
- this.addEventListener('click', this._dispatchToggleDropdownEvent);
57
60
  document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
61
+ const hasToggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME)) !== null;
62
+ if (hasToggleOnHover) {
63
+ this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
64
+ return;
65
+ }
66
+ this.addEventListener('click', this._dispatchToggleDropdownEvent);
58
67
  }
59
68
  disconnectedCallback() {
60
69
  super.disconnectedCallback();
@@ -65,10 +74,6 @@ tslib_es6.__decorate([
65
74
  decorators.property({ type: String, reflect: true }),
66
75
  tslib_es6.__metadata("design:type", Object)
67
76
  ], exports.HDropdownToggler.prototype, "name", void 0);
68
- tslib_es6.__decorate([
69
- decorators.state(),
70
- tslib_es6.__metadata("design:type", Object)
71
- ], exports.HDropdownToggler.prototype, "toggleOnHover", void 0);
72
77
  exports.HDropdownToggler = tslib_es6.__decorate([
73
78
  phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
74
79
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.d.ts CHANGED
@@ -4,11 +4,14 @@ export declare class HColorItem extends PhoenixLightLitElement {
4
4
  label?: string;
5
5
  disabled: boolean;
6
6
  selected: boolean;
7
+ small: boolean;
8
+ unclickable: boolean;
7
9
  private _btnController;
8
10
  constructor();
9
11
  connectedCallback(): void;
10
12
  attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
11
13
  private _syncAriaPressed;
12
14
  private setupEvents;
15
+ private setBgColor;
13
16
  private _dispatchClickedEvent;
14
17
  }
package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
+ import { ColorUtils } 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 { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
@@ -11,6 +12,8 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
11
12
  super();
12
13
  this.disabled = false;
13
14
  this.selected = false;
15
+ this.small = false;
16
+ this.unclickable = false;
14
17
  this._dispatchClickedEvent = () => {
15
18
  this.dispatchEvent(new Event(COLOR_ITEM_EVENT_NAMES.selected, {
16
19
  bubbles: true
@@ -21,11 +24,12 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
21
24
  connectedCallback() {
22
25
  super.connectedCallback();
23
26
  this.setupEvents();
24
- this.style.backgroundColor = this.color;
27
+ this.style.backgroundColor = this.setBgColor(this.disabled);
25
28
  this._syncAriaPressed();
26
29
  this.setAttribute('aria-label', this.label ? this.label : this.color);
27
- this.disabled && this.removeAttribute('tabindex');
30
+ this.unclickable && this.removeAttribute('tabindex');
28
31
  this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItem);
32
+ this.small && this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
29
33
  }
30
34
  attributeChangedCallback(name, value, newValue) {
31
35
  super.attributeChangedCallback(name, value, newValue);
@@ -40,7 +44,10 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
40
44
  this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
41
45
  }
42
46
  setupEvents() {
43
- !this.disabled && this.addEventListener('click', this._dispatchClickedEvent);
47
+ !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
48
+ }
49
+ setBgColor(itemIsDisabled) {
50
+ return itemIsDisabled ? ColorUtils.hexToRgba(this.color, 0.5) : this.color;
44
51
  }
45
52
  };
46
53
  __decorate([
@@ -52,13 +59,21 @@ __decorate([
52
59
  __metadata("design:type", String)
53
60
  ], HColorItem.prototype, "label", void 0);
54
61
  __decorate([
55
- property({ type: Boolean, attribute: true }),
62
+ property({ type: Boolean, reflect: true }),
56
63
  __metadata("design:type", Boolean)
57
64
  ], HColorItem.prototype, "disabled", void 0);
58
65
  __decorate([
59
- property({ type: Boolean, attribute: true }),
66
+ property({ type: Boolean, reflect: true }),
60
67
  __metadata("design:type", Boolean)
61
68
  ], HColorItem.prototype, "selected", void 0);
69
+ __decorate([
70
+ property({ type: Boolean }),
71
+ __metadata("design:type", Boolean)
72
+ ], HColorItem.prototype, "small", void 0);
73
+ __decorate([
74
+ property({ type: Boolean }),
75
+ __metadata("design:type", Boolean)
76
+ ], HColorItem.prototype, "unclickable", void 0);
62
77
  HColorItem = __decorate([
63
78
  phoenixCustomElement('h-color-item'),
64
79
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js CHANGED
@@ -95,7 +95,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
95
95
  };
96
96
  __decorate([
97
97
  property({ type: Boolean }),
98
- __metadata("design:type", Object)
98
+ __metadata("design:type", Boolean)
99
99
  ], HColorSwatches.prototype, "multiple", void 0);
100
100
  __decorate([
101
101
  property({ type: Number, attribute: 'number-of-visible-colors' }),
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  export declare const COLOR_ITEM_TAG_NAME = "h-color-item";
2
2
  export declare const COLOR_SWATCHES_CSS_CLASSES: {
3
3
  readonly colorItem: "color-item";
4
+ readonly colorItemSmall: "color-item_small";
4
5
  readonly colorSwatches: "color-swatches";
5
6
  readonly colorSwatchesItem: "color-swatches__color-item";
6
- readonly colorSwatchesItems: "color-swatches__color-items";
7
7
  };
8
8
  export declare const COLOR_SWATCHES_EVENT_NAMES: {
9
9
  readonly selected: "colorSwatchesSelected";
10
+ readonly markDisabledItems: "markDisabledItems";
10
11
  };
11
12
  export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_constants.js CHANGED
@@ -1,13 +1,15 @@
1
- const baseCssClass = 'color-swatches';
1
+ const colorSwatchesBaseCssClass = 'color-swatches';
2
+ const colorItemBaseCssClass = 'color-item';
2
3
  const COLOR_ITEM_TAG_NAME = 'h-color-item';
3
4
  const COLOR_SWATCHES_CSS_CLASSES = {
4
- colorItem: 'color-item',
5
- colorSwatches: baseCssClass,
6
- colorSwatchesItem: `${baseCssClass}__color-item`,
7
- colorSwatchesItems: `${baseCssClass}__color-items`
5
+ colorItem: colorItemBaseCssClass,
6
+ colorItemSmall: `${colorItemBaseCssClass}_small`,
7
+ colorSwatches: colorSwatchesBaseCssClass,
8
+ colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
8
9
  };
9
10
  const COLOR_SWATCHES_EVENT_NAMES = {
10
- selected: 'colorSwatchesSelected'
11
+ selected: 'colorSwatchesSelected',
12
+ markDisabledItems: 'markDisabledItems'
11
13
  };
12
14
  const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
13
15
 
package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -269,10 +269,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
269
269
  return this._findRootDropdown(element.parentElement || document.body);
270
270
  }
271
271
  _setupListeners() {
272
- var _a;
273
272
  this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
274
273
  this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
275
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
274
+ this.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
276
275
  document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
277
276
  window.addEventListener('resize', this._observeScrollToggling);
278
277
  document.addEventListener('keydown', this._closeDropdownOnEscape);
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_constants.d.ts CHANGED
@@ -16,3 +16,4 @@ export declare const DROPDOWN_TOGGLER_CSS_CLASS: string;
16
16
  export declare const DROPDOWN_CONTENT_VISIBLE_CLASS: string;
17
17
  export declare const DROPDOWN_CONTENT_SHOW: string;
18
18
  export declare const DROPDOWN_CONTENT_HIDE: string;
19
+ export declare const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = "toggleOnHover";
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -16,7 +16,8 @@ const DROPDOWN_CONTENT_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__content`;
16
16
  const DROPDOWN_TOGGLER_CSS_CLASS = `${DROPDOWN_CSS_CLASS}__toggler`;
17
17
  const DROPDOWN_CONTENT_VISIBLE_CLASS = `${DROPDOWN_CONTENT_CSS_CLASS}_visible`;
18
18
  const DROPDOWN_CONTENT_SHOW = `${DROPDOWN_CONTENT_CSS_CLASS}_show`;
19
- const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
19
+ const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
20
+ const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
20
21
 
21
- export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME };
22
+ export { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_CSS_CLASS, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_SHOW, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CSS_CLASS, DROPDOWN_EVENTS, DROPDOWN_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_TOGGLER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME };
22
23
  //# sourceMappingURL=dropdown_constants.js.map
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts CHANGED
@@ -4,10 +4,10 @@ export declare class HDropdownToggler extends PhoenixLightLitElement {
4
4
  private _btnController;
5
5
  private _toggleElementAriaController;
6
6
  private _$dropdown;
7
- toggleOnHover: boolean;
8
7
  constructor();
9
8
  connectedCallback(): void;
10
9
  private _dispatchToggleDropdownEventWithKeyboard;
10
+ private _dispatchToggleDropdownEventOnMobile;
11
11
  private _dispatchToggleDropdownEvent;
12
12
  private _handleFocusToOpenedDropdown;
13
13
  disconnectedCallback(): void;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -1,21 +1,26 @@
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
3
  import { UiDomUtils } from '@dreamcommerce/utilities';
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 { BtnController } from '../../controllers/btn_controller/btn_controller.js';
7
- import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_CSS_CLASS } from './dropdown_constants.js';
7
+ import { BREAKPOINTS } from '../../global_constants.js';
8
+ import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_CONTAINER_NAME, DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME } from './dropdown_constants.js';
8
9
  import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
9
10
 
10
11
  let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
11
12
  constructor() {
12
13
  super();
13
14
  this.name = '';
14
- this.toggleOnHover = false;
15
15
  this._dispatchToggleDropdownEventWithKeyboard = (ev) => {
16
16
  ev.stopImmediatePropagation();
17
17
  this._dispatchToggleDropdownEvent(ev);
18
18
  };
19
+ this._dispatchToggleDropdownEventOnMobile = (ev) => {
20
+ if (window.innerWidth > BREAKPOINTS.xs)
21
+ return;
22
+ this._dispatchToggleDropdownEvent(ev);
23
+ };
19
24
  this._dispatchToggleDropdownEvent = (ev) => {
20
25
  ev.preventDefault();
21
26
  const toggleDropdownEvent = new CustomEvent(DROPDOWN_EVENTS.toggle, {
@@ -42,15 +47,19 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
42
47
  var _a;
43
48
  super.connectedCallback();
44
49
  this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
45
- this._$dropdown = this.parentElement;
50
+ this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
46
51
  if (this._$dropdown.isOpened)
47
52
  this._toggleElementAriaController = new ToggleElementAriaController({
48
53
  host: this,
49
54
  initialAriaExpandedValue: this._$dropdown.isOpened()
50
55
  });
51
- this.toggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute('toggleOnHover')) !== null;
52
- this.addEventListener('click', this._dispatchToggleDropdownEvent);
53
56
  document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
57
+ const hasToggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME)) !== null;
58
+ if (hasToggleOnHover) {
59
+ this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
60
+ return;
61
+ }
62
+ this.addEventListener('click', this._dispatchToggleDropdownEvent);
54
63
  }
55
64
  disconnectedCallback() {
56
65
  super.disconnectedCallback();
@@ -61,10 +70,6 @@ __decorate([
61
70
  property({ type: String, reflect: true }),
62
71
  __metadata("design:type", Object)
63
72
  ], HDropdownToggler.prototype, "name", void 0);
64
- __decorate([
65
- state(),
66
- __metadata("design:type", Object)
67
- ], HDropdownToggler.prototype, "toggleOnHover", void 0);
68
73
  HDropdownToggler = __decorate([
69
74
  phoenixCustomElement('h-dropdown-toggler'),
70
75
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.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;"}
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;"}
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.1",
5
+ "version": "1.1.3-0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "@splidejs/splide": "^4.0.7"
31
31
  },
32
32
  "devDependencies": {
33
- "@dreamcommerce/utilities": "^1.1.0",
33
+ "@dreamcommerce/utilities": "^1.2.0",
34
34
  "@shoper/jest_config": "^0.0.0",
35
35
  "@shoper/tsconfig": "^0.0.0",
36
36
  "@splidejs/splide": "4.0.7",