@shoper/phoenix_design_system 1.11.2-0 → 1.11.2

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 (17) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +41 -32
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -18
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +2 -2
  6. package/build/cjs/packages/phoenix/src/components/slider/slider.js +1 -4
  7. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +4 -2
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +42 -33
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  11. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -6
  12. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +1 -18
  13. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +2 -2
  15. package/build/esm/packages/phoenix/src/components/slider/slider.js +1 -4
  16. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  17. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -136,33 +136,44 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
136
136
  return;
137
137
  await this.hide();
138
138
  };
139
- this._keepFocusWithinDropdownForwards = (ev) => {
140
- var _a, _b, _c;
141
- if (ev.shiftKey === true || !this.$dropdownContent)
139
+ this._handleForwardFocus = async (ev) => {
140
+ // if (!this.opened) this._handleFocusOnNextElement(ev);
141
+ if (!this.opened || ev.shiftKey)
142
142
  return;
143
- const $target = ev.target;
144
- if (((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.opened) {
145
- ev.preventDefault();
146
- (_b = this.$dropdownContent.focusSentinelStart.value) === null || _b === void 0 ? void 0 : _b.focus();
147
- }
148
- if ($target === this.$dropdownContent.focusSentinelEnd.value) {
149
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
150
- }
143
+ const $focusableElementsWithinDropdownContent = utilities.UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(dropdown_constants.DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
144
+ const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
145
+ const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
146
+ const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
147
+ if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
148
+ this._handleFocusOnNextElement(ev);
151
149
  };
152
- this._keepFocusWithinDropdownBackwards = (ev) => {
153
- var _a, _b, _c;
154
- if (!this.opened || !this.$dropdownContent)
155
- return;
156
- if (ev.key !== 'Tab' || ev.shiftKey === false)
150
+ this._handleFocusOnNextElement = async (ev) => {
151
+ var _a;
152
+ ev.preventDefault();
153
+ const $focusableElements = utilities.UiDomUtils.getFocusableElements(document.body);
154
+ const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
155
+ const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
156
+ await this._hideDropdownsSequentially();
157
+ await this.hide();
158
+ this._focusOnNextElementAfterToggler($nextElementToFocus);
159
+ };
160
+ this._focusOnNextElementAfterToggler = ($elementToFocus) => {
161
+ var _a;
162
+ const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(dropdown_constants.DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
163
+ if (isTogglerLastChildOfPreviousDropdown) {
164
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
157
165
  return;
158
- const $target = ev.target;
159
- if (($target === this.$dropdownToggler || ((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)))) {
160
- (_b = this.$dropdownContent.focusSentinelEnd.value) === null || _b === void 0 ? void 0 : _b.focus();
161
- }
162
- if ($target === this.$dropdownContent.focusSentinelStart.value) {
163
- ev.preventDefault();
164
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
165
166
  }
167
+ $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
168
+ };
169
+ this._handleBackwardFocus = async (ev) => {
170
+ var _a;
171
+ const $firstFocusableElement = this.$dropdownContent && utilities.UiDomUtils.getFocusableElement(this.$dropdownContent);
172
+ if (document.activeElement !== $firstFocusableElement)
173
+ return;
174
+ ev.preventDefault();
175
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
176
+ await this._hideDropdownsSequentially();
166
177
  };
167
178
  this._hoverToggle = async (ev) => {
168
179
  if (window.innerWidth < global_constants.BREAKPOINTS.xs)
@@ -205,14 +216,14 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
205
216
  host: this,
206
217
  target: document.body,
207
218
  keys: ['tab'],
208
- callback: this._keepFocusWithinDropdownForwards
219
+ callback: this._handleForwardFocus
220
+ });
221
+ new keystrokes_controller.KeystrokesController({
222
+ host: this,
223
+ target: document.body,
224
+ keys: [['shift', 'tab']],
225
+ callback: this._handleBackwardFocus
209
226
  });
210
- // new KeystrokesController({
211
- // host: this,
212
- // target: document.body,
213
- // keys: [['shift', 'tab']],
214
- // callback: this._keepFocusWithinDropdownBackwards
215
- // });
216
227
  }
217
228
  async connectedCallback() {
218
229
  super.connectedCallback();
@@ -268,7 +279,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
268
279
  document.addEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
269
280
  window.addEventListener('resize', this._observeScrollToggling);
270
281
  document.addEventListener('keydown', this._closeDropdownOnEscape);
271
- document.body.addEventListener('keydown', this._keepFocusWithinDropdownBackwards);
272
282
  if (this.toggleOnHover)
273
283
  document.addEventListener('mouseover', this._hoverToggle);
274
284
  }
@@ -326,7 +336,6 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
326
336
  window.removeEventListener('resize', this._observeScrollToggling);
327
337
  document.removeEventListener('keydown', this._closeDropdownOnEscape);
328
338
  document.removeEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
329
- document.body.removeEventListener('keydown', this._keepFocusWithinDropdownBackwards);
330
339
  if (this.toggleOnHover)
331
340
  document.removeEventListener('mouseover', this._hoverToggle);
332
341
  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;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;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -7,17 +7,13 @@ var lit = require('lit');
7
7
  var decorators = require('lit/decorators');
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
- var ref_js = require('lit-html/directives/ref.js');
11
10
  var dropdown_constants = require('./dropdown_constants.js');
12
11
 
13
12
  exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
14
13
  constructor() {
15
14
  super();
16
15
  this.name = '';
17
- this.focusSentinelStart = ref_js.createRef();
18
- this.focusSentinelEnd = ref_js.createRef();
19
16
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
20
- this._initialChildren = Array.from(this.childNodes);
21
17
  }
22
18
  connectedCallback() {
23
19
  super.connectedCallback();
@@ -27,22 +23,9 @@ exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_elem
27
23
  element.setAttribute('role', 'menuitem');
28
24
  });
29
25
  }
30
- firstUpdated(_changedProperties) {
31
- super.firstUpdated(_changedProperties);
32
- const targetContainer = this.querySelector('[role="dialog"]');
33
- if (targetContainer) {
34
- this._initialChildren.forEach((child) => {
35
- targetContainer.appendChild(child);
36
- });
37
- }
38
- }
39
26
  render() {
40
27
  super.render();
41
- return lit.html `
42
- <div tabindex="0" ${ref_js.ref(this.focusSentinelStart)}></div>
43
- <div role="dialog"></div>
44
- <div tabindex="0" ${ref_js.ref(this.focusSentinelEnd)}></div>
45
- `;
28
+ return lit.html ` <div role="dialog">${this.getSlot('content')}</div> `;
46
29
  }
47
30
  };
48
31
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -54,7 +54,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
54
54
  host: this,
55
55
  initialAriaExpandedValue: this._$dropdown.isOpened()
56
56
  });
