@shoper/phoenix_design_system 1.15.11-40 → 1.15.11-41

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 (23) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/radio/radio_control.js +0 -5
  2. package/build/cjs/packages/phoenix/src/components/form/radio/radio_control.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/modal/modal.js +1 -3
  4. package/build/cjs/packages/phoenix/src/components/modal/modal.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/slider/slider.js +22 -0
  6. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js +11 -0
  8. package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
  9. package/build/esm/packages/phoenix/src/components/form/radio/radio_control.d.ts +0 -1
  10. package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js +0 -5
  11. package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/modal/modal.js +1 -3
  13. package/build/esm/packages/phoenix/src/components/modal/modal.js.map +1 -1
  14. package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +4 -0
  15. package/build/esm/packages/phoenix/src/components/slider/slider.js +23 -1
  16. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/slider/slider_constants.d.ts +4 -0
  18. package/build/esm/packages/phoenix/src/components/slider/slider_constants.js +7 -0
  19. package/build/esm/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
  20. package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts +3 -0
  21. package/build/esm/packages/phoenix/src/components/slider/slider_types.js +2 -0
  22. package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map +1 -1
  23. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/radio/radio_control.js CHANGED
@@ -41,7 +41,6 @@ exports.HRadioControl = class HRadioControl extends phoenix_light_lit_element.Ph
41
41
  ?readonly="${this.readonly}"
42
42
  ?hidden="${this.hidden}"
43
43
  .checked="${this.checked}"
44
- aria-describedby="${ifDefined_js.ifDefined(this.ariaDescribedby)}"
45
44
  @change="${this._handleChangeEvent}"
46
45
  />
47
46
 
@@ -81,10 +80,6 @@ tslib_es6.__decorate([
81
80
  decorators.property({ type: String }),
82
81
  tslib_es6.__metadata("design:type", String)
83
82
  ], exports.HRadioControl.prototype, "value", void 0);
