@shoper/phoenix_design_system 1.1.0-4 → 1.1.0-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 (40) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +14 -12
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js +5 -1
  4. package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value.js → toggler/select_toggler.js} +20 -15
  6. package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value.js.map → toggler/select_toggler.js.map} +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js +12 -0
  8. package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value_constants.js.map → toggler/select_toggler_constants.js.map} +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/select/select.js +26 -27
  10. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +0 -2
  12. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/index.js +3 -3
  14. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +1 -0
  15. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +14 -12
  16. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  17. package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.d.ts +2 -0
  18. package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js +12 -6
  19. package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js.map +1 -1
  20. package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.d.ts +4 -1
  21. package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js +5 -2
  22. package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map +1 -1
  23. package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.d.ts → toggler/select_toggler.d.ts} +1 -1
  24. package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.js → toggler/select_toggler.js} +21 -16
  25. package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.js.map → toggler/select_toggler.js.map} +1 -1
  26. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.d.ts +4 -0
  27. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js +8 -0
  28. package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value_constants.js.map → toggler/select_toggler_constants.js.map} +1 -1
  29. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +0 -1
  30. package/build/esm/packages/phoenix/src/components/form/select/select.js +27 -28
  31. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  32. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +0 -2
  33. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +0 -2
  34. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  35. package/build/esm/packages/phoenix/src/index.d.ts +1 -1
  36. package/build/esm/packages/phoenix/src/index.js +1 -1
  37. package/package.json +1 -1
  38. package/build/cjs/packages/phoenix/src/components/form/select/components/value/select_value_constants.js +0 -10
  39. package/build/esm/packages/phoenix/src/components/form/select/components/value/select_value_constants.d.ts +0 -3
  40. package/build/esm/packages/phoenix/src/components/form/select/components/value/select_value_constants.js +0 -6
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -23,20 +23,22 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
23
23
  }));
24
24
  }, 200);
25
25
  }
26
+ connectedCallback() {
27
+ super.connectedCallback();
28
+ this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
29
+ }
26
30
  render() {
27
31
  return lit.html `
28
- <div class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch}>
29
- <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
30
- <input
31
- class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
32
- type="text"
33
- role="search"
34
- .value=${this.value}
35
- aria-autocomplete="list"
36
- autocomplete="false"
37
- @input=${this._handleInputChange}
38
- />
39
- </div>
32
+ <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
33
+ <input
34
+ class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
35
+ type="text"
36
+ role="search"
37
+ .value=${this.value}
38
+ aria-autocomplete="list"
39
+ autocomplete="false"
40
+ @input=${this._handleInputChange}
41
+ />
40
42
  `;
41
43
  }
42
44
  };
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/components/select_components_constatns.js CHANGED
@@ -11,16 +11,20 @@ const SELECT_OPTIONS_EVENT_NAMES = {
11
11
  const SELECT_SEARCH_EVENT_NAMES = {
12
12
  search: 'selectSearch.search'
13
13
  };
14
+ const SELECT_CLOSE_BTN_EVENT_NAMES = {
15
+ close: 'selectCloseBtn.close'
16
+ };
14
17
  const SELECT_RELATED_COMPONENTS_NAMES = {
15
18
  option: 'h-option',
16
19
  options: 'h-options',
17
20
  optionContent: 'h-option-content',
18
- value: 'h-select-value',
21
+ toggler: 'h-select-toggler',
19
22
  closeBtn: 'h-select-close-btn',
20
23
  search: 'h-select-search'
21
24
  };
22
25
  const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
23
26
 
27
+ exports.SELECT_CLOSE_BTN_EVENT_NAMES = SELECT_CLOSE_BTN_EVENT_NAMES;
24
28
  exports.SELECT_INPUT_PLACEHOLDER_SLOT_NAME = SELECT_INPUT_PLACEHOLDER_SLOT_NAME;
25
29
  exports.SELECT_OPTIONS_EVENT_NAMES = SELECT_OPTIONS_EVENT_NAMES;
26
30
  exports.SELECT_OPTION_EVENT_NAMES = SELECT_OPTION_EVENT_NAMES;
package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map CHANGED
@@ -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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value.js → toggler/select_toggler.js} RENAMED
@@ -11,9 +11,9 @@ var litHtml = require('lit-html');
11
11
  var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