57
- // document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
57
+ document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
58
58
  const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(dropdown_constants.DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
59
59
  if (hasToggleOnHover) {
60
60
  this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -64,7 +64,7 @@ exports.HDropdownToggler = class HDropdownToggler extends phoenix_light_lit_elem
64
64
  }
65
65
  disconnectedCallback() {
66
66
  super.disconnectedCallback();
67
- // document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
67
+ document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
68
68
  }
69
69
  };
70
70
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -18,10 +18,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
18
18
  mountOnConnectedCallback: true,
19
19
  type: 'loop',
20
20
  perPage: 3,
21
- focus: 'center',
22
- i18n: {
23
- // zedytowane frazy
24
- }
21
+ focus: 'center'
25
22
  };
26
23
  this._slider = null;
27
24
  }
package/build/cjs/packages/phoenix/src/components/slider/slider.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,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED
@@ -40,8 +40,10 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
40
40
  private _observeScrollToggling;
41
41
  private _toggleScroll;
42
42
  private _closeDropdownOnEscape;
43
- private _keepFocusWithinDropdownForwards;
44
- private _keepFocusWithinDropdownBackwards;
43
+ private _handleForwardFocus;
44
+ private _handleFocusOnNextElement;
45
+ private _focusOnNextElementAfterToggler;
46
+ private _handleBackwardFocus;
45
47
  private _hoverToggle;
46
48
  private _isHoveredWithinDropdown;
47
49
  private _setupInitialDropdownProperties;
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -6,7 +6,7 @@ import { property } from '@lit/reactive-element/decorators.js';
6
6
  import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
7
7
  import { html } from 'lit-html';
8
8
  import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
9
- import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
9
+ import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
10
10
  import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
11
11
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
12
12
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
@@ -132,33 +132,44 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
132
132
  return;
133
133
  await this.hide();
134
134
  };
