@shoper/phoenix_design_system 1.1.0-9 → 1.1.0

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 (75) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +7 -1
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +6 -4
  4. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map +1 -1
  7. package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js +20 -5
  8. package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map +1 -1
  9. package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.js +0 -1
  10. package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.js.map +1 -1
  11. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +1 -0
  12. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  13. package/build/cjs/packages/phoenix/src/components/form/select/components/select_close_btn.js +37 -0
  14. package/build/cjs/packages/phoenix/src/components/form/select/components/select_close_btn.js.map +1 -0
  15. package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js +2 -0
  16. package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map +1 -1
  17. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +23 -8
  18. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  19. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js +3 -1
  20. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js.map +1 -1
  21. package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +2 -1
  22. package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js.map +1 -1
  23. package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +2 -0
  24. package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js.map +1 -1
  25. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -1
  26. package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  27. package/build/cjs/packages/phoenix/src/components/form/select/select.js +88 -31
  28. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  29. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +6 -1
  30. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  31. package/build/cjs/packages/phoenix/src/directives/observable_directive.js +1 -1
  32. package/build/cjs/packages/phoenix/src/directives/observable_directive.js.map +1 -1
  33. package/build/cjs/packages/phoenix/src/index.js +7 -7
  34. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +1 -0
  35. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +7 -1
  36. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
  37. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -1
  38. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +6 -4
  39. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  40. package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js +1 -1
  41. package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js.map +1 -1
  42. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.d.ts +4 -2
  43. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js +20 -5
  44. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option.js.map +1 -1
  45. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.js +0 -1
  46. package/build/esm/packages/phoenix/src/components/form/select/components/option/select_option_content.js.map +1 -1
  47. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +1 -0
  48. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  49. package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.d.ts +1 -1
  50. package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js +34 -28
  51. package/build/esm/packages/phoenix/src/components/form/select/components/select_close_btn.js.map +1 -1
  52. package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js +2 -1
  53. package/build/esm/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map +1 -1
  54. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts +3 -0
  55. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +23 -8
  56. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  57. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.d.ts +2 -0
  58. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js +3 -1
  59. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js.map +1 -1
  60. package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js +2 -1
  61. package/build/esm/packages/phoenix/src/components/form/select/controllers/base_select_controller.js.map +1 -1
  62. package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js +2 -0
  63. package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js.map +1 -1
  64. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js +2 -1
  65. package/build/esm/packages/phoenix/src/components/form/select/model/select_option_mapper.js.map +1 -1
  66. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +8 -0
  67. package/build/esm/packages/phoenix/src/components/form/select/select.js +89 -32
  68. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  69. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +4 -0
  70. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +6 -2
  71. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  72. package/build/esm/packages/phoenix/src/directives/observable_directive.js +1 -1
  73. package/build/esm/packages/phoenix/src/directives/observable_directive.js.map +1 -1
  74. package/build/esm/packages/phoenix/src/index.js +1 -1
  75. package/package.json +1 -1
