@shoper/phoenix_design_system 1.18.11-0 → 1.18.11-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js +51 -2
  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 +56 -36
  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 +3 -0
  6. package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js +51 -2
  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 +3 -3
  9. package/build/esm/packages/phoenix/src/components/form/search/search.js +56 -36
  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
@@ -21,6 +21,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
21
21
  this._resizeDebounceTimer = null;
22
22
  this._mutationDebounceTimer = null;
23
23
  this._mutationObserver = null;
24
+ this._resizeObserver = null;
25
+ this._resizeObserverDebounceTimer = null;
24
26
  this._handleResize = () => {
25
27
  if (this._resizeDebounceTimer !== null) {
26
28
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -48,10 +50,23 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
48
50
  window.clearTimeout(this._mutationDebounceTimer);
49
51
  }
50
52
  this._mutationDebounceTimer = window.setTimeout(() => {
53
+ // Batch layout reads in one RAF
51
54
  requestAnimationFrame(() => {
55
+ const previousDisplay = this.style.display;
56
+ const previousHeight = this.style.height;
57
+ // Temporarily set to auto to measure
58
+ this.style.display = 'block';
52
59
  this.style.height = 'auto';
60
+ // Read layout (batched read phase)
61
+ const newHeight = this.getBoundingClientRect().height;
62
+ // Batch layout writes in next RAF
53
63
  requestAnimationFrame(() => {
54
- this._setOriginalHeightValue();
64
+ // Update cached height
65
+ if (newHeight !== 0 || this.children.length === 0) {
66
+ this._originalHeight = `${newHeight}px`;
67
+ }
68
+ // Restore and apply correct height
69
+ this.style.display = previousDisplay;
55
70
  if (this.hidden) {
56
71
  this.style.height = '0px';
57
72
  }
@@ -62,6 +77,34 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
62
77
  });
63
78
  }, MUTATION_DEBOUNCE_MS);
64
79
  };
80
+ this._handleContentResize = (entries) => {
81
+ if (this._resizeObserverDebounceTimer !== null) {
82
+ window.clearTimeout(this._resizeObserverDebounceTimer);
83
+ }
84
+ this._resizeObserverDebounceTimer = window.setTimeout(() => {
85
+ var _a, _b, _c;
86
+ // Get size from ResizeObserver entries - NO forced reflow!
87
+ const entry = entries[0];
88
+ if (!entry)
89
+ return;
90
+ // Use borderBoxSize if available (more accurate), fallback to contentRect
91
+ const newHeight = (_c = (_b = (_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.blockSize) !== null && _c !== void 0 ? _c : entry.contentRect.height;
92
+ // Batch style writes in RAF
93
+ requestAnimationFrame(() => {
94
+ // Update cached height
95
+ if (newHeight !== 0 || this.children.length === 0) {
96
+ this._originalHeight = `${newHeight}px`;
97
+ }
98
+ // Apply correct height based on state
99
+ if (this.hidden) {
100
+ this.style.height = '0px';
101
+ }
102
+ else {
103
+ this.style.height = this._originalHeight;
104
+ }
105
+ });
106
+ }, MUTATION_DEBOUNCE_MS);
107
+ };
65
108
  this._setOriginalHeightValue = () => {
66
109
  const newHeight = this.getBoundingClientRect().height;
67
110
  if (newHeight !== 0 || this.children.length === 0) {
@@ -112,6 +155,8 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
112
155
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
113
156
  this._mutationObserver = new MutationObserver(this._handleMutation);
114
157
  this._mutationObserver.observe(this, { childList: true, subtree: true });
158
+ this._resizeObserver = new ResizeObserver(this._handleContentResize);
159
+ this._resizeObserver.observe(this);
115
160
  }
116
161
  _setHeight(height) {
117
162
  this.style.height = height;
@@ -121,10 +166,11 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
121
166
  this.setAttribute('labelledby', regionId);
122
167
  }
123
168
  disconnectedCallback() {
124
- var _a, _b;
169
+ var _a, _b, _c;
125
170
  super.disconnectedCallback();
126
171
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
127
172
  (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
173
+ (_c = this._resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
128
174
  window.removeEventListener('resize', this._handleResize);
129
175
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
130
176
  if (this._resizeDebounceTimer !== null) {
@@ -133,6 +179,9 @@ exports.HAccordionContent = class HAccordionContent extends phoenix_light_lit_el
133
179
  if (this._mutationDebounceTimer !== null) {
134
180
  window.clearTimeout(this._mutationDebounceTimer);
135
181
  }
182
+ if (this._resizeObserverDebounceTimer !== null) {
183
+ window.clearTimeout(this._resizeObserverDebounceTimer);
184
+ }
136
185
  }
137
186
  };
138
187
  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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -8,6 +8,7 @@ var decorators = require('lit/decorators');
8
8
  var utilities = require('@dreamcommerce/utilities');
9
9
  var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
10
  var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
11
+ var icon_constants = require('../../icon/icon_constants.js');
11
12
  var observer = require('../../../core/classes/observer/observer.js');
12
13
  var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
13
14
  var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
@@ -26,12 +27,13 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
26
27
  this.view = search_constants.DEFAULT_VIEW;
27
28
  this.isDevSearchPopupFixesFlagEnabled = false;
28
29
  this.displayMode = 'dropdown';
29
- this._togglerElement = null;
30
30
  this._id = v4['default']();
31
+ this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
31
32
  this._searchContentContainerId = v4['default']();
32
33
  this._searchResultsRef = ref_js.createRef();
33
34
  this._searchHistoryRef = ref_js.createRef();
34
35
  this._searchMessageRef = ref_js.createRef();
36
+ this._openSearchButtonLabelRef = ref_js.createRef();
35
37
  this._shouldShowHistory = false;
36
38
  this._shouldShowResults = false;
37
39
  this._shouldShowMessage = false;
@@ -169,8 +171,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
169
171
  };
170
172
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
171
173
  var _a;
172
- const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
173
- 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";
174
176
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
175
177
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
176
178
  ev.preventDefault();
@@ -243,8 +245,12 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
243
245
  this._handleBackwardFocus($gridSearchItems);
244
246
  };
245
247
  this._findSearchItemsContainer = () => {
246
- const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
247
- 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));
248
254
  };
249
255
  this._handleBackwardFocus = ($searchItems) => {
250
256
  var _a;
@@ -341,20 +347,11 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
341
347
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
342
348
  }
343
349
  };
344
- this._handleOpenSearch = () => {
345
- this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
346
- const shouldShowMessage = this._searchPhrase !== '';
347
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
348
- const $searchInput = this.querySelector(`
349
- ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
350
- `);
351
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
352
- };
353
- this._handleOpenSearchWithKeyboard = (ev) => {
354
- if (ev.code !== 'Enter')
355
- return;
356
- ev.preventDefault();
357
- this._handleOpenSearch();
350
+ this._setupAriaAttributes = () => {
351
+ var _a;
352
+ if (this._translations.openSearchButtonAriaLabel) {
353
+ (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
354
+ }
358
355
  };
359
356
  }
360
357
  async connectedCallback() {
@@ -391,7 +388,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
391
388
  this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
392
389
  this._setupInitialSearchPhrase();
393
390
  this._setupListeners();
394
- this._setupToggler();
391
+ this._setupAriaAttributes();
395
392
  }
396
393
  disconnectedCallback() {
397
394
  var _a;
@@ -401,7 +398,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
401
398
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
402
399
  window.removeEventListener('resize', this._switchTypeOfSearchView);
403
400
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
404
- this._teardownToggler();
405
401
  }
406
402
  _setupContext() {
407
403
  this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -559,9 +555,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
559
555
  }
560
556
  }
561
557
  _handleChooseSearchItem($el) {
562
- const $activeSearchItem = this.displayMode === 'dropdown'
563
- ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
564
- : document.activeElement;
558
+ const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
565
559
  if (!$activeSearchItem)
566
560
  return;
567
561
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -586,24 +580,49 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
586
580
  _submitSearchPhrase(searchPhrase) {
587
581
  this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
588
582
  }
589
- _setupToggler() {
590
- this._togglerElement = this.querySelector('.js-search-toggler');
591
- if (!this._togglerElement)
592
- return;
593
- this._togglerElement.addEventListener('click', this._handleOpenSearch);
594
- 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();
595
591
  }
596
- _teardownToggler() {
597
- if (!this._togglerElement)
592
+ _handleOpenSearchWithKeyboard(ev) {
593
+ if (ev.code !== 'Enter')
598
594
  return;
599
- this._togglerElement.removeEventListener('click', this._handleOpenSearch);
600
- this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
595
+ ev.preventDefault();
596
+ this._handleOpenSearch();
601
597
  }
602
598
  render() {
603
599
  super.render();
604
600
  return lit.html `
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
+
605
620
  ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
606
- <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
+ >
607
626
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
608
627
  ${ref_js.ref(this._searchMessageRef)}
609
628
  .history="${this._historyLimitedContent}"
@@ -634,7 +653,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
634
653
  ?is-dev-search-popup-fixes-flag-enabled=${this.isDevSearchPopupFixesFlagEnabled}
635
654
  ></h-search-results>`)}
636
655
  </div>
637
- `, () => lit.html ` <div
656
+ `, () => lit.html `
657
+ <div
638
658
  class="${search_constants.SEARCH_CLASS_NAMES.container}"
639
659
  id="${this._searchContentContainerId}"
640
660
  role="${this._containerRole}"
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,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;"}
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
@@ -10,6 +10,8 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
10
10
  private _resizeDebounceTimer;
11
11
  private _mutationDebounceTimer;
12
12
  private _mutationObserver;
13
+ private _resizeObserver;
14
+ private _resizeObserverDebounceTimer;
13
15
  private _boundHandleTransitionEnd;
14
16
  constructor();
15
17
  connectedCallback(): void;
@@ -18,6 +20,7 @@ export declare class HAccordionContent extends PhoenixLightLitElement {
18
20
  private _setStylingOptions;
19
21
  private _subscribeObserver;
20
22
  private _handleMutation;
23
+ private _handleContentResize;
21
24
  private _setOriginalHeightValue;
22
25
  private _expand;
23
26
  private _handleTransitionEnd;
package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js CHANGED
@@ -17,6 +17,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
17
17
  this._resizeDebounceTimer = null;
18
18
  this._mutationDebounceTimer = null;
19
19
  this._mutationObserver = null;
20
+ this._resizeObserver = null;
21
+ this._resizeObserverDebounceTimer = null;
20
22
  this._handleResize = () => {
21
23
  if (this._resizeDebounceTimer !== null) {
22
24
  window.cancelAnimationFrame(this._resizeDebounceTimer);
@@ -44,10 +46,23 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
44
46
  window.clearTimeout(this._mutationDebounceTimer);
45
47
  }
46
48
  this._mutationDebounceTimer = window.setTimeout(() => {
49
+ // Batch layout reads in one RAF
47
50
  requestAnimationFrame(() => {
51
+ const previousDisplay = this.style.display;
52
+ const previousHeight = this.style.height;
53
+ // Temporarily set to auto to measure
54
+ this.style.display = 'block';
48
55
  this.style.height = 'auto';
56
+ // Read layout (batched read phase)
57
+ const newHeight = this.getBoundingClientRect().height;
58
+ // Batch layout writes in next RAF
49
59
  requestAnimationFrame(() => {
50
- this._setOriginalHeightValue();
60
+ // Update cached height
61
+ if (newHeight !== 0 || this.children.length === 0) {
62
+ this._originalHeight = `${newHeight}px`;
63
+ }
64
+ // Restore and apply correct height
65
+ this.style.display = previousDisplay;
51
66
  if (this.hidden) {
52
67
  this.style.height = '0px';
53
68
  }
@@ -58,6 +73,34 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
58
73
  });
59
74
  }, MUTATION_DEBOUNCE_MS);
60
75
  };
76
+ this._handleContentResize = (entries) => {
77
+ if (this._resizeObserverDebounceTimer !== null) {
78
+ window.clearTimeout(this._resizeObserverDebounceTimer);
79
+ }
80
+ this._resizeObserverDebounceTimer = window.setTimeout(() => {
81
+ var _a, _b, _c;
82
+ // Get size from ResizeObserver entries - NO forced reflow!
83
+ const entry = entries[0];
84
+ if (!entry)
85
+ return;
86
+ // Use borderBoxSize if available (more accurate), fallback to contentRect
87
+ const newHeight = (_c = (_b = (_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.blockSize) !== null && _c !== void 0 ? _c : entry.contentRect.height;
88
+ // Batch style writes in RAF
89
+ requestAnimationFrame(() => {
90
+ // Update cached height
91
+ if (newHeight !== 0 || this.children.length === 0) {
92
+ this._originalHeight = `${newHeight}px`;
93
+ }
94
+ // Apply correct height based on state
95
+ if (this.hidden) {
96
+ this.style.height = '0px';
97
+ }
98
+ else {
99
+ this.style.height = this._originalHeight;
100
+ }
101
+ });
102
+ }, MUTATION_DEBOUNCE_MS);
103
+ };
61
104
  this._setOriginalHeightValue = () => {
62
105
  const newHeight = this.getBoundingClientRect().height;
63
106
  if (newHeight !== 0 || this.children.length === 0) {
@@ -108,6 +151,8 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
108
151
  this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
109
152
  this._mutationObserver = new MutationObserver(this._handleMutation);
110
153
  this._mutationObserver.observe(this, { childList: true, subtree: true });
154
+ this._resizeObserver = new ResizeObserver(this._handleContentResize);
155
+ this._resizeObserver.observe(this);
111
156
  }
112
157
  _setHeight(height) {
113
158
  this.style.height = height;
@@ -117,10 +162,11 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
117
162
  this.setAttribute('labelledby', regionId);
118
163
  }
119
164
  disconnectedCallback() {
120
- var _a, _b;
165
+ var _a, _b, _c;
121
166
  super.disconnectedCallback();
122
167
  (_a = this._accordionGroupProps) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._accordionGroupPropsObserver);
123
168
  (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
169
+ (_c = this._resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
124
170
  window.removeEventListener('resize', this._handleResize);
125
171
  this.removeEventListener('transitionend', this._boundHandleTransitionEnd);
126
172
  if (this._resizeDebounceTimer !== null) {
@@ -129,6 +175,9 @@ let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
129
175
  if (this._mutationDebounceTimer !== null) {
130
176
  window.clearTimeout(this._mutationDebounceTimer);
131
177
  }
178
+ if (this._resizeObserverDebounceTimer !== null) {
179
+ window.clearTimeout(this._resizeObserverDebounceTimer);
180
+ }
132
181
  }
133
182
  };
134
183
  __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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -15,12 +15,13 @@ export declare class HSearch extends PhoenixLightLitElement {
15
15
  private _searchInput;
16
16
  private _inputField;
17
17
  private _searchForm;
18
- private _togglerElement;
19
18
  private _id;
19
+ private _openSearchButtonAriaLabelId;
20
20
  private _searchContentContainerId;
21
21
  private _searchResultsRef;
22
22
  private _searchHistoryRef;
23
23
  private _searchMessageRef;
24
+ private _openSearchButtonLabelRef;
24
25
  private _shouldShowHistory;
25
26
  private _shouldShowResults;
26
27
  private _shouldShowMessage;
@@ -77,9 +78,8 @@ export declare class HSearch extends PhoenixLightLitElement {
77
78
  private _isSuggesterLayerVisible;
78
79
  private _preventSubmitOnSearchClear;
79
80
  private _resetSearchOnFocusOutside;
81
+ private _setupAriaAttributes;
80
82
  private _handleOpenSearch;
81
83
  private _handleOpenSearchWithKeyboard;
82
- private _setupToggler;
83
- private _teardownToggler;
84
84
  protected render(): TemplateResult;
85
85
  }
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -4,6 +4,7 @@ import { property, state } from 'lit/decorators';
4
4
  import { UiDomUtils } from '@dreamcommerce/utilities';
5
5
  import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
6
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
7
+ import { ICONS_SIZES } from '../../icon/icon_constants.js';
7
8
  import { Observer } from '../../../core/classes/observer/observer.js';
8
9
  import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
9
10
  import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior_subject.js';
@@ -22,12 +23,13 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
22
23
  this.view = DEFAULT_VIEW;
23
24
  this.isDevSearchPopupFixesFlagEnabled = false;
24
25
  this.displayMode = 'dropdown';
25
- this._togglerElement = null;
26
26
  this._id = v4();
27
+ this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
27
28
  this._searchContentContainerId = v4();
28
29
  this._searchResultsRef = createRef();
29
30
  this._searchHistoryRef = createRef();
30
31
  this._searchMessageRef = createRef();
32
+ this._openSearchButtonLabelRef = createRef();
31
33
  this._shouldShowHistory = false;
32
34
  this._shouldShowResults = false;
33
35
  this._shouldShowMessage = false;
@@ -165,8 +167,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
165
167
  };
166
168
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
167
169
  var _a;
168
- const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
169
- 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";
170
172
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
171
173
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
172
174
  ev.preventDefault();
@@ -239,8 +241,12 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
239
241
  this._handleBackwardFocus($gridSearchItems);
240
242
  };
241
243
  this._findSearchItemsContainer = () => {
242
- const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
243
- 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));
244
250
  };
245
251
  this._handleBackwardFocus = ($searchItems) => {
246
252
  var _a;
@@ -337,20 +343,11 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
337
343
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
338
344
  }
339
345
  };
340
- this._handleOpenSearch = () => {
341
- this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
342
- const shouldShowMessage = this._searchPhrase !== '';
343
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
344
- const $searchInput = this.querySelector(`
345
- ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
346
- `);
347
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
348
- };
349
- this._handleOpenSearchWithKeyboard = (ev) => {
350
- if (ev.code !== 'Enter')
351
- return;
352
- ev.preventDefault();
353
- this._handleOpenSearch();
346
+ this._setupAriaAttributes = () => {
347
+ var _a;
348
+ if (this._translations.openSearchButtonAriaLabel) {
349
+ (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
350
+ }
354
351
  };
355
352
  }
356
353
  async connectedCallback() {
@@ -387,7 +384,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
387
384
  this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
388
385
  this._setupInitialSearchPhrase();
389
386
  this._setupListeners();
390
- this._setupToggler();
387
+ this._setupAriaAttributes();
391
388
  }
392
389
  disconnectedCallback() {
393
390
  var _a;
@@ -397,7 +394,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
397
394
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
398
395
  window.removeEventListener('resize', this._switchTypeOfSearchView);
399
396
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
400
- this._teardownToggler();
401
397
  }
402
398
  _setupContext() {
403
399
  this._historyContextProvider = new ContextProviderController(this);
@@ -555,9 +551,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
555
551
  }
556
552
  }
557
553
  _handleChooseSearchItem($el) {
558
- const $activeSearchItem = this.displayMode === 'dropdown'
559
- ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
560
- : document.activeElement;
554
+ const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
561
555
  if (!$activeSearchItem)
562
556
  return;
563
557
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -582,24 +576,49 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
582
576
  _submitSearchPhrase(searchPhrase) {
583
577
  this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
584
578
  }
585
- _setupToggler() {
586
- this._togglerElement = this.querySelector('.js-search-toggler');
587
- if (!this._togglerElement)
588
- return;
589
- this._togglerElement.addEventListener('click', this._handleOpenSearch);
590
- 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();
591
587
  }
592
- _teardownToggler() {
593
- if (!this._togglerElement)
588
+ _handleOpenSearchWithKeyboard(ev) {
589
+ if (ev.code !== 'Enter')
594
590
  return;
595
- this._togglerElement.removeEventListener('click', this._handleOpenSearch);
596
- this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
591
+ ev.preventDefault();
592
+ this._handleOpenSearch();
597
593
  }
598
594
  render() {
599
595
  super.render();
600
596
  return html `
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
+
601
616
  ${n(this._isSuggesterLayerVisible(), () => html `
602
- <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
+ >
603
622
  ${n(this._shouldShowMessage, () => html `<h-search-message
604
623
  ${ref(this._searchMessageRef)}
605
624
  .history="${this._historyLimitedContent}"
@@ -630,7 +649,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
630
649
  ?is-dev-search-popup-fixes-flag-enabled=${this.isDevSearchPopupFixesFlagEnabled}
631
650
  ></h-search-results>`)}
632
651
  </div>
633
- `, () => html ` <div
652
+ `, () => html `
653
+ <div
634
654
  class="${SEARCH_CLASS_NAMES.container}"
635
655
  id="${this._searchContentContainerId}"
636
656
  role="${this._containerRole}"
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,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;"}
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-0",
5
+ "version": "1.18.11-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",