@shoper/phoenix_design_system 1.7.11 → 1.8.0-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/select.js +52 -20
  2. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +1 -0
  4. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  5. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +5 -0
  6. package/build/esm/packages/phoenix/src/components/form/select/select.js +52 -20
  7. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +1 -0
  9. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +1 -0
  10. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  11. package/package.json +2 -2
package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -27,6 +27,7 @@ var multi_select_controller = require('./controllers/multi_select_controller.js'
27
27
  var select_utils = require('./select_utils.js');
28
28
  var select_controller = require('./controllers/select_controller.js');
29
29
  var select_option_mapper = require('./model/select_option_mapper.js');
30
+ var repeat = require('lit/directives/repeat');
30
31
 
31
32
  exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
32
33
  constructor() {
@@ -35,7 +36,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
35
36
  this.multiple = false;
36
37
  this.opened = false;
37
38
  this.offset = 2;
39
+ this.searchDisabled = false;
38
40
  this.type = select_constants.SELECT_TYPES.select;
41
+ this.optionsList = [];
39
42
  this._searchValue = '';
40
43
  this._$options = {};
41
44
  this._$dropdown = ref_js.createRef();
@@ -156,14 +159,30 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
156
159
  connectedCallback() {
157
160
  super.connectedCallback();
158
161
  this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
162
+ if (!this.searchDisabled) {
163
+ this.classList.add(select_constants.SELECT_CSS_CLASSES.selectWithSearch);
164
+ }
159
165
  this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
160
166
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
161
167
  this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
162
- const $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
163
- ? this.getSlot(select_constants.SELECT_SLOT_NAMES.content)
164
- .map((litElement) => litElement.values[0])
165
- .filter((element) => element instanceof select_option.HOption)
166
- : Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
168
+ let $options;
169
+ if (this.optionsList) {
170
+ $options = this.optionsList.map(option => {
171
+ const $option = document.createElement('h-option');
172
+ $option.value = option.value;
173
+ const $optionContent = document.createElement('h-option-content');
174
+ $optionContent.textContent = option.content;
175
+ $option.appendChild($optionContent);
176
+ return $option;
177
+ });
178
+ }
179
+ else {
180
+ $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
181
+ ? this.getSlot(select_constants.SELECT_SLOT_NAMES.content)
182
+ .map((litElement) => litElement.values[0])
183
+ .filter((element) => element instanceof select_option.HOption)
184
+ : Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
185
+ }
167
186
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
168
187
  this._selectController.options$.subscribe(this._optionsObserver);
169
188
  this._$options = $options.reduce((acc, $option) => {
@@ -256,6 +275,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
256
275
  render() {
257
276
  var _a;
258
277
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
278
+ const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
259
279
  return lit.html `
260
280
  <h-dropdown
261
281
  ${ref_js.ref(this._$dropdown)}
@@ -279,7 +299,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
279
299
 
280
300
  <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
281
301
 
282
- ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
302
+ ${isSearchEnabled
283
303
  ? lit.html ` <h-select-search
284
304
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
285
305
  ${ref_js.ref(this._$search)}
@@ -287,20 +307,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
287
307
  @selectSearch.search=${this._handleSearch}
288
308
  ></h-select-search>`
289
309
  : lit.nothing}
290
- ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
291
- ? lit.html `
292
- <h-options
293
- class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
294
- ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
295
- : ''}"
296
- ${ref_js.ref(this._$optionsList)}
297
- @selectOptions.clicked=${this._handleOptionClicked}
298
- @selectOptions.updated=${this._handleOptionUpdated}
299
- >
300
- ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
301
- </h-options>
302
- `
303
- : lit.nothing}
310
+
311
+ <h-options
312
+ class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
313
+ ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
314
+ : ''}"
315
+ ${ref_js.ref(this._$optionsList)}
316
+ @selectOptions.clicked=${this._handleOptionClicked}
317
+ @selectOptions.updated=${this._handleOptionUpdated}
318
+ >
319
+ ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
320
+
321
+ ${repeat.repeat(this.optionsList, (option) => option.value, (option) => {
322
+ return lit.html ` <h-option value=${option.value}>
323
+ <h-option-content>${option.content}</h-option-content>
324
+ </h-option>`;
325
+ })}
326
+ </h-options>
327
+
304
328
  ${this._searchNoResult()
305
329
  ? lit.html ` <div>
306
330
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
@@ -362,6 +386,10 @@ tslib_es6.__decorate([
362
386
  decorators_js.property({ type: Boolean }),
363
387
  tslib_es6.__metadata("design:type", Boolean)
364
388
  ], exports.HSelect.prototype, "disabled", void 0);
389
+ tslib_es6.__decorate([
390
+ decorators_js.property({ type: Boolean, attribute: 'search-disabled' }),
391
+ tslib_es6.__metadata("design:type", Boolean)
392
+ ], exports.HSelect.prototype, "searchDisabled", void 0);
365
393
  tslib_es6.__decorate([
366
394
  decorators_js.property({ type: String }),
367
395
  tslib_es6.__metadata("design:type", String)
@@ -370,6 +398,10 @@ tslib_es6.__decorate([
370
398
  decorators_js.property({ type: Boolean }),
371
399
  tslib_es6.__metadata("design:type", Boolean)
372
400
  ], exports.HSelect.prototype, "required", void 0);
401
+ tslib_es6.__decorate([
402
+ decorators_js.property({ type: Array }),
403
+ tslib_es6.__metadata("design:type", Array)
404
+ ], exports.HSelect.prototype, "optionsList", void 0);
373
405
  tslib_es6.__decorate([
374
406
  decorators.state(),
375
407
  tslib_es6.__metadata("design:type", String)
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -25,6 +25,7 @@ const SELECT_CSS_CLASSES = {
25
25
  selectOpened: `${baseSelectClass}_opened`,
26
26
  selectError: `${baseSelectClass}_error`,
27
27
  selectDisabled: `${baseSelectClass}_disabled`,
28
+ selectWithSearch: `${baseSelectClass}_with-search`,
28
29
  selectSearch: `${baseSelectClass}__search`,
29
30
  selectOptions: `${baseSelectClass}__options`,
30
31
  selectOptionsEmpty: `${baseSelectClass}__options_empty`,
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;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;"}
package/build/esm/packages/phoenix/src/components/form/select/select.d.ts CHANGED
@@ -12,8 +12,13 @@ export declare class HSelect extends PhoenixLightLitElement {
12
12
  offset: number;
13
13
  error: boolean;
14
14
  disabled: boolean;
15
+ searchDisabled: boolean;
15
16
  type: TSelectType;
16
17
  required: boolean;
18
+ optionsList: {
19
+ value: string;
20
+ content: string;
21
+ }[];
17
22
  get selectedIndex(): number;
18
23
  set selectedIndex(index: number);
19
24
  get selectedOptions(): HOption[];
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -23,6 +23,7 @@ import { MultiSelectController } from './controllers/multi_select_controller.js'
23
23
  import { SelectControlUtils } from './select_utils.js';
24
24
  import { SelectController } from './controllers/select_controller.js';
25
25
  import { SelectOptionMapper } from './model/select_option_mapper.js';
26
+ import { repeat } from 'lit/directives/repeat';
26
27
 
27
28
  let HSelect = class HSelect extends PhoenixLightLitElement {
28
29
  constructor() {
@@ -31,7 +32,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
31
32
  this.multiple = false;
32
33
  this.opened = false;
33
34
  this.offset = 2;
35
+ this.searchDisabled = false;
34
36
  this.type = SELECT_TYPES.select;
37
+ this.optionsList = [];
35
38
  this._searchValue = '';
36
39
  this._$options = {};
37
40
  this._$dropdown = createRef();
@@ -152,14 +155,30 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
152
155
  connectedCallback() {
153
156
  super.connectedCallback();
154
157
  this.classList.add(SELECT_CSS_CLASSES.select);
158
+ if (!this.searchDisabled) {
159
+ this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
160
+ }
155
161
  this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
156
162
  this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
157
163
  this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
158
- const $options = this.hasSlot(SELECT_SLOT_NAMES.content)
159
- ? this.getSlot(SELECT_SLOT_NAMES.content)
160
- .map((litElement) => litElement.values[0])
161
- .filter((element) => element instanceof HOption)
162
- : Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
164
+ let $options;
165
+ if (this.optionsList) {
166
+ $options = this.optionsList.map(option => {
167
+ const $option = document.createElement('h-option');
168
+ $option.value = option.value;
169
+ const $optionContent = document.createElement('h-option-content');
170
+ $optionContent.textContent = option.content;
171
+ $option.appendChild($optionContent);
172
+ return $option;
173
+ });
174
+ }
175
+ else {
176
+ $options = this.hasSlot(SELECT_SLOT_NAMES.content)
177
+ ? this.getSlot(SELECT_SLOT_NAMES.content)
178
+ .map((litElement) => litElement.values[0])
179
+ .filter((element) => element instanceof HOption)
180
+ : Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
181
+ }
163
182
  this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
164
183
  this._selectController.options$.subscribe(this._optionsObserver);
165
184
  this._$options = $options.reduce((acc, $option) => {
@@ -252,6 +271,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
252
271
  render() {
253
272
  var _a;
254
273
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
274
+ const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
255
275
  return html `
256
276
  <h-dropdown
257
277
  ${ref(this._$dropdown)}
@@ -275,7 +295,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
275
295
 
276
296
  <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
277
297
 
278
- ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
298
+ ${isSearchEnabled
279
299
  ? html ` <h-select-search
280
300
  class=${SELECT_CSS_CLASSES.selectSearch}
281
301
  ${ref(this._$search)}
@@ -283,20 +303,24 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
283
303
  @selectSearch.search=${this._handleSearch}
284
304
  ></h-select-search>`
285
305
  : nothing}
286
- ${this.hasSlot(SELECT_SLOT_NAMES.content)
287
- ? html `
288
- <h-options
289
- class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
290
- ? SELECT_CSS_CLASSES.selectOptionsEmpty
291
- : ''}"
292
- ${ref(this._$optionsList)}
293
- @selectOptions.clicked=${this._handleOptionClicked}
294
- @selectOptions.updated=${this._handleOptionUpdated}
295
- >
296
- ${this.getSlot(SELECT_SLOT_NAMES.content)}
297
- </h-options>
298
- `
299
- : nothing}
306
+
307
+ <h-options
308
+ class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
309
+ ? SELECT_CSS_CLASSES.selectOptionsEmpty
310
+ : ''}"
311
+ ${ref(this._$optionsList)}
312
+ @selectOptions.clicked=${this._handleOptionClicked}
313
+ @selectOptions.updated=${this._handleOptionUpdated}
314
+ >
315
+ ${this.getSlot(SELECT_SLOT_NAMES.content)}
316
+
317
+ ${repeat(this.optionsList, (option) => option.value, (option) => {
318
+ return html ` <h-option value=${option.value}>
319
+ <h-option-content>${option.content}</h-option-content>
320
+ </h-option>`;
321
+ })}
322
+ </h-options>
323
+
300
324
  ${this._searchNoResult()
301
325
  ? html ` <div>
302
326
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
@@ -358,6 +382,10 @@ __decorate([
358
382
  property({ type: Boolean }),
359
383
  __metadata("design:type", Boolean)
360
384
  ], HSelect.prototype, "disabled", void 0);
385
+ __decorate([
386
+ property({ type: Boolean, attribute: 'search-disabled' }),
387
+ __metadata("design:type", Boolean)
388
+ ], HSelect.prototype, "searchDisabled", void 0);
361
389
  __decorate([
362
390
  property({ type: String }),
363
391
  __metadata("design:type", String)
@@ -366,6 +394,10 @@ __decorate([
366
394
  property({ type: Boolean }),
367
395
  __metadata("design:type", Boolean)
368
396
  ], HSelect.prototype, "required", void 0);
397
+ __decorate([
398
+ property({ type: Array }),
399
+ __metadata("design:type", Array)
400
+ ], HSelect.prototype, "optionsList", void 0);
369
401
  __decorate([
370
402
  state(),
371
403
  __metadata("design:type", String)
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -21,6 +21,7 @@ export declare const SELECT_CSS_CLASSES: {
21
21
  readonly selectOpened: "select_opened";
22
22
  readonly selectError: "select_error";
23
23
  readonly selectDisabled: "select_disabled";
24
+ readonly selectWithSearch: "select_with-search";
24
25
  readonly selectSearch: "select__search";
25
26
  readonly selectOptions: "select__options";
26
27
  readonly selectOptionsEmpty: "select__options_empty";
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -21,6 +21,7 @@ const SELECT_CSS_CLASSES = {
21
21
  selectOpened: `${baseSelectClass}_opened`,
22
22
  selectError: `${baseSelectClass}_error`,
23
23
  selectDisabled: `${baseSelectClass}_disabled`,
24
+ selectWithSearch: `${baseSelectClass}_with-search`,
24
25
  selectSearch: `${baseSelectClass}__search`,
25
26
  selectOptions: `${baseSelectClass}__options`,
26
27
  selectOptionsEmpty: `${baseSelectClass}__options_empty`,
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;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;"}
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.7.11",
5
+ "version": "1.8.0-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "@splidejs/splide": "^4.0.7"
31
31
  },
32
32
  "devDependencies": {
33
- "@dreamcommerce/utilities": "^1.13.0",
33
+ "@dreamcommerce/utilities": "^1.15.0",
34
34
  "@shoper/jest_config": "^0.0.0",
35
35
  "@shoper/tsconfig": "^0.0.0",
36
36
  "@splidejs/splide": "4.0.7",