@shoper/phoenix_design_system 0.18.1 → 0.19.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 (21) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +12 -4
  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 +4 -1
  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 +4 -2
  6. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js +3 -3
  8. package/build/cjs/packages/phoenix/src/index.js +8 -8
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +5 -3
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +12 -4
  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 +3 -0
  13. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js +4 -1
  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.js +5 -3
  16. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/controllers/btn_controller.d.ts +1 -1
  18. package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js +3 -3
  19. package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts +1 -1
  20. package/build/esm/packages/phoenix/src/index.js +2 -2
  21. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -62,7 +62,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
62
62
  });
63
63
  };
64
64
  this._dispatchShowDropdownEvent = () => {
65
- const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.show, {
65
+ const showDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.showed, {
66
66
  bubbles: true
67
67
  });
68
68
  this.dispatchEvent(showDropdownEvent);
@@ -88,7 +88,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
88
88
  });
89
89
  });
90
90
  this._dispatchHideDropdownEvent = () => {
91
- const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hide, {
91
+ const hideDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.hidden, {
92
92
  bubbles: true
93
93
  });
94
94
  this.dispatchEvent(hideDropdownEvent);
@@ -106,6 +106,12 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
106
106
  this._observeScrollToggling = throttle['default'](() => {
107
107
  this._toggleScroll();
108
108
  }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
109
+ this._closeDropdownOnEscape = async (ev) => {
110
+ const hasEscapeBeenPressed = ev.key.toLowerCase() === 'escape';
111
+ if (!hasEscapeBeenPressed)
112
+ return;
113
+ await this.hide();
114
+ };
109
115
  this._hoverToggle = async (ev) => {
110
116
  if (window.innerWidth < global_constants.BREAKPOINTS.xs)
111
117
  return;
@@ -181,8 +187,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
181
187
  var _a;
182
188
  this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
183
189
  this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
184
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
190
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
185
191
  window.addEventListener('resize', this._observeScrollToggling);
192
+ document.addEventListener('keydown', this._closeDropdownOnEscape);
186
193
  if (this.toggleOnHover)
187
194
  document.addEventListener('mouseover', this._hoverToggle);
188
195
  }
@@ -227,8 +234,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
227
234
  disconnectedCallback() {
228
235
  var _a;
229
236
  super.disconnectedCallback();
230
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
237
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
231
238
  window.removeEventListener('resize', this._observeScrollToggling);
239
+ document.removeEventListener('keydown', this._closeDropdownOnEscape);
232
240
  if (this.toggleOnHover)
233
241
  document.removeEventListener('mouseover', this._hoverToggle);
234
242
  if (this.opened) {
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,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;"}
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,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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -9,8 +9,11 @@ const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
9
9
  const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
10
10
  const DROPDOWN_EVENT_NAME = 'dropdown';
11
11
  const DROPDOWN_EVENTS = {
12
+ toggle: `${DROPDOWN_EVENT_NAME}.toggle`,
12
13
  show: `${DROPDOWN_EVENT_NAME}.show`,
13
- hide: `${DROPDOWN_EVENT_NAME}.hide`
14
+ hide: `${DROPDOWN_EVENT_NAME}.hide`,
15
+ showed: `${DROPDOWN_EVENT_NAME}.showed`,
16
+ hidden: `${DROPDOWN_EVENT_NAME}.hidden`
14
17
  };
15
18
  const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
16
19
  const DROPDOWN_CSS_CLASS = 'dropdown';
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;"}
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
@@ -15,8 +15,10 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
15
15
  super();
16
16
  this.name = '';
17
17
  this.toggleOnHover = false;
18
- this._dispatchToggleDropdownEvent = () => {
19
- const toggleDropdownEvent = new Event('toggle', {
18
+ this._dispatchToggleDropdownEvent = (ev) => {
19
+ ev.preventDefault();
20
+ ev.stopImmediatePropagation();
21
+ const toggleDropdownEvent = new Event(dropdown_constants.DROPDOWN_EVENTS.toggle, {
20
22
  bubbles: true
21
23
  });
22
24
  this.dispatchEvent(toggleDropdownEvent);
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;"}
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;"}
package/build/cjs/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js CHANGED
@@ -21,15 +21,15 @@ class KeystrokesController {
21
21
  }
22
22
  this._buffer.push(key);
23
23
  this._lastKeyTime = currentTime;
24
- this._bindKeysWithCallback(this._buffer.join(''));
24
+ this._bindKeysWithCallback(ev, this._buffer.join(''));
25
25
  };
26
- this._bindKeysWithCallback = (keySequence) => {
26
+ this._bindKeysWithCallback = (ev, keySequence) => {
27
27
  const isCorrectKeyPressed = !!this._keys.find((key) => {
28
28
  return key.toLowerCase() === keySequence;
29
29
  });
30
30
  if (isCorrectKeyPressed) {
31
31
  this._buffer = [];
32
- this._callback();
32
+ this._callback(ev);
33
33
  }
34
34
  };
35
35
  tslib_es6.__classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -52,10 +52,10 @@ var accordion_content = require('./components/accordion/accordion_content.js');
52
52
  var accordion_toggler = require('./components/accordion/accordion_toggler.js');
53
53
  var click_outside_controller = require('./controllers/click_outside_controller/click_outside_controller.js');
54
54
  var dropdown_content = require('./components/dropdown/dropdown_content.js');
55
- var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
56
- var dropdown = require('./components/dropdown/dropdown.js');
57
55
  var toggle_element_aria_controller = require('./controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
58
56
  var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
57
+ var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
58
+ var dropdown = require('./components/dropdown/dropdown.js');
59
59
  var toggle_button_group = require('./components/groups/toggle_button_group/toggle_button_group.js');
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');
@@ -304,18 +304,18 @@ Object.defineProperty(exports, 'HDropdownContent', {
304
304
  return dropdown_content.HDropdownContent;
305
305
  }
306
306
  });
307
- exports.RelativePositionController = relative_position_controller.RelativePositionController;
308
- Object.defineProperty(exports, 'HDropdown', {
307
+ exports.ToggleElementAriaController = toggle_element_aria_controller.ToggleElementAriaController;
308
+ Object.defineProperty(exports, 'HDropdownToggler', {
309
309
  enumerable: true,
310
310
  get: function () {
311
- return dropdown.HDropdown;
311
+ return dropdown_toggler.HDropdownToggler;
312
312
  }
313
313
  });
314
- exports.ToggleElementAriaController = toggle_element_aria_controller.ToggleElementAriaController;
315
- Object.defineProperty(exports, 'HDropdownToggler', {
314
+ exports.RelativePositionController = relative_position_controller.RelativePositionController;
315
+ Object.defineProperty(exports, 'HDropdown', {
316
316
  enumerable: true,
317
317
  get: function () {
318
- return dropdown_toggler.HDropdownToggler;
318
+ return dropdown.HDropdown;
319
319
  }
320
320
  });
321
321
  Object.defineProperty(exports, 'HToggleButtonGroup', {
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts CHANGED
@@ -1,7 +1,8 @@
1
+ import { TemplateResult } from 'lit-html';
1
2
  import { HDropdownContent } from './dropdown_content';
3
+ import { HDropdownToggler } from './dropdown_toggler';
2
4
  import { IDropdown } from "./dropdown_types";
3
5
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
4
- import { TemplateResult } from 'lit-html';
5
6
  export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
6
7
  opened: boolean;
7
8
  direction: "bottom-center";
@@ -9,8 +10,8 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
9
10
  name: string;
10
11
  transition: string;
11
12
  portalTarget: string;
12
- $dropdownToggler: HTMLElement | null;
13
- $dropdownContent: HTMLElement | null;
13
+ $dropdownToggler: HDropdownToggler | null;
14
+ $dropdownContent: HDropdownContent | null;
14
15
  $nestedDropdownContentElements?: HDropdownContent[];
15
16
  $hoverableDropdownContentElements: HDropdownContent[];
16
17
  private _positionController;
@@ -31,6 +32,7 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
31
32
  private _handleEnabledPositioning;
32
33
  private _observeScrollToggling;
33
34
  private _toggleScroll;
35
+ private _closeDropdownOnEscape;
34
36
  private _hoverToggle;
35
37
  private _isHoveredWithinDropdown;
36
38
  private _setupInitialDropdownProperties;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -58,7 +58,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
58
58
  });
59
59
  };
60
60
  this._dispatchShowDropdownEvent = () => {
61
- const showDropdownEvent = new Event(DROPDOWN_EVENTS.show, {
61
+ const showDropdownEvent = new Event(DROPDOWN_EVENTS.showed, {
62
62
  bubbles: true
63
63
  });
64
64
  this.dispatchEvent(showDropdownEvent);
@@ -84,7 +84,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
84
84
  });
85
85
  });
86
86
  this._dispatchHideDropdownEvent = () => {
87
- const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hide, {
87
+ const hideDropdownEvent = new Event(DROPDOWN_EVENTS.hidden, {
88
88
  bubbles: true
89
89
  });
90
90
  this.dispatchEvent(hideDropdownEvent);
@@ -102,6 +102,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
102
102
  this._observeScrollToggling = throttle_1(() => {
103
103
  this._toggleScroll();
104
104
  }, DEFAULT_THROTTLE_WAIT_TIME);
105
+ this._closeDropdownOnEscape = async (ev) => {
106
+ const hasEscapeBeenPressed = ev.key.toLowerCase() === 'escape';
107
+ if (!hasEscapeBeenPressed)
108
+ return;
109
+ await this.hide();
110
+ };
105
111
  this._hoverToggle = async (ev) => {
106
112
  if (window.innerWidth < BREAKPOINTS.xs)
107
113
  return;
@@ -177,8 +183,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
177
183
  var _a;
178
184
  this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
179
185
  this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
180
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.toggle);
186
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
181
187
  window.addEventListener('resize', this._observeScrollToggling);
188
+ document.addEventListener('keydown', this._closeDropdownOnEscape);
182
189
  if (this.toggleOnHover)
183
190
  document.addEventListener('mouseover', this._hoverToggle);
184
191
  }
@@ -223,8 +230,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
223
230
  disconnectedCallback() {
224
231
  var _a;
225
232
  super.disconnectedCallback();
226
- (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggle);
233
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.removeEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
227
234
  window.removeEventListener('resize', this._observeScrollToggling);
235
+ document.removeEventListener('keydown', this._closeDropdownOnEscape);
228
236
  if (this.toggleOnHover)
229
237
  document.removeEventListener('mouseover', this._hoverToggle);
230
238
  if (this.opened) {
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,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;"}
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,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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.d.ts CHANGED
@@ -4,8 +4,11 @@ export declare const DROPDOWN_TOGGLER_NAME: string;
4
4
  export declare const DROPDOWN_CONTENT_NAME: string;
5
5
  export declare const DEFAULT_DROPDOWN_PORTAL_NAME = "dropdown-portal";
6
6
  export declare const DROPDOWN_EVENTS: {
7
+ readonly toggle: "dropdown.toggle";
7
8
  readonly show: "dropdown.show";
8
9
  readonly hide: "dropdown.hide";
10
+ readonly showed: "dropdown.showed";
11
+ readonly hidden: "dropdown.hidden";
9
12
  };
10
13
  export declare const DROPDOWN_OPENED_ATTRIBUTE_NAME = "opened";
11
14
  export declare const DROPDOWN_CSS_CLASS = "dropdown";
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_constants.js CHANGED
@@ -5,8 +5,11 @@ const DROPDOWN_CONTENT_NAME = `${DROPDOWN_CONTAINER_NAME}-content`;
5
5
  const DEFAULT_DROPDOWN_PORTAL_NAME = 'dropdown-portal';
6
6
  const DROPDOWN_EVENT_NAME = 'dropdown';
7
7
  const DROPDOWN_EVENTS = {
8
+ toggle: `${DROPDOWN_EVENT_NAME}.toggle`,
8
9
  show: `${DROPDOWN_EVENT_NAME}.show`,
9
- hide: `${DROPDOWN_EVENT_NAME}.hide`
10
+ hide: `${DROPDOWN_EVENT_NAME}.hide`,
11
+ showed: `${DROPDOWN_EVENT_NAME}.showed`,
12
+ hidden: `${DROPDOWN_EVENT_NAME}.hidden`
10
13
  };
11
14
  const DROPDOWN_OPENED_ATTRIBUTE_NAME = 'opened';
12
15
  const DROPDOWN_CSS_CLASS = 'dropdown';
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;"}
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.js CHANGED
@@ -3,7 +3,7 @@ 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
5
  import { BtnController } from '../../controllers/btn_controller.js';
6
- import { DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
6
+ import { DROPDOWN_EVENTS, DROPDOWN_TOGGLER_CSS_CLASS, DROPDOWN_OPENED_ATTRIBUTE_NAME } from './dropdown_constants.js';
7
7
  import { ToggleElementAriaController } from '../../controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
8
8
 
9
9
  let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
@@ -11,8 +11,10 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
11
11
  super();
12
12
  this.name = '';
13
13
  this.toggleOnHover = false;
14
- this._dispatchToggleDropdownEvent = () => {
15
- const toggleDropdownEvent = new Event('toggle', {
14
+ this._dispatchToggleDropdownEvent = (ev) => {
15
+ ev.preventDefault();
16
+ ev.stopImmediatePropagation();
17
+ const toggleDropdownEvent = new Event(DROPDOWN_EVENTS.toggle, {
16
18
  bubbles: true
17
19
  });
18
20
  this.dispatchEvent(toggleDropdownEvent);
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;"}
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;"}
package/build/esm/packages/phoenix/src/controllers/btn_controller.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ReactiveController, ReactiveControllerHost } from 'lit';
2
2
  export declare class BtnController implements ReactiveController {
3
3
  host: ReactiveControllerHost & HTMLElement;
4
4
  private _keystrokesController;
5
- constructor(host: ReactiveControllerHost & HTMLElement, callback: () => void);
5
+ constructor(host: ReactiveControllerHost & HTMLElement, callback: (ev: Event) => void);
6
6
  hostConnected(): void;
7
7
  hostDisconnected(): void;
8
8
  }
package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller.js CHANGED
@@ -17,15 +17,15 @@ class KeystrokesController {
17
17
  }
18
18
  this._buffer.push(key);
19
19
  this._lastKeyTime = currentTime;
20
- this._bindKeysWithCallback(this._buffer.join(''));
20
+ this._bindKeysWithCallback(ev, this._buffer.join(''));
21
21
  };
22
- this._bindKeysWithCallback = (keySequence) => {
22
+ this._bindKeysWithCallback = (ev, keySequence) => {
23
23
  const isCorrectKeyPressed = !!this._keys.find((key) => {
24
24
  return key.toLowerCase() === keySequence;
25
25
  });
26
26
  if (isCorrectKeyPressed) {
27
27
  this._buffer = [];
28
- this._callback();
28
+ this._callback(ev);
29
29
  }
30
30
  };
31
31
  __classPrivateFieldSet(this, _KeystrokesController_host, host, "f");
package/build/esm/packages/phoenix/src/controllers/keystrokes_controller/keystrokes_controller_types.d.ts CHANGED
@@ -2,5 +2,5 @@ import { TWebComponentsContextControllerHost } from "../../core/context/context_
2
2
  export declare type TKeystrokesControllerProps = {
3
3
  host: TWebComponentsContextControllerHost;
4
4
  keys: string[];
5
- callback: () => void;
5
+ callback: (ev: Event) => void;
6
6
  };
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -48,10 +48,10 @@ export { HAccordionContent } from './components/accordion/accordion_content.js';
48
48
  export { HAccordionToggler } from './components/accordion/accordion_toggler.js';
49
49
  export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller.js';
50
50
  export { HDropdownContent } from './components/dropdown/dropdown_content.js';
51
- export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
52
- export { HDropdown } from './components/dropdown/dropdown.js';
53
51
  export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
54
52
  export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
53
+ export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
54
+ export { HDropdown } from './components/dropdown/dropdown.js';
55
55
  export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group.js';
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';
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.18.1",
5
+ "version": "0.19.0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",