@shoper/phoenix_design_system 1.15.11-4 → 1.15.11-5

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 (12) hide show
  1. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +3 -2
  2. package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  3. package/build/cjs/packages/phoenix/src/components/form/select/select.js +6 -6
  4. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +4 -0
  5. package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  6. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +3 -2
  7. package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
  8. package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +2 -1
  9. package/build/esm/packages/phoenix/src/components/form/select/select.js +6 -6
  10. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +4 -0
  11. package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
  12. package/package.json +1 -1
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED
@@ -9,6 +9,7 @@ require('@dreamcommerce/utilities');
9
9
  var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
10
10
  var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
11
11
  var select_components_constatns = require('../select_components_constatns.js');
12
+ var dropdown_constants = require('../../../../dropdown/dropdown_constants.js');
12
13
  var debounce = require('../../../../../../../../external/lodash/debounce.js');
13
14
  var select_search_constants = require('./select_search_constants.js');
14
15
 
@@ -52,8 +53,8 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
52
53
  connectedCallback() {
53
54
  super.connectedCallback();
54
55
  this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
55
- // to musisz zrobić inaczej, bo jest kilka selectów na stronie
56
- this._$selectOptions = document.querySelector('h-options');
56
+ const $selectOptionsContainer = this.closest(dropdown_constants.DROPDOWN_CONTENT_NAME);
57
+ this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
57
58
  this.addEventListener('keydown', this._handleSearchKeydown);
58
59
  }