12
12
  var select_constants = require('../../select_constants.js');
13
13
  var observable_directive = require('../../../../../directives/observable_directive.js');
14
- var select_value_constants = require('./select_value_constants.js');
14
+ var select_toggler_constants = require('./select_toggler_constants.js');
15
15
 
16
- exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.PhoenixLightLitElement {
16
+ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
17
17
  constructor() {
18
18
  super(...arguments);
19
19
  this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
@@ -28,6 +28,7 @@ exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.Phoe
28
28
  super.connectedCallback();
29
29
  this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.input);
30
30
  this.setAttribute('role', 'textbox');
31
+ this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectToggler);
31
32
  this._subscribeObserver();
32
33
  }
33
34
  async _subscribeObserver() {
@@ -38,32 +39,36 @@ exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.Phoe
38
39
  if (!this.selectedOptions$)
39
40
  return;
40
41
  return litHtml.html `
41
- <div class=${select_value_constants.SELECT_VALUE_CSS_CLASSES.selectValue}>
42
+ <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
42
43
  ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
43
44
  var _a;
44
45
  if (!selectOptions.length)
45
46
  return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
46
47
  return this.isMultiselect
47
- ? litHtml.html `${selectOptions.map((option) => litHtml.html `<h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
48
- ${option.content}
48
+ ? litHtml.html `${selectOptions.map((option) => litHtml.html `<li>
49
+ <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
50
+ ${option.content}
49
51
 
50
- <h-tag-remove-button>x</h-tag-remove-button>
51
- </h-tag>`)}`
52
- : selectOptions[0].content;
52
+ <h-tag-remove-button></h-tag-remove-button>
53
+ </h-tag>
54
+ </li>`)}`
55
+ : litHtml.html `<li>selectOptions[0].content</li>`;
53
56
  })}
54
- </div>
57
+ </ul>
58
+
59
+ <h-icon icon-name="icon-chevron-down"></h-icon>
55
60
  `;
56
61
  }
57
62
  };
58
63
  tslib_es6.__decorate([
59
64
  decorators.state(),
60
65
  tslib_es6.__metadata("design:type", Object)
61
- ], exports.HSelectValue.prototype, "selectedOptions$", void 0);
66
+ ], exports.HSelectToggler.prototype, "selectedOptions$", void 0);
62
67
  tslib_es6.__decorate([
63
68
  decorators.state(),
64
69
  tslib_es6.__metadata("design:type", Boolean)
65
- ], exports.HSelectValue.prototype, "isMultiselect", void 0);
66
- exports.HSelectValue = tslib_es6.__decorate([
67
- phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.value)
68
- ], exports.HSelectValue);
69
- //# sourceMappingURL=select_value.js.map
70
+ ], exports.HSelectToggler.prototype, "isMultiselect", void 0);
71
+ exports.HSelectToggler = tslib_es6.__decorate([
72
+ phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.toggler)
73
+ ], exports.HSelectToggler);
74
+ //# sourceMappingURL=select_toggler.js.map
package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value.js.map → toggler/select_toggler.js.map} RENAMED
@@ -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;"}
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;"}
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js ADDED
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const baseClass = 'select-toggler';
6
+ const SELECT_TOGGLER_CSS_CLASSES = {
7
+ selectToggler: baseClass,
8
+ selectTogglerValues: `${baseClass}__values`
9
+ };
10
+
11
+ exports.SELECT_TOGGLER_CSS_CLASSES = SELECT_TOGGLER_CSS_CLASSES;
12
+ //# sourceMappingURL=select_toggler_constants.js.map
package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value_constants.js.map → toggler/select_toggler_constants.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -41,12 +41,13 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
41
41
  this._selectController.deselectOption(selectedOption);
42
42
  };
