@shoper/phoenix_design_system 1.18.27-13 → 1.18.27-14

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 (6) hide show
  1. package/build/cjs/packages/phoenix/src/components/slider/slider.js +51 -11
  2. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  3. package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +3 -0
  4. package/build/esm/packages/phoenix/src/components/slider/slider.js +51 -11
  5. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  6. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -15,6 +15,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
15
15
  super(...arguments);
16
16
  this.settings = '';
17
17
  this.id = '';
18
+ this.isSliderOptimizationFlagEnabled = false;
18
19
  this._settings = {
19
20
  mountOnConnectedCallback: true,
20
21
  type: 'loop',
@@ -34,17 +35,36 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
34
35
  const $focusableSlideChildren = [...this._$focusableElements].filter(($focusableElement) => slide.contains($focusableElement));
35
36
  if ($focusableSlideChildren.length === 0)
36
37
  return;
37
- const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? utilities.UiDomUtils.showFocusableElement : utilities.UiDomUtils.hideFocusableElement;
38
+ let updateFocusability;
39
+ if (this.isSliderOptimizationFlagEnabled) {
40
+ updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? utilities.UiDomUtils.showFocusableElement : utilities.UiDomUtils.hideFocusableElement;
41
+ }
42
+ else {
43
+ updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
44
+ }
38
45
  $focusableSlideChildren.forEach(($element) => updateFocusability($element));
39
46
  };
