@shoper/phoenix_design_system 1.11.10-4 → 1.11.10-6

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 (10) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/search/search.js +87 -40
  2. package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +1 -5
  4. package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +5 -1
  6. package/build/esm/packages/phoenix/src/components/form/search/search.js +87 -40
  7. package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +1 -5
  9. package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
  10. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -36,8 +36,9 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
36
36
  this._historyContext = new behavior_subject.BehaviorSubject({
37
37
  showLoadMore: false
38
38
  });
39
- this._activeItemId = `${this.id}-1`;
39
+ this._activeItemId = `${this._id}-1`;
40
40
  this._translations = {};
41
+ this._containerRole = 'grid';
41
42
  this._bindKeys = (ev) => {
42
43
  var _a;
43
44
  switch (ev.key) {
@@ -59,7 +60,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
59
60
  break;
60
61
  case 'Enter':
61
62
  ev.preventDefault();
62
- if (this._activeItemId === `${this.id}-1` || !this._shouldShowResults)
63
+ if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
63
64
  return;
64
65
  this._handleChooseSearchItem();
65
66
  break;
@@ -69,6 +70,10 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
69
70
  this._resetSearchView();
70
71
  break;
71
72
  case 'Tab':
73
+ if (ev.shiftKey) {
74
+ this._focusOnPreviousElementBeforeSearchInput(ev);
75
+ return;
76
+ }
72
77
  const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
73
78
  if (!isFocusedOnSearchInput) {
74
79
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
@@ -76,9 +81,26 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
76
81
  this._resetSearchView();
77
82
  document.removeEventListener('keyup', this._bindKeys);
78
83
  }
84
+ this._focusOnNextElementAfterSearchInput(ev);
79
85
  break;
80
86
  }
81
87
  };
88
+ this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
89
+ ev.preventDefault();
90
+ const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
91
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
92
+ this._resetSearchView();
93
+ document.removeEventListener('keyup', this._bindKeys);
94
+ utilities.UiDomUtils.getPreviousFocusableElement(this).focus();
95
+ };
96
+ this._focusOnNextElementAfterSearchInput = async (ev) => {
97
+ ev.preventDefault();
98
+ const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
99
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
100
+ this._resetSearchView();
101
+ document.removeEventListener('keyup', this._bindKeys);
102
+ utilities.UiDomUtils.getNextFocusableElement(this).focus();
103
+ };
82
104
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
83
105
  var _a;
84
106
  const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
@@ -117,7 +139,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
117
139
  const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
118
140
  const $nextSearchItemElement = $searchItems[indexOfNextElement];
119
141
  $nextSearchItemElement.focus();
120
- this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
142
+ this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
121
143
  };
122
144
  this._handleBackwardListFocus = () => {
123
145
  var _a, _b;
@@ -149,7 +171,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
149
171
  const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
150
172
  const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
151
173
  $previousSearchItemElement.focus();
152
- this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
174
+ this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
153
175
  };
154
176
  this._setActiveItemId = (newActiveItemId) => {
155
177
  this._activeItemId = newActiveItemId;
@@ -251,7 +273,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
251
273
  this._updateSearchView('', false);
252
274
  });
253
275
  this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
254
- if (this._activeItemId !== `${this.id}-1`)
276
+ if (this._activeItemId !== `${this._id}-1`)
255
277
  return;
256
278
  if (this._inputField.value === '') {
257
279
  this._updateSearchView(this._inputField.value, true);
@@ -278,7 +300,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
278
300
  }
279
301
  _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
280
302
  this._shouldShowMessage = shouldShowMessage;
281
- this._setActiveItemId(`${this.id}-1`);
303
+ this._setActiveItemId(`${this._id}-1`);
282
304
  this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
283
305
  this._displaySuggester(searchPhrase);
284
306
  if (!shouldUpdateSearchPhrase)
@@ -317,22 +339,36 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
317
339
  _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
318
340
  this._shouldShowHistory = shouldShowHistory;
319
341
  this._shouldShowResults = shouldShowResults;
320
- this._toggleSearchInputAria(shouldShowHistory, shouldShowResults);
342
+ this._toggleSearchInputAttributes(shouldShowHistory, shouldShowResults);
343
+ this._toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults);
321
344
  }