@@ -6,6 +6,8 @@ export declare class HSelect extends PhoenixLightLitElement {
6
6
  controlName: string;
7
7
  multiselect: boolean;
8
8
  opened: boolean;
9
+ offset: number;
10
+ error: boolean;
9
11
  private _searchValue;
10
12
  private _selectController;
11
13
  private _$options;
@@ -15,10 +17,14 @@ export declare class HSelect extends PhoenixLightLitElement {
15
17
  private _$dropdownContent;
16
18
  private _selectContext;
17
19
  private _listBoxController;
20
+ private _optionsObserver;
18
21
  constructor();
19
22
  updated(changedProperties: PropertyValues): void;
23
+ private _focusElementAfterSelectOpened;
20
24
  connectedCallback(): void;
25
+ attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
21
26
  firstUpdated(props: PropertyValues): void;
27
+ private _setDropdownContentWidth;
22
28
  private _setupEvents;
23
29
  private _handleOptionDeselect;
24
30
  private _updateOptionsView;
@@ -32,5 +38,7 @@ export declare class HSelect extends PhoenixLightLitElement {
32
38
  addOption(option: SelectOption, position?: number): void;
33
39
  removeOption(optionValue: string): void;
34
40
  replaceOptions(options: SelectOption[]): void;
41
+ disconnectedCallback(): void;
42
+ private _handleResize;
35
43
  protected render(): TemplateResult;
36
44
  }
@@ -5,24 +5,27 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
5
5
  import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
6
6
  import { property } from '@lit/reactive-element/decorators.js';
7
7
  import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
8
- import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_constants.js';
8
+ import { HIcon } from '../../icon/icon.js';
9
+ import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
9
10
  import { Observer } from '../../../core/classes/observer/observer.js';
10
11
  import { observe } from '../../../directives/observable_directive.js';
11
12
  import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
12
13
  import { createRef, ref } from 'lit-html/directives/ref.js';
14
+ import debounce_1 from '../../../../../../external/lodash/debounce.js';
13
15
  import { MultiSelectController } from './controllers/multi_select_controller.js';
14
16
  import { SelectController } from './controllers/select_controller.js';
15
17
  import { HSelectSearch } from './components/search/select_search.js';
16
18
  import { ListBoxKeyboardController } from '../../../controllers/list_box_controller/list_box_keyboard_controller.js';
17
- import { HIcon } from '../../icon/icon.js';
18
19
  import { SelectOptionMapper } from './model/select_option_mapper.js';
19
20
  import { SelectControlUtils } from './select_utils.js';
21
+ import { HSelectCloseBtn } from './components/select_close_btn.js';
20
22
 
21
23
  let HSelect = class HSelect extends PhoenixLightLitElement {
22
24
  constructor() {
23
25
  super();
24
26
  this.multiselect = false;
25
27
  this.opened = false;
28
+ this.offset = 2;
26
29
  this._searchValue = '';
27
30
  this._$options = {};
28
31
  this._$dropdown = createRef();
@@ -30,6 +33,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
30
33
  this._$optionsList = createRef();
31
34
  this._$dropdownContent = createRef();
32
35
  this._selectContext = new ContextProviderController(this);
36
+ this._setDropdownContentWidth = () => {
37
+ if (this._$dropdownContent.value)
38
+ this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
39
+ };
33
40
  this._handleOptionDeselect = (event) => {
34
41
  const selectedOption = this._selectController.getSelectOption(event.detail);
35
42
  if (!selectedOption)
@@ -62,6 +69,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
62
69
  };
63
70
  this._closeSelect = () => {
64
71
  var _a;
72
+ if (!this.opened)
73
+ return;
65
74
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
66
75
  this._searchValue = '';
67
76
  this.opened = false;
@@ -69,19 +78,35 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
69
78
  this._clearOptions = () => {
70
79
  this._selectController.deselectOptions();
71
80
  };
81
+ this._handleResize = debounce_1(() => {
82
+ this._closeSelect();
83
+ this._setDropdownContentWidth();
84
+ }, SELECT_RESIZE_DEBOUNCE_TIME);
72
85
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
73
86
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
74
87
  }
75
88
  updated(changedProperties) {
76
89
  super.updated(changedProperties);
77
- if (changedProperties.has('opened'))
78
- this.opened ? this.classList.add(SELECT_CSS_CLASSES.selectOpened) : this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
90
+ if (changedProperties.has('opened')) {
91
+ if (this.opened) {
92
+ this.classList.add(SELECT_CSS_CLASSES.selectOpened);
93
+ this._focusElementAfterSelectOpened();
94
+ }
95
+ else {
96
+ this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
97
+ }
98
+ }
79
99
  if (this._$optionsList.value && !this._listBoxController)
80
100
  this._listBoxController = new ListBoxKeyboardController({
81
101
  host: this,
82
102
  $list: this._$optionsList.value
83
103
  });
84
104
  }
105
+ _focusElementAfterSelectOpened() {
106
+ var _a, _b;
107
+ const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
108
+ $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
109
+ }
85
110
  connectedCallback() {
86
111
  super.connectedCallback();
87
112
  this.classList.add(SELECT_CSS_CLASSES.select);
@@ -89,7 +114,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
89
114
  this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
90
115
  this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
91
116
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
92
- this._selectController.options$.subscribe(new Observer((selectedOptions) => this._updateOptionsView(selectedOptions)));
117
+ this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
118
+ this._selectController.options$.subscribe(this._optionsObserver);
93
119
  this._$options = $options.reduce((acc, $option) => {
94
120
  if (acc[$option.value] !== undefined)
95
121
  throw Error('Select options must hava a unique values.');
@@ -98,17 +124,27 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
98
124
  [$option.value]: $option
99
125
  };
100
126
  }, {});
101
- this._selectController.options$.notify($options.map(SelectOptionMapper.toModel));
127
+ const options = $options.map(SelectOptionMapper.toModel);
128
+ this._selectController.options$.notify(options);
129
+ if (options.length)
130
+ this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
102
131
  this._setupEvents();
103
132
  }
133
+ attributeChangedCallback(name, _old, value) {
134
+ super.attributeChangedCallback(name, _old, value);
135
+ switch (name) {
136
+ case 'error':
137
+ this.error ? this.classList.add(SELECT_CSS_CLASSES.selectError) : this.classList.remove(SELECT_CSS_CLASSES.selectError);
138
+ }
139
+ }
104
140
  firstUpdated(props) {
105
141
  super.firstUpdated(props);
106
- if (this._$dropdownContent.value)
107
- this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
142
+ this._setDropdownContentWidth();
108
143
  }
109
144
  _setupEvents() {
110
145
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
111
146
  this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
147
+ window.addEventListener('resize', this._handleResize);
112
148
  }
113
149
  _appendNewHTMLOption(option, position) {
114
150
  const $list = this._$optionsList.value;
@@ -141,6 +177,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
141
177
  replaceOptions(options) {
142
178
  this._selectController.replaceOptions(options);
143
179
  }
180
+ disconnectedCallback() {
181
+ super.disconnectedCallback();
182
+ this._selectController.options$.unsubscribe(this._optionsObserver);
183
+ window.removeEventListener('resize', this._handleResize);
184
+ }
144
185
  render() {
145
186
  var _a;
146
187
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -150,41 +191,48 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
150
191
  @dropdown.showed=${() => (this.opened = true)}
151
192
  @dropdown.hidden=${this._closeSelect}
152
193
  name=${this.controlName}
194
+ offset=${this.offset}
153
195
  >
154
- <h-dropdown-toggler name=${this.controlName}">
155
- ${this.getSlot(SELECT_SLOT_NAMES.input)}
156
- </h-dropdown-toggler>
196
+ <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
157
197
 
158
198
  <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
159
- <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
199
+ <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
160
200
 
161
201
  ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
162
202
  ? html `<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>`
203
+ class=${SELECT_CSS_CLASSES.selectSearch}
204
+ ${ref(this._$search)}
205
+ .value=${this._searchValue}
206
+ @selectSearch.search=${this._handleSearch}
207
+ ></h-select-search>`
168
208
  : nothing}
169
209
  ${this.hasSlot(SELECT_SLOT_NAMES.content)
170
210
  ? html `
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
- `
211
+ <h-options
212
+ class=${SELECT_CSS_CLASSES.selectOptions}
213
+ ${ref(this._$optionsList)}
214
+ @selectOptions.clicked=${this._handleOptionClicked}
215
+ >
216
+ ${this.getSlot(SELECT_SLOT_NAMES.content)}
217
+ </h-options>
218
+ `
219
+ : nothing}
220
+ ${!this._selectController.visibleOptionsCount
221
+ ? html `<div>
222
+ <p class=${SELECT_CSS_CLASSES.selectNoResult}>
223
+ Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
224
+ </p>
225
+ </div>`
179
226
  : nothing}
180
- ${!this._selectController.visibleOptionsCount ? html `<p>brak wyników dla ${this._searchValue}</p>` : nothing}
181
227
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
182
228
  ? html `
183
- <section class=${SELECT_CSS_CLASSES.selectFooter}>
184
- <button class="btn btn_secondary" @click=${this._clearOptions}>clear</button>
185
- <h-select-close-btn class="btn btn_primary" @click=${this._closeSelect}>ok</h-select-close-btn>
186
- </section>
187
- `
229
+ <section class=${SELECT_CSS_CLASSES.selectFooter}>
230
+ <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
231
+ <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
232
+ >ok</h-select-close-btn
233
+ >
234
+ </section>
235
+ `
188
236
  : nothing}
189
237
  </h-dropdown-content>
190
238
  </h-dropdown>
@@ -195,7 +243,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
195
243
  };
196
244
  HSelect._components = {
197
245
  search: HSelectSearch,
198
- icon: HIcon
246
+ icon: HIcon,
247
+ closeBtn: HSelectCloseBtn
199
248
  };
200
249
  __decorate([
201
250
  property({ type: String }),
@@ -209,6 +258,14 @@ __decorate([
209
258
  property({ type: Boolean }),
210
259
  __metadata("design:type", Boolean)
211
260
  ], HSelect.prototype, "opened", void 0);
261
+ __decorate([
262
+ property({ type: Number }),
263
+ __metadata("design:type", Number)
264
+ ], HSelect.prototype, "offset", void 0);
265
+ __decorate([
266
+ property({ type: Boolean }),
267
+ __metadata("design:type", Boolean)
268
+ ], HSelect.prototype, "error", void 0);
212
269
  __decorate([
213
270
  state(),
214
271
  __metadata("design:type", String)
@@ -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;"}
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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -11,11 +11,15 @@ export declare const SELECT_EVENT_NAMES: {
11
11
  readonly deselectOption: "selectOption.deselect";
12
12
  };
13
13
  export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
14
+ export declare const SELECT_RESIZE_DEBOUNCE_TIME = 100;
14
15
  export declare const SELECT_CSS_CLASSES: {
15
16
  readonly select: "select";
16
17
  readonly selectOpened: "select_opened";
18
+ readonly selectError: "select_error";
17
19
  readonly selectSearch: "select__search";
18
20
  readonly selectOptions: "select__options";
19
21
  readonly selectContent: "select__content";
20
22
  readonly selectFooter: "select__footer";
23
+ readonly selectNoResult: "select__no-result";
24
+ readonly selectSearchedPhrase: "select__searched-phrase";
21
25
  };
@@ -11,15 +11,19 @@ const SELECT_EVENT_NAMES = {
11
11
  deselectOption: 'selectOption.deselect'
12
12
  };
13
13
  const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
14
+ const SELECT_RESIZE_DEBOUNCE_TIME = 100;
14
15
  const baseSelectClass = 'select';
15
16
  const SELECT_CSS_CLASSES = {
16
17
  select: baseSelectClass,
17
18
  selectOpened: `${baseSelectClass}_opened`,
19
+ selectError: `${baseSelectClass}_error`,
18
20
  selectSearch: `${baseSelectClass}__search`,
19
21
  selectOptions: `${baseSelectClass}__options`,
20
22
  selectContent: `${baseSelectClass}__content`,
21
- selectFooter: `${baseSelectClass}__footer`
23
+ selectFooter: `${baseSelectClass}__footer`,
24
+ selectNoResult: `${baseSelectClass}__no-result`,
25
+ selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
22
26
  };
23
27
 
24
- export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };
28
+ export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
25
29
  //# sourceMappingURL=select_constants.js.map
@@ -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;"}
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,7 +1,7 @@
1
1
  import { noChange } from 'lit';
2
- import { Observer } from '../core/classes/observer/observer.js';
3
2
  import { directive as e } from '../../../../external/lit/external/lit-html/directive.js';
4
3
  import { AsyncDirective as c } from '../../../../external/lit/external/lit-html/async-directive.js';
4
+ import { Observer } from '../core/classes/observer/observer.js';
5
5
 
6
6
  class ObserveDirective extends c {
7
7
  render(observable, render) {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -2,6 +2,7 @@ export { DEFAULT_SLOT_NAME } from './core/phoenix_light_lit_element/phoenix_ligh
2
2
  export { PhoenixLightLitElement } from './core/phoenix_light_lit_element/phoenix_light_lit_element.js';
3
3
  export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
4
4
  export { BtnController } from './controllers/btn_controller/btn_controller.js';
5
+ export { HIcon } from './components/icon/icon.js';
5
6
  export { HOption } from './components/form/select/components/option/select_option.js';
6
7
  export { HOptionContent } from './components/form/select/components/option/select_option_content.js';
7
8
  export { HOptions } from './components/form/select/components/select_options.js';
@@ -17,7 +18,6 @@ export { ToggleElementAriaController } from './controllers/toggle_element_aria_c
17
18
  export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
18
19
  export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
19
20
  export { HDropdown } from './components/dropdown/dropdown.js';
20
- export { HIcon } from './components/icon/icon.js';
21
21
  export { HSelect } from './components/form/select/select.js';
22
22
  export { HModal } from './components/modal/modal.js';
23
23
  export { HModalOpener } from './components/modal/modal_opener.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-9",
5
+ "version": "1.1.0",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",