@shoper/phoenix_design_system 1.1.3-0 → 1.1.4-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +3 -1
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js +1 -3
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +8 -13
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/select.js +3 -3
  8. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +4 -1
  9. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +3 -1
  11. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts +0 -1
  13. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js +2 -3
  14. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +1 -1
  16. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +10 -15
  17. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  18. package/build/esm/packages/phoenix/src/components/form/select/select.js +3 -3
  19. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +3 -0
  20. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +4 -1
  21. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  22. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -273,9 +273,11 @@ 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;
276
277
  this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
277
278
  this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
278
- this.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
279
+ if (!this.toggleOnHover)
280
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
279
281
  document.addEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
280
282
  window.addEventListener('resize', this._observeScrollToggling);
281
283
  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;"}
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;AACA;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -20,8 +20,7 @@ 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`;
24
- const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
23
+ const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
25
24
 
26
25
  exports.DEFAULT_DROPDOWN_PORTAL_NAME = DEFAULT_DROPDOWN_PORTAL_NAME;
27
26
  exports.DROPDOWN_CONTAINER_NAME = DROPDOWN_CONTAINER_NAME;
@@ -35,5 +34,4 @@ exports.DROPDOWN_EVENTS = DROPDOWN_EVENTS;
35
34
  exports.DROPDOWN_NAME = DROPDOWN_NAME;
36
35
  exports.DROPDOWN_TOGGLER_CSS_CLASS = DROPDOWN_TOGGLER_CSS_CLASS;
37
36
  exports.DROPDOWN_TOGGLER_NAME = DROPDOWN_TOGGLER_NAME;
38
- exports.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME;
39
37
  //# 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;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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -8,7 +8,6 @@ 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');
12
11
  var dropdown_constants = require('./dropdown_constants.js');
13
12
  var toggle_element_aria_controller = require('../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
14
13
 
@@ -16,15 +15,11 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
16
15
  constructor() {
17
16
  super();
18
17
  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
- };
28
23
  this._dispatchToggleDropdownEvent = (ev) => {
29
24
  ev.preventDefault();
30
25
  const toggleDropdownEvent = new CustomEvent(dropdown_constants.DROPDOWN_EVENTS.toggle, {
@@ -51,19 +46,15 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
51
46
  var _a;
52
47
  super.connectedCallback();
53
48
  this._btnController = new btn_controller.BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
54
- this._$dropdown = this.closest(dropdown_constants.DROPDOWN_CONTAINER_NAME);
49
+ this._$dropdown = this.parentElement;
55
50
  if (this._$dropdown.isOpened)
56
51
  this._toggleElementAriaController = new toggle_element_aria_controller.ToggleElementAriaController({
57
52
  host: this,
58
53
  initialAriaExpandedValue: this._$dropdown.isOpened()
59
54
  });
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
- }
55
+ this.toggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute('toggleOnHover')) !== null;
66
56
  this.addEventListener('click', this._dispatchToggleDropdownEvent);
57
+ document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
67
58
  }
68
59
  disconnectedCallback() {
69
60
  super.disconnectedCallback();
@@ -74,6 +65,10 @@ tslib_es6.__decorate([
74
65
  decorators.property({ type: String, reflect: true }),
75
66
  tslib_es6.__metadata("design:type", Object)
76
67
  ], 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);
77
72
  exports.HDropdownToggler = tslib_es6.__decorate([
78
73
  phoenix_custom_element.phoenixCustomElement('h-dropdown-toggler'),
79
74
  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;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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -203,7 +203,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
203
203
  <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
204
204
 
205
205
  <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.ref(this._$dropdownContent)} name=${this.controlName}>
206
- <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
206
+ <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
207
207
 
208
208
  ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
209
209
  ? lit.html `<h-select-search
