@shoper/phoenix_design_system 1.18.31 → 1.18.32-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +5 -5
  2. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +4 -4
  3. package/build/cjs/packages/phoenix/src/components/slider/slider.js +52 -16
  4. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.d.ts +1 -1
  6. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +5 -5
  7. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +4 -4
  9. package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +2 -0
  10. package/build/esm/packages/phoenix/src/components/slider/slider.js +52 -16
  11. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  12. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js CHANGED
@@ -16,7 +16,7 @@ var search_constants = require('../../search_constants.js');
16
16
  exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.PhoenixLightLitElement {
17
17
  constructor() {
18
18
  super();
19
- this.isSearchClearFixFlagEnabled = false;
19
+ this.isSearchFixesFlagEnabled = false;
20
20
  this._shouldShow = false;
21
21
  this._isRequestPending = false;
22
22
  this._$searchInput = null;
@@ -29,7 +29,7 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
29
29
  this._handleSearchClear = () => {
30
30
  var _a;
31
31
  this._dispatchClearEvent();
32
- if (this.isSearchClearFixFlagEnabled) {
32
+ if (this.isSearchFixesFlagEnabled) {
33
33
  this._updateClearButtonVisibility('');
34
34
  (_a = this._$searchInput) === null || _a === void 0 ? void 0 : _a.focus();
35
35
  }
@@ -49,7 +49,7 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
49
49
  this._searchContextSetup();
50
50
  const $search = this.closest(search_constants.SEARCH_COMPONENT_NAMES.search);
51
51
  this._$searchInput = (_a = $search === null || $search === void 0 ? void 0 : $search.querySelector('input[type="search"]')) !== null && _a !== void 0 ? _a : null;
52
- if (this.isSearchClearFixFlagEnabled) {
52
+ if (this.isSearchFixesFlagEnabled) {
53
53
  this._updateClearButtonVisibility((_c = (_b = this._$searchInput) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '');
54
54
  }
55
55
  this.addEventListener('click', this._handleSearchClear);
@@ -100,9 +100,9 @@ tslib_es6.__decorate([
100
100
  tslib_es6.__metadata("design:type", String)
101
101
  ], exports.HSearchClear.prototype, "moduleInstanceId", void 0);
102
102
  tslib_es6.__decorate([
103
- decorators.property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
103
+ decorators.property({ type: Boolean, attribute: 'is-search-fixes-flag-enabled' }),
104
104
  tslib_es6.__metadata("design:type", Boolean)
105
- ], exports.HSearchClear.prototype, "isSearchClearFixFlagEnabled", void 0);
105
+ ], exports.HSearchClear.prototype, "isSearchFixesFlagEnabled", void 0);
106
106
  tslib_es6.__decorate([
107
107
  decorators.state(),
108
108
  tslib_es6.__metadata("design:type", Boolean)
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -13,7 +13,7 @@ var search_constants = require('../../search_constants.js');
13
13
  exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
14
14
  constructor() {
15
15
  super(...arguments);
16
- this.isSearchClearFixFlagEnabled = false;
16
+ this.isSearchFixesFlagEnabled = false;
17
17
  this._isSearchPhraseCleared = false;
18
18
  this._setupAttributes = () => {
19
19
  var _a, _b, _c, _d;
@@ -73,7 +73,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
73
73
  }
74
74
  });
75
75
  });
76
- if (this.isSearchClearFixFlagEnabled) {
76
+ if (this.isSearchFixesFlagEnabled) {
77
77
  this.input.addEventListener('keydown', (ev) => {
78
78
  if (ev.key !== 'Enter' || ev.repeat)
79
79
  return;
@@ -161,9 +161,9 @@ tslib_es6.__decorate([
161
161
  tslib_es6.__metadata("design:type", String)
162
162
  ], exports.HSearchInput.prototype, "moduleInstanceId", void 0);
163
163
  tslib_es6.__decorate([
164
- decorators.property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
164
+ decorators.property({ type: Boolean, attribute: 'is-search-fixes-flag-enabled' }),
165
165
  tslib_es6.__metadata("design:type", Boolean)
166
- ], exports.HSearchInput.prototype, "isSearchClearFixFlagEnabled", void 0);
166
+ ], exports.HSearchInput.prototype, "isSearchFixesFlagEnabled", void 0);
167
167
  tslib_es6.__decorate([
168
168
  decorators.state(),
169
169
  tslib_es6.__metadata("design:type", Boolean)
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',
@@ -22,7 +23,8 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
22
23
  focus: 'center'
23
24
  };
24
25
  this._slider = null;
25
- this._$focusableElements = [];
26
+ this._mutationObserver = null;
27
+ this._$focusableElements = new Set();
26
28
  this._showFocusableNodes = (slideComponent) => {
27
29
  this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
28
30
  };
@@ -30,27 +32,47 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
30
32
  this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
31
33
  };
32
34
  this._handleFocusableNodes = ({ slide }, action) => {
33
- const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
35
+ const $focusableSlideChildren = [...this._$focusableElements].filter(($focusableElement) => slide.contains($focusableElement));
34
36
  if ($focusableSlideChildren.length === 0)
35
37
  return;
36
- const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._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
+ }
37
45
  $focusableSlideChildren.forEach(($element) => updateFocusability($element));
38
46
  };
39
47
  this._scanMutationsForNewFocusableElements = (mutationList) => {
40
- for (const mutation of mutationList) {
41
- if (mutation.type !== 'childList')
42
- continue;
43
- const $target = mutation.target;
44
- const isFocusable = utilities.UiDomUtils.isFocusable($target);
45
- const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
46
- isFocusable && this._initializeFocusableElement($target);
47
- $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
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')
63
+ continue;
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);
68
+ $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
69
+ }
48
70
  }
49
71
  };
50
72
  this._initializeFocusableElement = ($element) => {
51
- !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
73
+ !this._$focusableElements.has($element) && this._$focusableElements.add($element);
52
74
  if ($element.closest('[aria-hidden="true"]')) {
53
- this._hideFocusableElement($element);
75
+ utilities.UiDomUtils.hideFocusableElement($element);
54
76
  }
55
77
  };
56
78
  }
@@ -74,8 +96,14 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
74
96
  }
