@shoper/phoenix_design_system 1.18.12-3 → 1.18.13

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.
@@ -25,7 +25,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
25
25
  constructor() {
26
26
  super(...arguments);
27
27
  this.view = search_constants.DEFAULT_VIEW;
28
+ this.isSearchIconFixEnabled = false;
28
29
  this.displayMode = 'dropdown';
30
+ this._togglerElement = null;
29
31
  this._id = v4['default']();
30
32
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
31
33
  this._searchContentContainerId = v4['default']();
@@ -170,8 +172,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
170
172
  };
171
173
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
172
174
  var _a;
173
- const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
174
- const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
175
+ const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
176
+ const hasHomeOrEndBeenPressed = ev.key === 'Home' || ev.key === 'End';
175
177
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
176
178
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
177
179
  ev.preventDefault();
@@ -244,12 +246,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
244
246
  this._handleBackwardFocus($gridSearchItems);
245
247
  };
246
248
  this._findSearchItemsContainer = () => {
247
- const containers = [
248
- this._searchHistoryRef.value,
249
- this._searchResultsRef.value,
250
- this._searchMessageRef.value
251
- ];
252
- return containers.find(container => container && !utilities.UiDomUtils.isElementEmpty(container));
249
+ const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
250
+ return containers.find((container) => container && !utilities.UiDomUtils.isElementEmpty(container));
253
251
  };
254
252
  this._handleBackwardFocus = ($searchItems) => {
255
253
  var _a;
@@ -346,6 +344,21 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
346
344
  (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
347
345
  }
348
346
  };
347
+ this._handleOpenSearch = () => {
348
+ this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
349
+ const shouldShowMessage = this._searchPhrase !== '';
350
+ this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
351
+ const $searchInput = this.querySelector(`
352
+ ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
353
+ `);
354
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
355
+ };
356
+ this._handleOpenSearchWithKeyboard = (ev) => {
357
+ if (ev.code !== 'Enter')
358
+ return;
359
+ ev.preventDefault();
360
+ this._handleOpenSearch();
361
+ };
349
362
  }
350
363
  async connectedCallback() {
351
364
  super.connectedCallback();
@@ -381,7 +394,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
381
394
  this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
382
395
  this._setupInitialSearchPhrase();
383
396
  this._setupListeners();
384
- this._setupAriaAttributes();
397
+ this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
385
398
  }
386
399
  disconnectedCallback() {
387
400
  var _a;
@@ -391,6 +404,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
391
404
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
392
405
  window.removeEventListener('resize', this._switchTypeOfSearchView);
393
406
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
407
+ if (this.isSearchIconFixEnabled)
408
+ this._teardownToggler();
394
409
  }
395
410
  _setupContext() {
396
411
  this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -548,7 +563,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
548
563
  }
549
564
  }