84
- tslib_es6.__decorate([
85
- decorators.property({ type: String, attribute: 'aria-describedby' }),
86
- tslib_es6.__metadata("design:type", String)
87
- ], exports.HRadioControl.prototype, "ariaDescribedby", void 0);
88
83
  exports.HRadioControl = tslib_es6.__decorate([
89
84
  phoenix_custom_element.phoenixCustomElement('h-radio-control'),
90
85
  tslib_es6.__metadata("design:paramtypes", [])
package/build/cjs/packages/phoenix/src/components/form/radio/radio_control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -116,9 +116,7 @@ exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.Phoen
116
116
  };
117
117
  this._addInertToBodyChildrenElements = () => {
118
118
  [...document.body.children].forEach((child) => {
119
- const isPortalTarget = child.tagName === portal_constants.PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
120
- const isAriaLiveContainer = child.hasAttribute('aria-live');
121
- if (!isPortalTarget && !isAriaLiveContainer) {
119
+ if (child.tagName !== portal_constants.PORTAL_TARGET_COMPONENT_NAME.toUpperCase()) {
122
120
  child.setAttribute('inert', '');
123
121
  }
124
122
  });
package/build/cjs/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider.js CHANGED
@@ -8,6 +8,7 @@ var utilities = require('@dreamcommerce/utilities');
8
8
  var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
9
9
  var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
10
10
  var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
11
+ var slider_constants = require('./slider_constants.js');
11
12
 
12
13
  exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLitElement {
13
14
  constructor() {
@@ -21,6 +22,19 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
21
22
  focus: 'center'
22
23
  };
23
24
  this._slider = null;
25
+ this._showFocusableNodes = (slideComponent) => {
26
+ this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
27
+ };
28
+ this._hideFocusableNodes = (slideComponent) => {
29
+ this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
30
+ };
31
+ this._handleFocusableNodes = ({ slide }, action) => {
32
+ const $focusableElements = utilities.UiDomUtils.getFocusableElements(slide);
33
+ if ($focusableElements.length === 0)
34
+ return;
35
+ const newTabindex = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
36
+ $focusableElements.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
37
+ };
24
38
  }
25
39
  get sliderSettings() {
26
40
  return this._settings;
@@ -40,10 +54,18 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
40
54
  if (this._settings.mountOnConnectedCallback) {
41
55
  this._slider.mount();
42
56
  }
57
+ this._slider.on('visible', this._showFocusableNodes);
58
+ this._slider.on('hidden', this._hideFocusableNodes);
43
59
  }
44
60
  getSlider() {
45
61
  return this._slider;
46
62
  }
63
+ disconnectedCallback() {
64
+ var _a, _b;
65
+ super.disconnectedCallback();
66
+ (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
67
+ (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
68
+ }
47
69
  };
48
70
  tslib_es6.__decorate([
49
71
  decorators.property({ reflect: true }),
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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider_constants.js ADDED
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
6
+ show: 'show',
7
+ hide: 'hide'
8
+ };
9
+
10
+ exports.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS;
11
+ //# sourceMappingURL=slider_constants.js.map
package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/radio/radio_control.d.ts CHANGED
@@ -9,7 +9,6 @@ export declare class HRadioControl extends PhoenixLightLitElement {
9
9
  readonly: boolean;
10
10
  checked: boolean;
11
11
  value: string;
12
- ariaDescribedby: string;
13
12
  constructor();
14
13
  connectedCallback(): void;
15
14
  protected render(): TemplateResult;
package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js CHANGED
@@ -37,7 +37,6 @@ let HRadioControl = class HRadioControl extends PhoenixLightLitElement {
37
37
  ?readonly="${this.readonly}"
38
38
  ?hidden="${this.hidden}"
39
39
  .checked="${this.checked}"
40
- aria-describedby="${ifDefined(this.ariaDescribedby)}"
41
40
  @change="${this._handleChangeEvent}"
42
41
  />
43
42
 
@@ -77,10 +76,6 @@ __decorate([
77
76
  property({ type: String }),
78
77
  __metadata("design:type", String)
79
78
  ], HRadioControl.prototype, "value", void 0);
80
- __decorate([
81
- property({ type: String, attribute: 'aria-describedby' }),
82
- __metadata("design:type", String)
83
- ], HRadioControl.prototype, "ariaDescribedby", void 0);
84
79
  HRadioControl = __decorate([
85
80
  phoenixCustomElement('h-radio-control'),
86
81
  __metadata("design:paramtypes", [])
package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/modal/modal.js CHANGED
@@ -112,9 +112,7 @@ let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
112
112
  };
113
113
  this._addInertToBodyChildrenElements = () => {
114
114
  [...document.body.children].forEach((child) => {
115
- const isPortalTarget = child.tagName === PORTAL_TARGET_COMPONENT_NAME.toUpperCase();
116
- const isAriaLiveContainer = child.hasAttribute('aria-live');
117
- if (!isPortalTarget && !isAriaLiveContainer) {
115
+ if (child.tagName !== PORTAL_TARGET_COMPONENT_NAME.toUpperCase()) {
118
116
  child.setAttribute('inert', '');
119
117
  }
120
118
  });
package/build/esm/packages/phoenix/src/components/modal/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider.d.ts CHANGED
@@ -8,5 +8,9 @@ export declare class HSlider extends PhoenixLightLitElement {
8
8
  private _settings;
9
9
  private _slider;
10
10
  connectedCallback(): void;
11
+ private _showFocusableNodes;
12
+ private _hideFocusableNodes;
13
+ private _handleFocusableNodes;
11
14
  getSlider(): ISlider | null;
15
+ disconnectedCallback(): void;
12
16
  }
package/build/esm/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
2
2
  import { property } from 'lit/decorators';
3
- import { JsonUtils } from '@dreamcommerce/utilities';
3
+ import { UiDomUtils, JsonUtils } 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 { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
7
+ import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants.js';
7
8
 
8
9
  let HSlider = class HSlider extends PhoenixLightLitElement {
9
10
  constructor() {
@@ -17,6 +18,19 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
17
18
  focus: 'center'
18
19
  };
19
20
  this._slider = null;
21
+ this._showFocusableNodes = (slideComponent) => {
22
+ this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
23
+ };
24
+ this._hideFocusableNodes = (slideComponent) => {
25
+ this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
26
+ };
27
+ this._handleFocusableNodes = ({ slide }, action) => {
28
+ const $focusableElements = UiDomUtils.getFocusableElements(slide);
29
+ if ($focusableElements.length === 0)
30
+ return;
31
+ const newTabindex = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
32
+ $focusableElements.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
33
+ };
20
34
  }
21
35
  get sliderSettings() {
22
36
  return this._settings;
@@ -36,10 +50,18 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
36
50
  if (this._settings.mountOnConnectedCallback) {
37
51
  this._slider.mount();
38
52
  }
53
+ this._slider.on('visible', this._showFocusableNodes);
54
+ this._slider.on('hidden', this._hideFocusableNodes);
39
55
  }
40
56
  getSlider() {
41
57
  return this._slider;
42
58
  }
59
+ disconnectedCallback() {
60
+ var _a, _b;
61
+ super.disconnectedCallback();
62
+ (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
63
+ (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
64
+ }
43
65
  };
44
66
  __decorate([
45
67
  property({ reflect: true }),
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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider_constants.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS: {
2
+ readonly show: "show";
3
+ readonly hide: "hide";
4
+ };
package/build/esm/packages/phoenix/src/components/slider/slider_constants.js ADDED
@@ -0,0 +1,7 @@
1
+ const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
2
+ show: 'show',
3
+ hide: 'hide'
4
+ };
5
+
6
+ export { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS };
7
+ //# sourceMappingURL=slider_constants.js.map
package/build/esm/packages/phoenix/src/components/slider/slider_constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { Options, Splide } from '@splidejs/splide';
2
+ import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants';
3
+ import { Any } from 'ts-toolbelt';
2
4
  export interface ISlider extends Splide {
3
5
  }
4
6
  export interface ISliderOptions extends Options {
5
7
  mountOnConnectedCallback: boolean;
6
8
  }
9
+ export declare type THandleNodesOption = typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS[Any.Keys<typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS>];
package/build/esm/packages/phoenix/src/components/slider/slider_types.js CHANGED
@@ -1,2 +1,4 @@
1
1
  import '@splidejs/splide';
2
+ import './slider_constants';
3
+ import 'ts-toolbelt';
2
4
  //# sourceMappingURL=slider_types.js.map
package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
1
+ {"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC;AACnD,OAAsD,oBAAoB,CAAC;AAC3E,OAAoB,aAAa,CAAC"}
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.15.11-40",
5
+ "version": "1.15.11-41",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",