322
- _toggleSearchInputAria(shouldShowHistory, shouldShowResults) {
345
+ _toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
323
346
  var _a;
324
347
  const $input = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.input;
325
348
  if (!$input)
326
349
  return;
327
350
  if (!shouldShowHistory && !shouldShowResults) {
328
351
  $input.removeAttribute('aria-label');
352
+ $input.setAttribute('aria-activedescendant', '');
329
353
  return;
330
354
  }
331
355
  $input.setAttribute('aria-expanded', 'true');
332
- if (shouldShowHistory)
356
+ if (shouldShowHistory) {
333
357
  $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
334
- if (shouldShowResults)
358
+ $input.setAttribute('haspopup', 'grid');
359
+ }
360
+ if (shouldShowResults) {
335
361
  $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
362
+ this._inputField.removeAttribute('haspopup');
363
+ }
364
+ }
365
+ _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
366
+ if (shouldShowHistory) {
367
+ this._containerRole = 'grid';
368
+ }
369
+ if (shouldShowResults) {
370
+ this._containerRole = 'listbox';
371
+ }
336
372
  }
337
373
  _handleChooseSearchItem() {
338
374
  const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
@@ -343,7 +379,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
343
379
  }
344
380
  _resetSearchView() {
345
381
  this._shouldShowMessage = false;
346
- this._setActiveItemId(`${this.id}-1`);
382
+ this._setActiveItemId(`${this._id}-1`);
347
383
  const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
348
384
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
349
385
  this._hideHistorySuggestionsAndResults();
@@ -383,39 +419,46 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
383
419
  </div>
384
420
 
385
421
  ${when.when(this._isSuggesterLayerVisible(), () => lit.html `
386
- <div
387
- class="${search_constants.SEARCH_CLASS_NAMES.container}"
388
- id="${this._searchContentContainerId}"
389
- ${when.when(this._shouldShowHistory, () => `role="grid"`, () => `role="listbox"`)}
390
- >
391
- ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
392
- .history="${this._historyLimitedContent}"
393
- .results="${this._searchResults}"
394
- .translations="${this._translations}"
395
- search-phrase="${this._searchPhrase}"
396
- module-instance-id="${this.moduleInstanceId}"
397
- ></h-search-message>`)}
398
- ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
399
- ${ref_js.ref(this._searchHistoryRef)}
422
+ <div
423
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
424
+ id="${this._searchContentContainerId}"
425
+ role="${this._containerRole}"
426
+ >
427
+ ${when.when(this._shouldShowMessage, () => lit.html `<h-search-message
400
428
  .history="${this._historyLimitedContent}"
401
- .translations="${this._translations}"
402
- active-item-id="${this._activeItemId}"
403
- search-id="${this.id}"
404
- module-instance-id="${this.moduleInstanceId}"
405
- ></h-search-history>`)}
406
- ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
407
- ${ref_js.ref(this._searchResultsRef)}
408
429
  .results="${this._searchResults}"
409
- search-phrase="${this._searchPhrase}"
410
- .settings="${this.settings}"
411
- locale="${this.locale}"
412
- view="${this.view}"
413
430
  .translations="${this._translations}"
414
- active-item-id="${this._activeItemId}"
415
- search-id="${this.id}"
431
+ search-phrase="${this._searchPhrase}"
416
432
  module-instance-id="${this.moduleInstanceId}"
417
- ></h-search-results>`)}
418
- </div>`)}
433
+ ></h-search-message>`)}
434
+ ${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
435
+ ${ref_js.ref(this._searchHistoryRef)}
436
+ .history="${this._historyLimitedContent}"
437
+ .translations="${this._translations}"
438
+ active-item-id="${this._activeItemId}"
439
+ search-id="${this._id}"
440
+ module-instance-id="${this.moduleInstanceId}"
441
+ ></h-search-history>`)}
442
+ ${when.when(this._shouldShowResults, () => lit.html `<h-search-results
443
+ ${ref_js.ref(this._searchResultsRef)}
444
+ .results="${this._searchResults}"
445
+ search-phrase="${this._searchPhrase}"
446
+ .settings="${this.settings}"
447
+ locale="${this.locale}"
448
+ view="${this.view}"
449
+ .translations="${this._translations}"
450
+ active-item-id="${this._activeItemId}"
451
+ search-id="${this._id}"
452
+ module-instance-id="${this.moduleInstanceId}"
453
+ ></h-search-results>`)}
454
+ </div>
455
+ `, () => lit.html `
456
+ <div
457
+ class="${search_constants.SEARCH_CLASS_NAMES.container}"
458
+ id="${this._searchContentContainerId}"
459
+ role="${this._containerRole}"
460
+ hidden
461
+ ></div>`)}
419
462
  `;
