@shoper/phoenix_design_system 1.1.3 → 1.1.4-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 (16) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +5 -1
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +20 -9
  4. package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
  5. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js +6 -2
  6. package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  7. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts +1 -0
  8. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js +7 -3
  9. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map +1 -1
  10. package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.d.ts +1 -0
  11. package/build/esm/packages/phoenix/src/components/form/select/select.js +20 -9
  12. package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
  13. package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts +5 -1
  14. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js +6 -2
  15. package/build/esm/packages/phoenix/src/components/form/select/select_constants.js.map +1 -1
  16. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -32,7 +32,7 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
32
32
  }
33
33
  connectedCallback() {
34
34
  super.connectedCallback();
35
- this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.input);
35
+ // this.setAttribute('slot', SELECT_SLOT_NAMES.input);
36
36
  this.setAttribute('role', 'textbox');
37
37
  this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectToggler);
38
38
  this._subscribeObserver();
@@ -75,6 +75,10 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
75
75
  `;
76
76
  }
77
77
  };
78
+ tslib_es6.__decorate([
79
+ decorators.property({ attribute: true }),
80
+ tslib_es6.__metadata("design:type", String)
81
+ ], exports.HSelectToggler.prototype, "placeholder", void 0);
78
82
  tslib_es6.__decorate([
79
83
  decorators.state(),
80
84
  tslib_es6.__metadata("design:type", Object)
package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -13,6 +13,7 @@ var icon = require('../../icon/icon.js');
13
13
  var select_constants = require('./select_constants.js');
14
14
  var observer = require('../../../core/classes/observer/observer.js');
15
15
  var observable_directive = require('../../../directives/observable_directive.js');
16
+ var select_toggler = require('./components/toggler/select_toggler.js');
16
17
  var context_provider_controller = require('../../../core/context/context_provider_controller.js');
17
18
  var ref_js = require('lit-html/directives/ref.js');
18
19
  var debounce = require('../../../../../../external/lodash/debounce.js');
@@ -200,13 +201,22 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
200
201
  name=${this.controlName}
201
202
  offset=${this.offset}
202
203
  >
203
- <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
204
+ <h-dropdown-toggler name=${this.controlName}>
205
+ <h-select-toggler>
206
+ <span slot="placeholder">${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}</span>
207
+ </h-select-toggler>
208
+ </h-dropdown-toggler>
204
209
 
205
210
  <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.ref(this._$dropdownContent)} name=${this.controlName}>
206
- <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
211
+ <h-select-close-btn
212
+ class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}"
213
+ @selectCloseBtn.close=${this._closeSelect}
214
+ ></h-select-close-btn>
215
+
216
+ <p class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)}</p>
207
217
 
208
218
  ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
209
- ? lit.html `<h-select-search
219
+ ? lit.html ` <h-select-search
210
220
  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
211
221
  ${ref_js.ref(this._$search)}
212
222
  .value=${this._searchValue}
@@ -225,7 +235,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
225
235
  `
226
236
  : lit.nothing}
227
237
  ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
228
- ? lit.html `<div>
238
+ ? lit.html ` <div>
229
239
  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
230
240
  Brak wyników dla: <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
231
241
  </p>
@@ -234,10 +244,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
234
244
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
235
245
  ? lit.html `
236
246
  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
237
- <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
238
- <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
239
- >ok</h-select-close-btn
240
- >
247
+ <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
248
+ <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
249
+ >ok
250
+ </h-select-close-btn>
241
251
  </section>
242
252
  `
243
253
  : lit.nothing}
@@ -251,7 +261,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
251
261
  exports.HSelect._components = {
252
262
  search: select_search.HSelectSearch,
253
263
  icon: icon.HIcon,
254
- closeBtn: select_close_btn.HSelectCloseBtn
264
+ closeBtn: select_close_btn.HSelectCloseBtn,
265
+ toggler: select_toggler.HSelectToggler
255
266
  };
