@shoper/phoenix_design_system 1.18.11-10 → 1.18.11-12

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 (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +17 -53
  2. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/search.js +48 -58
  4. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts +1 -4
  6. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +17 -53
  7. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +0 -4
  9. package/build/esm/packages/phoenix/src/components/form/search/search.js +48 -58
  10. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  11. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -12,56 +12,29 @@ var context_consumer_controller = require('../../core/context/context_consumer_c
12
12
  var accordion_constants = require('./accordion_constants.js');
13
13
  var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
14
14
 
15
- const RESIZE_DEBOUNCE_MS = 150;
16
- const MUTATION_DEBOUNCE_MS = 100;
17
15
  exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
18
16
  constructor() {
19
17
  super();
20
18
  this.transitionName = 'accordion-toggle';
21
- this._resizeDebounceTimer = null;
22
- this._mutationDebounceTimer = null;
23
- this._mutationObserver = null;
19
+ this._resizeObserver = null;
24
20
  this._handleResize = () => {
25
- if (this._resizeDebounceTimer !== null) {
26
- window.cancelAnimationFrame(this._resizeDebounceTimer);
21
+ // ResizeObserver fires when content changes OR when the element's size changes
22
+ // No manual debouncing needed - ResizeObserver handles this efficiently
23
+ if (!this.hidden) {
24
+ this._setStylingOptions();
27
25
  }
28
- this._resizeDebounceTimer = window.requestAnimationFrame(() => {
29
- setTimeout(() => {
30
- this._setStylingOptions();
31
- }, RESIZE_DEBOUNCE_MS);
32
- });
33
26
  };
34
27
  this._setStylingOptions = () => {
28
+ const previousDisplay = this.style.display;
29
+ this.style.setProperty('display', 'block', 'important');
30
+ this.style.height = 'auto';
31
+ // Single RAF is sufficient - browser will measure on next frame
35
32
  requestAnimationFrame(() => {
36
- const previousDisplay = this.style.display;
37
- this.style.setProperty('display', 'block', 'important');
38
- this.style.height = 'auto';
39
- requestAnimationFrame(() => {
40
- this._setOriginalHeightValue();
41
- this.style.display = previousDisplay;
42
- this.style.height = this.hidden ? '0px' : this._originalHeight;
43
- });
33
+ this._setOriginalHeightValue();
34
+ this.style.display = previousDisplay;
35
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
44
36
  });
45
37
  };
46
- this._handleMutation = () => {
47
- if (this._mutationDebounceTimer !== null) {
48
- window.clearTimeout(this._mutationDebounceTimer);
49
- }
50
- this._mutationDebounceTimer = window.setTimeout(() => {
51
- requestAnimationFrame(() => {
52
- this.style.height = 'auto';
53
- requestAnimationFrame(() => {
54
- this._setOriginalHeightValue();
55
- if (this.hidden) {
56
- this.style.height = '0px';
57
- }
58
- else {
59
- this.style.height = this._originalHeight;
60
- }
61
- });
62
- });
63
- }, MUTATION_DEBOUNCE_MS);
64
- };
65
38
  this._setOriginalHeightValue = () => {
66
39
  const newHeight = this.getBoundingClientRect().height;
67
40
  if (newHeight !== 0 || this.children.length === 0) {
@@ -82,10 +55,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
82
55
  this._collapse = () => {
83
56
  const currentHeight = this.getBoundingClientRect().height;
84
57
  this._setHeight(`${currentHeight}px`);
58
+ // Single RAF is sufficient - browser will paint the current height before transitioning to 0
85
59
  requestAnimationFrame(() => {
86
- requestAnimationFrame(() => {
87
- this._setHeight('0px');
88
- });
60
+ this._setHeight('0px');
89
61
  });
90
62
  };
91
63
  this.setAttribute('role', 'region');
@@ -96,7 +68,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
96
68
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
97
69
  this._transitionController = new transition_controller.TransitionController(this, this.transitionName);
98
70
  this._subscribeObserver();
99
- window.addEventListener('resize', this._handleResize, { passive: true });
71
+ this._resizeObserver = new ResizeObserver(this._handleResize);
72
+ this._resizeObserver.observe(this);
100
73
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
101
74
  }
102
75
  firstUpdated(props) {
@@ -110,8 +83,6 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
110
83
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
111
84
  });
112
85
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
113
- this._mutationObserver = new MutationObserver(this._handleMutation);
114
- this._mutationObserver.observe(this, { childList: true, subtree: true });
115
86
  }
116
87
  _setHeight(height) {
117
88
  this.style.height = height;
@@ -124,15 +95,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
124
95
  var _a, _b;
125
96
  super.disconnectedCallback();
126
97
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
127
- (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
128
- window.removeEventListener('resize', this._handleResize);
98
+ (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
129
99
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
130
- if (this._resizeDebounceTimer !== null) {
131
- window.cancelAnimationFrame(this._resizeDebounceTimer);
132
- }
133
- if (this._mutationDebounceTimer !== null) {
134
- window.clearTimeout(this._mutationDebounceTimer);
135
- }
136
100
  }
137
101
  };
138
102
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/accordion/accordion_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -26,9 +26,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
26
26
  super(...arguments);
27
27
  this.view = search_constants.DEFAULT_VIEW;
28
28
  this.isDevSearchPopupFixesFlagEnabled = false;
29
- this.isSearchIconFixEnabled = false;
30
29
  this.displayMode = 'dropdown';
31
- this._togglerElement = null;
32
30
  this._id = v4['default']();
33
31
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
34
32
  this._searchContentContainerId = v4['default']();
@@ -173,8 +171,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
173
171
  };
174
172
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
175
173
  var _a;
176
- const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
177
- const hasHomeOrEndBeenPressed = ev.key === 'Home' || ev.key === 'End';
174
+ const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
175
+ const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
178
176
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
179
177
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
180
178
  ev.preventDefault();
@@ -247,8 +245,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
247
245
  this._handleBackwardFocus($gridSearchItems);
248
246
  };
249
247
  this._findSearchItemsContainer = () => {
250
- const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
251
- return containers.find((container) => container && !utilities.UiDomUtils.isElementEmpty(container));
248
+ const containers = [
249
+ this._searchHistoryRef.value,
250
+ this._searchResultsRef.value,
251
+ this._searchMessageRef.value
252
+ ];
253
+ return containers.find(container => container && !utilities.UiDomUtils.isElementEmpty(container));
252
254
  };
253
255
  this._handleBackwardFocus = ($searchItems) => {
254
256
  var _a;
@@ -351,21 +353,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
351
353
  (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
352
354
  }
353
355
  };
354
- this._handleOpenSearch = () => {
355
- this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
356
- const shouldShowMessage = this._searchPhrase !== '';
357
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
358
- const $searchInput = this.querySelector(`
359
- ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
360
- `);
361
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
362
- };
363
- this._handleOpenSearchWithKeyboard = (ev) => {
364
- if (ev.code !== 'Enter')
365
- return;
366
- ev.preventDefault();
367
- this._handleOpenSearch();
368
- };
369
356
  }
370
357
  async connectedCallback() {
371
358
  super.connectedCallback();
@@ -401,7 +388,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
401
388
  this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
402
389
  this._setupInitialSearchPhrase();
403
390
  this._setupListeners();
404
- this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
391
+ this._setupAriaAttributes();
405
392
  }
406
393
  disconnectedCallback() {
407
394
  var _a;
@@ -411,8 +398,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
411
398
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
412
399
  window.removeEventListener('resize', this._switchTypeOfSearchView);
413
400
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
414
- if (this.isSearchIconFixEnabled)
415
- this._teardownToggler();
416
401
  }
417
402
  _setupContext() {
418
403
  this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -570,9 +555,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
570
555
  }
571
556
  }