59
60
  render() {
package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -48,7 +48,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
48
48
  this.$search = ref_js.createRef();
49
49
  this._$optionsList = ref_js.createRef();
50
50
  this._$dropdownContent = ref_js.createRef();
51
- this._$dropdownToggler = ref_js.createRef();
51
+ this.$dropdownToggler = ref_js.createRef();
52
52
  this._selectContext = new context_provider_controller.ContextProviderController(this);
53
53
  this._updateOptions = () => {
54
54
  const $options = this._getOptions();
@@ -136,7 +136,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
136
136
  var _a;
137
137
  this._searchValue = '';
138
138
  this.opened = false;
139
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
139
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
140
140
  };
141
141
  this._manageSelectFocusAria = (ev) => {
142
142
  var _a;
@@ -145,7 +145,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
145
145
  return;
146
146
  const optionId = $target.id;
147
147
  if (optionId) {
148
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
148
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
149
149
  }
150
150
  };
151
151
  this._closeSelect = () => {
@@ -220,11 +220,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
220
220
  if (this.listBoxController) {
221
221
  this.listBoxController.calculateSelectedOptionIndex();
222
222
  }
223
- if (this._$optionsList.value && this._$dropdownToggler.value) {
223
+ if (this._$optionsList.value && this.$dropdownToggler.value) {
224
224
  (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
225
225
  this._selectTogglerKeyboardController = new select_toggler_keyboard_controller.SelectTogglerKeyboardController({
226
226
  host: this,
227
- $toggler: this._$dropdownToggler.value,
227
+ $toggler: this.$dropdownToggler.value,
228
228
  $list: this._$optionsList.value
229
229
  });
230
230
  }
@@ -364,7 +364,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
364
364
  no-autofocus
365
365
  >
366
366
  <h-dropdown-toggler
367
- ${ref_js.ref(this._$dropdownToggler)}
367
+ ${ref_js.ref(this.$dropdownToggler)}
368
368
  name="${this.controlName}"
369
369
  validation-container
370
370
  aria-haspopup="listbox"
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -16,10 +16,14 @@ class ListBoxKeyboardController {
16
16
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
17
17
  _ListBoxKeyboardController_keys.set(this, void 0);
18
18
  this._handleKeyboardNavigation = (ev) => {
19
+ var _a;
19
20
  if (tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
20
21
  this._handleArrowNavigation(ev);
21
22
  return;
22
23
  }
24
+ if (ev.key === 'Enter') {
25
+ (_a = tslib_es6.__classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.focus();
26
+ }
23
27
  this._handleWriteableCharacter(ev);
24
28
  };
25
29
  this._handleArrowNavigation = (event) => {
package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/search/select_search.js CHANGED
@@ -5,6 +5,7 @@ import '@dreamcommerce/utilities';
5
5
  import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
6
6
  import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
7
7
  import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
8
+ import { DROPDOWN_CONTENT_NAME } from '../../../../dropdown/dropdown_constants.js';
8
9
  import debounce_1 from '../../../../../../../../external/lodash/debounce.js';
9
10
  import { SELECT_SEARCH_CSS_CLASSES } from './select_search_constants.js';
10
11
 
@@ -48,8 +49,8 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
48
49
  connectedCallback() {
49
50
  super.connectedCallback();
50
51
  this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
51
- // to musisz zrobić inaczej, bo jest kilka selectów na stronie
52
- this._$selectOptions = document.querySelector('h-options');
52
+ const $selectOptionsContainer = this.closest(DROPDOWN_CONTENT_NAME);
53
+ this._$selectOptions = $selectOptionsContainer === null || $selectOptionsContainer === void 0 ? void 0 : $selectOptionsContainer.querySelector('h-options');
53
54
  this.addEventListener('keydown', this._handleSearchKeydown);
54
55
  }
55
56
  render() {
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
@@ -1,5 +1,6 @@
1
1
  import { PropertyValues, TemplateResult } from 'lit';
2
2
  import { HDropdown } from "../../dropdown/dropdown";
3
+ import { HDropdownToggler } from "../../dropdown/dropdown_toggler";
3
4
  import { HOption } from "./components/option/select_option";
4
5
  import { HSelectSearch } from "./components/search/select_search";
5
6
  import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
@@ -35,7 +36,7 @@ export declare class HSelect extends PhoenixLightLitElement {
35
36
  $search: import("lit-html/directives/ref.js").Ref<HSelectSearch>;
36
37
  private _$optionsList;
37
38
  private _$dropdownContent;
38
- private _$dropdownToggler;
39
+ $dropdownToggler: import("lit-html/directives/ref.js").Ref<HDropdownToggler>;
39
40
  private _selectContext;
40
41
  listBoxController: ListBoxKeyboardController;
41
42
  private _selectTogglerKeyboardController;
package/build/esm/packages/phoenix/src/components/form/select/select.js CHANGED
@@ -44,7 +44,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
44
44
  this.$search = createRef();
45
45
  this._$optionsList = createRef();
46
46
  this._$dropdownContent = createRef();
47
- this._$dropdownToggler = createRef();
47
+ this.$dropdownToggler = createRef();
48
48
  this._selectContext = new ContextProviderController(this);
49
49
  this._updateOptions = () => {
50
50
  const $options = this._getOptions();
@@ -132,7 +132,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
132
132
  var _a;
133
133
  this._searchValue = '';
134
134
  this.opened = false;
135
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
135
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', '');
136
136
  };
137
137
  this._manageSelectFocusAria = (ev) => {
138
138
  var _a;
@@ -141,7 +141,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
141
141
  return;
142
142
  const optionId = $target.id;
143
143
  if (optionId) {
144
- (_a = this._$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
144
+ (_a = this.$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-activedescendant', optionId);
145
145
  }
146
146
  };
147
147
  this._closeSelect = () => {
@@ -216,11 +216,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
216
216
  if (this.listBoxController) {
217
217
  this.listBoxController.calculateSelectedOptionIndex();
218
218
  }
219
- if (this._$optionsList.value && this._$dropdownToggler.value) {
219
+ if (this._$optionsList.value && this.$dropdownToggler.value) {
220
220
  (_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
221
221
  this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
222
222
  host: this,
223
- $toggler: this._$dropdownToggler.value,
223
+ $toggler: this.$dropdownToggler.value,
224
224
  $list: this._$optionsList.value
225
225
  });
226
226
  }
@@ -360,7 +360,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
360
360
  no-autofocus
361
361
  >
362
362
  <h-dropdown-toggler
363
- ${ref(this._$dropdownToggler)}
363
+ ${ref(this.$dropdownToggler)}
364
364
  name="${this.controlName}"
365
365
  validation-container
366
366
  aria-haspopup="listbox"
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js CHANGED
@@ -12,10 +12,14 @@ class ListBoxKeyboardController {
12
12
  _ListBoxKeyboardController_listItemSelector.set(this, void 0);
13
13
  _ListBoxKeyboardController_keys.set(this, void 0);
14
14
  this._handleKeyboardNavigation = (ev) => {
15
+ var _a;
15
16
  if (__classPrivateFieldGet(this, _ListBoxKeyboardController_keys, "f").find((key) => key === ev.key)) {
16
17
  this._handleArrowNavigation(ev);
17
18
  return;
18
19
  }
20
+ if (ev.key === 'Enter') {
21
+ (_a = __classPrivateFieldGet(this, _ListBoxKeyboardController_host, "f").$dropdownToggler.value) === null || _a === void 0 ? void 0 : _a.focus();
22
+ }
19
23
  this._handleWriteableCharacter(ev);
20
24
  };
21
25
  this._handleArrowNavigation = (event) => {
package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.15.11-4",
5
+ "version": "1.15.11-5",
6
6
  "description": "phoenix design system",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",