75
97
  this._slider.on('visible', this._showFocusableNodes);
76
98
  this._slider.on('hidden', this._hideFocusableNodes);
77
- const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
78
- mutationObserver.observe(this, { childList: true, subtree: true, attributes: 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
+ }
79
107
  }
80
108
  _showFocusableElement($element) {
81
109
  $element.setAttribute('tabindex', '0');
@@ -89,10 +117,14 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
89
117
  return this._slider;
90
118
  }
91
119
  disconnectedCallback() {
92
- var _a, _b;
120
+ var _a, _b, _c;
93
121
  super.disconnectedCallback();
94
122
  (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
95
123
  (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
124
+ if (this.isSliderOptimizationFlagEnabled) {
125
+ (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
126
+ this._mutationObserver = null;
127
+ }
96
128
  }
97
129
  };
98
130
  tslib_es6.__decorate([
@@ -103,6 +135,10 @@ tslib_es6.__decorate([
103
135
  decorators.property(),
104
136
  tslib_es6.__metadata("design:type", String)
105
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);
106
142
  exports.HSlider = tslib_es6.__decorate([
107
143
  phoenix_custom_element.phoenixCustomElement('h-slider')
108
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;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/form/search/subcomponents/buttons/search_clear.d.ts CHANGED
@@ -3,7 +3,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
3
3
  export declare class HSearchClear extends PhoenixLightLitElement {
4
4
  private _btnController;
5
5
  moduleInstanceId: string;
6
- isSearchClearFixFlagEnabled: boolean;
6
+ isSearchFixesFlagEnabled: boolean;
7
7
  private _shouldShow;
8
8
  private _isRequestPending;
9
9
  private _searchContextConsumer;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js CHANGED
@@ -12,7 +12,7 @@ import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CLASS_NAMES,
12
12
  let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
13
13
  constructor() {
14
14
  super();
15
- this.isSearchClearFixFlagEnabled = false;
15
+ this.isSearchFixesFlagEnabled = false;
16
16
  this._shouldShow = false;
17
17
  this._isRequestPending = false;
18
18
  this._$searchInput = null;
@@ -25,7 +25,7 @@ let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
25
25
  this._handleSearchClear = () => {
26
26
  var _a;
27
27
  this._dispatchClearEvent();
28
- if (this.isSearchClearFixFlagEnabled) {
28
+ if (this.isSearchFixesFlagEnabled) {
29
29
  this._updateClearButtonVisibility('');
30
30
  (_a = this._$searchInput) === null || _a === void 0 ? void 0 : _a.focus();
31
31
  }
@@ -45,7 +45,7 @@ let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
45
45
  this._searchContextSetup();
46
46
  const $search = this.closest(SEARCH_COMPONENT_NAMES.search);
47
47
  this._$searchInput = (_a = $search === null || $search === void 0 ? void 0 : $search.querySelector('input[type="search"]')) !== null && _a !== void 0 ? _a : null;
48
- if (this.isSearchClearFixFlagEnabled) {
48
+ if (this.isSearchFixesFlagEnabled) {
49
49
  this._updateClearButtonVisibility((_c = (_b = this._$searchInput) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '');
50
50
  }
51
51
  this.addEventListener('click', this._handleSearchClear);
@@ -96,9 +96,9 @@ __decorate([
96
96
  __metadata("design:type", String)
97
97
  ], HSearchClear.prototype, "moduleInstanceId", void 0);
98
98
  __decorate([
99
- property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
99
+ property({ type: Boolean, attribute: 'is-search-fixes-flag-enabled' }),
100
100
  __metadata("design:type", Boolean)
101
- ], HSearchClear.prototype, "isSearchClearFixFlagEnabled", void 0);
101
+ ], HSearchClear.prototype, "isSearchFixesFlagEnabled", void 0);
102
102
  __decorate([
103
103
  state(),
104
104
  __metadata("design:type", Boolean)
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts CHANGED
@@ -3,7 +3,7 @@ import { PropertyValues } from 'lit';
3
3
  export declare class HSearchInput extends PhoenixLightLitElement {
4
4
  input: HTMLInputElement | null;
5
5
  moduleInstanceId: string;
6
- isSearchClearFixFlagEnabled: boolean;
6
+ isSearchFixesFlagEnabled: boolean;
7
7
  private _isSearchPhraseCleared;
8
8
  connectedCallback(): void;
9
9
  firstUpdated(props: PropertyValues): void;
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -9,7 +9,7 @@ import { SEARCH_CLASS_NAMES, SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES }
9
9
  let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
10
10
  constructor() {
11
11
  super(...arguments);
12
- this.isSearchClearFixFlagEnabled = false;
12
+ this.isSearchFixesFlagEnabled = false;
13
13
  this._isSearchPhraseCleared = false;
14
14
  this._setupAttributes = () => {
15
15
  var _a, _b, _c, _d;
@@ -69,7 +69,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
69
69
  }
70
70
  });
71
71
  });
72
- if (this.isSearchClearFixFlagEnabled) {
72
+ if (this.isSearchFixesFlagEnabled) {
73
73
  this.input.addEventListener('keydown', (ev) => {
74
74
  if (ev.key !== 'Enter' || ev.repeat)
75
75
  return;
@@ -157,9 +157,9 @@ __decorate([
157
157
  __metadata("design:type", String)
158
158
  ], HSearchInput.prototype, "moduleInstanceId", void 0);
159
159
  __decorate([
160
- property({ type: Boolean, attribute: 'is-search-clear-fix-flag-enabled' }),
160
+ property({ type: Boolean, attribute: 'is-search-fixes-flag-enabled' }),
161
161
  __metadata("design:type", Boolean)
162
- ], HSearchInput.prototype, "isSearchClearFixFlagEnabled", void 0);
162
+ ], HSearchInput.prototype, "isSearchFixesFlagEnabled", void 0);
163
163
  __decorate([
164
164
  state(),
165
165
  __metadata("design:type", Boolean)
package/build/esm/packages/phoenix/src/components/slider/slider.d.ts CHANGED
@@ -3,10 +3,12 @@ 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;
9
10
  private _slider;
11
+ private _mutationObserver;
10
12
  private _$focusableElements;
11
13
  connectedCallback(): void;
12
14
  private _showFocusableNodes;
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',
@@ -18,7 +19,8 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
18
19
  focus: 'center'
19
20
  };
20
21
  this._slider = null;
21
- this._$focusableElements = [];
22
+ this._mutationObserver = null;
23
+ this._$focusableElements = new Set();
22
24
  this._showFocusableNodes = (slideComponent) => {
23
25
  this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
24
26
  };
@@ -26,27 +28,47 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
26
28
  this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
27
29
  };
28
30
  this._handleFocusableNodes = ({ slide }, action) => {
29
- const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
31
+ const $focusableSlideChildren = [...this._$focusableElements].filter(($focusableElement) => slide.contains($focusableElement));
30
32
  if ($focusableSlideChildren.length === 0)
31
33
  return;
32
- const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._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
+ }
33
41
  $focusableSlideChildren.forEach(($element) => updateFocusability($element));
34
42
  };
35
43
  this._scanMutationsForNewFocusableElements = (mutationList) => {
36
- for (const mutation of mutationList) {
37
- if (mutation.type !== 'childList')
38
- continue;
39
- const $target = mutation.target;
40
- const isFocusable = UiDomUtils.isFocusable($target);
41
- const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
42
- isFocusable && this._initializeFocusableElement($target);
43
- $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
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')
59
+ continue;
60
+ const $target = mutation.target;
61
+ const isFocusable = UiDomUtils.isFocusable($target);
62
+ const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
63
+ isFocusable && this._initializeFocusableElement($target);
64
+ $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
65
+ }
44
66
  }
45
67
  };
46
68
  this._initializeFocusableElement = ($element) => {
47
- !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
69
+ !this._$focusableElements.has($element) && this._$focusableElements.add($element);
48
70
  if ($element.closest('[aria-hidden="true"]')) {
49
- this._hideFocusableElement($element);
71
+ UiDomUtils.hideFocusableElement($element);
50
72
  }
51
73
  };
52
74
  }
@@ -70,8 +92,14 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
70
92
  }
71
93
  this._slider.on('visible', this._showFocusableNodes);
72
94
  this._slider.on('hidden', this._hideFocusableNodes);
73
- const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
74
- mutationObserver.observe(this, { childList: true, subtree: true, attributes: 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
+ }
75
103
  }
76
104
  _showFocusableElement($element) {
77
105
  $element.setAttribute('tabindex', '0');
@@ -85,10 +113,14 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
85
113
  return this._slider;
86
114
  }
87
115
  disconnectedCallback() {
88
- var _a, _b;
116
+ var _a, _b, _c;
89
117
  super.disconnectedCallback();
90
118
  (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
91
119
  (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
120
+ if (this.isSliderOptimizationFlagEnabled) {
121
+ (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
122
+ this._mutationObserver = null;
123
+ }
92
124
  }
93
125
  };
94
126
  __decorate([
@@ -99,6 +131,10 @@ __decorate([
99
131
  property(),
100
132
  __metadata("design:type", String)
101
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);
102
138
  HSlider = __decorate([
103
139
  phoenixCustomElement('h-slider')
104
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;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.31",
5
+ "version": "1.18.32-1",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
32
  },
33
33
  "devDependencies": {
34
- "@dreamcommerce/utilities": "^1.23.4",
34
+ "@dreamcommerce/utilities": "^1.23.5",
35
35
  "@shoper/jest_config": "^0.0.0",
36
36
  "@shoper/tsconfig": "^0.0.0",
37
37
  "@splidejs/splide": "4.0.7",