@shoper/phoenix_design_system 1.6.9 → 1.6.10
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/checkbox/checkbox.js +0 -13
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_content.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
- package/build/cjs/packages/phoenix/src/components/form/input/input.js +2 -11
- package/build/cjs/packages/phoenix/src/components/form/input/input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/input/input_control.js +3 -3
- package/build/cjs/packages/phoenix/src/components/form/radio/radio.js +0 -13
- package/build/cjs/packages/phoenix/src/components/form/radio/radio.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search.js +105 -17
- package/build/cjs/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js +15 -2
- package/build/cjs/packages/phoenix/src/components/form/search/search_constants.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +12 -2
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js +16 -4
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +26 -15
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js +3 -2
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +17 -2
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +33 -10
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +31 -6
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +32 -13
- package/build/cjs/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
- package/build/cjs/packages/phoenix/src/controllers/input_mask_controller/input_mask_controller.js +1 -1
- package/build/cjs/packages/phoenix/src/index.js +6 -5
- package/build/cjs/packages/phoenix/src/index.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js +0 -13
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_content.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/input/input.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/form/input/input.js +2 -11
- package/build/esm/packages/phoenix/src/components/form/input/input.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/input/input_control.js +1 -1
- package/build/esm/packages/phoenix/src/components/form/radio/radio.d.ts +0 -2
- package/build/esm/packages/phoenix/src/components/form/radio/radio.js +0 -13
- package/build/esm/packages/phoenix/src/components/form/radio/radio.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search.d.ts +9 -2
- package/build/esm/packages/phoenix/src/components/form/search/search.js +106 -18
- package/build/esm/packages/phoenix/src/components/form/search/search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search_constants.d.ts +11 -0
- package/build/esm/packages/phoenix/src/components/form/search/search_constants.js +15 -3
- package/build/esm/packages/phoenix/src/components/form/search/search_constants.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/search_types.d.ts +4 -0
- package/build/esm/packages/phoenix/src/components/form/search/search_types.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/search/search_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/storefront_search_mock.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/search/storefront_search_mock.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js +13 -3
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/buttons/search_clear.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.d.ts +1 -0
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js +17 -5
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/history/search_history.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.d.ts +2 -4
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js +27 -16
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/input/search_input.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js +6 -5
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/message/search_message.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js +17 -2
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_producer_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.d.ts +2 -0
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js +33 -10
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_product_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.d.ts +4 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js +33 -8
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_results.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.d.ts +3 -1
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js +32 -13
- package/build/esm/packages/phoenix/src/components/form/search/subcomponents/results/search_suggestion_content.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/input_mask_controller/input_mask_controller.js +1 -1
- package/build/esm/packages/phoenix/src/global_types.d.ts +1 -0
- package/build/esm/packages/phoenix/src/index.js +2 -2
- package/package.json +1 -1
- package/build/esm/packages/phoenix/src/components/search/search.d.ts +0 -15
- package/build/esm/packages/phoenix/src/components/search/search.js +0 -94
- package/build/esm/packages/phoenix/src/components/search/search.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/search/search_history.d.ts +0 -5
- package/build/esm/packages/phoenix/src/components/search/search_history.js +0 -23
- package/build/esm/packages/phoenix/src/components/search/search_history.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/search/search_input.d.ts +0 -7
- package/build/esm/packages/phoenix/src/components/search/search_input.js +0 -39
- package/build/esm/packages/phoenix/src/components/search/search_input.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/search/search_results.d.ts +0 -5
- package/build/esm/packages/phoenix/src/components/search/search_results.js +0 -24
- package/build/esm/packages/phoenix/src/components/search/search_results.js.map +0 -1
|
@@ -22,19 +22,6 @@ exports.HCheckbox = class HCheckbox extends phoenix_light_lit_element.PhoenixLig
|
|
|
22
22
|
connectedCallback() {
|
|
23
23
|
super.connectedCallback();
|
|
24
24
|
this.classList.add(checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkbox);
|
|
25
|
-
this._updateCssClassesBasedOnProps();
|
|
26
|
-
}
|
|
27
|
-
updated(changedProperties) {
|
|
28
|
-
super.updated(changedProperties);
|
|
29
|
-
this._updateCssClassesBasedOnProps();
|
|
30
|
-
}
|
|
31
|
-
_updateCssClassesBasedOnProps() {
|
|
32
|
-
const classes = [
|
|
33
|
-
checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxDisabled,
|
|
34
|
-
checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxError,
|
|
35
|
-
checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxReadonly
|
|
36
|
-
];
|
|
37
|
-
this.classList.remove(...classes);
|
|
38
25
|
const cssClasses = index['default']({
|
|
39
26
|
[checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxDisabled]: this.disabled,
|
|
40
27
|
[checkbox_constants.CHECKBOX_CONTROL_CSS_CLASSES.checkboxError]: this.error,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -8,8 +8,8 @@ var decorators = require('lit/decorators');
|
|
|
8
8
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
10
10
|
var ifDefined_js = require('lit-html/directives/if-defined.js');
|
|
11
|
-
var checkbox_constants = require('./checkbox_constants.js');
|
|
12
11
|
var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
|
|
12
|
+
var checkbox_constants = require('./checkbox_constants.js');
|
|
13
13
|
var label_constants = require('../label/label_constants.js');
|
|
14
14
|
|
|
15
15
|
exports.HCheckboxContent = class HCheckboxContent extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
@@ -10,8 +10,8 @@ var index = require('../../../../external/classnames/index.js');
|
|
|
10
10
|
var litHtml = require('lit-html');
|
|
11
11
|
var ref_js = require('lit-html/directives/ref.js');
|
|
12
12
|
var ifDefined_js = require('lit-html/directives/if-defined.js');
|
|
13
|
-
var checkbox_constants = require('./checkbox_constants.js');
|
|
14
13
|
var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
|
|
14
|
+
var checkbox_constants = require('./checkbox_constants.js');
|
|
15
15
|
|
|
16
16
|
exports.HCheckboxControl = class HCheckboxControl extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
17
17
|
constructor() {
|
|
@@ -21,26 +21,17 @@ exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitE
|
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
23
|
connectedCallback() {
|
|
24
|
+
var _a;
|
|
24
25
|
super.connectedCallback();
|
|
25
26
|
if (this.type !== input_constants.INPUT_CONTROL_TYPES.hidden) {
|
|
26
27
|
this.classList.add(input_constants.INPUT_CONTROL_CSS_CLASSES.input);
|
|
27
28
|
}
|
|
28
|
-
this._updateCssClassesBasedOnProps();
|
|
29
|
-
}
|
|
30
|
-
updated(changedProperties) {
|
|
31
|
-
super.updated(changedProperties);
|
|
32
|
-
this._updateCssClassesBasedOnProps();
|
|
33
|
-
}
|
|
34
|
-
_updateCssClassesBasedOnProps() {
|
|
35
|
-
var _a;
|
|
36
|
-
const classes = [input_constants.INPUT_CONTROL_CSS_CLASSES.inputDisabled, input_constants.INPUT_CONTROL_CSS_CLASSES.inputError];
|
|
37
|
-
this.classList.remove(...classes);
|
|
38
29
|
const cssClasses = index['default']({
|
|
39
30
|
[input_constants.INPUT_CONTROL_CSS_CLASSES.inputDisabled]: this.disabled,
|
|
40
31
|
[input_constants.INPUT_CONTROL_CSS_CLASSES.inputError]: this.error
|
|
41
32
|
}, input_constants.INPUT_CONTROL_CSS_CLASSES[(_a = this.size) !== null && _a !== void 0 ? _a : '']);
|
|
42
33
|
if (cssClasses)
|
|
43
|
-
this.classList.add(cssClasses);
|
|
34
|
+
this.classList.add(...cssClasses.split(' '));
|
|
44
35
|
}
|
|
45
36
|
};
|
|
46
37
|
tslib_es6.__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,17 +7,17 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
|
|
10
|
+
var ref_js = require('lit-html/directives/ref.js');
|
|
10
11
|
var input_constants = require('./input_constants.js');
|
|
11
12
|
var ifDefined_js = require('lit-html/directives/if-defined.js');
|
|
12
13
|
var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
|
|
13
|
-
var ref = require('lit/directives/ref');
|
|
14
14
|
var input_mask_controller = require('../../../controllers/input_mask_controller/input_mask_controller.js');
|
|
15
15
|
|
|
16
16
|
exports.HInputControl = class HInputControl extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
17
17
|
constructor() {
|
|
18
18
|
super();
|
|
19
19
|
this.type = input_constants.INPUT_CONTROL_TYPES.text;
|
|
20
|
-
this._inputRef =
|
|
20
|
+
this._inputRef = ref_js.createRef();
|
|
21
21
|
this._inputMaskController = null;
|
|
22
22
|
this._handleChangeEvent = (event) => {
|
|
23
23
|
this.dispatchEvent(new CustomEvent(input_constants.INPUT_CONTROL_EVENTS.change, {
|
|
@@ -114,7 +114,7 @@ exports.HInputControl = class HInputControl extends phoenix_light_lit_element.Ph
|
|
|
114
114
|
super.render();
|
|
115
115
|
return lit.html `
|
|
116
116
|
<input
|
|
117
|
-
${
|
|
117
|
+
${ref_js.ref(this._inputRef)}
|
|
118
118
|
id="${ifDefined_js.ifDefined(this.controlId)}"
|
|
119
119
|
name="${ifDefined_js.ifDefined(this.controlName)}"
|
|
120
120
|
type="${ifDefined_js.ifDefined(this.type)}"
|
|
@@ -23,19 +23,6 @@ exports.HRadio = class HRadio extends phoenix_light_lit_element.PhoenixLightLitE
|
|
|
23
23
|
connectedCallback() {
|
|
24
24
|
super.connectedCallback();
|
|
25
25
|
this.classList.add(radio_constants.RADIO_CONTROL_CSS_CLASSES.radio);
|
|
26
|
-
this._updateCssClassesBasedOnProps();
|
|
27
|
-
}
|
|
28
|
-
updated(changedProperties) {
|
|
29
|
-
super.updated(changedProperties);
|
|
30
|
-
this._updateCssClassesBasedOnProps();
|
|
31
|
-
}
|
|
32
|
-
_updateCssClassesBasedOnProps() {
|
|
33
|
-
const classes = [
|
|
34
|
-
radio_constants.RADIO_CONTROL_CSS_CLASSES.radioDisabled,
|
|
35
|
-
radio_constants.RADIO_CONTROL_CSS_CLASSES.radioReadonly,
|
|
36
|
-
radio_constants.RADIO_CONTROL_CSS_CLASSES.radioError
|
|
37
|
-
];
|
|
38
|
-
this.classList.remove(...classes);
|
|
39
26
|
const cssClasses = index['default']({
|
|
40
27
|
[radio_constants.RADIO_CONTROL_CSS_CLASSES.radioDisabled]: this.disabled,
|
|
41
28
|
[radio_constants.RADIO_CONTROL_CSS_CLASSES.radioReadonly]: this.readonly,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -28,7 +28,46 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
28
28
|
this._historyContext = new behavior_subject.BehaviorSubject({
|
|
29
29
|
showLoadMore: false
|
|
30
30
|
});
|
|
31
|
+
this._activeItemId = -1;
|
|
31
32
|
this._translations = {};
|
|
33
|
+
this._bindKeys = (ev) => {
|
|
34
|
+
const searchItemsCount = this._getSearchItemsCount();
|
|
35
|
+
switch (ev.key) {
|
|
36
|
+
case 'ArrowDown':
|
|
37
|
+
ev.preventDefault();
|
|
38
|
+
this._activeItemId = this._activeItemId === searchItemsCount - 1 ? 0 : this._activeItemId + 1;
|
|
39
|
+
this._scroll(search_constants.SCROLL_DIRECTIONS.down);
|
|
40
|
+
break;
|
|
41
|
+
case 'ArrowUp':
|
|
42
|
+
ev.preventDefault();
|
|
43
|
+
this._activeItemId = this._activeItemId === 0 || this._activeItemId === -1 ? searchItemsCount - 1 : this._activeItemId - 1;
|
|
44
|
+
this._scroll(search_constants.SCROLL_DIRECTIONS.up);
|
|
45
|
+
break;
|
|
46
|
+
case 'Enter':
|
|
47
|
+
ev.preventDefault();
|
|
48
|
+
if (this._activeItemId === -1)
|
|
49
|
+
return;
|
|
50
|
+
this._handleChooseSearchItem();
|
|
51
|
+
break;
|
|
52
|
+
case 'Escape':
|
|
53
|
+
ev.preventDefault();
|
|
54
|
+
this._searchInput.blur();
|
|
55
|
+
this._resetSearchView();
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
this._getSearchItemsCount = () => {
|
|
60
|
+
if (this._shouldShowHistory)
|
|
61
|
+
return this._historyLimitedContent.length;
|
|
62
|
+
let searchItemsCount = this._searchResults.products.length +
|
|
63
|
+
this._searchResults.categories.length +
|
|
64
|
+
this._searchResults.suggestions.length +
|
|
65
|
+
this._searchResults.producers.length;
|
|
66
|
+
if (this._searchResults.products.length && this._searchResults.suggestions.length) {
|
|
67
|
+
searchItemsCount += 1;
|
|
68
|
+
}
|
|
69
|
+
return searchItemsCount;
|
|
70
|
+
};
|
|
32
71
|
this._hideSuggesterOnClickOutside = (ev) => {
|
|
33
72
|
const outsideClick = typeof ev.composedPath === 'function' && !ev.composedPath().includes(this);
|
|
34
73
|
if (!outsideClick)
|
|
@@ -62,6 +101,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
62
101
|
catch (_a) {
|
|
63
102
|
console.error('Search context is not provided');
|
|
64
103
|
}
|
|
104
|
+
this._setupInitialSearchPhrase();
|
|
65
105
|
this._setupListeners();
|
|
66
106
|
}
|
|
67
107
|
disconnectedCallback() {
|
|
@@ -73,31 +113,54 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
73
113
|
this._historyContextProvider = new context_provider_controller.ContextProviderController(this);
|
|
74
114
|
this._historyContextProvider.provide(search_constants.SEARCH_CONTEXT_NAMES.historyContext, this._historyContext);
|
|
75
115
|
}
|
|
116
|
+
_setupInitialSearchPhrase() {
|
|
117
|
+
var _a;
|
|
118
|
+
const searchInput = this.querySelector('input[type="search"]');
|
|
119
|
+
if (searchInput)
|
|
120
|
+
this._searchInput = searchInput;
|
|
121
|
+
if (!((_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.value))
|
|
122
|
+
return;
|
|
123
|
+
this._searchPhrase = this._searchInput.value;
|
|
124
|
+
this._updateSearchPhrase(this._searchInput.value);
|
|
125
|
+
}
|
|
126
|
+
_updateSearchPhrase(searchPhrase) {
|
|
127
|
+
this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseUpdated, searchPhrase);
|
|
128
|
+
}
|
|
129
|
+
_dispatchEventWithSearchPhrase(eventName, searchPhrase) {
|
|
130
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
131
|
+
detail: {
|
|
132
|
+
searchPhrase
|
|
133
|
+
},
|
|
134
|
+
bubbles: true
|
|
135
|
+
}));
|
|
136
|
+
}
|
|
76
137
|
_setupListeners() {
|
|
77
138
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusinInput, (ev) => {
|
|
78
139
|
const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
|
|
79
140
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.add(search_constants.SEARCH_CLASS_NAMES.outline);
|
|
80
141
|
const shouldShowMessage = ev.detail.searchPhrase !== '';
|
|
81
142
|
this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage, false);
|
|
143
|
+
document.addEventListener('keydown', this._bindKeys);
|
|
82
144
|
});
|
|
83
145
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, (ev) => {
|
|
84
146
|
const shouldShowMessage = ev.detail.searchPhrase !== '';
|
|
85
147
|
this._updateSearchView(ev.detail.searchPhrase, shouldShowMessage);
|
|
86
148
|
});
|
|
87
149
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchInput, (ev) => this._updateSearchView(ev.detail.searchPhrase, false));
|
|
88
|
-
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () =>
|
|
150
|
+
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => {
|
|
151
|
+
this._searchInput.focus();
|
|
152
|
+
this._updateSearchView('', false);
|
|
153
|
+
});
|
|
89
154
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.submit, () => {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
if (updatedInput.value === '') {
|
|
95
|
-
this._updateSearchView(updatedInput.value, true);
|
|
155
|
+
if (this._activeItemId !== -1)
|
|
156
|
+
return;
|
|
157
|
+
if (this._searchInput.value === '') {
|
|
158
|
+
this._updateSearchView(this._searchInput.value, true);
|
|
96
159
|
}
|
|
97
160
|
else {
|
|
98
161
|
this._resetSearchView();
|
|
99
162
|
}
|
|
100
|
-
this._submitSearchPhrase(
|
|
163
|
+
this._submitSearchPhrase(this._searchInput.value);
|
|
101
164
|
});
|
|
102
165
|
this.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.close, () => {
|
|
103
166
|
this.classList.remove(search_constants.SEARCH_CLASS_NAMES.mobileOpened);
|
|
@@ -116,6 +179,7 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
116
179
|
}
|
|
117
180
|
_updateSearchView(searchPhrase, shouldShowMessage, shouldUpdateSearchPhrase = true) {
|
|
118
181
|
this._shouldShowMessage = shouldShowMessage;
|
|
182
|
+
this._activeItemId = -1;
|
|
119
183
|
this._displaySuggester(searchPhrase);
|
|
120
184
|
if (!shouldUpdateSearchPhrase)
|
|
121
185
|
return;
|
|
@@ -144,22 +208,40 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
144
208
|
this._shouldShowHistory = false;
|
|
145
209
|
this._shouldShowResults = true;
|
|
146
210
|
}
|
|
147
|
-
|
|
148
|
-
this.
|
|
211
|
+
_scroll(direction) {
|
|
212
|
+
const searchContainer = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.container}`);
|
|
213
|
+
const maxScrollTop = searchContainer.scrollHeight - searchContainer.clientHeight;
|
|
214
|
+
const activeItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
|
|
215
|
+
const activeItemHeight = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.getBoundingClientRect().height) || 0;
|
|
216
|
+
let top;
|
|
217
|
+
if (direction === search_constants.SCROLL_DIRECTIONS.up) {
|
|
218
|
+
top = searchContainer.scrollTop == 0 ? 0 : searchContainer.scrollTop + 30 - activeItemHeight;
|
|
219
|
+
}
|
|
220
|
+
else {
|
|
221
|
+
top = searchContainer.scrollTop == maxScrollTop ? maxScrollTop : activeItemHeight + searchContainer.scrollTop - 30;
|
|
222
|
+
}
|
|
223
|
+
if (this._activeItemId === this._getSearchItemsCount() - 1) {
|
|
224
|
+
top = maxScrollTop;
|
|
225
|
+
}
|
|
226
|
+
if (this._activeItemId === 0) {
|
|
227
|
+
top = 0;
|
|
228
|
+
}
|
|
229
|
+
searchContainer === null || searchContainer === void 0 ? void 0 : searchContainer.scrollTo({ top, behavior: 'smooth' });
|
|
149
230
|
}
|
|
150
|
-
|
|
151
|
-
this.
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
}));
|
|
231
|
+
_handleChooseSearchItem() {
|
|
232
|
+
const activeSearchItem = this.querySelector(`[data-search-item-id="${this._activeItemId}"]`);
|
|
233
|
+
const elementToClick = activeSearchItem.dataset.suggestedValue
|
|
234
|
+
? activeSearchItem
|
|
235
|
+
: activeSearchItem.querySelector('a');
|
|
236
|
+
elementToClick.click();
|
|
157
237
|
}
|
|
158
238
|
_resetSearchView() {
|
|
159
239
|
this._shouldShowMessage = false;
|
|
240
|
+
this._activeItemId = -1;
|
|
160
241
|
const searchBar = this.querySelector(`.${search_constants.SEARCH_CLASS_NAMES.searchBar}`);
|
|
161
242
|
searchBar === null || searchBar === void 0 ? void 0 : searchBar.classList.remove(search_constants.SEARCH_CLASS_NAMES.outline);
|
|
162
243
|
this._hideHistorySuggestionsAndResults();
|
|
244
|
+
document.removeEventListener('keydown', this._bindKeys);
|
|
163
245
|
}
|
|
164
246
|
_submitSearchPhrase(searchPhrase) {
|
|
165
247
|
this._dispatchEventWithSearchPhrase(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchPhraseSubmitted, searchPhrase);
|
|
@@ -189,12 +271,14 @@ exports.HSearch = class HSearch extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
189
271
|
${when.when(this._shouldShowHistory, () => lit.html `<h-search-history
|
|
190
272
|
.history="${this._historyLimitedContent}"
|
|
191
273
|
.translations="${this._translations}"
|
|
274
|
+
active-item-id="${this._activeItemId}"
|
|
192
275
|
></h-search-history>`)}
|
|
193
276
|
${when.when(this._shouldShowResults, () => lit.html `<h-search-results
|
|
194
277
|
.results="${this._searchResults}"
|
|
195
278
|
search-phrase="${this._searchPhrase}"
|
|
196
279
|
.settings="${this.settings}"
|
|
197
280
|
.translations="${this._translations}"
|
|
281
|
+
active-item-id="${this._activeItemId}"
|
|
198
282
|
></h-search-results>`)}
|
|
199
283
|
</div>`)}
|
|
200
284
|
`;
|
|
@@ -232,6 +316,10 @@ tslib_es6.__decorate([
|
|
|
232
316
|
decorators.state(),
|
|
233
317
|
tslib_es6.__metadata("design:type", behavior_subject.BehaviorSubject)
|
|
234
318
|
], exports.HSearch.prototype, "_historyContext", void 0);
|
|
319
|
+
tslib_es6.__decorate([
|
|
320
|
+
decorators.state(),
|
|
321
|
+
tslib_es6.__metadata("design:type", Number)
|
|
322
|
+
], exports.HSearch.prototype, "_activeItemId", void 0);
|
|
235
323
|
tslib_es6.__decorate([
|
|
236
324
|
decorators.property({ type: Object }),
|
|
237
325
|
tslib_es6.__metadata("design:type", Object)
|
|
@@ -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,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;"}
|
|
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,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;"}
|
|
@@ -45,6 +45,7 @@ const SEARCH_CLASS_NAMES = {
|
|
|
45
45
|
section: `${baseSearchCssClass}__section`,
|
|
46
46
|
item: `${baseSearchCssClass}__item`,
|
|
47
47
|
itemHoverable: `${baseSearchCssClass}__item_hoverable`,
|
|
48
|
+
itemActive: `${baseSearchCssClass}__item_active`,
|
|
48
49
|
link: `${baseSearchCssClass}__link`,
|
|
49
50
|
linkWithImage: `${baseSearchCssClass}__link_with-image`,
|
|
50
51
|
categoryTitle: `${baseSearchCssClass}__category-title`,
|
|
@@ -54,7 +55,10 @@ const SEARCH_CLASS_NAMES = {
|
|
|
54
55
|
productText: `${baseSearchCssClass}__product-text`,
|
|
55
56
|
productPriceInfo: `${baseSearchCssClass}__product-price-info`,
|
|
56
57
|
productPriceBasic: `${baseSearchCssClass}__product-price_basic`,
|
|
58
|
+
productPriceRegular: `${baseSearchCssClass}__product-price_regular`,
|
|
57
59
|
productPricePromotion: `${baseSearchCssClass}__product-price_promotion`,
|
|
60
|
+
productPricePromotionIcon: `${baseSearchCssClass}__product-price_promotion-icon`,
|
|
61
|
+
productAvailability: `${baseSearchCssClass}__product-availability`,
|
|
58
62
|
starScore: 'star-score',
|
|
59
63
|
historyItemValue: `${baseSearchCssClass}__history-item-value`,
|
|
60
64
|
historyRemoveIcon: `${baseSearchCssClass}__history-remove-icon`,
|
|
@@ -63,7 +67,10 @@ const SEARCH_CLASS_NAMES = {
|
|
|
63
67
|
message: `${baseSearchCssClass}__message`,
|
|
64
68
|
messageWithHistory: `${baseSearchCssClass}__message_with-history`,
|
|
65
69
|
messageNoResults: `${baseSearchCssClass}__message_no-results`,
|
|
66
|
-
messageText: `${baseSearchCssClass}__message-text
|
|
70
|
+
messageText: `${baseSearchCssClass}__message-text`,
|
|
71
|
+
loader: 'loader',
|
|
72
|
+
loaderSpinner: 'loader__spinner',
|
|
73
|
+
loaderSpinnerXs: 'loader__spinner_xs'
|
|
67
74
|
};
|
|
68
75
|
const SEARCH_CONTEXT_NAMES = {
|
|
69
76
|
historyContext: 'historyContext',
|
|
@@ -85,10 +92,16 @@ const EMPTY_SEARCH_RESULTS = {
|
|
|
85
92
|
products: [],
|
|
86
93
|
producers: [],
|
|
87
94
|
categories: [],
|
|
88
|
-
productsPagesCount: 0
|
|
95
|
+
productsPagesCount: 0,
|
|
96
|
+
isRequestPending: false
|
|
97
|
+
};
|
|
98
|
+
const SCROLL_DIRECTIONS = {
|
|
99
|
+
up: 'up',
|
|
100
|
+
down: 'down'
|
|
89
101
|
};
|
|
90
102
|
|
|
91
103
|
exports.EMPTY_SEARCH_RESULTS = EMPTY_SEARCH_RESULTS;
|
|
104
|
+
exports.SCROLL_DIRECTIONS = SCROLL_DIRECTIONS;
|
|
92
105
|
exports.SEARCH_CLASS_NAMES = SEARCH_CLASS_NAMES;
|
|
93
106
|
exports.SEARCH_COMPONENT_NAMES = SEARCH_COMPONENT_NAMES;
|
|
94
107
|
exports.SEARCH_CONFIGURATION = SEARCH_CONFIGURATION;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/buttons/search_clear.js
CHANGED
|
@@ -10,13 +10,14 @@ var phoenix_custom_element = require('../../../../../core/decorators/phoenix_cus
|
|
|
10
10
|
var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
|
|
11
11
|
var observer = require('../../../../../core/classes/observer/observer.js');
|
|
12
12
|
var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
|
|
13
|
+
var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
|
|
13
14
|
var search_constants = require('../../search_constants.js');
|
|
14
|
-
var when = require('lit/directives/when');
|
|
15
15
|
|
|
16
16
|
exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
17
17
|
constructor() {
|
|
18
18
|
super();
|
|
19
19
|
this._shouldShow = false;
|
|
20
|
+
this._isRequestPending = false;
|
|
20
21
|
this._btnController = new btn_controller.BtnController(this, this._dispatchClearEvent);
|
|
21
22
|
}
|
|
22
23
|
connectedCallback() {
|
|
@@ -36,6 +37,7 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
|
|
|
36
37
|
this._searchContextObserver = new observer.Observer((searchData) => {
|
|
37
38
|
var _a;
|
|
38
39
|
this._shouldShow = ((_a = searchData.searchPhrase) === null || _a === void 0 ? void 0 : _a.length) !== 0;
|
|
40
|
+
this._isRequestPending = searchData.results.isRequestPending;
|
|
39
41
|
});
|
|
40
42
|
this._searchContext$.subscribe(this._searchContextObserver);
|
|
41
43
|
}
|
|
@@ -44,13 +46,21 @@ exports.HSearchClear = class HSearchClear extends phoenix_light_lit_element.Phoe
|
|
|
44
46
|
}
|
|
45
47
|
}
|
|
46
48
|
render() {
|
|
47
|
-
return lit.html ` ${when.when(this._shouldShow, () =>
|
|
49
|
+
return lit.html ` ${when.when(this._shouldShow, () => lit.html `
|
|
50
|
+
${when.when(this._isRequestPending, () => lit.html `<div class="${search_constants.SEARCH_CLASS_NAMES.loader}">
|
|
51
|
+
<div class="${search_constants.SEARCH_CLASS_NAMES.loaderSpinner} ${search_constants.SEARCH_CLASS_NAMES.loaderSpinnerXs}"></div>
|
|
52
|
+
</div>`, () => this.getSlot(search_constants.SEARCH_SLOT_NAMES.clearButton))}
|
|
53
|
+
`)}`;
|
|
48
54
|
}
|
|
49
55
|
};
|
|
50
56
|
tslib_es6.__decorate([
|
|
51
57
|
decorators.state(),
|
|
52
58
|
tslib_es6.__metadata("design:type", Boolean)
|
|
53
59
|
], exports.HSearchClear.prototype, "_shouldShow", void 0);
|
|
60
|
+
tslib_es6.__decorate([
|
|
61
|
+
decorators.state(),
|
|
62
|
+
tslib_es6.__metadata("design:type", Boolean)
|
|
63
|
+
], exports.HSearchClear.prototype, "_isRequestPending", void 0);
|
|
54
64
|
exports.HSearchClear = tslib_es6.__decorate([
|
|
55
65
|
phoenix_custom_element.phoenixCustomElement(search_constants.SEARCH_COMPONENT_NAMES.clearButton),
|
|
56
66
|
tslib_es6.__metadata("design:paramtypes", [])
|
|
@@ -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;"}
|
|
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,mBAAmB,2EAAmF;AACtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,11 +7,12 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
|
|
10
|
+
var icon_constants = require('../../../../icon/icon_constants.js');
|
|
10
11
|
var observer = require('../../../../../core/classes/observer/observer.js');
|
|
11
12
|
var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
|
|
12
13
|
var ref_js = require('lit-html/directives/ref.js');
|
|
14
|
+
var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
|
|
13
15
|
var search_constants = require('../../search_constants.js');
|
|
14
|
-
var when = require('lit/directives/when');
|
|
15
16
|
var repeat = require('../../../../../../../../external/lit/external/lit-html/directives/repeat.js');
|
|
16
17
|
|
|
17
18
|
exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
@@ -44,8 +45,15 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
|
|
|
44
45
|
return when.when((_a = this.history) === null || _a === void 0 ? void 0 : _a.length, () => lit.html `<h3 class="${search_constants.SEARCH_CLASS_NAMES.headline}">${this.translations.searchHistory}</h3>
|
|
45
46
|
|
|
46
47
|
<ul>
|
|
47
|
-
${repeat.repeat(this.history, (historyElement) => lit.html ` <li
|
|
48
|
-
|
|
48
|
+
${repeat.repeat(this.history, (historyElement, index) => lit.html ` <li
|
|
49
|
+
class="${search_constants.SEARCH_CLASS_NAMES.item} ${index === this.activeItemId ? search_constants.SEARCH_CLASS_NAMES.itemActive : ''}"
|
|
50
|
+
>
|
|
51
|
+
<h-search-history-select
|
|
52
|
+
item-label="${historyElement.label}"
|
|
53
|
+
class="${search_constants.SEARCH_CLASS_NAMES.historySelect}"
|
|
54
|
+
data-suggested-value="${historyElement.label}"
|
|
55
|
+
data-search-item-id="${index}"
|
|
56
|
+
>
|
|
49
57
|
<h-icon icon-name="icon-clock"></h-icon>
|
|
50
58
|
|
|
51
59
|
<span class="${search_constants.SEARCH_CLASS_NAMES.historyItemValue}">${historyElement.label}</span>
|
|
@@ -55,7 +63,7 @@ exports.HSearchHistory = class HSearchHistory extends phoenix_light_lit_element.
|
|
|
55
63
|
<h-icon
|
|
56
64
|
icon-name="icon-x"
|
|
57
65
|
clickable=${true}
|
|
58
|
-
size
|
|
66
|
+
size=${icon_constants.ICONS_SIZES.l}
|
|
59
67
|
css-classes="${search_constants.SEARCH_CLASS_NAMES.historyRemoveIcon}"
|
|
60
68
|
></h-icon>
|
|
61
69
|
</h-search-history-remove>
|
|
@@ -71,6 +79,10 @@ tslib_es6.__decorate([
|
|
|
71
79
|
decorators.property({ type: Array }),
|
|
72
80
|
tslib_es6.__metadata("design:type", Array)
|
|
73
81
|
], exports.HSearchHistory.prototype, "history", void 0);
|
|
82
|
+
tslib_es6.__decorate([
|
|
83
|
+
decorators.property({ type: Number, attribute: 'active-item-id' }),
|
|
84
|
+
tslib_es6.__metadata("design:type", Number)
|
|
85
|
+
], exports.HSearchHistory.prototype, "activeItemId", void 0);
|
|
74
86
|
tslib_es6.__decorate([
|
|
75
87
|
decorators.property({ type: Object }),
|
|
76
88
|
tslib_es6.__metadata("design:type", Object)
|
|
@@ -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,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mBAAmB,2EAAmF;AACtG;AACA,qBAAqB,6EAAqF;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
|
@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
|
|
6
6
|
var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
7
7
|
var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
|
|
8
|
-
var observer = require('../../../../../core/classes/observer/observer.js');
|
|
9
|
-
var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
|
|
10
8
|
var search_constants = require('../../search_constants.js');
|
|
11
9
|
|
|
12
10
|
exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
@@ -16,29 +14,39 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
|
|
|
16
14
|
if (!this._input) {
|
|
17
15
|
throw new Error('Search input not found');
|
|
18
16
|
}
|
|
19
|
-
this.
|
|
17
|
+
this._setupInitialValue();
|
|
20
18
|
this._setupListeners();
|
|
21
19
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
_setupInitialValue() {
|
|
21
|
+
const searchQueryRegExp = /\/searchquery\/([^/]{1,})/;
|
|
22
|
+
const searchPhraseRegArray = searchQueryRegExp.exec(window.location.pathname);
|
|
23
|
+
if (!searchPhraseRegArray)
|
|
24
|
+
return;
|
|
25
|
+
const searchQuery = searchPhraseRegArray[1].replace(/\+/g, ' ');
|
|
26
|
+
this._input.value = decodeURIComponent(this._deserializeInputPhrase(searchQuery));
|
|
27
|
+
}
|
|
28
|
+
_deserializeInputPhrase(value) {
|
|
29
|
+
if (value.indexOf('%2f') !== -1) {
|
|
30
|
+
value = value.replace(/%2f/g, '/');
|
|
31
|
+
}
|
|
32
|
+
if (value.indexOf('%2523') !== -1) {
|
|
33
|
+
value = value.replace(/%2523/g, '#');
|
|
34
|
+
}
|
|
35
|
+
if (value.indexOf('%252f') !== -1) {
|
|
36
|
+
value = value.replace(/%252f/g, '/');
|
|
32
37
|
}
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
if (value.indexOf('%23') !== -1) {
|
|
39
|
+
value = value.replace(/%23/g, '#');
|
|
35
40
|
}
|
|
41
|
+
return value;
|
|
36
42
|
}
|
|
37
43
|
_setupListeners() {
|
|
38
44
|
this._input.addEventListener('focusin', (ev) => {
|
|
39
45
|
this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.focusinInput, ev.target.value);
|
|
40
46
|
});
|
|
41
47
|
this._input.addEventListener('keyup', (ev) => {
|
|
48
|
+
if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown' || ev.key === 'Escape')
|
|
49
|
+
return;
|
|
42
50
|
if (ev.key !== 'Enter') {
|
|
43
51
|
this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.keyupInput, ev.target.value);
|
|
44
52
|
return;
|
|
@@ -51,6 +59,9 @@ exports.HSearchInput = class HSearchInput extends phoenix_light_lit_element.Phoe
|
|
|
51
59
|
}
|
|
52
60
|
this._dispatchCustomEvent(search_constants.SEARCH_CUSTOM_EVENT_NAMES.searchInput, ev.target.value);
|
|
53
61
|
});
|
|
62
|
+
document.addEventListener(search_constants.SEARCH_CUSTOM_EVENT_NAMES.clear, () => {
|
|
63
|
+
this._input.value = '';
|
|
64
|
+
});
|
|
54
65
|
}
|
|
55
66
|
_dispatchCustomEvent(eventName, searchPhrase) {
|
|
56
67
|
this.dispatchEvent(new CustomEvent(eventName, {
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -7,8 +7,8 @@ var lit = require('lit');
|
|
|
7
7
|
var decorators = require('lit/decorators');
|
|
8
8
|
var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
|
|
10
|
+
var when = require('../../../../../../../../external/lit/external/lit-html/directives/when.js');
|
|
10
11
|
var search_constants = require('../../search_constants.js');
|
|
11
|
-
var when = require('lit/directives/when');
|
|
12
12
|
var isEqual = require('../../../../../../../../external/lodash/isEqual.js');
|
|
13
13
|
|
|
14
14
|
exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
@@ -24,7 +24,8 @@ exports.HSearchMessage = class HSearchMessage extends phoenix_light_lit_element.
|
|
|
24
24
|
products: [],
|
|
25
25
|
producers: [],
|
|
26
26
|
categories: [],
|
|
27
|
-
productsPagesCount: 0
|
|
27
|
+
productsPagesCount: 0,
|
|
28
|
+
isRequestPending: false
|
|
28
29
|
};
|
|
29
30
|
}
|
|
30
31
|
_isNoResultsForSearchPhrase() {
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA,mBAAmB,2EAAmF;AACtG;AACA,sBAAsB,oDAAwD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|