420
463
  }
421
464
  };
@@ -475,6 +518,10 @@ tslib_es6.__decorate([
475
518
  decorators.state(),
476
519
  tslib_es6.__metadata("design:type", Object)
477
520
  ], exports.HSearch.prototype, "_translations", void 0);
521
+ tslib_es6.__decorate([
522
+ decorators.state(),
523
+ tslib_es6.__metadata("design:type", String)
524
+ ], exports.HSearch.prototype, "_containerRole", void 0);
478
525
  exports.HSearch = tslib_es6.__decorate([
479
526
  phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.search)
480
527
  ], exports.HSearch);
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,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,qEAA6E;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -15,7 +15,7 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
15
15
  this._setupAttributes = () => {
16
16
  var _a, _b, _c, _d, _e, _f;
17
17
  (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'combobox');
18
- (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'list');
18
+ (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'none');
19
19
  (_c = this.input) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-haspopup', 'grid');
20
20
  const $searchContentContainer = (_d = this.closest('h-search')) === null || _d === void 0 ? void 0 : _d.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.container}`);
21
21
  (_e = this.input) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-controls', ($searchContentContainer === null || $searchContentContainer === void 0 ? void 0 : $searchContentContainer.id) || '');
@@ -64,7 +64,6 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
64
64
  });
65
65
  });
66
66
  this.input.addEventListener('keyup', (ev) => {
67
- var _a;
68
67
  if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
69
68
  return;
70
69
  if (ev.key !== 'Enter') {
@@ -77,7 +76,6 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
77
76
  }
78
77
  if (this._isSearchPhraseCleared) {
79
78
  this._isSearchPhraseCleared = false;
80
- (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-haspopup');
81
79
  return;
82
80
  }
83
81
  this.emitCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, {
@@ -97,11 +95,9 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
97
95
  });
98
96
  });
99
97
  document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, (ev) => {
100
- var _a;
101
98
  if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
102
99
  return;
103
100
  this._isSearchPhraseCleared = true;
104
- (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'grid');
105
101
  this.input.value = '';
106
102
  this.input.focus();
107
103
  });
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -26,6 +26,7 @@ export declare class HSearch extends PhoenixLightLitElement {
26
26
  private _historyContext;
27
27
  private _activeItemId;
28
28
  private _translations;
29
+ private _containerRole;
29
30
  connectedCallback(): Promise<void>;
30
31
  disconnectedCallback(): void;
31
32
  private _setupContext;
@@ -39,8 +40,11 @@ export declare class HSearch extends PhoenixLightLitElement {
39
40
  private _hideHistorySuggestionsAndResults;
40
41
  private _displayResults;
41
42
  private _handleToggleHistoryAndResults;
42
- private _toggleSearchInputAria;
43
+ private _toggleSearchInputAttributes;
44
+ private _toggleSearchContainerAttributes;
43
45
  private _bindKeys;
46
+ private _focusOnPreviousElementBeforeSearchInput;
47
+ private _focusOnNextElementAfterSearchInput;
44
48
  private _preventScrollingOnSearchContentBrowsing;
45
49
  private _handleForwardListFocus;
46
50
  private _handleForwardGridFocus;
package/build/esm/packages/phoenix/src/components/form/search/search.js CHANGED
@@ -32,8 +32,9 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
32
32
  this._historyContext = new BehaviorSubject({
33
33
  showLoadMore: false
34
34
  });
35
- this._activeItemId = `${this.id}-1`;
35
+ this._activeItemId = `${this._id}-1`;
36
36
  this._translations = {};
37
+ this._containerRole = 'grid';
37
38
  this._bindKeys = (ev) => {
38
39
  var _a;
39
40
  switch (ev.key) {
@@ -55,7 +56,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
55
56
  break;
56
57
  case 'Enter':
57
58
  ev.preventDefault();
58
- if (this._activeItemId === `${this.id}-1` || !this._shouldShowResults)
59
+ if (this._activeItemId === `${this._id}-1` || !this._shouldShowResults)
59
60
  return;
60
61
  this._handleChooseSearchItem();
61
62
  break;
@@ -65,6 +66,10 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
65
66
  this._resetSearchView();
66
67
  break;
67
68
  case 'Tab':
69
+ if (ev.shiftKey) {
70
+ this._focusOnPreviousElementBeforeSearchInput(ev);
71
+ return;
72
+ }
68
73
  const isFocusedOnSearchInput = !!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.matches('input[type="search"]'));
69
74
  if (!isFocusedOnSearchInput) {
70
75
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
@@ -72,9 +77,26 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
72
77
  this._resetSearchView();
73
78
  document.removeEventListener('keyup', this._bindKeys);
74
79
  }
80
+ this._focusOnNextElementAfterSearchInput(ev);
75
81
  break;
76
82
  }
77
83
  };
84
+ this._focusOnPreviousElementBeforeSearchInput = async (ev) => {
85
+ ev.preventDefault();
86
+ const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
87
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
88
+ this._resetSearchView();
89
+ document.removeEventListener('keyup', this._bindKeys);
90
+ UiDomUtils.getPreviousFocusableElement(this).focus();
91
+ };
92
+ this._focusOnNextElementAfterSearchInput = async (ev) => {
93
+ ev.preventDefault();
94
+ const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
95
+ searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
96
+ this._resetSearchView();
97
+ document.removeEventListener('keyup', this._bindKeys);
98
+ UiDomUtils.getNextFocusableElement(this).focus();
99
+ };
78
100
  this._preventScrollingOnSearchContentBrowsing = (ev) => {
79
101
  var _a;
80
102
  const hasArrowBeenPressed = ev.key === "ArrowUp" || ev.key === "ArrowDown";
@@ -113,7 +135,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
113
135
  const indexOfNextElement = indexOfCurrentElement === $searchItems.length - 1 ? 0 : indexOfCurrentElement + 1;
114
136
  const $nextSearchItemElement = $searchItems[indexOfNextElement];
115
137
  $nextSearchItemElement.focus();
116
- this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
138
+ this._setActiveItemId((_a = $nextSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
117
139
  };
118
140
  this._handleBackwardListFocus = () => {
119
141
  var _a, _b;
@@ -145,7 +167,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
145
167
  const indexOfPreviousElement = indexOfCurrentElement === 0 ? $searchItems.length - 1 : indexOfCurrentElement - 1;
146
168
  const $previousSearchItemElement = $searchItems[indexOfPreviousElement];
147
169
  $previousSearchItemElement.focus();
148
- this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this.id}-1`);
170
+ this._setActiveItemId((_a = $previousSearchItemElement.getAttribute('data-search-item-id')) !== null && _a !== void 0 ? _a : `${this._id}-1`);
149
171
  };
