@shoper/phoenix_design_system 1.1.4-15 → 1.1.4-17

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 (18) hide show
  1. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +2 -2
  2. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js +3 -5
  3. package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js +18 -8
  5. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  6. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +1 -0
  7. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +3 -3
  9. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts +1 -1
  10. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js +3 -5
  11. package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map +1 -1
  12. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -0
  13. package/build/esm/packages/phoenix/src/components/form/select/select.js +18 -8
  14. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  15. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +1 -0
  16. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +1 -0
  17. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  18. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -273,9 +273,9 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
273
273
  return this._findRootDropdown(element.parentElement || document.body);
274
274
  }
275
275
  _setupListeners() {
276
+ // this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
277
+ // this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
276
278
  var _a;
277
- this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
278
- this.addEventListener(relative_position_controller_constants.RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
279
279
  if (!this.toggleOnHover)
280
280
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(dropdown_constants.DROPDOWN_EVENTS.toggle, this.toggle);
281
281
  document.addEventListener(dropdown_constants.DROPDOWN_EVENTS.hide, this.hide);
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -11,11 +11,8 @@ var dropdown_constants = require('./dropdown_constants.js');
11
11
 
12
12
  exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
13
13
  constructor() {
14
- super(...arguments);
14
+ super();
15
15
  this.name = '';
16
- }
17
- connectedCallback() {
18
- super.connectedCallback();
19
16
  this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
20
17
  this.setAttribute('role', 'menu');
21
18
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
@@ -33,6 +30,7 @@ tslib_es6.__decorate([
33
30
  tslib_es6.__metadata("design:type", Object)
34
31
  ], exports.HDropdownContent.prototype, "name", void 0);
35
32
  exports.HDropdownContent = tslib_es6.__decorate([
36
- phoenix_custom_element.phoenixCustomElement('h-dropdown-content')
33
+ phoenix_custom_element.phoenixCustomElement('h-dropdown-content'),
34
+ tslib_es6.__metadata("design:paramtypes", [])
37
35
  ], exports.HDropdownContent);
38
36
  //# sourceMappingURL=dropdown_content.js.map
package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;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.js CHANGED
@@ -74,21 +74,22 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
74
74
  if (!this.multiselect)
75
75
  this._closeSelect();
76
76
  };
77
+ this._handleDropdownHidden = () => {
78
+ this._searchValue = '';
79
+ this.opened = false;
80
+ };
77
81
  this._closeSelect = () => {
78
82
  var _a;
79
83
  if (!this.opened)
80
84
  return;
81
85
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
82
- this._searchValue = '';
83
- this.opened = false;
84
86
  };
85
87
  this._clearOptions = () => {
86
88
  this._selectController.deselectOptions();
87
89
  };
88
90
  this._handleResize = debounce['default'](() => {
89
- const documentWidth = document.documentElement.clientWidth;
90
91
  this._closeSelect();
91
- this._setDropdownContentWidth(documentWidth < global_constants.BREAKPOINTS.xs ? documentWidth : this.getBoundingClientRect().width);
92
+ this._setDropdownContentWidth(this._getDropdownContentWidth());
92
93
  }, select_constants.SELECT_RESIZE_DEBOUNCE_TIME);
93
94
  const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
94
95
  $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
@@ -151,7 +152,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
151
152
  }
152
153
  firstUpdated(props) {
153
154
  super.firstUpdated(props);
154
- this._setDropdownContentWidth(this.getBoundingClientRect().width);
155
+ this._setDropdownContentWidth(this._getDropdownContentWidth());
155
156
  }
156
157
  _setupEvents() {
157
158
  this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
@@ -194,9 +195,16 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
194
195
  this._selectController.options$.unsubscribe(this._optionsObserver);
195
196
  window.removeEventListener('resize', this._handleResize);
196
197
  }
198
+ _getDropdownContentWidth() {
199
+ const documentWidth = document.documentElement.clientWidth;
200
+ return documentWidth < global_constants.BREAKPOINTS.xs ? documentWidth : this.getBoundingClientRect().width;
201
+ }
197
202
  _getClonedPlaceholderElement() {
198
203
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
199
204
  }
205
+ _searchNoResult() {
206
+ return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
207
+ }
200
208
  render() {
201
209
  var _a;
202
210
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -204,7 +212,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
204
212
  <h-dropdown
205
213
  ${ref_js.ref(this._$dropdown)}
206
214
  @dropdown.showed=${() => (this.opened = true)}
207
- @dropdown.hidden=${this._closeSelect}
215
+ @dropdown.hidden=${this._handleDropdownHidden}
208
216
  name=${this.controlName}
209
217
  offset=${this.offset}
210
218
  >
@@ -229,7 +237,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
229
237
  ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
230
238
  ? lit.html `
231
239
  <h-options
232
- class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
240
+ class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
241
+ ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
242
+ : ''}"
233
243
  ${ref_js.ref(this._$optionsList)}
234
244
  @selectOptions.clicked=${this._handleOptionClicked}
235
245
  >
@@ -237,7 +247,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
237
247
  </h-options>
238
248
  `
239
249
  : lit.nothing}
240
- ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
250
+ ${this._searchNoResult()
241
251
  ? lit.html ` <div>
242
252
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
243
253
  Brak wyników dla: <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
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,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;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,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;AACA;AACA;AACA;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
@@ -24,6 +24,7 @@ const SELECT_CSS_CLASSES = {
24
24
  selectDisabled: `${baseSelectClass}_disabled`,
25
25
  selectSearch: `${baseSelectClass}__search`,
26
26
  selectOptions: `${baseSelectClass}__options`,
27
+ selectOptionsEmpty: `${baseSelectClass}__options_empty`,
27
28
  selectContent: `${baseSelectClass}__content`,
28
29
  selectFooter: `${baseSelectClass}__footer`,
29
30
  selectNoResult: `${baseSelectClass}__no-result`,
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js CHANGED
@@ -8,7 +8,7 @@ import { KeystrokesController } from '../../controllers/keystrokes_controller/ke
8
8
  import { html } from 'lit-html';
9
9
  import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
10
10
  import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
11
- import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
11
+ import { DIRECTIONS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
12
12
  import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
13
13
  import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
14
14
  import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
@@ -269,9 +269,9 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
269
269
  return this._findRootDropdown(element.parentElement || document.body);
270
270
  }
271
271
  _setupListeners() {
272
+ // this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
273
+ // this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
272
274
  var _a;
273
- this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.disabledPositioning, this._handleDisabledPositioning);
274
- this.addEventListener(RELATIVE_POSITION_CONTROLLER_EVENTS.enabledPositioning, this._handleEnabledPositioning);
275
275
  if (!this.toggleOnHover)
276
276
  (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.addEventListener(DROPDOWN_EVENTS.toggle, this.toggle);
277
277
  document.addEventListener(DROPDOWN_EVENTS.hide, this.hide);
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.d.ts CHANGED
@@ -2,6 +2,6 @@ import { TemplateResult } from 'lit';
2
2
  import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
3
3
  export declare class HDropdownContent extends PhoenixLightLitElement {
4
4
  name: string;
5
- connectedCallback(): void;
5
+ constructor();
6
6
  protected render(): TemplateResult;
7
7
  }
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js CHANGED
@@ -7,11 +7,8 @@ import { DROPDOWN_CONTENT_CSS_CLASS } from './dropdown_constants.js';
7
7
 
8
8
  let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
9
9
  constructor() {
10
- super(...arguments);
10
+ super();
11
11
  this.name = '';
12
- }
13
- connectedCallback() {
14
- super.connectedCallback();
15
12
  this.classList.add(DROPDOWN_CONTENT_CSS_CLASS);
16
13
  this.setAttribute('role', 'menu');
17
14
  this.slot = this.hasAttribute('slot') ? this.slot : 'content';
@@ -29,7 +26,8 @@ __decorate([
29
26
  __metadata("design:type", Object)
30
27
  ], HDropdownContent.prototype, "name", void 0);
31
28
  HDropdownContent = __decorate([
32
- phoenixCustomElement('h-dropdown-content')
29
+ phoenixCustomElement('h-dropdown-content'),
30
+ __metadata("design:paramtypes", [])
33
31
  ], HDropdownContent);
34
32
 
35
33
  export { HDropdownContent };
package/build/esm/packages/phoenix/src/components/dropdown/dropdown_content.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -34,6 +34,7 @@ export declare class HSelect extends PhoenixLightLitElement {
34
34
  private _removeHTMLOptions;
35
35
  private _handleOptionClicked;
36
36
  private _handleSearch;
37
+ private _handleDropdownHidden;
37
38
  private _closeSelect;
38
39
  private _clearOptions;
39
40
  protected update(changedProperties: PropertyValues): void;
@@ -42,6 +43,8 @@ export declare class HSelect extends PhoenixLightLitElement {
42
43
  replaceOptions(options: SelectOption[]): void;
43
44
  disconnectedCallback(): void;
44
45
  private _handleResize;
46
+ private _getDropdownContentWidth;
45
47
  private _getClonedPlaceholderElement;
48
+ private _searchNoResult;
46
49
  protected render(): TemplateResult;
47
50
  }
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -70,21 +70,22 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
70
70
  if (!this.multiselect)
71
71
  this._closeSelect();
72
72
  };
73
+ this._handleDropdownHidden = () => {
74
+ this._searchValue = '';
75
+ this.opened = false;
76
+ };
73
77
  this._closeSelect = () => {
74
78
  var _a;
75
79
  if (!this.opened)
76
80
  return;
77
81
  (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
78
- this._searchValue = '';
79
- this.opened = false;
80
82
  };
81
83
  this._clearOptions = () => {
82
84
  this._selectController.deselectOptions();
83
85
  };
84
86
  this._handleResize = debounce_1(() => {
85
- const documentWidth = document.documentElement.clientWidth;
86
87
  this._closeSelect();
87
- this._setDropdownContentWidth(documentWidth < BREAKPOINTS.xs ? documentWidth : this.getBoundingClientRect().width);
88
+ this._setDropdownContentWidth(this._getDropdownContentWidth());
88
89
  }, SELECT_RESIZE_DEBOUNCE_TIME);
89
90
  const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
90
91
  $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
@@ -147,7 +148,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
147
148
  }
148
149
  firstUpdated(props) {
149
150
  super.firstUpdated(props);
150
- this._setDropdownContentWidth(this.getBoundingClientRect().width);
151
+ this._setDropdownContentWidth(this._getDropdownContentWidth());
151
152
  }
152
153
  _setupEvents() {
153
154
  this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
@@ -190,9 +191,16 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
190
191
  this._selectController.options$.unsubscribe(this._optionsObserver);
191
192
  window.removeEventListener('resize', this._handleResize);
192
193
  }
194
+ _getDropdownContentWidth() {
195
+ const documentWidth = document.documentElement.clientWidth;
196
+ return documentWidth < BREAKPOINTS.xs ? documentWidth : this.getBoundingClientRect().width;
197
+ }
193
198
  _getClonedPlaceholderElement() {
194
199
  return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
195
200
  }
201
+ _searchNoResult() {
202
+ return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
203
+ }
196
204
  render() {
197
205
  var _a;
198
206
  const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -200,7 +208,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
200
208
  <h-dropdown
201
209
  ${ref(this._$dropdown)}
202
210
  @dropdown.showed=${() => (this.opened = true)}
203
- @dropdown.hidden=${this._closeSelect}
211
+ @dropdown.hidden=${this._handleDropdownHidden}
204
212
  name=${this.controlName}
205
213
  offset=${this.offset}
206
214
  >
@@ -225,7 +233,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
225
233
  ${this.hasSlot(SELECT_SLOT_NAMES.content)
226
234
  ? html `
227
235
  <h-options
228
- class=${SELECT_CSS_CLASSES.selectOptions}
236
+ class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
237
+ ? SELECT_CSS_CLASSES.selectOptionsEmpty
238
+ : ''}"
229
239
  ${ref(this._$optionsList)}
230
240
  @selectOptions.clicked=${this._handleOptionClicked}
231
241
  >
@@ -233,7 +243,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
233
243
  </h-options>
234
244
  `
235
245
  : nothing}
236
- ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
246
+ ${this._searchNoResult()
237
247
  ? html ` <div>
238
248
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
239
249
  Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
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,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;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,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;AACA;AACA;AACA;AACA;AACA;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
@@ -19,6 +19,7 @@ export declare const SELECT_CSS_CLASSES: {
19
19
  readonly selectDisabled: "select_disabled";
20
20
  readonly selectSearch: "select__search";
21
21
  readonly selectOptions: "select__options";
22
+ readonly selectOptionsEmpty: "select__options_empty";
22
23
  readonly selectContent: "select__content";
23
24
  readonly selectFooter: "select__footer";
24
25
  readonly selectNoResult: "select__no-result";
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -20,6 +20,7 @@ const SELECT_CSS_CLASSES = {
20
20
  selectDisabled: `${baseSelectClass}_disabled`,
21
21
  selectSearch: `${baseSelectClass}__search`,
22
22
  selectOptions: `${baseSelectClass}__options`,
23
+ selectOptionsEmpty: `${baseSelectClass}__options_empty`,
23
24
  selectContent: `${baseSelectClass}__content`,
24
25
  selectFooter: `${baseSelectClass}__footer`,
25
26
  selectNoResult: `${baseSelectClass}__no-result`,
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;"}
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;"}
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.4-15",
5
+ "version": "1.1.4-17",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",