550
565
  _handleChooseSearchItem($el) {
551
- const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
566
+ const $activeSearchItem = this.displayMode === 'dropdown'
567
+ ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
568
+ : document.activeElement;
552
569
  if (!$activeSearchItem)
553
570
  return;
554
571
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -573,49 +590,39 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
573
590
  _submitSearchPhrase(searchPhrase) {
574
591
  this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
575
592
  }
576
- _handleOpenSearch() {
577
- this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
578
- const shouldShowMessage = this._searchPhrase !== '';
579
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
580
- const $searchInput = this.querySelector(`
581
- ${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
582
- `);
583
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
593
+ _setupToggler() {
594
+ this._togglerElement = this.querySelector('.js-search-toggler');
595
+ if (!this._togglerElement)
596
+ return;
597
+ this._togglerElement.addEventListener('click', this._handleOpenSearch);
598
+ this._togglerElement.addEventListener('keyup', this._handleOpenSearchWithKeyboard);
584
599
  }
585
- _handleOpenSearchWithKeyboard(ev) {
586
- if (ev.code !== 'Enter')
600
+ _teardownToggler() {
601
+ if (!this._togglerElement)
587
602
  return;
588
- ev.preventDefault();
589
- this._handleOpenSearch();
603
+ this._togglerElement.removeEventListener('click', this._handleOpenSearch);
604
+ this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
590
605
  }
591
606
  render() {
592
607
  super.render();
593
608
  return lit.html `
594
- <div
595
- class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
596
- tabindex="0"
597
- aria-haspopup="dialog"
598
- @click=${this._handleOpenSearch}
599
- @keyup=${this._handleOpenSearchWithKeyboard}
600
- >
601
- ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
602
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
603
- ${this._translations.openSearchButtonAriaLabel}
604
- </span>
605
- `)}
606
- <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
607
- <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
608
- ${this._translations.search}
609
- </div>
610
- </div>
611
-
612
-
609
+ ${when.when(!this.isSearchIconFixEnabled, () => lit.html ` <div
610
+ class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
611
+ tabindex="0"
612
+ aria-haspopup="dialog"
613
+ @click=${this._handleOpenSearch}
614
+ @keyup=${this._handleOpenSearchWithKeyboard}
615
+ >
616
+ ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
617
+ <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
618
+ ${this._translations.openSearchButtonAriaLabel}
619
+ </span>
620
+ `)}
621
+ <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
622
+ <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
623
+ </div>`)}
613
624
  ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
614
- <div
615
- class="${search_constants.SEARCH_CLASS_NAMES.container}"
616
- id="${this._searchContentContainerId}"
617
- role="${this._containerRole}"
618
- >
625
+ <div class="${search_constants.SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
619
626
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
620
627
  ${ref_js.ref(this._searchMessageRef)}
621
628
  .history="${this._historyLimitedContent}"
@@ -645,8 +652,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
645
652
  module-instance-id="${this.moduleInstanceId}"
646
653
  ></h-search-results>`)}
647
654
  </div>
648
- `, () => lit.html `
649
- <div
655
+ `, () => lit.html ` <div
650
656
  class="${search_constants.SEARCH_CLASS_NAMES.container}"
651
657
  id="${this._searchContentContainerId}"
652
658
  role="${this._containerRole}"
@@ -667,6 +673,10 @@ tslib_es6.__decorate([
667
673
  decorators.property({ type: String }),
668
674
  tslib_es6.__metadata("design:type", String)
669
675
  ], exports.HSearch.prototype, "locale", void 0);
676
+ tslib_es6.__decorate([
677
+ decorators.property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
678
+ tslib_es6.__metadata("design:type", Boolean)
679
+ ], exports.HSearch.prototype, "isSearchIconFixEnabled", void 0);
670
680
  tslib_es6.__decorate([
671
681
  decorators.property({ type: String, attribute: 'display-mode' }),
672
682
  tslib_es6.__metadata("design:type", String)
@@ -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;"}
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;"}
@@ -44,7 +44,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
44
44
  this.noDeselect = false;
45
45
  this.assistiveTitleId = '';
46
46
  this.isDevSelectPlaceholderFlagEnabled = false;
47
- this.isReactiveSelectionFlagEnabled = false;
48
47
  this.translations = {};
49
48
  this._selectOptionsId = v4['default']();
50
49
  this._searchValue = '';
@@ -60,9 +59,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
60
59
  this._$options = $options.reduce((acc, $option) => {
61
60
  const value = $option.getAttribute('value');
62
61
  if (value === null || value === undefined)
63
- throw Error('Select option must have a value');
62
+ throw Error('Select option must hava a value');
64
63
  if (acc.has(value))
65
- throw Error('Select options must have a unique values.');
64
+ throw Error('Select options must hava a unique values.');
66
65
  return acc.set(value, $option);
67
66
  }, new Map());
68
67
  const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
@@ -186,7 +185,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
186
185
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
187
186
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
188
187
  const $placeholderEl = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
189
- this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
188
+ this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
190
189
  if (this.multiple)
191
190
  this.type = select_constants.SELECT_TYPES.multiple;
192
191
  }
@@ -288,12 +287,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
288
287
  }