150
172
  this._setActiveItemId = (newActiveItemId) => {
151
173
  this._activeItemId = newActiveItemId;
@@ -247,7 +269,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
247
269
  this._updateSearchView('', false);
248
270
  });
249
271
  this.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
250
- if (this._activeItemId !== `${this.id}-1`)
272
+ if (this._activeItemId !== `${this._id}-1`)
251
273
  return;
252
274
  if (this._inputField.value === '') {
253
275
  this._updateSearchView(this._inputField.value, true);
@@ -274,7 +296,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
274
296
  }
275
297
  _updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
276
298
  this._shouldShowMessage = shouldShowMessage;
277
- this._setActiveItemId(`${this.id}-1`);
299
+ this._setActiveItemId(`${this._id}-1`);
278
300
  this._inputField.setAttribute('aria-activedescendant', this._activeItemId);
279
301
  this._displaySuggester(searchPhrase);
280
302
  if (!shouldUpdateSearchPhrase)
@@ -313,22 +335,36 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
313
335
  _handleToggleHistoryAndResults({ shouldShowHistory, shouldShowResults }) {
314
336
  this._shouldShowHistory = shouldShowHistory;
315
337
  this._shouldShowResults = shouldShowResults;
316
- this._toggleSearchInputAria(shouldShowHistory, shouldShowResults);
338
+ this._toggleSearchInputAttributes(shouldShowHistory, shouldShowResults);
339
+ this._toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults);
317
340
  }