43
43
  this._updateOptionsView = (options) => {
44
- // if (options.length < Object.keys(this._$options).length) this._removeHTMLOptions(options.map((option: SelectOption) => option.value));
44
+ if (options.length < Object.keys(this._$options).length)
45
+ this._removeHTMLOptions(options.map((option) => option.value));
45
46
  options.forEach((option, index) => {
46
47
  const { selected, value } = option;
47
48
  const $option = this._$options[value];
48
49
  if (!$option) {
49
- // this._appendNewHTMLOption(option, index + 1);
50
+ this._appendNewHTMLOption(option, index + 1);
50
51
  return;
51
52
  }
52
53
  select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
@@ -66,14 +67,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
66
67
  this._closeSelect = () => {
67
68
  var _a;
68
69
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
70
+ this._searchValue = '';
71
+ this.opened = false;
69
72
  };
70
73
  this._clearOptions = () => {
71
74
  this._selectController.deselectOptions();
72
75
  };
73
- this._handleDropdownHidden = () => {
74
- this._searchValue = '';
75
- this.opened = false;
76
- };
77
76
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
78
77
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
79
78
  }
@@ -113,6 +112,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
113
112
  }
114
113
  _setupEvents() {
115
114
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
115
+ this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
116
116
  }
117
117
  _appendNewHTMLOption(option, position) {
118
118
  const $list = this._$optionsList.value;
@@ -152,12 +152,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
152
152
  <h-dropdown
153
153
  ${ref_js.ref(this._$dropdown)}
154
154
  @dropdown.showed=${() => (this.opened = true)}
155
- @dropdown.hidden=${this._handleDropdownHidden}
155
+ @dropdown.hidden=${this._closeSelect}
156
156
  name=${this.controlName}
157
157
  >
158
- <h-dropdown-toggler name=${this.controlName} class="${select_constants.SELECT_CSS_CLASSES.selectControl}">
158
+ <h-dropdown-toggler name=${this.controlName}">
159
159
  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.input)}
160
- <h-icon icon-name="icon-chevron-down"></h-icon>
161
160
  </h-dropdown-toggler>
162
161
 
163
162
  <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.ref(this._$dropdownContent)} name=${this.controlName}>
@@ -165,31 +164,31 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
165
164
 
166
165
  ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
167
166
  ? lit.html `<h-select-search
168
- class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
169
- ${ref_js.ref(this._$search)}
170
- .value=${this._searchValue}
171
- @selectSearch.search=${this._handleSearch}
172
- ></h-select-search>`
167
+ class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
168
+ ${ref_js.ref(this._$search)}
169
+ .value=${this._searchValue}
170
+ @selectSearch.search=${this._handleSearch}
171
+ ></h-select-search>`
173
172
  : lit.nothing}
174
173
  ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
175
174
  ? lit.html `
176
- <h-options
177
- class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
178
- ${ref_js.ref(this._$optionsList)}
179
- @selectOptions.clicked=${this._handleOptionClicked}
180
- >
181
- ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
182
- </h-options>
183
- `
175
+ <h-options
176
+ class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
177
+ ${ref_js.ref(this._$optionsList)}
178
+ @selectOptions.clicked=${this._handleOptionClicked}
179
+ >
180
+ ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
181
+ </h-options>
182
+ `
184
183
  : lit.nothing}
185
184
  ${!this._selectController.visibleOptionsCount ? lit.html `<p>brak wyników dla ${this._searchValue}</p>` : lit.nothing}
