@shoper/phoenix_design_system 1.18.24-3 → 1.18.24-4
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.
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +10 -10
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +2 -2
- package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +3 -2
- package/build/esm/packages/phoenix/src/components/form/search/search.js +10 -10
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +3 -3
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
40
40
|
this._shouldShowResults = false;
|
|
41
41
|
this._shouldShowMessage = false;
|
|
42
42
|
this._searchHistory = [];
|
|
43
|
-
this.
|
|
43
|
+
this._searchPhrase = '';
|
|
44
44
|
this._historyLimitedContent = [];
|
|
45
45
|
this._historyContext = new behavior_subject.BehaviorSubject({
|
|
46
46
|
showLoadMore: false
|
|
@@ -370,8 +370,8 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
370
370
|
};
|
|
371
371
|
this._handleOpenSearch = () => {
|
|
372
372
|
this.classList.add(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
|
|
373
|
-
const shouldShowMessage = this.
|
|
374
|
-
this._updateSearchView(this.
|
|
373
|
+
const shouldShowMessage = this._searchPhrase !== '';
|
|
374
|
+
this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
|
|
375
375
|
const $searchInput = this.querySelector(`
|
|
376
376
|
${search_constants.SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
|
|
377
377
|
`);
|
|
@@ -406,7 +406,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
406
406
|
...searchData.translations,
|
|
407
407
|
...ariaTranslations
|
|
408
408
|
};
|
|
409
|
-
this.
|
|
409
|
+
this._searchPhrase = searchData.searchPhrase;
|
|
410
410
|
this._historyContext.notify({ showLoadMore: this._searchHistory.length > search_constants.SEARCH_CONFIGURATION.historyContentLimit });
|
|
411
411
|
this._historyLimitedContent = this._searchHistory.slice(0, search_constants.SEARCH_CONFIGURATION.historyContentLimit);
|
|
412
412
|
});
|
|
@@ -415,7 +415,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
415
415
|
catch (_a) {
|
|
416
416
|
console.error('Search context is not provided');
|
|
417
417
|
}
|
|
418
|
-
this.
|
|
418
|
+
this.searchInput = this.querySelector(search_constants.SEARCH_COMPONENT_NAMES.searchInput);
|
|
419
419
|
this._setupInitialSearchPhrase();
|
|
420
420
|
this._setupListeners();
|
|
421
421
|
this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
|
|
@@ -445,7 +445,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
445
445
|
this._searchForm = searchForm;
|
|
446
446
|
if (!((_a = this._inputField) === null || _a === void 0 ? void 0 : _a.value))
|
|
447
447
|
return;
|
|
448
|
-
this.
|
|
448
|
+
this._searchPhrase = this._inputField.value;
|
|
449
449
|
this._updateSearchPhrase(this._inputField.value);
|
|
450
450
|
}
|
|
451
451
|
_updateSearchPhrase(searchPhrase) {
|
|
@@ -551,7 +551,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
551
551
|
}
|
|
552
552
|
_toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
|
|
553
553
|
var _a;
|
|
554
|
-
const $input = (_a = this.
|
|
554
|
+
const $input = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.input;
|
|
555
555
|
if (!$input)
|
|
556
556
|
return;
|
|
557
557
|
if (!shouldShowHistory && !shouldShowResults) {
|
|
@@ -643,7 +643,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
643
643
|
.history="${this._historyLimitedContent}"
|
|
644
644
|
.results="${this._searchResults}"
|
|
645
645
|
.translations="${this._translations}"
|
|
646
|
-
search-phrase="${this.
|
|
646
|
+
search-phrase="${this._searchPhrase}"
|
|
647
647
|
module-instance-id="${this.moduleInstanceId}"
|
|
648
648
|
></h-search-message>`)}
|
|
649
649
|
${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
|
|
@@ -657,7 +657,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
657
657
|
${when.when(this._shouldShowResults, () => lit.html `<h-search-results
|
|
658
658
|
${ref_js.ref(this._searchResultsRef)}
|
|
659
659
|
.results="${this._searchResults}"
|
|
660
|
-
search-phrase="${this.
|
|
660
|
+
search-phrase="${this._searchPhrase}"
|
|
661
661
|
.settings="${this.settings}"
|
|
662
662
|
locale="${this.locale}"
|
|
663
663
|
view="${this.view}"
|
|
@@ -727,7 +727,7 @@ tslib_es6.__decorate([
|
|
|
727
727
|
tslib_es6.__decorate([
|
|
728
728
|
decorators.state(),
|
|
729
729
|
tslib_es6.__metadata("design:type", String)
|
|
730
|
-
], exports.HSearch.prototype, "
|
|
730
|
+
], exports.HSearch.prototype, "_searchPhrase", void 0);
|
|
731
731
|
tslib_es6.__decorate([
|
|
732
732
|
decorators.state(),
|
|
733
733
|
tslib_es6.__metadata("design:type", Array)
|
package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js
CHANGED
|
@@ -34,10 +34,10 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
|
|
|
34
34
|
this._btnController = new btn_controller.BtnController(this, this._dispatchClearEvent);
|
|
35
35
|
}
|
|
36
36
|
connectedCallback() {
|
|
37
|
-
var _a, _b;
|
|
37
|
+
var _a, _b, _c, _d;
|
|
38
38
|
super.connectedCallback();
|
|
39
39
|
this._searchContextSetup();
|
|
40
|
-
this._updateClearButtonVisibility((_b = (_a = this.closest(
|
|
40
|
+
this._updateClearButtonVisibility((_d = (_c = (_b = (_a = this.closest(search_constants.SEARCH_COMPONENT_NAMES.search)) === null || _a === void 0 ? void 0 : _a.searchInput) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '');
|
|
41
41
|
this.addEventListener('click', this._dispatchClearEvent);
|
|
42
42
|
document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyup, this._handleClearButtonOnPhraseEnter);
|
|
43
43
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { TemplateResult } from 'lit';
|
|
2
2
|
import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
3
3
|
import type { TSearchDisplayMode, TSearchSettings } from "./search_types";
|
|
4
|
+
import { HSearchInput } from './subcomponents/input/search_input';
|
|
4
5
|
export declare class HSearch extends PhoenixLightLitElement {
|
|
5
6
|
settings: TSearchSettings;
|
|
6
7
|
view: string;
|
|
@@ -13,7 +14,7 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
13
14
|
private _searchContextConsumer;
|
|
14
15
|
private _searchContext$;
|
|
15
16
|
private _searchContextObserver;
|
|
16
|
-
|
|
17
|
+
searchInput: HSearchInput | null;
|
|
17
18
|
private _inputField;
|
|
18
19
|
private _searchForm;
|
|
19
20
|
private _togglerElement;
|
|
@@ -29,7 +30,7 @@ export declare class HSearch extends PhoenixLightLitElement {
|
|
|
29
30
|
private _shouldShowMessage;
|
|
30
31
|
private _searchResults;
|
|
31
32
|
private _searchHistory;
|
|
32
|
-
|
|
33
|
+
private _searchPhrase;
|
|
33
34
|
private _historyLimitedContent;
|
|
34
35
|
private _historyContext;
|
|
35
36
|
private _activeItemId;
|
|
@@ -36,7 +36,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
36
36
|
this._shouldShowResults = false;
|
|
37
37
|
this._shouldShowMessage = false;
|
|
38
38
|
this._searchHistory = [];
|
|
39
|
-
this.
|
|
39
|
+
this._searchPhrase = '';
|
|
40
40
|
this._historyLimitedContent = [];
|
|
41
41
|
this._historyContext = new BehaviorSubject({
|
|
42
42
|
showLoadMore: false
|
|
@@ -366,8 +366,8 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
366
366
|
};
|
|
367
367
|
this._handleOpenSearch = () => {
|
|
368
368
|
this.classList.add(SEARCH_CLASS_NAMES.mobileOpened);
|
|
369
|
-
const shouldShowMessage = this.
|
|
370
|
-
this._updateSearchView(this.
|
|
369
|
+
const shouldShowMessage = this._searchPhrase !== '';
|
|
370
|
+
this._updateSearchView(this._searchPhrase, shouldShowMessage, false);
|
|
371
371
|
const $searchInput = this.querySelector(`
|
|
372
372
|
${SEARCH_COMPONENT_NAMES.searchInput} input[type="search"]
|
|
373
373
|
`);
|
|
@@ -402,7 +402,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
402
402
|
...searchData.translations,
|
|
403
403
|
...ariaTranslations
|
|
404
404
|
};
|
|
405
|
-
this.
|
|
405
|
+
this._searchPhrase = searchData.searchPhrase;
|
|
406
406
|
this._historyContext.notify({ showLoadMore: this._searchHistory.length > SEARCH_CONFIGURATION.historyContentLimit });
|
|
407
407
|
this._historyLimitedContent = this._searchHistory.slice(0, SEARCH_CONFIGURATION.historyContentLimit);
|
|
408
408
|
});
|
|
@@ -411,7 +411,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
411
411
|
catch (_a) {
|
|
412
412
|
console.error('Search context is not provided');
|
|
413
413
|
}
|
|
414
|
-
this.
|
|
414
|
+
this.searchInput = this.querySelector(SEARCH_COMPONENT_NAMES.searchInput);
|
|
415
415
|
this._setupInitialSearchPhrase();
|
|
416
416
|
this._setupListeners();
|
|
417
417
|
this.isSearchIconFixEnabled ? this._setupToggler() : this._setupAriaAttributes();
|
|
@@ -441,7 +441,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
441
441
|
this._searchForm = searchForm;
|
|
442
442
|
if (!((_a = this._inputField) === null || _a === void 0 ? void 0 : _a.value))
|
|
443
443
|
return;
|
|
444
|
-
this.
|
|
444
|
+
this._searchPhrase = this._inputField.value;
|
|
445
445
|
this._updateSearchPhrase(this._inputField.value);
|
|
446
446
|
}
|
|
447
447
|
_updateSearchPhrase(searchPhrase) {
|
|
@@ -547,7 +547,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
547
547
|
}
|
|
548
548
|
_toggleSearchInputAttributes(shouldShowHistory, shouldShowResults) {
|
|
549
549
|
var _a;
|
|
550
|
-
const $input = (_a = this.
|
|
550
|
+
const $input = (_a = this.searchInput) === null || _a === void 0 ? void 0 : _a.input;
|
|
551
551
|
if (!$input)
|
|
552
552
|
return;
|
|
553
553
|
if (!shouldShowHistory && !shouldShowResults) {
|
|
@@ -639,7 +639,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
639
639
|
.history="${this._historyLimitedContent}"
|
|
640
640
|
.results="${this._searchResults}"
|
|
641
641
|
.translations="${this._translations}"
|
|
642
|
-
search-phrase="${this.
|
|
642
|
+
search-phrase="${this._searchPhrase}"
|
|
643
643
|
module-instance-id="${this.moduleInstanceId}"
|
|
644
644
|
></h-search-message>`)}
|
|
645
645
|
${n(this._shouldShowHistory, () => html `<h-search-history
|
|
@@ -653,7 +653,7 @@ let HSearch = class HSearch extends PhoenixLightLitElement {
|
|
|
653
653
|
${n(this._shouldShowResults, () => html `<h-search-results
|
|
654
654
|
${ref(this._searchResultsRef)}
|
|
655
655
|
.results="${this._searchResults}"
|
|
656
|
-
search-phrase="${this.
|
|
656
|
+
search-phrase="${this._searchPhrase}"
|
|
657
657
|
.settings="${this.settings}"
|
|
658
658
|
locale="${this.locale}"
|
|
659
659
|
view="${this.view}"
|
|
@@ -723,7 +723,7 @@ __decorate([
|
|
|
723
723
|
__decorate([
|
|
724
724
|
state(),
|
|
725
725
|
__metadata("design:type", String)
|
|
726
|
-
], HSearch.prototype, "
|
|
726
|
+
], HSearch.prototype, "_searchPhrase", void 0);
|
|
727
727
|
__decorate([
|
|
728
728
|
state(),
|
|
729
729
|
__metadata("design:type", Array)
|
package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js
CHANGED
|
@@ -7,7 +7,7 @@ import { BtnController } from '../../../../../controllers/btn_controller/btn_con
|
|
|
7
7
|
import { Observer } from '../../../../../core/classes/observer/observer.js';
|
|
8
8
|
import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
|
|
9
9
|
import { when as n } from '../../../../../../../../external/lit-html/directives/when.js';
|
|
10
|
-
import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_CLASS_NAMES, SEARCH_SLOT_NAMES
|
|
10
|
+
import { SEARCH_CUSTOM_EVENT_NAMES, SEARCH_COMPONENT_NAMES, SEARCH_CLASS_NAMES, SEARCH_SLOT_NAMES } from '../../search_constants.js';
|
|
11
11
|
|
|
12
12
|
let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
|
|
13
13
|
constructor() {
|
|
@@ -30,10 +30,10 @@ let HSearchClear = class HSearchClear extends PhoenixLightLitElement {
|
|
|
30
30
|
this._btnController = new BtnController(this, this._dispatchClearEvent);
|
|
31
31
|
}
|
|
32
32
|
connectedCallback() {
|
|
33
|
-
var _a, _b;
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
34
|
super.connectedCallback();
|
|
35
35
|
this._searchContextSetup();
|
|
36
|
-
this._updateClearButtonVisibility((_b = (_a = this.closest(
|
|
36
|
+
this._updateClearButtonVisibility((_d = (_c = (_b = (_a = this.closest(SEARCH_COMPONENT_NAMES.search)) === null || _a === void 0 ? void 0 : _a.searchInput) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '');
|
|
37
37
|
this.addEventListener('click', this._dispatchClearEvent);
|
|
38
38
|
document.addEventListener(SEARCH_CUSTOM_EVENT_NAMES.keyup, this._handleClearButtonOnPhraseEnter);
|
|
39
39
|
}
|