135
- this._keepFocusWithinDropdownForwards = (ev) => {
136
- var _a, _b, _c;
137
- if (ev.shiftKey === true || !this.$dropdownContent)
135
+ this._handleForwardFocus = async (ev) => {
136
+ // if (!this.opened) this._handleFocusOnNextElement(ev);
137
+ if (!this.opened || ev.shiftKey)
138
138
  return;
139
- const $target = ev.target;
140
- if (((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)) && this.opened) {
141
- ev.preventDefault();
142
- (_b = this.$dropdownContent.focusSentinelStart.value) === null || _b === void 0 ? void 0 : _b.focus();
143
- }
144
- if ($target === this.$dropdownContent.focusSentinelEnd.value) {
145
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
146
- }
139
+ const $focusableElementsWithinDropdownContent = UiDomUtils.getFocusableElements(this.$dropdownContent).filter((element) => element.closest(DROPDOWN_CONTENT_NAME) === this.$dropdownContent);
140
+ const doesNotHaveFocusableElementsInsideContent = $focusableElementsWithinDropdownContent.length <= 0 && this.opened;
141
+ const indexOfCurrentlyFocusedElement = $focusableElementsWithinDropdownContent.indexOf(document.activeElement);
142
+ const isActiveElementLastFocusableElement = indexOfCurrentlyFocusedElement === $focusableElementsWithinDropdownContent.length - 1;
143
+ if (doesNotHaveFocusableElementsInsideContent || isActiveElementLastFocusableElement)
144
+ this._handleFocusOnNextElement(ev);
147
145
  };
148
- this._keepFocusWithinDropdownBackwards = (ev) => {
149
- var _a, _b, _c;
150
- if (!this.opened || !this.$dropdownContent)
151
- return;
152
- if (ev.key !== 'Tab' || ev.shiftKey === false)
146
+ this._handleFocusOnNextElement = async (ev) => {
147
+ var _a;
148
+ ev.preventDefault();
149
+ const $focusableElements = UiDomUtils.getFocusableElements(document.body);
150
+ const indexOfDropdownToggler = $focusableElements.indexOf(this.$dropdownToggler);
151
+ const $nextElementToFocus = (_a = $focusableElements[indexOfDropdownToggler + 1]) !== null && _a !== void 0 ? _a : $focusableElements[0];
152
+ await this._hideDropdownsSequentially();
153
+ await this.hide();
154
+ this._focusOnNextElementAfterToggler($nextElementToFocus);
155
+ };
156
+ this._focusOnNextElementAfterToggler = ($elementToFocus) => {
157
+ var _a;
158
+ const isTogglerLastChildOfPreviousDropdown = ($elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.closest(DROPDOWN_CONTENT_NAME)) === this.$dropdownContent;
159
+ if (isTogglerLastChildOfPreviousDropdown) {
160
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
153
161
  return;
154
- const $target = ev.target;
155
- if (($target === this.$dropdownToggler || ((_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.contains($target)))) {
156
- (_b = this.$dropdownContent.focusSentinelEnd.value) === null || _b === void 0 ? void 0 : _b.focus();
157
- }
158
- if ($target === this.$dropdownContent.focusSentinelStart.value) {
159
- ev.preventDefault();
160
- (_c = this.$dropdownToggler) === null || _c === void 0 ? void 0 : _c.focus();
161
162
  }
163
+ $elementToFocus === null || $elementToFocus === void 0 ? void 0 : $elementToFocus.focus();
164
+ };
165
+ this._handleBackwardFocus = async (ev) => {
166
+ var _a;
167
+ const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
168
+ if (document.activeElement !== $firstFocusableElement)
169
+ return;
170
+ ev.preventDefault();
171
+ (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
172
+ await this._hideDropdownsSequentially();
162
173
  };
163
174
  this._hoverToggle = async (ev) => {
164
175
  if (window.innerWidth < BREAKPOINTS.xs)
@@ -201,14 +212,14 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
201
212
  host: this,
202
213
  target: document.body,
203
214
  keys: ['tab'],
204
- callback: this._keepFocusWithinDropdownForwards
215
+ callback: this._handleForwardFocus
216
+ });
217
+ new KeystrokesController({
218
+ host: this,
219
+ target: document.body,
220
+ keys: [['shift', 'tab']],
221
+ callback: this._handleBackwardFocus
205
222
  });
206
- // new KeystrokesController({
207
- // host: this,
208
- // target: document.body,
209
- // keys: [['shift', 'tab']],
210
- // callback: this._keepFocusWithinDropdownBackwards
211
- // });
212
223
  }
213
224
  async connectedCallback() {
214
225
  super.connectedCallback();
@@ -264,7 +275,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
264
275
  document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
265
276
  window.addEventListener('resize', this._observeScrollToggling);
266
277
  document.addEventListener('keydown', this._closeDropdownOnEscape);
267
- document.body.addEventListener('keydown', this._keepFocusWithinDropdownBackwards);
268
278
  if (this.toggleOnHover)
269
279
  document.addEventListener('mouseover', this._hoverToggle);
270
280
  }
@@ -322,7 +332,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
322
332
  window.removeEventListener('resize', this._observeScrollToggling);
323
333
  document.removeEventListener('keydown', this._closeDropdownOnEscape);
324
334
  document.removeEventListener(DROPDOWN_EVENTS.hide, this.hide);
325
- document.body.removeEventListener('keydown', this._keepFocusWithinDropdownBackwards);
326
335
  if (this.toggleOnHover)
327
336
  document.removeEventListener('mouseover', this._hoverToggle);
328
337
  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;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;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,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts CHANGED
@@ -1,13 +1,8 @@
1
- import { PropertyValues, TemplateResult } from 'lit';
1
+ import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
- import { Ref } from 'lit-html/directives/ref.js';
4
3
  export declare class HDropdownContent extends PhoenixLightLitElement {
5
4
  name: string;
6
- focusSentinelStart: Ref<HTMLElement>;
7
- focusSentinelEnd: Ref<HTMLElement>;
8
- private _initialChildren;
9
5
  constructor();
10
6
  connectedCallback(): void;
11
- firstUpdated(_changedProperties: PropertyValues): void;
12
7
  protected render(): TemplateResult;
13
8
  }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -3,17 +3,13 @@ import { html } from 'lit';
3
3
  import { property } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
6
- import { createRef, ref } from 'lit-html/directives/ref.js';
7
6
  import { DROPDOWN_CSS_CLASSES } from './dropdown_constants.js';
8
7
 
9
8
  let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
10
9
  constructor() {
11
10
  super();
12
11
  this.name = '';
13
- this.focusSentinelStart = createRef();
14
- this.focusSentinelEnd = createRef();
15
12
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
16
- this._initialChildren = Array.from(this.childNodes);
17
13
  }
18
14
  connectedCallback() {
19
15
  super.connectedCallback();
@@ -23,22 +19,9 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
23
19
  element.setAttribute('role', 'menuitem');
24
20
  });
25
21
  }
26
- firstUpdated(_changedProperties) {
27
- super.firstUpdated(_changedProperties);
28
- const targetContainer = this.querySelector('[role="dialog"]');
29
- if (targetContainer) {
30
- this._initialChildren.forEach((child) => {
31
- targetContainer.appendChild(child);
32
- });
33
- }
34
- }
35
22
  render() {
36
23
  super.render();
37
- return html `
38
- <div tabindex="0" ${ref(this.focusSentinelStart)}></div>
39
- <div role="dialog"></div>
40
- <div tabindex="0" ${ref(this.focusSentinelEnd)}></div>
41
- `;
24
+ return html ` <div role="dialog">${this.getSlot('content')}</div> `;
42
25
  }
43
26
  };