186
185
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
187
186
  ? lit.html `
188
- <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
189
- <button @click=${this._clearOptions}>clear</button>
190
- <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
191
- </section>
192
- `
187
+ <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
188
+ <button @click=${this._clearOptions}>clear</button>
189
+ <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
190
+ </section>
191
+ `
193
192
  : lit.nothing}
194
193
  </h-dropdown-content>
195
194
  </h-dropdown>
package/build/cjs/packages/phoenix/src/components/form/select/select.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/select_constants.js CHANGED
@@ -19,8 +19,6 @@ const baseSelectClass = 'select';
19
19
  const SELECT_CSS_CLASSES = {
20
20
  select: baseSelectClass,
21
21
  selectOpened: `${baseSelectClass}_opened`,
22
- selectControl: `${baseSelectClass}__control`,
23
- selectInput: `${baseSelectClass}__value`,
24
22
  selectSearch: `${baseSelectClass}__search`,
25
23
  selectOptions: `${baseSelectClass}__options`,
26
24
  selectContent: `${baseSelectClass}__content`,
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map CHANGED
@@ -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;"}
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;"}
package/build/cjs/packages/phoenix/src/index.js CHANGED
@@ -10,7 +10,7 @@ var select_option = require('./components/form/select/components/option/select_o
10
10
  var select_option_content = require('./components/form/select/components/option/select_option_content.js');
11
11
  var select_options = require('./components/form/select/components/select_options.js');
12
12
  var context_consumer_controller = require('./core/context/context_consumer_controller.js');
13
- var select_value = require('./components/form/select/components/value/select_value.js');
13
+ var select_toggler = require('./components/form/select/components/toggler/select_toggler.js');
14
14
  var context_provider_controller = require('./core/context/context_provider_controller.js');
15
15
  var portal = require('./components/portal/portal.js');
16
16
  var portal_target = require('./components/portal/portal_target.js');
@@ -109,10 +109,10 @@ Object.defineProperty(exports, 'HOptions', {
109
109
  }
110
110
  });
111
111
  exports.ContextConsumerController = context_consumer_controller.ContextConsumerController;
112
- Object.defineProperty(exports, 'HSelectValue', {
112
+ Object.defineProperty(exports, 'HSelectToggler', {
113
113
  enumerable: true,
114
114
  get: function () {
115
- return select_value.HSelectValue;
115
+ return select_toggler.HSelectToggler;
116
116
  }
117
117
  });
118
118
  exports.ContextProviderController = context_provider_controller.ContextProviderController;
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts CHANGED
@@ -2,6 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
2
2
  import { TemplateResult } from 'lit';
3
3
  export declare class HSelectSearch extends PhoenixLightLitElement {
4
4
  value: string;
5
+ connectedCallback(): void;
5
6
  private _handleInputChange;
6
7
  protected render(): TemplateResult;
7
8
  }
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -19,20 +19,22 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
19
19
  }));
20
20
  }, 200);
21
21
  }
22
+ connectedCallback() {
23
+ super.connectedCallback();
24
+ this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
25
+ }
22
26
  render() {
23
27
  return html `