289
288
  this._setupEvents();
290
289
  }
291
- firstUpdated(changedProperties) {
292
- super.firstUpdated(changedProperties);
293
- if (this.isReactiveSelectionFlagEnabled) {
294
- this._setupMutationObserver();
295
- }
296
- }
297
290
  attributeChangedCallback(name, _old, value) {
298
291
  super.attributeChangedCallback(name, _old, value);
299
292
  switch (name) {
@@ -312,19 +305,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
312
305
  this._updateOptions();
313
306
  }
314
307
  get _canAddPlaceholder() {
308
+ var _a;
315
309
  if (this.multiple || this.required)
316
310
  return false;
311
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
312
+ if (hasSelection)
313
+ return false;
317
314
  const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
318
315
  return !hasExistingPlaceholder;
319
316
  }
320
317
  _createPlaceholderOption() {
321
- var _a;
322
318
  const $option = document.createElement('h-option');
323
319
  $option.setAttribute('value', '');
324
- const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
325
- if (!hasSelection) {
326
- $option.setAttribute('selected', 'true');
327
- }
320
+ $option.setAttribute('selected', 'true');
328
321
  $option.setAttribute('placeholder', 'true');
329
322
  $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content);
330
323
  const $content = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -332,7 +325,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
332
325
  $content.textContent = this.$placeholder;
333
326
  }