40
47
  this._scanMutationsForNewFocusableElements = (mutationList) => {
41
- for (const mutation of mutationList) {
42
- for (const addedNode of mutation.addedNodes) {
43
- if (!(addedNode instanceof HTMLElement))
48
+ if (this.isSliderOptimizationFlagEnabled) {
49
+ for (const mutation of mutationList) {
50
+ for (const addedNode of mutation.addedNodes) {
51
+ if (!(addedNode instanceof HTMLElement))
52
+ continue;
53
+ if (utilities.UiDomUtils.isFocusable(addedNode))
54
+ this._initializeFocusableElement(addedNode);
55
+ const $focusableChildren = [...addedNode.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
56
+ $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
57
+ }
58
+ }
59
+ }
60
+ else {
61
+ for (const mutation of mutationList) {
62
+ if (mutation.type !== 'childList')
44
63
  continue;
45
- if (utilities.UiDomUtils.isFocusable(addedNode))
46
- this._initializeFocusableElement(addedNode);
47
- const $focusableChildren = [...addedNode.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
64
+ const $target = mutation.target;
65
+ const isFocusable = utilities.UiDomUtils.isFocusable($target);
66
+ const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
67
+ isFocusable && this._initializeFocusableElement($target);
48
68
  $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
49
69
  }
50
70
  }
@@ -76,8 +96,22 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
76
96
  }
77
97
  this._slider.on('visible', this._showFocusableNodes);
78
98
  this._slider.on('hidden', this._hideFocusableNodes);
79
- this._mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
80
- this._mutationObserver.observe(this, { childList: true, subtree: true });
99
+ if (this.isSliderOptimizationFlagEnabled) {
100
+ this._mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
101
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
102
+ }
103
+ else {
104
+ const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
105
+ mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
106
+ }
107
+ }
108
+ _showFocusableElement($element) {
109
+ $element.setAttribute('tabindex', '0');
110
+ $element.removeAttribute('aria-hidden');
111
+ }
112
+ _hideFocusableElement($element) {
113
+ $element.setAttribute('tabindex', '-1');
114
+ $element.setAttribute('aria-hidden', 'true');
81
115
  }
82
116
  getSlider() {
83
117
  return this._slider;
@@ -87,8 +121,10 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
87
121
  super.disconnectedCallback();
88
122
  (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
89
123
  (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
90
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
91
- this._mutationObserver = null;
124
+ if (this.isSliderOptimizationFlagEnabled) {
125
+ (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
126
+ this._mutationObserver = null;
127
+ }
92
128
  }
93
129
  };
94
130
  tslib_es6.__decorate([
@@ -99,6 +135,10 @@ tslib_es6.__decorate([
99
135
  decorators.property(),
100
136
  tslib_es6.__metadata("design:type", String)
101
137
  ], exports.HSlider.prototype, "id", void 0);
138
+ tslib_es6.__decorate([
139
+ decorators.property({ attribute: 'is-slider-optimization-flag-enabled' }),
140
+ tslib_es6.__metadata("design:type", Boolean)
141
+ ], exports.HSlider.prototype, "isSliderOptimizationFlagEnabled", void 0);
102
142
  exports.HSlider = tslib_es6.__decorate([
103
143
  phoenix_custom_element.phoenixCustomElement('h-slider')
104
144
  ], exports.HSlider);
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -3,6 +3,7 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
3
3
  export declare class HSlider extends PhoenixLightLitElement {
4
4
  settings: string;
5
5
  id: string;
6
+ isSliderOptimizationFlagEnabled: boolean;
6
7
  get sliderSettings(): ISliderOptions;
7
8
  set sliderSettings(newSettingsObject: ISliderOptions);
8
9
  private _settings;
@@ -13,6 +14,8 @@ export declare class HSlider extends PhoenixLightLitElement {
13
14
  private _showFocusableNodes;
14
15
  private _hideFocusableNodes;
15
16
  private _handleFocusableNodes;
17
+ private _showFocusableElement;
18
+ private _hideFocusableElement;
16
19
  private _scanMutationsForNewFocusableElements;
17
20
  private _initializeFocusableElement;
18
21
  getSlider(): ISlider | null;
package/build/esm/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -11,6 +11,7 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
11
11
  super(...arguments);
12
12
  this.settings = '';
13
13
  this.id = '';
14
+ this.isSliderOptimizationFlagEnabled = false;
14
15
  this._settings = {
15
16
  mountOnConnectedCallback: true,
16
17
  type: 'loop',
@@ -30,17 +31,36 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
30
31
  const $focusableSlideChildren = [...this._$focusableElements].filter(($focusableElement) => slide.contains($focusableElement));
31
32
  if ($focusableSlideChildren.length === 0)
32
33
  return;
33
- const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? UiDomUtils.showFocusableElement : UiDomUtils.hideFocusableElement;
34
+ let updateFocusability;
35
+ if (this.isSliderOptimizationFlagEnabled) {
36
+ updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? UiDomUtils.showFocusableElement : UiDomUtils.hideFocusableElement;
37
+ }
38
+ else {
39
+ updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
40
+ }
34
41
  $focusableSlideChildren.forEach(($element) => updateFocusability($element));
35
42
  };
36
43
  this._scanMutationsForNewFocusableElements = (mutationList) => {
37
- for (const mutation of mutationList) {
38
- for (const addedNode of mutation.addedNodes) {
39
- if (!(addedNode instanceof HTMLElement))
44
+ if (this.isSliderOptimizationFlagEnabled) {
45
+ for (const mutation of mutationList) {
46
+ for (const addedNode of mutation.addedNodes) {
47
+ if (!(addedNode instanceof HTMLElement))
48
+ continue;
49
+ if (UiDomUtils.isFocusable(addedNode))
50
+ this._initializeFocusableElement(addedNode);
51
+ const $focusableChildren = [...addedNode.querySelectorAll(UiDomUtils.getFocusableSelector())];
52
+ $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
53
+ }
54
+ }
55
+ }
56
+ else {
57
+ for (const mutation of mutationList) {
58
+ if (mutation.type !== 'childList')
40
59
  continue;
41
- if (UiDomUtils.isFocusable(addedNode))
42
- this._initializeFocusableElement(addedNode);
43
- const $focusableChildren = [...addedNode.querySelectorAll(UiDomUtils.getFocusableSelector())];
60
+ const $target = mutation.target;
61
+ const isFocusable = UiDomUtils.isFocusable($target);
62
+ const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
63
+ isFocusable && this._initializeFocusableElement($target);
44
64
  $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
45
65
  }
46
66
  }
@@ -72,8 +92,22 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
72
92
  }
73
93
  this._slider.on('visible', this._showFocusableNodes);
74
94
  this._slider.on('hidden', this._hideFocusableNodes);
75
- this._mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
76
- this._mutationObserver.observe(this, { childList: true, subtree: true });
95
+ if (this.isSliderOptimizationFlagEnabled) {
96
+ this._mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
97
+ this._mutationObserver.observe(this, { childList: true, subtree: true });
98
+ }
99
+ else {
100
+ const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
101
+ mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
102
+ }
103
+ }
104
+ _showFocusableElement($element) {
105
+ $element.setAttribute('tabindex', '0');
106
+ $element.removeAttribute('aria-hidden');
107
+ }
108
+ _hideFocusableElement($element) {
109
+ $element.setAttribute('tabindex', '-1');
110
+ $element.setAttribute('aria-hidden', 'true');
77
111
  }
78
112
  getSlider() {
79
113
  return this._slider;
@@ -83,8 +117,10 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
83
117
  super.disconnectedCallback();
84
118
  (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
85
119
  (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
86
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
87
- this._mutationObserver = null;
120
+ if (this.isSliderOptimizationFlagEnabled) {
121
+ (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
122
+ this._mutationObserver = null;
123
+ }
88
124
  }
89
125
  };
90
126
  __decorate([
@@ -95,6 +131,10 @@ __decorate([
95
131
  property(),
96
132
  __metadata("design:type", String)
97
133
  ], HSlider.prototype, "id", void 0);
134
+ __decorate([
135
+ property({ attribute: 'is-slider-optimization-flag-enabled' }),
136
+ __metadata("design:type", Boolean)
137
+ ], HSlider.prototype, "isSliderOptimizationFlagEnabled", void 0);
98
138
  HSlider = __decorate([
99
139
  phoenixCustomElement('h-slider')
100
140
  ], HSlider);
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.18.27-13",
5
+ "version": "1.18.27-14",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",