44
27
  __decorate([
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js CHANGED
@@ -50,7 +50,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
50
50
  host: this,
51
51
  initialAriaExpandedValue: this._$dropdown.isOpened()
52
52
  });
53
- // document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
53
+ document.addEventListener('keydown', this._handleFocusToOpenedDropdown);
54
54
  const hasToggleOnHover = (_a = this._$dropdown) === null || _a === void 0 ? void 0 : _a.hasAttribute(DROPDOWN_TOGGLE_ON_HOVER_ATTRIBUTE_NAME);
55
55
  if (hasToggleOnHover) {
56
56
  this.addEventListener('click', this._dispatchToggleDropdownEventOnMobile);
@@ -60,7 +60,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
60
60
  }
61
61
  disconnectedCallback() {
62
62
  super.disconnectedCallback();
63
- // document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
63
+ document.removeEventListener('keydown', this._handleFocusToOpenedDropdown);
64
64
  }
65
65
  };
66
66
  __decorate([
package/build/esm/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -14,10 +14,7 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
14
14
  mountOnConnectedCallback: true,
15
15
  type: 'loop',
16
16
  perPage: 3,
17
- focus: 'center',
18
- i18n: {
19
- // zedytowane frazy
20
- }
17
+ focus: 'center'
21
18
  };
22
19
  this._slider = null;
23
20
  }
package/build/esm/packages/phoenix/src/components/slider/slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11.2-0",
5
+ "version": "1.11.2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",