572
557
  _handleChooseSearchItem($el) {
573
- const $activeSearchItem = this.displayMode === 'dropdown'
574
- ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
575
- : document.activeElement;
558
+ const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
576
559
  if (!$activeSearchItem)
577
560
  return;
578
561
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -597,39 +580,49 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
597
580
  _submitSearchPhrase(searchPhrase) {
598
581
  this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
599
582
  }
600
- _setupToggler() {
601
- this._togglerElement = this.querySelector('.js-search-toggler');
602
- if (!this._togglerElement)
603
- return;
604
- this._togglerElement.addEventListener('click', this._handleOpenSearch);
605
- this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
583
+ _handleOpenSearch() {
584
+ this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
585
+ const shouldShowMessage = this._searchPhrase !== '';
586
+ this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
587
+ const $searchInput = this.querySelector(`
588
+ ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
589
+ `);
590
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
606
591
  }
607
- _teardownToggler() {
608
- if (!this._togglerElement)
592
+ _handleOpenSearchWithKeyboard(ev) {
593
+ if (ev.code !== 'Enter')
609
594
  return;
610
- this._togglerElement.removeEventListener('click', this._handleOpenSearch);
611
- this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
595
+ ev.preventDefault();
596
+ this._handleOpenSearch();
612
597
  }
613
598
  render() {
614
599
  super.render();
615
600
  return lit.html `
616
- ${when.when(!this.isSearchIconFixEnabled, () => lit.html ` <div
617
- class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
618
- tabindex="0"
619
- aria-haspopup="dialog"
620
- @click=${this._handleOpenSearch}
621
- @keyup=${this._handleOpenSearchWithKeyboard}
622
- >
623
- ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
624
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
625
- ${this._translations.openSearchButtonAriaLabel}
626
- </span>
627
- `)}
628
- <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
629
- <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
630
- </div>`)}
601
+ <div
602
+ class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
603
+ tabindex="0"
604
+ aria-haspopup="dialog"
605
+ @click=${this._handleOpenSearch}
606
+ @keyup=${this._handleOpenSearchWithKeyboard}
607
+ >
608
+ ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
609
+ <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
610
+ ${this._translations.openSearchButtonAriaLabel}
611
+ </span>
612
+ `)}
613
+ <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
614
+ <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
615
+ ${this._translations.search}
616
+ </div>
617
+ </div>
618
+
619
+
631
620
  ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
632
- <div class="${search_constants.SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
621
+ <div
622
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
623
+ id="${this._searchContentContainerId}"
624
+ role="${this._containerRole}"
625
+ >
633
626
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
634
627
  ${ref_js.ref(this._searchMessageRef)}
635
628
  .history="${this._historyLimitedContent}"
@@ -660,7 +653,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
660
653
  ?is-dev-search-popup-fixes-flag-enabled=${this.isDevSearchPopupFixesFlagEnabled}
661
654
  ></h-search-results>`)}