318
- _toggleSearchInputAria(shouldShowHistory, shouldShowResults) {
341
+ _toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
319
342
  var _a;
320
343
  const $input = (_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.input;
321
344
  if (!$input)
322
345
  return;
323
346
  if (!shouldShowHistory && !shouldShowResults) {
324
347
  $input.removeAttribute('aria-label');
348
+ $input.setAttribute('aria-activedescendant', '');
325
349
  return;
326
350
  }
327
351
  $input.setAttribute('aria-expanded', 'true');
328
- if (shouldShowHistory)
352
+ if (shouldShowHistory) {
329
353
  $input.setAttribute('aria-label', this.settings.historyGuideAriaLabel);
330
- if (shouldShowResults)
354
+ $input.setAttribute('haspopup', 'grid');
355
+ }
356
+ if (shouldShowResults) {
331
357
  $input.setAttribute('aria-label', this.settings.suggesterGuideAriaLabel);
358
+ this._inputField.removeAttribute('haspopup');
359
+ }
360
+ }
361
+ _toggleSearchContainerAttributes(shouldShowHistory, shouldShowResults) {
362
+ if (shouldShowHistory) {
363
+ this._containerRole = 'grid';
364
+ }
365
+ if (shouldShowResults) {
366
+ this._containerRole = 'listbox';
367
+ }
332
368
  }
333
369
  _handleChooseSearchItem() {
334
370
  const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
@@ -339,7 +375,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
339
375
  }
340
376
  _resetSearchView() {
341
377
  this._shouldShowMessage = false;
342
- this._setActiveItemId(`${this.id}-1`);
378
+ this._setActiveItemId(`${this._id}-1`);
343
379
  const searchBar = this.querySelector(`.${SEARCH_CLASS_NAMES.searchBar}`);
344
380
  searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(SEARCH_CLASS_NAMES.outline);
345
381
  this._hideHistorySuggestionsAndResults();
@@ -379,39 +415,46 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
379
415
  </div>
380
416
 
381
417
  ${n(this._isSuggesterLayerVisible(), () => html `
382
- <div
383
- class="${SEARCH_CLASS_NAMES.container}"
384
- id="${this._searchContentContainerId}"
385
- ${n(this._shouldShowHistory, () => `role="grid"`, () => `role="listbox"`)}
386
- >
387
- ${n(this._shouldShowMessage, () => html `<h-search-message
388
- .history="${this._historyLimitedContent}"
389
- .results="${this._searchResults}"
390
- .translations="${this._translations}"
391
- search-phrase="${this._searchPhrase}"
392
- module-instance-id="${this.moduleInstanceId}"
393
- ></h-search-message>`)}
394
- ${n(this._shouldShowHistory, () => html `<h-search-history
395
- ${ref(this._searchHistoryRef)}
418
+ <div
419
+ class="${SEARCH_CLASS_NAMES.container}"
420
+ id="${this._searchContentContainerId}"
421
+ role="${this._containerRole}"
422
+ >
423
+ ${n(this._shouldShowMessage, () => html `<h-search-message
396
424
  .history="${this._historyLimitedContent}"
397
- .translations="${this._translations}"
398
- active-item-id="${this._activeItemId}"
399
- search-id="${this.id}"
400
- module-instance-id="${this.moduleInstanceId}"
401
- ></h-search-history>`)}
402
- ${n(this._shouldShowResults, () => html `<h-search-results
403
- ${ref(this._searchResultsRef)}
404
425
  .results="${this._searchResults}"
405
- search-phrase="${this._searchPhrase}"
406
- .settings="${this.settings}"
407
- locale="${this.locale}"
408
- view="${this.view}"
409
426
  .translations="${this._translations}"
410
- active-item-id="${this._activeItemId}"
411
- search-id="${this.id}"
427
+ search-phrase="${this._searchPhrase}"
412
428
  module-instance-id="${this.moduleInstanceId}"
413
- ></h-search-results>`)}
414
- </div>`)}
429
+ ></h-search-message>`)}
430
+ ${n(this._shouldShowHistory, () => html `<h-search-history
431
+ ${ref(this._searchHistoryRef)}
432
+ .history="${this._historyLimitedContent}"
433
+ .translations="${this._translations}"
434
+ active-item-id="${this._activeItemId}"
435
+ search-id="${this._id}"
436
+ module-instance-id="${this.moduleInstanceId}"
437
+ ></h-search-history>`)}
438
+ ${n(this._shouldShowResults, () => html `<h-search-results
439
+ ${ref(this._searchResultsRef)}
440
+ .results="${this._searchResults}"
441
+ search-phrase="${this._searchPhrase}"
442
+ .settings="${this.settings}"
443
+ locale="${this.locale}"
444
+ view="${this.view}"
445
+ .translations="${this._translations}"
446
+ active-item-id="${this._activeItemId}"
447
+ search-id="${this._id}"
448
+ module-instance-id="${this.moduleInstanceId}"
449
+ ></h-search-results>`)}
450
+ </div>
451
+ `, () => html `
452
+ <div
453
+ class="${SEARCH_CLASS_NAMES.container}"
454
+ id="${this._searchContentContainerId}"
455
+ role="${this._containerRole}"
456
+ hidden
457
+ ></div>`)}
415
458
  `;
416
459
  }
417
460
  };
