@shoper/phoenix_design_system 1.18.27-13 → 1.18.27-15

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/form/search/search.js +2 -30
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/slider/slider.js +23 -19
  4. package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +0 -2
  6. package/build/esm/packages/phoenix/src/components/form/search/search.js +2 -30
  7. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +2 -1
  9. package/build/esm/packages/phoenix/src/components/slider/slider.js +23 -19
  10. package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
  11. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -8,7 +8,6 @@ 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');
12
11
  var observer = require('../../../core/classes/observer/observer.js');
13
12
  var context_consumer_controller = require('../../../core/context/context_consumer_controller.js');
14
13
  var behavior_subject = require('../../../core/classes/behavior_subject/behavior_subject.js');
@@ -25,7 +24,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
25
24
  constructor() {
26
25
  super(...arguments);
27
26
  this.view = search_constants.DEFAULT_VIEW;
28
- this.isSearchIconFixEnabled = false;
29
27
  this.isSearchUxFixesFlagEnabled = false;
30
28
  this.displayMode = 'dropdown';
31
29
  this._togglerElement = null;
@@ -362,12 +360,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
362
360
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
363
361
  }
364
362
  };
365
- this._setupAriaAttributes = () => {
366
- var _a;
367
- if (this._translations.openSearchButtonAriaLabel) {
368
- (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
369
- }
370
- };
371
363
  this._handleOpenSearch = () => {
372
364
  this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
373
365
  const shouldShowMessage = this._searchPhrase !== '';
@@ -418,7 +410,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
418
410
  this._searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
419
411
  this._setupInitialSearchPhrase();
420
412
  this._setupListeners();
421
- this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
413
+ this._setupToggler();
422
414
  }
423
415
  disconnectedCallback() {
424
416
  var _a;
@@ -428,8 +420,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
428
420
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
429
421
  window.removeEventListener('resize', this._switchTypeOfSearchView);
430
422
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
431
- if (this.isSearchIconFixEnabled)
432
- this._teardownToggler();
423
+ this._teardownToggler();
433
424
  }
434
425
  _setupContext() {
435
426
  this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
@@ -621,21 +612,6 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
621
612
  render() {
622
613
  super.render();
623
614
  return lit.html `
624
- ${when.when(!this.isSearchIconFixEnabled, () => lit.html ` <div
625
- class="${search_constants.SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
626
- tabindex="0"
627
- aria-haspopup="dialog"
628
- @click=${this._handleOpenSearch}
629
- @keyup=${this._handleOpenSearchWithKeyboard}
630
- >
631
- ${when.when(this._translations.openSearchButtonAriaLabel, () => lit.html `
632
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
633
- ${this._translations.openSearchButtonAriaLabel}
634
- </span>
635
- `)}
636
- <h-icon icon-name="icon-search" size=${icon_constants.ICONS_SIZES.l}></h-icon>
637
- <div ${ref_js.ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
638
- </div>`)}
639
615
  ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
640
616
  <div class="${search_constants.SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
641
617
  ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
@@ -688,10 +664,6 @@ tslib_es6.__decorate([
688
664
  decorators.property({ type: String }),
689
665
  tslib_es6.__metadata("design:type", String)
690
666
  ], exports.HSearch.prototype, "locale", void 0);
691
- tslib_es6.__decorate([
692
- decorators.property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
693
- tslib_es6.__metadata("design:type", Boolean)
694
- ], exports.HSearch.prototype, "isSearchIconFixEnabled", void 0);
695
667
  tslib_es6.__decorate([
696
668
  decorators.property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
697
669
  tslib_es6.__metadata("design:type", Boolean)
package/build/cjs/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA,mBAAmB,wDAA4D;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;"}
package/build/cjs/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -22,8 +22,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
22
22
  focus: 'center'
23
23
  };
24
24
  this._slider = null;
25
- this._mutationObserver = null;
26
- this._$focusableElements = new Set();
25
+ this._$focusableElements = [];
27
26
  this._showFocusableNodes = (slideComponent) => {
28
27
  this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
29
28
  };
@@ -31,28 +30,27 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
31
30
  this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
32
31
  };
33
32
  this._handleFocusableNodes = ({ slide }, action) => {
34
- const $focusableSlideChildren = [...this._$focusableElements].filter(($focusableElement) => slide.contains($focusableElement));
33
+ const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
35
34
  if ($focusableSlideChildren.length === 0)
36
35
  return;
37
- const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? utilities.UiDomUtils.showFocusableElement : utilities.UiDomUtils.hideFocusableElement;
36
+ const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
38
37
  $focusableSlideChildren.forEach(($element) => updateFocusability($element));
39
38
  };
40
39
  this._scanMutationsForNewFocusableElements = (mutationList) => {
41
40
  for (const mutation of mutationList) {
42
- for (const addedNode of mutation.addedNodes) {
43
- if (!(addedNode instanceof HTMLElement))
44
- continue;
45
- if (utilities.UiDomUtils.isFocusable(addedNode))
46
- this._initializeFocusableElement(addedNode);
47
- const $focusableChildren = [...addedNode.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
48
- $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
49
- }
41
+ if (mutation.type !== 'childList')
42
+ continue;
43
+ const $target = mutation.target;
44
+ const isFocusable = utilities.UiDomUtils.isFocusable($target);
45
+ const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
46
+ isFocusable && this._initializeFocusableElement($target);
47
+ $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
50
48
  }
51
49
  };
52
50
  this._initializeFocusableElement = ($element) => {
53
- !this._$focusableElements.has($element) && this._$focusableElements.add($element);
51
+ !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
54
52
  if ($element.closest('[aria-hidden="true"]')) {
55
- utilities.UiDomUtils.hideFocusableElement($element);
53
+ this._hideFocusableElement($element);
56
54
  }
57
55
  };
58
56
  }
@@ -76,19 +74,25 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
76
74
  }
77
75
  this._slider.on('visible', this._showFocusableNodes);
78
76
  this._slider.on('hidden', this._hideFocusableNodes);
79
- this._mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
80
- this._mutationObserver.observe(this, { childList: true, subtree: true });
77
+ const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
78
+ mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
79
+ }
80
+ _showFocusableElement($element) {
81
+ $element.setAttribute('tabindex', '0');
82
+ $element.removeAttribute('aria-hidden');
83
+ }
84
+ _hideFocusableElement($element) {
85
+ $element.setAttribute('tabindex', '-1');
86
+ $element.setAttribute('aria-hidden', 'true');
81
87
  }
82
88
  getSlider() {
83
89
  return this._slider;
84
90
  }
85
91
  disconnectedCallback() {
86
- var _a, _b, _c;
92
+ var _a, _b;
87
93
  super.disconnectedCallback();
88
94
  (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
89
95
  (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
90
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
91
- this._mutationObserver = null;
92
96
  }
93
97
  };
94
98
  tslib_es6.__decorate([
package/build/cjs/packages/phoenix/src/components/slider/slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/search.d.ts CHANGED
@@ -5,7 +5,6 @@ export declare class HSearch extends PhoenixLightLitElement {
5
5
  settings: TSearchSettings;
6
6
  view: string;
7
7
  locale: string;
8
- isSearchIconFixEnabled: boolean;
9
8
  isSearchUxFixesFlagEnabled: boolean;
10
9
  displayMode: TSearchDisplayMode;
11
10
  moduleInstanceId: string;
@@ -81,7 +80,6 @@ export declare class HSearch extends PhoenixLightLitElement {
81
80
  private _isSuggesterLayerVisible;
82
81
  private _preventSubmitOnSearchClear;
83
82
  private _resetSearchOnFocusOutside;
84
- private _setupAriaAttributes;
85
83
  private _handleOpenSearch;
86
84
  private _handleOpenSearchWithKeyboard;
87
85
  private _setupToggler;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -4,7 +4,6 @@ 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';
8
7
  import { Observer } from '../../../core/classes/observer/observer.js';
9
8
  import { ContextConsumerController } from '../../../core/context/context_consumer_controller.js';
10
9
  import { BehaviorSubject } from '../../../core/classes/behavior_subject/behavior_subject.js';
@@ -21,7 +20,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
21
20
  constructor() {
22
21
  super(...arguments);
23
22
  this.view = DEFAULT_VIEW;
24
- this.isSearchIconFixEnabled = false;
25
23
  this.isSearchUxFixesFlagEnabled = false;
26
24
  this.displayMode = 'dropdown';
27
25
  this._togglerElement = null;
@@ -358,12 +356,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
358
356
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
359
357
  }
360
358
  };
361
- this._setupAriaAttributes = () => {
362
- var _a;
363
- if (this._translations.openSearchButtonAriaLabel) {
364
- (_a = this._openSearchButtonLabelRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this._openSearchButtonAriaLabelId);
365
- }
366
- };
367
359
  this._handleOpenSearch = () => {
368
360
  this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
369
361
  const shouldShowMessage = this._searchPhrase !== '';
@@ -414,7 +406,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
414
406
  this._searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
415
407
  this._setupInitialSearchPhrase();
416
408
  this._setupListeners();
417
- this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
409
+ this._setupToggler();
418
410
  }
419
411
  disconnectedCallback() {
420
412
  var _a;
@@ -424,8 +416,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
424
416
  document.removeEventListener('focusin', this._resetSearchOnFocusOutside);
425
417
  window.removeEventListener('resize', this._switchTypeOfSearchView);
426
418
  (_a = this._searchForm) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this._preventSubmitOnSearchClear);
427
- if (this.isSearchIconFixEnabled)
428
- this._teardownToggler();
419
+ this._teardownToggler();
429
420
  }
430
421
  _setupContext() {
431
422
  this._historyContextProvider = new ContextProviderController(this);
@@ -617,21 +608,6 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
617
608
  render() {
618
609
  super.render();
619
610
  return html `
620
- ${n(!this.isSearchIconFixEnabled, () => html ` <div
621
- class="${SEARCH_CLASS_NAMES.icon} labeled-icon hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only"
622
- tabindex="0"
623
- aria-haspopup="dialog"
624
- @click=${this._handleOpenSearch}
625
- @keyup=${this._handleOpenSearchWithKeyboard}
626
- >
627
- ${n(this._translations.openSearchButtonAriaLabel, () => html `
628
- <span id="${this._openSearchButtonAriaLabelId}" class="sr-only">
629
- ${this._translations.openSearchButtonAriaLabel}
630
- </span>
631
- `)}
632
- <h-icon icon-name="icon-search" size=${ICONS_SIZES.l}></h-icon>
633
- <div ${ref(this._openSearchButtonLabelRef)} class="labeled-icon__signature">${this._translations.search}</div>
634
- </div>`)}
635
611
  ${n(this._isSuggesterLayerVisible(), () => html `
636
612
  <div class="${SEARCH_CLASS_NAMES.container}" id="${this._searchContentContainerId}" role="${this._containerRole}">
637
613
  ${n(this._shouldShowMessage, () => html `<h-search-message
@@ -684,10 +660,6 @@ __decorate([
684
660
  property({ type: String }),
685
661
  __metadata("design:type", String)
686
662
  ], HSearch.prototype, "locale", void 0);
687
- __decorate([
688
- property({ type: Boolean, attribute: 'is-search-icon-fix-enabled' }),
689
- __metadata("design:type", Boolean)
690
- ], HSearch.prototype, "isSearchIconFixEnabled", void 0);
691
663
  __decorate([
692
664
  property({ type: Boolean, attribute: 'is-search-ux-fixes-flag-enabled' }),
693
665
  __metadata("design:type", Boolean)
package/build/esm/packages/phoenix/src/components/form/search/search.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,wDAA4D;AAC3E;AACA;AACA,0BAA0B,wDAA4D;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;"}
package/build/esm/packages/phoenix/src/components/slider/slider.d.ts CHANGED
@@ -7,12 +7,13 @@ export declare class HSlider extends PhoenixLightLitElement {
7
7
  set sliderSettings(newSettingsObject: ISliderOptions);
8
8
  private _settings;
9
9
  private _slider;
10
- private _mutationObserver;
11
10
  private _$focusableElements;
12
11
  connectedCallback(): void;
13
12
  private _showFocusableNodes;
14
13
  private _hideFocusableNodes;
15
14
  private _handleFocusableNodes;
15
+ private _showFocusableElement;
16
+ private _hideFocusableElement;
16
17
  private _scanMutationsForNewFocusableElements;
17
18
  private _initializeFocusableElement;
18
19
  getSlider(): ISlider | null;
package/build/esm/packages/phoenix/src/components/slider/slider.js CHANGED
@@ -18,8 +18,7 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
18
18
  focus: 'center'
19
19
  };
20
20
  this._slider = null;
21
- this._mutationObserver = null;
22
- this._$focusableElements = new Set();
21
+ this._$focusableElements = [];
23
22
  this._showFocusableNodes = (slideComponent) => {
24
23
  this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
25
24
  };
@@ -27,28 +26,27 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
27
26
  this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
28
27
  };
29
28
  this._handleFocusableNodes = ({ slide }, action) => {
30
- const $focusableSlideChildren = [...this._$focusableElements].filter(($focusableElement) => slide.contains($focusableElement));
29
+ const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
31
30
  if ($focusableSlideChildren.length === 0)
32
31
  return;
33
- const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? UiDomUtils.showFocusableElement : UiDomUtils.hideFocusableElement;
32
+ const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
34
33
  $focusableSlideChildren.forEach(($element) => updateFocusability($element));
35
34
  };
36
35
  this._scanMutationsForNewFocusableElements = (mutationList) => {
37
36
  for (const mutation of mutationList) {
38
- for (const addedNode of mutation.addedNodes) {
39
- if (!(addedNode instanceof HTMLElement))
40
- continue;
41
- if (UiDomUtils.isFocusable(addedNode))
42
- this._initializeFocusableElement(addedNode);
43
- const $focusableChildren = [...addedNode.querySelectorAll(UiDomUtils.getFocusableSelector())];
44
- $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
45
- }
37
+ if (mutation.type !== 'childList')
38
+ continue;
39
+ const $target = mutation.target;
40
+ const isFocusable = UiDomUtils.isFocusable($target);
41
+ const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
42
+ isFocusable && this._initializeFocusableElement($target);
43
+ $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
46
44
  }
47
45
  };
48
46
  this._initializeFocusableElement = ($element) => {
49
- !this._$focusableElements.has($element) && this._$focusableElements.add($element);
47
+ !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
50
48
  if ($element.closest('[aria-hidden="true"]')) {
51
- UiDomUtils.hideFocusableElement($element);
49
+ this._hideFocusableElement($element);
52
50
  }
53
51
  };
54
52
  }
@@ -72,19 +70,25 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
72
70
  }
73
71
  this._slider.on('visible', this._showFocusableNodes);
74
72
  this._slider.on('hidden', this._hideFocusableNodes);
75
- this._mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
76
- this._mutationObserver.observe(this, { childList: true, subtree: true });
73
+ const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
74
+ mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
75
+ }
76
+ _showFocusableElement($element) {
77
+ $element.setAttribute('tabindex', '0');
78
+ $element.removeAttribute('aria-hidden');
79
+ }
80
+ _hideFocusableElement($element) {
81
+ $element.setAttribute('tabindex', '-1');
82
+ $element.setAttribute('aria-hidden', 'true');
77
83
  }
78
84
  getSlider() {
79
85
  return this._slider;
80
86
  }
81
87
  disconnectedCallback() {
82
- var _a, _b, _c;
88
+ var _a, _b;
83
89
  super.disconnectedCallback();
84
90
  (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
85
91
  (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
86
- (_c = this._mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
87
- this._mutationObserver = null;
88
92
  }
89
93
  };
90
94
  __decorate([
package/build/esm/packages/phoenix/src/components/slider/slider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@shoper/phoenix_design_system",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "1.18.27-13",
5
+ "version": "1.18.27-15",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@splidejs/splide-extension-auto-scroll": "0.5.3"
32
32
  },
33
33
  "devDependencies": {
34
- "@dreamcommerce/utilities": "^1.23.4-1",
34
+ "@dreamcommerce/utilities": "^1.23.4",
35
35
  "@shoper/jest_config": "^0.0.0",
36
36
  "@shoper/tsconfig": "^0.0.0",
37
37
  "@splidejs/splide": "4.0.7",