@@ -234,8 +234,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
234
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
235
235
  ? lit.html `
236
236
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
237
- <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
238
- <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
237
+ <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
238
+ <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
239
239
  >ok</h-select-close-btn
240
240
  >
241
241
  </section>
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -27,7 +27,10 @@ const SELECT_CSS_CLASSES = {
27
27
  selectContent: `${baseSelectClass}__content`,
28
28
  selectFooter: `${baseSelectClass}__footer`,
29
29
  selectNoResult: `${baseSelectClass}__no-result`,
30
- selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
30
+ selectSearchedPhrase: `${baseSelectClass}__searched-phrase`,
31
+ selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
32
+ selectClearButton: `${baseSelectClass}__clear-btn`,
33
+ selectCloseButton: `${baseSelectClass}__close-btn`,
31
34
  };
32
35
 
33
36
  exports.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -269,9 +269,11 @@ 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;
272
273
  this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
273
274
  this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
274
- this.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
275
+ if (!this.toggleOnHover)
276
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
275
277
  document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
276
278
  window.addEventListener('resize', this._observeScrollToggling);
277
279
  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;"}
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;AACA;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts CHANGED
@@ -16,4 +16,3 @@ 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,8 +16,7 @@ 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`;
20
- const DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME = 'toggleOnHover';
19
+ const DROPDOWN_CONTENT_HIDE = `${DROPDOWN_CONTENT_CSS_CLASS}_hide`;
21
20
 
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 };
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 };
23
22
  //# 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;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;"}
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;
7
8
  constructor();
8
9
  connectedCallback(): void;
9
10
  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,26 +1,21 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
- import { property } from 'lit/decorators';
2
+ import { property, state } 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 { 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';
7
+ import { DROPDOWN_EVENTS, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_CSS_CLASS } from './dropdown_constants.js';
9
8
  import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
10
9
 
11
10
  let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
12
11
  constructor() {
13
12
  super();
14
13
  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
- };
24
19
  this._dispatchToggleDropdownEvent = (ev) => {
25
20
  ev.preventDefault();
26
21
  const toggleDropdownEvent = new CustomEvent(DROPDOWN_EVENTS.toggle, {
@@ -47,19 +42,15 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
47
42
  var _a;
48
43
  super.connectedCallback();
49
44
  this._btnController = new BtnController(this, this._dispatchToggleDropdownEventWithKeyboard);
50
- this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
45
+ this._$dropdown = this.parentElement;
51
46
  if (this._$dropdown.isOpened)
52
47
  this._toggleElementAriaController = new ToggleElementAriaController({
53
48
  host: this,
54
49
  initialAriaExpandedValue: this._$dropdown.isOpened()
55
50
  });
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
- }
51
+ this.toggleOnHover = ((_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.getAttribute('toggleOnHover')) !== null;
62
52
  this.addEventListener('click', this._dispatchToggleDropdownEvent);
53
+ document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
63
54
  }
64
55
  disconnectedCallback() {
65
56
  super.disconnectedCallback();
@@ -70,6 +61,10 @@ __decorate([
70
61
  property({ type: String, reflect: true }),
71
62
  __metadata("design:type", Object)
72
63
  ], HDropdownToggler.prototype, "name", void 0);
64
+ __decorate([
65
+ state(),
66
+ __metadata("design:type", Object)
67
+ ], HDropdownToggler.prototype, "toggleOnHover", void 0);
73
68
  HDropdownToggler = __decorate([
74
69
  phoenixCustomElement('h-dropdown-toggler'),
75
70
  __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;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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -199,7 +199,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
199
199
  <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
200
200
 
201
201
  <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
202
- <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
202
+ <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
203
203
 
204
204
  ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
205
205
  ? html `<h-select-search
@@ -230,8 +230,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
230
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
231
231
  ? html `
232
232
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
233
- <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
234
- <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
233
+ <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
234
+ <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
235
235
  >ok</h-select-close-btn
236
236
  >
237
237
  </section>
package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts CHANGED
@@ -23,4 +23,7 @@ export declare const SELECT_CSS_CLASSES: {
23
23
  readonly selectFooter: "select__footer";
24
24
  readonly selectNoResult: "select__no-result";
25
25
  readonly selectSearchedPhrase: "select__searched-phrase";
26
+ readonly selectCloseMobileButton: "select__close-mobile-btn";
27
+ readonly selectClearButton: "select__clear-btn";
28
+ readonly selectCloseButton: "select__close-btn";
26
29
  };
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -23,7 +23,10 @@ const SELECT_CSS_CLASSES = {
23
23
  selectContent: `${baseSelectClass}__content`,
24
24
  selectFooter: `${baseSelectClass}__footer`,
25
25
  selectNoResult: `${baseSelectClass}__no-result`,
26
- selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
26
+ selectSearchedPhrase: `${baseSelectClass}__searched-phrase`,
27
+ selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
28
+ selectClearButton: `${baseSelectClass}__clear-btn`,
29
+ selectCloseButton: `${baseSelectClass}__close-btn`,
27
30
  };
28
31
 
29
32
  export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
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.3-0",
5
+ "version": "1.1.4-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",