@shoper/phoenix_design_system 1.7.11 → 1.8.0-1

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 +45 -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 +45 -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,23 @@ 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;
171
+ }
172
+ else {
173
+ $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
174
+ ? this.getSlot(select_constants.SELECT_SLOT_NAMES.content)
175
+ .map((litElement) => litElement.values[0])
176
+ .filter((element) => element instanceof select_option.HOption)
177
+ : Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
178
+ }
167
179
  this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
168
180
  this._selectController.options$.subscribe(this._optionsObserver);
169
181
  this._$options = $options.reduce((acc, $option) => {
@@ -256,6 +268,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
256
268
  render() {
257
269
  var _a;
258
270
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
271
+ const isSearchEnabled = !this.searchDisabled && options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
259
272
  return lit.html `
260
273
  <h-dropdown
261
274
  ${ref_js.ref(this._$dropdown)}
@@ -279,7 +292,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
279
292
 
280
293
  <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
281
294
 
282
- ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
295
+ ${isSearchEnabled
283
296
  ? lit.html ` <h-select-search
284
297
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
285
298
  ${ref_js.ref(this._$search)}
@@ -287,20 +300,24 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
287
300
  @selectSearch.search=${this._handleSearch}
288
301
  ></h-select-search>`
289
302
  : 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}
303
+
304
+ <h-options
305
+ class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
306
+ ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
307
+ : ''}"
308
+ ${ref_js.ref(this._$optionsList)}
309
+ @selectOptions.clicked=${this._handleOptionClicked}
310
+ @selectOptions.updated=${this._handleOptionUpdated}
311
+ >
312
+ ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
313
+
314
+ ${repeat.repeat(this.optionsList, (option) => option.value, (option) => {
315
+ return lit.html ` <h-option value=${option.value}>
316
+ <h-option-content>${option.content}</h-option-content>
317
+ </h-option>`;
318
+ })}
319
+ </h-options>
320
+
304
321
  ${this._searchNoResult()
305
322
  ? lit.html ` <div>
306
323
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
@@ -362,6 +379,10 @@ tslib_es6.__decorate([
362
379
  decorators_js.property({ type: Boolean }),
363
380
  tslib_es6.__metadata("design:type", Boolean)
364
381
  ], exports.HSelect.prototype, "disabled", void 0);
382
+ tslib_es6.__decorate([
383
+ decorators_js.property({ type: Boolean, attribute: 'search-disabled' }),
384
+ tslib_es6.__metadata("design:type", Boolean)
385
+ ], exports.HSelect.prototype, "searchDisabled", void 0);
365
386
  tslib_es6.__decorate([
366
387
  decorators_js.property({ type: String }),
367
388
  tslib_es6.__metadata("design:type", String)
@@ -370,6 +391,10 @@ tslib_es6.__decorate([
370
391
  decorators_js.property({ type: Boolean }),
371
392
  tslib_es6.__metadata("design:type", Boolean)
372
393
  ], exports.HSelect.prototype, "required", void 0);
394
+ tslib_es6.__decorate([
395
+ decorators_js.property({ type: Array }),
396
+ tslib_es6.__metadata("design:type", Array)
397
+ ], exports.HSelect.prototype, "optionsList", void 0);
373
398
  tslib_es6.__decorate([
374
399
  decorators.state(),
375
400
  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;"}
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,23 @@ 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;
167
+ }
168
+ else {
169
+ $options = this.hasSlot(SELECT_SLOT_NAMES.content)
170
+ ? this.getSlot(SELECT_SLOT_NAMES.content)
171
+ .map((litElement) => litElement.values[0])
172
+ .filter((element) => element instanceof HOption)
173
+ : Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
174
+ }
163
175
  this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
164
176
  this._selectController.options$.subscribe(this._optionsObserver);
165
177
  this._$options = $options.reduce((acc, $option) => {
@@ -252,6 +264,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
252
264
  render() {
253
265
  var _a;
254
266
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
267
+ const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
255
268
  return html `
256
269
  <h-dropdown
257
270
  ${ref(this._$dropdown)}
@@ -275,7 +288,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
275
288
 
276
289
  <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
277
290
 
278
- ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
291
+ ${isSearchEnabled
279
292
  ? html ` <h-select-search
280
293
  class=${SELECT_CSS_CLASSES.selectSearch}
281
294
  ${ref(this._$search)}
@@ -283,20 +296,24 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
283
296
  @selectSearch.search=${this._handleSearch}
284
297
  ></h-select-search>`
285
298
  : 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}
299
+
300
+ <h-options
301
+ class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
302
+ ? SELECT_CSS_CLASSES.selectOptionsEmpty
303
+ : ''}"
304
+ ${ref(this._$optionsList)}
305
+ @selectOptions.clicked=${this._handleOptionClicked}
306
+ @selectOptions.updated=${this._handleOptionUpdated}
307
+ >
308
+ ${this.getSlot(SELECT_SLOT_NAMES.content)}
309
+
310
+ ${repeat(this.optionsList, (option) => option.value, (option) => {
311
+ return html ` <h-option value=${option.value}>
312
+ <h-option-content>${option.content}</h-option-content>
313
+ </h-option>`;
314
+ })}
315
+ </h-options>
316
+
300
317
  ${this._searchNoResult()
301
318
  ? html ` <div>
302
319
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
@@ -358,6 +375,10 @@ __decorate([
358
375
  property({ type: Boolean }),
359
376
  __metadata("design:type", Boolean)
360
377
  ], HSelect.prototype, "disabled", void 0);
378
+ __decorate([
379
+ property({ type: Boolean, attribute: 'search-disabled' }),
380
+ __metadata("design:type", Boolean)
381
+ ], HSelect.prototype, "searchDisabled", void 0);
361
382
  __decorate([
362
383
  property({ type: String }),
363
384
  __metadata("design:type", String)
@@ -366,6 +387,10 @@ __decorate([
366
387
  property({ type: Boolean }),
367
388
  __metadata("design:type", Boolean)
368
389
  ], HSelect.prototype, "required", void 0);
390
+ __decorate([
391
+ property({ type: Array }),
392
+ __metadata("design:type", Array)
393
+ ], HSelect.prototype, "optionsList", void 0);
369
394
  __decorate([
370
395
  state(),
371
396
  __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;"}
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-1",
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",