256
267
  tslib_es6.__decorate([
257
268
  decorators_js.property({ 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,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;"}
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,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;"}
package/build/cjs/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -8,7 +8,7 @@ const SELECT_CONTEXTS = {
8
8
  };
9
9
  const SELECT_SLOT_NAMES = {
10
10
  content: 'content',
11
- input: 'input'
11
+ toggler: 'toggler'
12
12
  };
13
13
  const SELECT_EVENT_NAMES = {
14
14
  selectOption: 'selectOption.select',
@@ -27,7 +27,11 @@ const SELECT_CSS_CLASSES = {
27
27
  selectContent: `${baseSelectClass}__content`,
28
28
  selectFooter: `${baseSelectClass}__footer`,
29
29
  selectNoResult: `${baseSelectClass}__no-result`,
30
- selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
30
+ selectSearchedPhrase: `${baseSelectClass}__searched-phrase`,
31
+ selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
32
+ selectClearButton: `${baseSelectClass}__clear-btn`,
33
+ selectCloseButton: `${baseSelectClass}__close-btn`,
34
+ selectLabel: `${baseSelectClass}__label`
31
35
  };
32
36
 
33
37
  exports.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
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;"}
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;"}
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.d.ts CHANGED
@@ -3,6 +3,7 @@ import { SelectOption } from "../../model/select_option";
3
3
  import { TemplateResult } from 'lit-html';
4
4
  import { BehaviorSubject } from "../../../../../core/classes/behavior_subject/behavior_subject";
5
5
  export declare class HSelectToggler extends PhoenixLightLitElement {
6
+ placeholder: string;
6
7
  selectedOptions$: BehaviorSubject<SelectOption[]> | null;
7
8
  isMultiselect: boolean;
8
9
  private _contextConsumer;
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
2
- import { state } from 'lit/decorators';
2
+ import { property, state } from 'lit/decorators';
3
3
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
4
4
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
5
5
  import { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
6
6
  import { html } from 'lit-html';
7
7
  import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
8
- import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
8
+ import { SELECT_EVENT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
9
9
  import { Observer } from '../../../../../core/classes/observer/observer.js';
10
10
  import { observe } from '../../../../../directives/observable_directive.js';
11
11
  import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
@@ -28,7 +28,7 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
28
28
  }
29
29
  connectedCallback() {
30
30
  super.connectedCallback();
31
- this.setAttribute('slot', SELECT_SLOT_NAMES.input);
31
+ // this.setAttribute('slot', SELECT_SLOT_NAMES.input);
32
32
  this.setAttribute('role', 'textbox');
33
33
  this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectToggler);
34
34
  this._subscribeObserver();
@@ -71,6 +71,10 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
71
71
  `;
72
72
  }
73
73
  };
74
+ __decorate([
75
+ property({ attribute: true }),
76
+ __metadata("design:type", String)
77
+ ], HSelectToggler.prototype, "placeholder", void 0);
74
78
  __decorate([
75
79
  state(),
76
80
  __metadata("design:type", Object)
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.d.ts CHANGED
@@ -4,3 +4,4 @@ export declare const SELECT_TOGGLER_CSS_CLASSES: {
4
4
  readonly selectTogglerValues: "select-toggler__values";
5
5
  readonly selectTogglerPlaceholder: "select-toggler__placeholder";
6
6
  };
7
+ export declare const SELECT_TOGGLER_DEFAULT_PLACEHOLDER = "Select";
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -9,6 +9,7 @@ import { HIcon } from '../../icon/icon.js';
9
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';
10
10
  import { Observer } from '../../../core/classes/observer/observer.js';
11
11
  import { observe } from '../../../directives/observable_directive.js';
12
+ import { HSelectToggler } from './components/toggler/select_toggler.js';
12
13
  import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
13
14
  import { createRef, ref } from 'lit-html/directives/ref.js';
14
15
  import debounce_1 from '../../../../../../external/lodash/debounce.js';
@@ -196,13 +197,22 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
196
197
  name=${this.controlName}
197
198
  offset=${this.offset}
198
199
  >
199
- <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
200
+ <h-dropdown-toggler name=${this.controlName}>
201
+ <h-select-toggler>
202
+ <span slot="placeholder">${this.getSlot(SELECT_SLOT_NAMES.toggler)}</span>
203
+ </h-select-toggler>
204
+ </h-dropdown-toggler>
200
205
 
201
206
  <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
202
- <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
207
+ <h-select-close-btn
208
+ class="${SELECT_CSS_CLASSES.selectCloseMobileButton}"
209
+ @selectCloseBtn.close=${this._closeSelect}
210
+ ></h-select-close-btn>
211
+
212
+ <p class=${SELECT_CSS_CLASSES.selectLabel}>${this.getSlot(SELECT_SLOT_NAMES.toggler)}</p>
203
213
 
204
214
  ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
205
- ? html `<h-select-search
215
+ ? html ` <h-select-search
206
216
  class=${SELECT_CSS_CLASSES.selectSearch}
207
217
  ${ref(this._$search)}
208
218
  .value=${this._searchValue}
@@ -221,7 +231,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
221
231
  `
222
232
  : nothing}
223
233
  ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
224
- ? html `<div>
234
+ ? html ` <div>
225
235
  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
226
236
  Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
227
237
  </p>
@@ -230,10 +240,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
230
240
  ${this.multiselect && this._selectController.selectedOptionsCount >= 1
231
241
  ? html `
232
242
  <section class=${SELECT_CSS_CLASSES.selectFooter}>
233
- <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
234
- <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
235
- >ok</h-select-close-btn
236
- >
243
+ <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
244
+ <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
245
+ >ok
246
+ </h-select-close-btn>
237
247
  </section>
238
248
  `
239
249
  : nothing}
@@ -247,7 +257,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
247
257
  HSelect._components = {
248
258
  search: HSelectSearch,
249
259
  icon: HIcon,
250
- closeBtn: HSelectCloseBtn
260
+ closeBtn: HSelectCloseBtn,
261
+ toggler: HSelectToggler
251
262
  };
252
263
  __decorate([
253
264
  property({ 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,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;"}
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,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;"}
package/build/esm/packages/phoenix/src/components/form/select/select_constants.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare const SELECT_CONTEXTS: {
4
4
  };
5
5
  export declare const SELECT_SLOT_NAMES: {
6
6
  readonly content: "content";
7
- readonly input: "input";
7
+ readonly toggler: "toggler";
8
8
  };
9
9
  export declare const SELECT_EVENT_NAMES: {
10
10
  readonly selectOption: "selectOption.select";
@@ -23,4 +23,8 @@ export declare const SELECT_CSS_CLASSES: {
23
23
  readonly selectFooter: "select__footer";
24
24
  readonly selectNoResult: "select__no-result";
25
25
  readonly selectSearchedPhrase: "select__searched-phrase";
26
+ readonly selectCloseMobileButton: "select__close-mobile-btn";
27
+ readonly selectClearButton: "select__clear-btn";
28
+ readonly selectCloseButton: "select__close-btn";
29
+ readonly selectLabel: "select__label";
26
30
  };
package/build/esm/packages/phoenix/src/components/form/select/select_constants.js CHANGED
@@ -4,7 +4,7 @@ const SELECT_CONTEXTS = {
4
4
  };
5
5
  const SELECT_SLOT_NAMES = {
6
6
  content: 'content',
7
- input: 'input'
7
+ toggler: 'toggler'
8
8
  };
9
9
  const SELECT_EVENT_NAMES = {
10
10
  selectOption: 'selectOption.select',
@@ -23,7 +23,11 @@ const SELECT_CSS_CLASSES = {
23
23
  selectContent: `${baseSelectClass}__content`,
24
24
  selectFooter: `${baseSelectClass}__footer`,
25
25
  selectNoResult: `${baseSelectClass}__no-result`,
26
- selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
26
+ selectSearchedPhrase: `${baseSelectClass}__searched-phrase`,
27
+ selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
28
+ selectClearButton: `${baseSelectClass}__clear-btn`,
29
+ selectCloseButton: `${baseSelectClass}__close-btn`,
30
+ selectLabel: `${baseSelectClass}__label`
27
31
  };
28
32
 
29
33
  export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
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;"}
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;"}
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.3",
5
+ "version": "1.1.4-2",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",