662
655
  </div>
663
- `, () => lit.html ` <div
656
+ `, () => lit.html `
657
+ <div
664
658
  class="${search_constants.SEARCH_CLASS_NAMES.container}"
665
659
  id="${this._searchContentContainerId}"
666
660
  role="${this._containerRole}"
@@ -685,10 +679,6 @@ tslib_es6.__decorate([
685
679
  decorators.property({ type: Boolean, attribute: 'is-dev-search-popup-fixes-flag-enabled' }),
686
680
  tslib_es6.__metadata("design:type", Boolean)
687
681
  ], exports.HSearch.prototype, "isDevSearchPopupFixesFlagEnabled", void 0);
688
- tslib_es6.__decorate([
689
- decorators.property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
690
- tslib_es6.__metadata("design:type", Boolean)
691
- ], exports.HSearch.prototype, "isSearchIconFixEnabled", void 0);
692
682
  tslib_es6.__decorate([
693
683
  decorators.property({ type: String, attribute: 'display-mode' }),
694
684
  tslib_es6.__metadata("design:type", String)
package/build/cjs/packages/phoenix/src/components/form/search/search.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,iBAAiB,wDAA4D;AAC7E;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,iBAAiB,wDAA4D;AAC7E;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/accordion/accordion_content.d.ts CHANGED
@@ -7,9 +7,7 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
7
7
  private _accordionGroupProps;
8
8
  private _accordionGroupPropsObserver;
9
9
  private _originalHeight;
10
- private _resizeDebounceTimer;
11
- private _mutationDebounceTimer;
12
- private _mutationObserver;
10
+ private _resizeObserver;
13
11
  private _boundHandleTransitionEnd;
14
12
  constructor();
15
13
  connectedCallback(): void;
@@ -17,7 +15,6 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
17
15
  private _handleResize;
18
16
  private _setStylingOptions;
19
17
  private _subscribeObserver;
20
- private _handleMutation;
21
18
  private _setOriginalHeightValue;
22
19
  private _expand;
23
20
  private _handleTransitionEnd;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -8,56 +8,29 @@ import { ContextConsumerController } from '../../core/context/context_consumer_c
8
8
  import { ACCORDION_CONTEXTS } from './accordion_constants.js';
9
9
  import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
10
10
 
11
- const RESIZE_DEBOUNCE_MS = 150;
12
- const MUTATION_DEBOUNCE_MS = 100;
13
11
  let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
14
12
  constructor() {
15
13
  super();
16
14
  this.transitionName = 'accordion-toggle';
17
- this._resizeDebounceTimer = null;
18
- this._mutationDebounceTimer = null;
19
- this._mutationObserver = null;
15
+ this._resizeObserver = null;
20
16
  this._handleResize = () => {
21
- if (this._resizeDebounceTimer !== null) {
22
- window.cancelAnimationFrame(this._resizeDebounceTimer);
17
+ // ResizeObserver fires when content changes OR when the element's size changes
18
+ // No manual debouncing needed - ResizeObserver handles this efficiently
19
+ if (!this.hidden) {
20
+ this._setStylingOptions();
23
21
  }
24
- this._resizeDebounceTimer = window.requestAnimationFrame(() => {
25
- setTimeout(() => {
26
- this._setStylingOptions();
27
- }, RESIZE_DEBOUNCE_MS);
28
- });
29
22
  };
30
23
  this._setStylingOptions = () => {
24
+ const previousDisplay = this.style.display;
25
+ this.style.setProperty('display', 'block', 'important');
26
+ this.style.height = 'auto';
27
+ // Single RAF is sufficient - browser will measure on next frame
31
28
  requestAnimationFrame(() => {
32
- const previousDisplay = this.style.display;
33
- this.style.setProperty('display', 'block', 'important');
34
- this.style.height = 'auto';
35
- requestAnimationFrame(() => {
36
- this._setOriginalHeightValue();
37
- this.style.display = previousDisplay;
38
- this.style.height = this.hidden ? '0px' : this._originalHeight;
39
- });
29
+ this._setOriginalHeightValue();
30
+ this.style.display = previousDisplay;
31
+ this.style.height = this.hidden ? '0px' : this._originalHeight;
40
32
  });
41
33
  };
42
- this._handleMutation = () => {
43
- if (this._mutationDebounceTimer !== null) {
44
- window.clearTimeout(this._mutationDebounceTimer);
45
- }
46
- this._mutationDebounceTimer = window.setTimeout(() => {
47
- requestAnimationFrame(() => {
48
- this.style.height = 'auto';
49
- requestAnimationFrame(() => {
50
- this._setOriginalHeightValue();
51
- if (this.hidden) {
52
- this.style.height = '0px';
53
- }
54
- else {
55
- this.style.height = this._originalHeight;
56
- }
57
- });
58
- });
59
- }, MUTATION_DEBOUNCE_MS);
60
- };
61
34
  this._setOriginalHeightValue = () => {
62
35
  const newHeight = this.getBoundingClientRect().height;
63
36
  if (newHeight !== 0 || this.children.length === 0) {
@@ -78,10 +51,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
78
51
  this._collapse = () => {
79
52
  const currentHeight = this.getBoundingClientRect().height;
80
53
  this._setHeight(`${currentHeight}px`);
54
+ // Single RAF is sufficient - browser will paint the current height before transitioning to 0
81
55
  requestAnimationFrame(() => {
82
- requestAnimationFrame(() => {
83
- this._setHeight('0px');
84
- });
56
+ this._setHeight('0px');
85
57
  });
86
58
  };
87
59
  this.setAttribute('role', 'region');
@@ -92,7 +64,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
92
64
  this._contextConsumer = new ContextConsumerController(this);
93
65
  this._transitionController = new TransitionController(this, this.transitionName);
94
66
  this._subscribeObserver();
95
- window.addEventListener('resize', this._handleResize, { passive: true });
67
+ this._resizeObserver = new ResizeObserver(this._handleResize);
68
+ this._resizeObserver.observe(this);
96
69
  this.addEventListener('transitionend', this._boundHandleTransitionEnd);
97
70
  }
98
71
  firstUpdated(props) {
@@ -106,8 +79,6 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
106
79
  accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
107
80
  });
108
81
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
109
- this._mutationObserver = new MutationObserver(this._handleMutation);
110
- this._mutationObserver.observe(this, { childList: true, subtree: true });
111
82
  }
112
83
  _setHeight(height) {
113
84
  this.style.height = height;
@@ -120,15 +91,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
120
91
  var _a, _b;
121
92
  super.disconnectedCallback();
122
93
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
123
- (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
124
- window.removeEventListener('resize', this._handleResize);
94
+ (_b = this._resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
125
95
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
126
- if (this._resizeDebounceTimer !== null) {
127
- window.cancelAnimationFrame(this._resizeDebounceTimer);
128
- }
129
- if (this._mutationDebounceTimer !== null) {
130
- window.clearTimeout(this._mutationDebounceTimer);
131
- }
132
96
  }
133
97
  };
134
98
  __decorate([
package/build/esm/packages/phoenix/src/components/accordion/accordion_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -6,7 +6,6 @@ export declare class HSearch extends PhoenixLightLitElement {
6
6
  view: string;
7
7
  locale: string;
8
8
  isDevSearchPopupFixesFlagEnabled: boolean;
9
- isSearchIconFixEnabled: boolean;
10
9
  displayMode: TSearchDisplayMode;
11
10
  moduleInstanceId: string;
12
11
  private _historyContextProvider;
@@ -16,7 +15,6 @@ export declare class HSearch extends PhoenixLightLitElement {
16
15
  private _searchInput;
17
16
  private _inputField;
18
17
  private _searchForm;
19
- private _togglerElement;
20
18
  private _id;
21
19
  private _openSearchButtonAriaLabelId;
22
20
  private _searchContentContainerId;
@@ -83,7 +81,5 @@ export declare class HSearch extends PhoenixLightLitElement {
83
81
  private _setupAriaAttributes;
84
82
  private _handleOpenSearch;
85
83
  private _handleOpenSearchWithKeyboard;
86
- private _setupToggler;
87
- private _teardownToggler;
88
84
  protected render(): TemplateResult;
89
85
  }
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -22,9 +22,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
22
22
  super(...arguments);
23
23
  this.view = DEFAULT_VIEW;
24
24
  this.isDevSearchPopupFixesFlagEnabled = false;
25
- this.isSearchIconFixEnabled = false;
26
25
  this.displayMode = 'dropdown';
27
- this._togglerElement = null;
28
26
  this._id = v4();
29
27
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
30
28
  this._searchContentContainerId = v4();
@@ -169,8 +167,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
169
167
  };
170
168
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
171
169
  var _a;
172
- const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
173
- const hasHomeOrEndBeenPressed = ev.key === 'Home' || ev.key === 'End';
170
+ const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
171
+ const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
174
172
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
175
173
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
176
174
  ev.preventDefault();
@@ -243,8 +241,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
243
241
  this._handleBackwardFocus($gridSearchItems);
244
242
  };
245
243
  this._findSearchItemsContainer = () => {
246
- const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
247
- return containers.find((container) => container && !UiDomUtils.isElementEmpty(container));
244
+ const containers = [
245
+ this._searchHistoryRef.value,
246
+ this._searchResultsRef.value,
247
+ this._searchMessageRef.value
248
+ ];
249
+ return containers.find(container => container && !UiDomUtils.isElementEmpty(container));
248
250
  };
249
251
  this._handleBackwardFocus = ($searchItems) => {
250
252
  var _a;
@@ -347,21 +349,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
347
349
  (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
348
350
  }
349
351
  };
350
- this._handleOpenSearch = () => {
351
- this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
352
- const shouldShowMessage = this._searchPhrase !== '';
353
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
354
- const $searchInput = this.querySelector(`
355
- ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
356
- `);
357
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
358
- };
359
- this._handleOpenSearchWithKeyboard = (ev) => {
360
- if (ev.code !== 'Enter')
361
- return;
362
- ev.preventDefault();
363
- this._handleOpenSearch();
364
- };
365
352
  }
366
353
  async connectedCallback() {
367
354
  super.connectedCallback();
@@ -397,7 +384,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
397
384
  this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
398
385
  this._setupInitialSearchPhrase();
399
386
  this._setupListeners();
400
- this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
387
+ this._setupAriaAttributes();
401
388
  }
402
389
  disconnectedCallback() {
403
390
  var _a;
@@ -407,8 +394,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
407
394
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
408
395
  window.removeEventListener('resize', this._switchTypeOfSearchView);
409
396
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
410
- if (this.isSearchIconFixEnabled)
411
- this._teardownToggler();
412
397
  }
413
398
  _setupContext() {
414
399
  this._historyContextProvider = new ContextProviderController(this);
@@ -566,9 +551,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
566
551
  }
567
552
  }
568
553
  _handleChooseSearchItem($el) {
569
- const $activeSearchItem = this.displayMode === 'dropdown'
570
- ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
571
- : document.activeElement;
554
+ const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
572
555
  if (!$activeSearchItem)
573
556
  return;
574
557
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -593,39 +576,49 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
593
576
  _submitSearchPhrase(searchPhrase) {
594
577
  this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
595
578
  }
596
- _setupToggler() {
597
- this._togglerElement = this.querySelector('.js-search-toggler');
598
- if (!this._togglerElement)
599
- return;
600
- this._togglerElement.addEventListener('click', this._handleOpenSearch);
601
- this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
579
+ _handleOpenSearch() {
580
+ this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
581
+ const shouldShowMessage = this._searchPhrase !== '';
582
+ this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
583
+ const $searchInput = this.querySelector(`
584
+ ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
585
+ `);
586
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
602
587
  }
603
- _teardownToggler() {
604
- if (!this._togglerElement)
588
+ _handleOpenSearchWithKeyboard(ev) {
589
+ if (ev.code !== 'Enter')
605
590
  return;
606
- this._togglerElement.removeEventListener('click', this._handleOpenSearch);
607
- this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
591
+ ev.preventDefault();
592
+ this._handleOpenSearch();
608
593
  }
609
594
  render() {
610
595
  super.render();
611
596
  return html `
612
- ${n(!this.isSearchIconFixEnabled, () => html ` <div
613
- class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
614
- tabindex="0"
615
- aria-haspopup="dialog"
616
- @click=${this._handleOpenSearch}
617
- @keyup=${this._handleOpenSearchWithKeyboard}
618
- >
619
- ${n(this._translations.openSearchButtonAriaLabel, () => html `
620
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
621
- ${this._translations.openSearchButtonAriaLabel}
622
- </span>
623
- `)}
624
- <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
625
- <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
626
- </div>`)}
597
+ <div
598
+ class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
599
+ tabindex="0"
600
+ aria-haspopup="dialog"
601
+ @click=${this._handleOpenSearch}
602
+ @keyup=${this._handleOpenSearchWithKeyboard}
603
+ >
604
+ ${n(this._translations.openSearchButtonAriaLabel, () => html `
605
+ <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
606
+ ${this._translations.openSearchButtonAriaLabel}
607
+ </span>
608
+ `)}
609
+ <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
610
+ <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
611
+ ${this._translations.search}
612
+ </div>
613
+ </div>
614
+
615
+
627
616
  ${n(this._isSuggesterLayerVisible(), () => html `
628
- <div class="${SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
617
+ <div
618
+ class="${SEARCH_CLASS_NAMES.container}"
619
+ id="${this._searchContentContainerId}"
620
+ role="${this._containerRole}"
621
+ >
629
622
  ${n(this._shouldShowMessage, () => html `<h-search-message
630
623
  ${ref(this._searchMessageRef)}
631
624
  .history="${this._historyLimitedContent}"
@@ -656,7 +649,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
656
649
  ?is-dev-search-popup-fixes-flag-enabled=${this.isDevSearchPopupFixesFlagEnabled}
657
650
  ></h-search-results>`)}
658
651
  </div>
659
- `, () => html ` <div
652
+ `, () => html `
653
+ <div
660
654
  class="${SEARCH_CLASS_NAMES.container}"
661
655
  id="${this._searchContentContainerId}"
662
656
  role="${this._containerRole}"
@@ -681,10 +675,6 @@ __decorate([
681
675
  property({ type: Boolean, attribute: 'is-dev-search-popup-fixes-flag-enabled' }),
682
676
  __metadata("design:type", Boolean)
683
677
  ], HSearch.prototype, "isDevSearchPopupFixesFlagEnabled", void 0);
684
- __decorate([
685
- property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
686
- __metadata("design:type", Boolean)
687
- ], HSearch.prototype, "isSearchIconFixEnabled", void 0);
688
678
  __decorate([
689
679
  property({ type: String, attribute: 'display-mode' }),
690
680
  __metadata("design:type", String)
package/build/esm/packages/phoenix/src/components/form/search/search.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,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11-10",
5
+ "version": "1.18.11-12",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",