334
327
  else if (this.$placeholder instanceof Node) {
335
- Array.from(this.$placeholder.childNodes).forEach((node) => {
328
+ Array.from(this.$placeholder.childNodes).forEach(node => {
336
329
  $content.appendChild(node.cloneNode(true));
337
330
  });
338
331
  }
@@ -341,8 +334,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
341
334
  }
342
335
  _injectOptionIntoDOM($option) {
343
336
  const $firstOption = this.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
344
- if ($firstOption && $firstOption.parentNode) {
345
- $firstOption.parentNode.insertBefore($option, $firstOption);
337
+ if ($firstOption) {
338
+ this.insertBefore($option, $firstOption);
346
339
  }
347
340
  else {
348
341
  this.appendChild($option);
@@ -352,53 +345,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
352
345
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
353
346
  this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
354
347
  }
355
- _setupMutationObserver() {
356
- this._optionsMutationObserver = new MutationObserver((mutations) => {
357
- let shouldUpdate = false;
358
- let newlySelectedValue = null;
359
- for (const mutation of mutations) {
360
- const target = mutation.target;
361
- if (mutation.type === 'attributes' &&
362
- mutation.attributeName === 'selected' &&
363
- target.tagName &&
364
- target.tagName.toLowerCase() === 'h-option') {
365
- shouldUpdate = true;
366
- if (target.hasAttribute('selected')) {
367
- newlySelectedValue = target.getAttribute('value');
368
- }
369
- }
370
- }
371
- if (shouldUpdate) {
372
- const options = Array.from(this._$options.values()).map(($el) => select_option_mapper.SelectOptionMapper.toModel($el));
373
- if (!this.multiple && newlySelectedValue !== null) {
374
- options.forEach((opt) => {
375
- opt.selected = opt.value === newlySelectedValue;
376
- });
377
- }
378
- this._selectController.options$.notify(options);
379
- let selectedOptions = options.filter((opt) => opt.selected);
380
- if (selectedOptions.length === 0) {
381
- const placeholder = options.find((opt) => opt.isPlaceholder);
382
- if (placeholder) {
383
- placeholder.selected = true;
384
- const $placeholderHtml = this._$options.get(placeholder.value);
385
- if ($placeholderHtml) {
386
- $placeholderHtml.setAttribute('selected', 'true');
387
- }
388
- selectedOptions = [placeholder];
389
- }
390
- }
391
- this._selectController.selectedOptions$.notify(selectedOptions);
392
- }
393
- });
394
- if (this._$optionsList.value) {
395
- this._optionsMutationObserver.observe(this._$optionsList.value, {
396
- attributes: true,
397
- attributeFilter: ['selected'],
398
- subtree: true
399
- });
400
- }
401
- }
402
348
  _appendNewHTMLOption(option, position) {
403
349
  const $list = this._$optionsList.value;
404
350
  if (!$list)
@@ -459,11 +405,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
459
405
  this._selectController.select(option);
460
406
  }
461
407
  disconnectedCallback() {
462
- var _a;
463
408
  super.disconnectedCallback();
464
409
  this._selectController.options$.unsubscribe(this._optionsObserver);
465
410
  this._$options.clear();
466
- (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
467
411
  }
468
412
  _getClonedPlaceholderElement() {
469
413
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -515,9 +459,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
515
459
  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
516
460
 
517
461
  <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>
518
- ${this.isDevSelectPlaceholderFlagEnabled
519
- ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
520
- : lit.html `${this._getClonedPlaceholderElement()}`}
462
+ ${this.isDevSelectPlaceholderFlagEnabled ?
463
+ (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
464
+ lit.html `${this._getClonedPlaceholderElement()}`}
521
465
  </div>
522
466
 
523
467
  ${isSearchEnabled
@@ -637,10 +581,6 @@ tslib_es6.__decorate([
637
581
  decorators_js.property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
638
582
  tslib_es6.__metadata("design:type", Boolean)
639
583
  ], exports.HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
640
- tslib_es6.__decorate([
641
- decorators_js.property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
642
- tslib_es6.__metadata("design:type", Boolean)
643
- ], exports.HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
644
584
  tslib_es6.__decorate([
645
585
  decorators_js.property({
646
586
  converter: {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -5,6 +5,7 @@ export declare class HSearch extends PhoenixLightLitElement {
5
5
  settings: TSearchSettings;
6
6
  view: string;
7
7
  locale: string;
8
+ isSearchIconFixEnabled: boolean;
8
9
  displayMode: TSearchDisplayMode;
9
10
  moduleInstanceId: string;
10
11
  private _historyContextProvider;
@@ -14,6 +15,7 @@ export declare class HSearch extends PhoenixLightLitElement {
14
15
  private _searchInput;
15
16
  private _inputField;
16
17
  private _searchForm;
18
+ private _togglerElement;
17
19
  private _id;
18
20
  private _openSearchButtonAriaLabelId;
19
21
  private _searchContentContainerId;
@@ -80,5 +82,7 @@ export declare class HSearch extends PhoenixLightLitElement {
80
82
  private _setupAriaAttributes;
81
83
  private _handleOpenSearch;
82
84
  private _handleOpenSearchWithKeyboard;
85
+ private _setupToggler;
86
+ private _teardownToggler;
83
87
  protected render(): TemplateResult;
84
88
  }
@@ -21,7 +21,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
21
21
  constructor() {
22
22
  super(...arguments);
23
23
  this.view = DEFAULT_VIEW;
24
+ this.isSearchIconFixEnabled = false;
24
25
  this.displayMode = 'dropdown';
26
+ this._togglerElement = null;
25
27
  this._id = v4();
26
28
  this._openSearchButtonAriaLabelId = `${this._id}-open-search-button-aria-label`;
27
29
  this._searchContentContainerId = v4();
@@ -166,8 +168,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
166
168
  };
167
169
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
168
170
  var _a;
169
- const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
170
- const hasHomeOrEndBeenPressed = ev.key === "Home" || ev.key === "End";
171
+ const hasArrowBeenPressed = ev.key === 'ArrowUp' || ev.key === 'ArrowDown';
172
+ const hasHomeOrEndBeenPressed = ev.key === 'Home' || ev.key === 'End';
171
173
  const hasSearchContainerParent = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('.search__container'));
172
174
  if ((hasArrowBeenPressed || hasHomeOrEndBeenPressed) && hasSearchContainerParent) {
173
175
  ev.preventDefault();
@@ -240,12 +242,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
240
242
  this._handleBackwardFocus($gridSearchItems);
241
243
  };
242
244
  this._findSearchItemsContainer = () => {
243
- const containers = [
244
- this._searchHistoryRef.value,
245
- this._searchResultsRef.value,
246
- this._searchMessageRef.value
247
- ];
248
- return containers.find(container => container && !UiDomUtils.isElementEmpty(container));
245
+ const containers = [this._searchHistoryRef.value, this._searchResultsRef.value, this._searchMessageRef.value];
246
+ return containers.find((container) => container && !UiDomUtils.isElementEmpty(container));
249
247
  };
250
248
  this._handleBackwardFocus = ($searchItems) => {
251
249
  var _a;
@@ -342,6 +340,21 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
342
340
  (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
343
341
  }
344
342
  };
343
+ this._handleOpenSearch = () => {
344
+ this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
345
+ const shouldShowMessage = this._searchPhrase !== '';
346
+ this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
347
+ const $searchInput = this.querySelector(`
348
+ ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
349
+ `);
350
+ $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
351
+ };
352
+ this._handleOpenSearchWithKeyboard = (ev) => {
353
+ if (ev.code !== 'Enter')
354
+ return;
355
+ ev.preventDefault();
356
+ this._handleOpenSearch();
357
+ };
345
358
  }
346
359
  async connectedCallback() {
347
360
  super.connectedCallback();
@@ -377,7 +390,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
377
390
  this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
378
391
  this._setupInitialSearchPhrase();
379
392
  this._setupListeners();
380
- this._setupAriaAttributes();
393
+ this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
381
394
  }
382
395
  disconnectedCallback() {
383
396
  var _a;
@@ -387,6 +400,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
387
400
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
388
401
  window.removeEventListener('resize', this._switchTypeOfSearchView);
389
402
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
403
+ if (this.isSearchIconFixEnabled)
404
+ this._teardownToggler();
390
405
  }
391
406
  _setupContext() {
392
407
  this._historyContextProvider = new ContextProviderController(this);
@@ -544,7 +559,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
544
559
  }
545
560
  }
546
561
  _handleChooseSearchItem($el) {
547
- const $activeSearchItem = this.displayMode === 'dropdown' ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`) : document.activeElement;
562
+ const $activeSearchItem = this.displayMode === 'dropdown'
563
+ ? this.querySelector(`[data-search-item-id="${this._activeItemId}"]`)
564
+ : document.activeElement;
548
565
  if (!$activeSearchItem)
549
566
  return;
550
567
  const $linkElement = $activeSearchItem.querySelector('a');
@@ -569,49 +586,39 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
569
586
  _submitSearchPhrase(searchPhrase) {
570
587
  this._dispatchEventWithSearchPhrase(SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
571
588
  }
572
- _handleOpenSearch() {
573
- this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
574
- const shouldShowMessage = this._searchPhrase !== '';
575
- this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
576
- const $searchInput = this.querySelector(`
577
- ${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
578
- `);
579
- $searchInput === null || $searchInput === void 0 ? void 0 : $searchInput.focus();
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);
580
595
  }
581
- _handleOpenSearchWithKeyboard(ev) {
582
- if (ev.code !== 'Enter')
596
+ _teardownToggler() {
597
+ if (!this._togglerElement)
583
598
  return;
584
- ev.preventDefault();
585
- this._handleOpenSearch();
599
+ this._togglerElement.removeEventListener('click', this._handleOpenSearch);
600
+ this._togglerElement.removeEventListener('keyup', this._handleOpenSearchWithKeyboard);
586
601
  }
587
602
  render() {
588
603
  super.render();
589
604
  return html `
590
- <div
591
- class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
592
- tabindex="0"
593
- aria-haspopup="dialog"
594
- @click=${this._handleOpenSearch}
595
- @keyup=${this._handleOpenSearchWithKeyboard}
596
- >
597
- ${n(this._translations.openSearchButtonAriaLabel, () => html `
598
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
599
- ${this._translations.openSearchButtonAriaLabel}
600
- </span>
601
- `)}
602
- <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
603
- <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">
604
- ${this._translations.search}
605
- </div>
606
- </div>
607
-
608
-
605
+ ${n(!this.isSearchIconFixEnabled, () => html ` <div
606
+ class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
607
+ tabindex="0"
608
+ aria-haspopup="dialog"
609
+ @click=${this._handleOpenSearch}
610
+ @keyup=${this._handleOpenSearchWithKeyboard}
611
+ >
612
+ ${n(this._translations.openSearchButtonAriaLabel, () => html `
613
+ <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
614
+ ${this._translations.openSearchButtonAriaLabel}
615
+ </span>
616
+ `)}
617
+ <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
618
+ <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
619
+ </div>`)}
609
620
  ${n(this._isSuggesterLayerVisible(), () => html `
610
- <div
611
- class="${SEARCH_CLASS_NAMES.container}"
612
- id="${this._searchContentContainerId}"
613
- role="${this._containerRole}"
614
- >
621
+ <div class="${SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
615
622
  ${n(this._shouldShowMessage, () => html `<h-search-message
616
623
  ${ref(this._searchMessageRef)}
617
624
  .history="${this._historyLimitedContent}"
@@ -641,8 +648,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
641
648
  module-instance-id="${this.moduleInstanceId}"
642
649
  ></h-search-results>`)}
643
650
  </div>
644
- `, () => html `
645
- <div
651
+ `, () => html ` <div
646
652
  class="${SEARCH_CLASS_NAMES.container}"
647
653
  id="${this._searchContentContainerId}"
648
654
  role="${this._containerRole}"
@@ -663,6 +669,10 @@ __decorate([
663
669
  property({ type: String }),
664
670
  __metadata("design:type", String)
665
671
  ], HSearch.prototype, "locale", void 0);
672
+ __decorate([
673
+ property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
674
+ __metadata("design:type", Boolean)
675
+ ], HSearch.prototype, "isSearchIconFixEnabled", void 0);
666
676
  __decorate([
667
677
  property({ type: String, attribute: 'display-mode' }),
668
678
  __metadata("design:type", String)
@@ -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;"}
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;"}
@@ -24,7 +24,6 @@ export declare class HSelect extends PhoenixLightLitElement {
24
24
  noDeselect: boolean;
25
25
  assistiveTitleId: string;
26
26
  isDevSelectPlaceholderFlagEnabled: boolean;
27
- isReactiveSelectionFlagEnabled: boolean;
28
27
  translations: Record<string, string>;
29
28
  private _selectOptionsId;
30
29
  get selectedIndex(): number;
@@ -48,12 +47,10 @@ export declare class HSelect extends PhoenixLightLitElement {
48
47
  private _selectedOptionsAriaObserver;
49
48
  private $placeholder;
50
49
  private $searchLabel;
51
- private _optionsMutationObserver?;
52
50
  constructor();
53
51
  updated(changedProperties: PropertyValues): void;
54
52
  private _focusElementAfterSelectOpened;
55
53
  connectedCallback(): void;
56
- firstUpdated(changedProperties: PropertyValues): void;
57
54
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
58
55
  private _updateOptions;
59
56
  private _getOptions;
@@ -62,7 +59,6 @@ export declare class HSelect extends PhoenixLightLitElement {
62
59
  private _createPlaceholderOption;
63
60
  private _injectOptionIntoDOM;
64
61
  private _setupEvents;
65
- private _setupMutationObserver;
66
62
  private _handleOptionDeselect;
67
63
  private _updateOptionsView;
68
64
  private _updateLabelAria;
@@ -40,7 +40,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
40
40
  this.noDeselect = false;
41
41
  this.assistiveTitleId = '';
42
42
  this.isDevSelectPlaceholderFlagEnabled = false;
43
- this.isReactiveSelectionFlagEnabled = false;
44
43
  this.translations = {};
45
44
  this._selectOptionsId = v4();
46
45
  this._searchValue = '';
@@ -56,9 +55,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
56
55
  this._$options = $options.reduce((acc, $option) => {
57
56
  const value = $option.getAttribute('value');
58
57
  if (value === null || value === undefined)
59
- throw Error('Select option must have a value');
58
+ throw Error('Select option must hava a value');
60
59
  if (acc.has(value))
61
- throw Error('Select options must have a unique values.');
60
+ throw Error('Select options must hava a unique values.');
62
61
  return acc.set(value, $option);
63
62
  }, new Map());
64
63
  const options = $options.map(SelectOptionMapper.toModel);
@@ -182,7 +181,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
182
181
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
183
182
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
184
183
  const $placeholderEl = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`);
185
- this.$placeholder = $placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ? $placeholderEl : 'Select';
184
+ this.$placeholder = ($placeholderEl && ((_a = $placeholderEl.textContent) === null || _a === void 0 ? void 0 : _a.trim())) ? $placeholderEl : 'Select';
186
185
  if (this.multiple)
187
186
  this.type = SELECT_TYPES.multiple;
188
187
  }
@@ -284,12 +283,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
284
283
  }
285
284
  this._setupEvents();
286
285
  }
287
- firstUpdated(changedProperties) {
288
- super.firstUpdated(changedProperties);
289
- if (this.isReactiveSelectionFlagEnabled) {
290
- this._setupMutationObserver();
291
- }
292
- }
293
286
  attributeChangedCallback(name, _old, value) {
294
287
  super.attributeChangedCallback(name, _old, value);
295
288
  switch (name) {
@@ -308,19 +301,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
308
301
  this._updateOptions();
309
302
  }
310
303
  get _canAddPlaceholder() {
304
+ var _a;
311
305
  if (this.multiple || this.required)
312
306
  return false;
307
+ const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
308
+ if (hasSelection)
309
+ return false;
313
310
  const hasExistingPlaceholder = !!this.querySelector('h-option[placeholder]');
314
311
  return !hasExistingPlaceholder;
315
312
  }
316
313
  _createPlaceholderOption() {
317
- var _a;
318
314
  const $option = document.createElement('h-option');
319
315
  $option.setAttribute('value', '');
320
- const hasSelection = (((_a = this._selectController.selectedOptions$.getValue()) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
321
- if (!hasSelection) {
322
- $option.setAttribute('selected', 'true');
323
- }
316
+ $option.setAttribute('selected', 'true');
324
317
  $option.setAttribute('placeholder', 'true');
325
318
  $option.setAttribute('slot', SELECT_SLOT_NAMES.content);
326
319
  const $content = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
@@ -328,7 +321,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
328
321
  $content.textContent = this.$placeholder;
329
322
  }
330
323
  else if (this.$placeholder instanceof Node) {
331
- Array.from(this.$placeholder.childNodes).forEach((node) => {
324
+ Array.from(this.$placeholder.childNodes).forEach(node => {
332
325
  $content.appendChild(node.cloneNode(true));
333
326
  });
334
327
  }
@@ -337,8 +330,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
337
330
  }
338
331
  _injectOptionIntoDOM($option) {
339
332
  const $firstOption = this.querySelector(SELECT_RELATED_COMPONENTS_NAMES.option);
340
- if ($firstOption && $firstOption.parentNode) {
341
- $firstOption.parentNode.insertBefore($option, $firstOption);
333
+ if ($firstOption) {
334
+ this.insertBefore($option, $firstOption);
342
335
  }
343
336
  else {
344
337
  this.appendChild($option);
@@ -348,53 +341,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
348
341
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
349
342
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
350
343
  }
351
- _setupMutationObserver() {
352
- this._optionsMutationObserver = new MutationObserver((mutations) => {
353
- let shouldUpdate = false;
354
- let newlySelectedValue = null;
355
- for (const mutation of mutations) {
356
- const target = mutation.target;
357
- if (mutation.type === 'attributes' &&
358
- mutation.attributeName === 'selected' &&
359
- target.tagName &&
360
- target.tagName.toLowerCase() === 'h-option') {
361
- shouldUpdate = true;
362
- if (target.hasAttribute('selected')) {
363
- newlySelectedValue = target.getAttribute('value');
364
- }
365
- }
366
- }
367
- if (shouldUpdate) {
368
- const options = Array.from(this._$options.values()).map(($el) => SelectOptionMapper.toModel($el));
369
- if (!this.multiple && newlySelectedValue !== null) {
370
- options.forEach((opt) => {
371
- opt.selected = opt.value === newlySelectedValue;
372
- });
373
- }
374
- this._selectController.options$.notify(options);
375
- let selectedOptions = options.filter((opt) => opt.selected);
376
- if (selectedOptions.length === 0) {
377
- const placeholder = options.find((opt) => opt.isPlaceholder);
378
- if (placeholder) {
379
- placeholder.selected = true;
380
- const $placeholderHtml = this._$options.get(placeholder.value);
381
- if ($placeholderHtml) {
382
- $placeholderHtml.setAttribute('selected', 'true');
383
- }
384
- selectedOptions = [placeholder];
385
- }
386
- }
387
- this._selectController.selectedOptions$.notify(selectedOptions);
388
- }
389
- });
390
- if (this._$optionsList.value) {
391
- this._optionsMutationObserver.observe(this._$optionsList.value, {
392
- attributes: true,
393
- attributeFilter: ['selected'],
394
- subtree: true
395
- });
396
- }
397
- }
398
344
  _appendNewHTMLOption(option, position) {
399
345
  const $list = this._$optionsList.value;
400
346
  if (!$list)
@@ -455,11 +401,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
455
401
  this._selectController.select(option);
456
402
  }
457
403
  disconnectedCallback() {
458
- var _a;
459
404
  super.disconnectedCallback();
460
405
  this._selectController.options$.unsubscribe(this._optionsObserver);
461
406
  this._$options.clear();
462
- (_a = this._optionsMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
463
407
  }
464
408
  _getClonedPlaceholderElement() {
465
409
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
@@ -511,9 +455,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
511
455
  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseMobileButton}" @close=${this._closeSelect}></h-select-close-btn>
512
456
 
513
457
  <div class=${SELECT_CSS_CLASSES.selectLabel}>
514
- ${this.isDevSelectPlaceholderFlagEnabled
515
- ? (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true)
516
- : html `${this._getClonedPlaceholderElement()}`}
458
+ ${this.isDevSelectPlaceholderFlagEnabled ?
459
+ (_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.cloneNode(true) :
460
+ html `${this._getClonedPlaceholderElement()}`}
517
461
  </div>
518
462
 
519
463
  ${isSearchEnabled
@@ -633,10 +577,6 @@ __decorate([
633
577
  property({ type: Boolean, attribute: 'is-dev-select-placeholder-flag-enabled' }),
634
578
  __metadata("design:type", Boolean)
635
579
  ], HSelect.prototype, "isDevSelectPlaceholderFlagEnabled", void 0);
636
- __decorate([
637
- property({ type: Boolean, attribute: 'is-reactive-selection-flag-enabled' }),
638
- __metadata("design:type", Boolean)
639
- ], HSelect.prototype, "isReactiveSelectionFlagEnabled", void 0);
640
580
  __decorate([
641
581
  property({
642
582
  converter: {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.12-3",
5
+ "version": "1.18.13",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",