24
- <div class=${SELECT_SEARCH_CSS_CLASSES.selectSearch}>
25
- <h-icon icon-name="icon-search" class=${SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
26
- <input
27
- class=${SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
28
- type="text"
29
- role="search"
30
- .value=${this.value}
31
- aria-autocomplete="list"
32
- autocomplete="false"
33
- @input=${this._handleInputChange}
34
- />
35
- </div>
28
+ <h-icon icon-name="icon-search" class=${SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
29
+ <input
30
+ class=${SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
31
+ type="text"
32
+ role="search"
33
+ .value=${this.value}
34
+ aria-autocomplete="list"
35
+ autocomplete="false"
36
+ @input=${this._handleInputChange}
37
+ />
36
38
  `;
37
39
  }
38
40
  };
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/components/select_close_btn.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { TemplateResult } from 'lit-html';
2
2
  import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
3
  export declare class SelectCloseBtn extends PhoenixLightLitElement {
4
+ private _btnController;
4
5
  connectedCallback(): void;
6
+ private _dispatchCloseEvent;
5
7
  render(): TemplateResult;
6
8
  }
package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js CHANGED
@@ -2,18 +2,24 @@ import { __decorate } from "tslib";
2
2
  import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
3
3
  import { html } from 'lit-html';
4
4
  import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
5
- import { SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
5
+ import { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
6
+ import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
6
7
  let SelectCloseBtn = class SelectCloseBtn extends PhoenixLightLitElement {
8
+ constructor() {
9
+ super(...arguments);
10
+ this._dispatchCloseEvent = () => {
11
+ this.dispatchEvent(new CustomEvent(SELECT_CLOSE_BTN_EVENT_NAMES.close));
12
+ };
13
+ }
7
14
  connectedCallback() {
8
15
  super.connectedCallback();
9
- this.setAttribute('role', 'presentation');
16
+ this.setAttribute('aria-label', 'close select');
17
+ this._btnController = new BtnController(this, this._dispatchCloseEvent);
10
18
  }
11
19
  render() {
12
- return html `<button aria-label="close select">
13
- ${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
20
+ return html `${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
14
21
  ? this.getSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
15
- : html `<icon iconName="icon-x"></icon>`}
16
- </button> `;
22
+ : html `<icon iconName="icon-x"></icon>`} `;
17
23
  }
18
24
  };
19
25
  SelectCloseBtn = __decorate([
package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select_close_btn.js","sourceRoot":"","sources":["../../../../../../../../../src/components/form/select/components/select_close_btn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EACH,qCAAqC,EACrC,+BAA+B,EAClC,MAAM,4EAA4E,CAAC;AAGpF,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAC/C,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC9C,CAAC;IAEM,MAAM;QACT,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACjD,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA,iCAAiC;mBACpC,CAAC;IAChB,CAAC;CACJ,CAAA;AAdY,cAAc;IAD1B,oBAAoB,CAAC,+BAA+B,CAAC,QAAQ,CAAC;GAClD,cAAc,CAc1B;SAdY,cAAc"}
1
+ {"version":3,"file":"select_close_btn.js","sourceRoot":"","sources":["../../../../../../../../../src/components/form/select/components/select_close_btn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EACH,4BAA4B,EAC5B,qCAAqC,EACrC,+BAA+B,EAClC,MAAM,4EAA4E,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AAGvF,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAA1D;;QAWY,wBAAmB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC;IAON,CAAC;IAjBU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;QAEhD,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC5E,CAAC;IAMM,MAAM;QACT,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YAC7D,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA,iCAAiC,GAAG,CAAC;IACnD,CAAC;CACJ,CAAA;AApBY,cAAc;IAD1B,oBAAoB,CAAC,+BAA+B,CAAC,QAAQ,CAAC;GAClD,cAAc,CAoB1B;SApBY,cAAc"}
package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.d.ts CHANGED
@@ -7,11 +7,14 @@ export declare const SELECT_OPTIONS_EVENT_NAMES: {
7
7
  export declare const SELECT_SEARCH_EVENT_NAMES: {
8
8
  readonly search: "selectSearch.search";
9
9
  };
10
+ export declare const SELECT_CLOSE_BTN_EVENT_NAMES: {
11
+ readonly close: "selectCloseBtn.close";
12
+ };
10
13
  export declare const SELECT_RELATED_COMPONENTS_NAMES: {
11
14
  readonly option: "h-option";
12
15
  readonly options: "h-options";
13
16
  readonly optionContent: "h-option-content";
14
- readonly value: "h-select-value";
17
+ readonly toggler: "h-select-toggler";
15
18
  readonly closeBtn: "h-select-close-btn";
16
19
  readonly search: "h-select-search";
17
20
  };
package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js CHANGED
@@ -7,15 +7,18 @@ const SELECT_OPTIONS_EVENT_NAMES = {
7
7
  const SELECT_SEARCH_EVENT_NAMES = {
8
8
  search: 'selectSearch.search'
9
9
  };
10
+ const SELECT_CLOSE_BTN_EVENT_NAMES = {
11
+ close: 'selectCloseBtn.close'
12
+ };
10
13
  const SELECT_RELATED_COMPONENTS_NAMES = {
11
14
  option: 'h-option',
12
15
  options: 'h-options',
13
16
  optionContent: 'h-option-content',
14
- value: 'h-select-value',
17
+ toggler: 'h-select-toggler',
15
18
  closeBtn: 'h-select-close-btn',
16
19
  search: 'h-select-search'
17
20
  };
18
21
  const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
19
22
 
20
- export { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES, SELECT_SEARCH_EVENT_NAMES };
23
+ export { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES, SELECT_SEARCH_EVENT_NAMES };
21
24
  //# sourceMappingURL=select_components_constatns.js.map
package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.d.ts → toggler/select_toggler.d.ts} RENAMED
@@ -2,7 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
2
2
  import { SelectOption } from "../../model/select_option";
3
3
  import { TemplateResult } from 'lit-html';
4
4
  import { BehaviorSubject } from "../../../../../core/classes/behavior_subject/behavior_subject";
5
- export declare class HSelectValue extends PhoenixLightLitElement {
5
+ export declare class HSelectToggler extends PhoenixLightLitElement {
6
6
  selectedOptions$: BehaviorSubject<SelectOption[]> | null;
7
7
  isMultiselect: boolean;
8
8
  private _contextConsumer;
package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.js → toggler/select_toggler.js} RENAMED
@@ -7,9 +7,9 @@ import { html } from 'lit-html';
7
7
  import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
8
8
  import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
9
9
  import { observe } from '../../../../../directives/observable_directive.js';
10
- import { SELECT_VALUE_CSS_CLASSES } from './select_value_constants.js';
10
+ import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
11
11
 
12
- let HSelectValue = class HSelectValue extends PhoenixLightLitElement {
12
+ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
13
13
  constructor() {
14
14
  super(...arguments);
15
15
  this._contextConsumer = new ContextConsumerController(this);
@@ -24,6 +24,7 @@ let HSelectValue = class HSelectValue extends PhoenixLightLitElement {
24
24
  super.connectedCallback();
25
25
  this.setAttribute('slot', SELECT_SLOT_NAMES.input);
26
26
  this.setAttribute('role', 'textbox');
27
+ this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectToggler);
27
28
  this._subscribeObserver();
28
29
  }
29
30
  async _subscribeObserver() {
@@ -34,34 +35,38 @@ let HSelectValue = class HSelectValue extends PhoenixLightLitElement {
34
35
  if (!this.selectedOptions$)
35
36
  return;
36
37
  return html `
37
- <div class=${SELECT_VALUE_CSS_CLASSES.selectValue}>
38
+ <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
38
39
  ${observe(this.selectedOptions$, (selectOptions) => {
39
40
  var _a;
40
41
  if (!selectOptions.length)
41
42
  return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
42
43
  return this.isMultiselect
43
- ? html `${selectOptions.map((option) => html `<h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
44
- ${option.content}
44
+ ? html `${selectOptions.map((option) => html `<li>
45
+ <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
46
+ ${option.content}
45
47
 
46
- <h-tag-remove-button>x</h-tag-remove-button>
47
- </h-tag>`)}`
48
- : selectOptions[0].content;
48
+ <h-tag-remove-button></h-tag-remove-button>
49
+ </h-tag>
50
+ </li>`)}`
51
+ : html `<li>selectOptions[0].content</li>`;
49
52
  })}
50
- </div>
53
+ </ul>
54
+
55
+ <h-icon icon-name="icon-chevron-down"></h-icon>
51
56
  `;
52
57
  }
53
58
  };
54
59
  __decorate([
55
60
  state(),
56
61
  __metadata("design:type", Object)
57
- ], HSelectValue.prototype, "selectedOptions$", void 0);
62
+ ], HSelectToggler.prototype, "selectedOptions$", void 0);
58
63
  __decorate([
59
64
  state(),
60
65
  __metadata("design:type", Boolean)
61
- ], HSelectValue.prototype, "isMultiselect", void 0);
62
- HSelectValue = __decorate([
63
- phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.value)
64
- ], HSelectValue);
66
+ ], HSelectToggler.prototype, "isMultiselect", void 0);
67
+ HSelectToggler = __decorate([
68
+ phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.toggler)
69
+ ], HSelectToggler);
65
70
 
66
- export { HSelectValue };
67
- //# sourceMappingURL=select_value.js.map
71
+ export { HSelectToggler };
72
+ //# sourceMappingURL=select_toggler.js.map
package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.js.map → toggler/select_toggler.js.map} RENAMED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const SELECT_TOGGLER_CSS_CLASSES: {
2
+ readonly selectToggler: "select-toggler";
3
+ readonly selectTogglerValues: "select-toggler__values";
4
+ };
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js ADDED
@@ -0,0 +1,8 @@
1
+ const baseClass = 'select-toggler';
2
+ const SELECT_TOGGLER_CSS_CLASSES = {
3
+ selectToggler: baseClass,
4
+ selectTogglerValues: `${baseClass}__values`
5
+ };
6
+
7
+ export { SELECT_TOGGLER_CSS_CLASSES };
8
+ //# sourceMappingURL=select_toggler_constants.js.map
package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value_constants.js.map → toggler/select_toggler_constants.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -28,7 +28,6 @@ export declare class HSelect extends PhoenixLightLitElement {
28
28
  private _handleSearch;
29
29
  private _closeSelect;
30
30
  private _clearOptions;
31
- private _handleDropdownHidden;
32
31
  protected update(changedProperties: PropertyValues): void;
33
32
  addOption(option: SelectOption, position?: number): void;
34
33
  removeOption(optionValue: string): void;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -4,7 +4,7 @@ import { state } from 'lit/decorators';
4
4
  import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
5
5
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
6
6
  import { property } from '@lit/reactive-element/decorators.js';
7
- import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_constatns.js';
7
+ import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
8
8
  import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_constants.js';
9
9
  import { Observer } from '../../../core/classes/observer/observer.js';
10
10
  import { observe } from '../../../directives/observable_directive.js';
@@ -37,12 +37,13 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
37
37
  this._selectController.deselectOption(selectedOption);
38
38
  };
39
39
  this._updateOptionsView = (options) => {
40
- // if (options.length < Object.keys(this._$options).length) this._removeHTMLOptions(options.map((option: SelectOption) => option.value));
40
+ if (options.length < Object.keys(this._$options).length)
41
+ this._removeHTMLOptions(options.map((option) => option.value));
41
42
  options.forEach((option, index) => {
42
43
  const { selected, value } = option;
43
44
  const $option = this._$options[value];
44
45
  if (!$option) {
45
- // this._appendNewHTMLOption(option, index + 1);
46
+ this._appendNewHTMLOption(option, index + 1);
46
47
  return;
47
48
  }
48
49
  SelectControlUtils.syncHTMLOptionWithModel(option, $option);
@@ -62,14 +63,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
62
63
  this._closeSelect = () => {
63
64
  var _a;
64
65
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
66
+ this._searchValue = '';
67
+ this.opened = false;
65
68
  };
66
69
  this._clearOptions = () => {
67
70
  this._selectController.deselectOptions();
68
71
  };
69
- this._handleDropdownHidden = () => {
70
- this._searchValue = '';
71
- this.opened = false;
72
- };
73
72
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
74
73
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
75
74
  }
@@ -109,6 +108,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
109
108
  }
110
109
  _setupEvents() {
111
110
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
111
+ this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
112
112
  }
113
113
  _appendNewHTMLOption(option, position) {
114
114
  const $list = this._$optionsList.value;
@@ -148,12 +148,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
148
148
  <h-dropdown
149
149
  ${ref(this._$dropdown)}
150
150
  @dropdown.showed=${() => (this.opened = true)}
151
- @dropdown.hidden=${this._handleDropdownHidden}
151
+ @dropdown.hidden=${this._closeSelect}
152
152
  name=${this.controlName}
153
153
  >
154
- <h-dropdown-toggler name=${this.controlName} class="${SELECT_CSS_CLASSES.selectControl}">
154
+ <h-dropdown-toggler name=${this.controlName}">
155
155
  ${this.getSlot(SELECT_SLOT_NAMES.input)}
156
- <h-icon icon-name="icon-chevron-down"></h-icon>
157
156
  </h-dropdown-toggler>
158
157
 
159
158
  <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
@@ -161,31 +160,31 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
161
160
 
162
161
  ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
163
162
  ? html `<h-select-search
164
- class=${SELECT_CSS_CLASSES.selectSearch}
165
- ${ref(this._$search)}
166
- .value=${this._searchValue}
167
- @selectSearch.search=${this._handleSearch}
168
- ></h-select-search>`
163
+ class=${SELECT_CSS_CLASSES.selectSearch}
164
+ ${ref(this._$search)}
165
+ .value=${this._searchValue}
166
+ @selectSearch.search=${this._handleSearch}
167
+ ></h-select-search>`
169
168
  : nothing}
170
169
  ${this.hasSlot(SELECT_SLOT_NAMES.content)
171
170
  ? html `
172
- <h-options
173
- class=${SELECT_CSS_CLASSES.selectOptions}
174
- ${ref(this._$optionsList)}
175
- @selectOptions.clicked=${this._handleOptionClicked}
176
- >
177
- ${this.getSlot(SELECT_SLOT_NAMES.content)}
178
- </h-options>
179
- `
171
+ <h-options
172
+ class=${SELECT_CSS_CLASSES.selectOptions}
173
+ ${ref(this._$optionsList)}
174
+ @selectOptions.clicked=${this._handleOptionClicked}
175
+ >
176
+ ${this.getSlot(SELECT_SLOT_NAMES.content)}
177
+ </h-options>
178
+ `
180
179
  : nothing}
181
180
  ${!this._selectController.visibleOptionsCount ? html `<p>brak wyników dla ${this._searchValue}</p>` : nothing}
182
181
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
183
182
  ? html `
184
- <section class=${SELECT_CSS_CLASSES.selectFooter}>
185
- <button @click=${this._clearOptions}>clear</button>
186
- <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
187
- </section>
188
- `
183
+ <section class=${SELECT_CSS_CLASSES.selectFooter}>
184
+ <button @click=${this._clearOptions}>clear</button>
185
+ <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
186
+ </section>
187
+ `
189
188
  : nothing}
190
189
  </h-dropdown-content>
191
190
  </h-dropdown>
package/build/esm/packages/phoenix/src/components/form/select/select.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/select_constants.d.ts CHANGED
@@ -14,8 +14,6 @@ export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
14
14
  export declare const SELECT_CSS_CLASSES: {
15
15
  readonly select: "select";
16
16
  readonly selectOpened: "select_opened";
17
- readonly selectControl: "select__control";
18
- readonly selectInput: "select__value";
19
17
  readonly selectSearch: "select__search";
20
18
  readonly selectOptions: "select__options";
21
19
  readonly selectContent: "select__content";
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -15,8 +15,6 @@ const baseSelectClass = 'select';
15
15
  const SELECT_CSS_CLASSES = {
16
16
  select: baseSelectClass,
17
17
  selectOpened: `${baseSelectClass}_opened`,
18
- selectControl: `${baseSelectClass}__control`,
19
- selectInput: `${baseSelectClass}__value`,
20
18
  selectSearch: `${baseSelectClass}__search`,
21
19
  selectOptions: `${baseSelectClass}__options`,
22
20
  selectContent: `${baseSelectClass}__content`,
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/phoenix/src/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export { HOption } from "./components/form/select/components/option/select_option";
2
2
  export { HOptionContent } from "./components/form/select/components/option/select_option_content";
3
3
  export { HOptions } from "./components/form/select/components/select_options";
4
- export { HSelectValue } from "./components/form/select/components/value/select_value";
4
+ export { HSelectToggler } from "./components/form/select/components/toggler/select_toggler";
5
5
  export { HSelect } from "./components/form/select/select";
6
6
  export { DEFAULT_SLOT_NAME } from "./core/phoenix_light_lit_element/phoenix_light_lit_elements_constants";
7
7
  export { IPhoenixWebComponentClass } from "./global_types";
package/build/esm/packages/phoenix/src/index.js CHANGED
@@ -6,7 +6,7 @@ export { HOption } from './components/form/select/components/option/select_optio
6
6
  export { HOptionContent } from './components/form/select/components/option/select_option_content.js';
7
7
  export { HOptions } from './components/form/select/components/select_options.js';
8
8
  export { ContextConsumerController } from './core/context/context_consumer_controller.js';
9
- export { HSelectValue } from './components/form/select/components/value/select_value.js';
9
+ export { HSelectToggler } from './components/form/select/components/toggler/select_toggler.js';
10
10
  export { ContextProviderController } from './core/context/context_provider_controller.js';
11
11
  export { HPortal } from './components/portal/portal.js';
12
12
  export { HPortalTarget } from './components/portal/portal_target.js';
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.1.0-4",
5
+ "version": "1.1.0-6",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
package/build/cjs/packages/phoenix/src/components/form/select/components/value/select_value_constants.js DELETED
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const SELECT_VALUE_CSS_CLASSES = {
6
- selectValue: 'select-value'
7
- };
8
-
9
- exports.SELECT_VALUE_CSS_CLASSES = SELECT_VALUE_CSS_CLASSES;
10
- //# sourceMappingURL=select_value_constants.js.map
package/build/esm/packages/phoenix/src/components/form/select/components/value/select_value_constants.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export declare const SELECT_VALUE_CSS_CLASSES: {
2
- readonly selectValue: "select-value";
3
- };
package/build/esm/packages/phoenix/src/components/form/select/components/value/select_value_constants.js DELETED
@@ -1,6 +0,0 @@
1
- const SELECT_VALUE_CSS_CLASSES = {
2
- selectValue: 'select-value'
3
- };
4
-
5
- export { SELECT_VALUE_CSS_CLASSES };
6
- //# sourceMappingURL=select_value_constants.js.map