@@ -471,6 +514,10 @@ __decorate([
471
514
  state(),
472
515
  __metadata("design:type", Object)
473
516
  ], HSearch.prototype, "_translations", void 0);
517
+ __decorate([
518
+ state(),
519
+ __metadata("design:type", String)
520
+ ], HSearch.prototype, "_containerRole", void 0);
474
521
  HSearch = __decorate([
475
522
  phoenixCustomElement(SEARCH_COMPONENT_NAMES.search)
476
523
  ], HSearch);
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,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,0BAA0B,qEAA6E;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js CHANGED
@@ -11,7 +11,7 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
11
11
  this._setupAttributes = () => {
12
12
  var _a, _b, _c, _d, _e, _f;
13
13
  (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'combobox');
14
- (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'list');
14
+ (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-autocomplete', 'none');
15
15
  (_c = this.input) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-haspopup', 'grid');
16
16
  const $searchContentContainer = (_d = this.closest('h-search')) === null || _d === void 0 ? void 0 : _d.querySelector(`.${SEARCH_CLASS_NAMES.container}`);
17
17
  (_e = this.input) === null || _e === void 0 ? void 0 : _e.setAttribute('aria-controls', ($searchContentContainer === null || $searchContentContainer === void 0 ? void 0 : $searchContentContainer.id) || '');
@@ -60,7 +60,6 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
60
60
  });
61
61
  });
62
62
  this.input.addEventListener('keyup', (ev) => {
63
- var _a;
64
63
  if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
65
64
  return;
66
65
  if (ev.key !== 'Enter') {
@@ -73,7 +72,6 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
73
72
  }
74
73
  if (this._isSearchPhraseCleared) {
75
74
  this._isSearchPhraseCleared = false;
76
- (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-haspopup');
77
75
  return;
78
76
  }
79
77
  this.emitCustomEvent(SEARCH_CUSTOM_EVENT_NAMES.submit, {
@@ -93,11 +91,9 @@ let HSearchInput = class HSearchInput extends PhoenixLightLitElement {
93
91
  });
94
92
  });
95
93
  document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.clear, (ev) => {
96
- var _a;
97
94
  if (!ev.detail || ev.detail.moduleInstanceId !== this.moduleInstanceId)
98
95
  return;
99
96
  this._isSearchPhraseCleared = true;
100
- (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'grid');
101
97
  this.input.value = '';
102
98
  this.input.focus();
103
99
  });
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.11.10-4",
5
+ "version": "1.11.10-6",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",