@shoper/phoenix_design_system 1.15.11-4 → 1.15.11-41
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.
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -6
- package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -30
- package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js +2 -1
- package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/select.js +10 -59
- package/build/cjs/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/slider/slider.js +22 -0
- package/build/cjs/packages/phoenix/src/components/slider/slider.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js +11 -0
- package/build/cjs/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
- package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
- package/build/cjs/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts +0 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js +2 -9
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.d.ts +0 -1
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js +1 -6
- package/build/esm/packages/phoenix/src/components/dropdown/dropdown_toggler.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.d.ts +0 -4
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js +0 -30
- package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js +2 -1
- package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/form/select/select.d.ts +3 -10
- package/build/esm/packages/phoenix/src/components/form/select/select.js +10 -59
- package/build/esm/packages/phoenix/src/components/form/select/select.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +4 -0
- package/build/esm/packages/phoenix/src/components/slider/slider.js +23 -1
- package/build/esm/packages/phoenix/src/components/slider/slider.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/slider/slider_constants.d.ts +4 -0
- package/build/esm/packages/phoenix/src/components/slider/slider_constants.js +7 -0
- package/build/esm/packages/phoenix/src/components/slider/slider_constants.js.map +1 -0
- package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts +3 -0
- package/build/esm/packages/phoenix/src/components/slider/slider_types.js +2 -0
- package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.d.ts +2 -6
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js +0 -1
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_controller_types.js.map +1 -1
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.d.ts +3 -8
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js +30 -76
- package/build/esm/packages/phoenix/src/controllers/list_box_controller/list_box_keyboard_controller.js.map +1 -1
- package/package.json +1 -1
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -98
- package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.d.ts +0 -15
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js +0 -94
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js.map +0 -1
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.d.ts +0 -8
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js +0 -3
- package/build/esm/packages/phoenix/src/components/form/select/controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller_types.js.map +0 -1
|
@@ -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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,eAAe,qDAAyD;AACxE;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6 @@
|
|
|
1
1
|
import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
2
2
|
export declare class HDropdownToggler extends PhoenixLightLitElement {
|
|
3
3
|
name: string;
|
|
4
|
-
ariaHasPopup: string;
|
|
5
4
|
private _btnController;
|
|
6
5
|
private _toggleElementAriaController;
|
|
7
6
|
private _$dropdown;
|
|
@@ -12,7 +12,6 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super();
|
|
14
14
|
this.name = '';
|
|
15
|
-
this.ariaHasPopup = 'menu';
|
|
16
15
|
this._setupTogglerAria = () => {
|
|
17
16
|
this._$dropdown = this.closest(DROPDOWN_CONTAINER_NAME);
|
|
18
17
|
if (this._$dropdown.isOpened)
|
|
@@ -20,7 +19,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
|
|
|
20
19
|
host: this,
|
|
21
20
|
initialAriaExpandedValue: this._$dropdown.isOpened()
|
|
22
21
|
});
|
|
23
|
-
this.setAttribute('aria-haspopup',
|
|
22
|
+
this.setAttribute('aria-haspopup', 'true');
|
|
24
23
|
if (this._$dropdown.id)
|
|
25
24
|
this.setAttribute('aria-controls', this._$dropdown.id);
|
|
26
25
|
};
|
|
@@ -57,10 +56,6 @@ __decorate([
|
|
|
57
56
|
property({ type: String, reflect: true }),
|
|
58
57
|
__metadata("design:type", Object)
|
|
59
58
|
], HDropdownToggler.prototype, "name", void 0);
|
|
60
|
-
__decorate([
|
|
61
|
-
property({ type: String, attribute: 'aria-haspopup' }),
|
|
62
|
-
__metadata("design:type", Object)
|
|
63
|
-
], HDropdownToggler.prototype, "ariaHasPopup", void 0);
|
|
64
59
|
HDropdownToggler = __decorate([
|
|
65
60
|
phoenixCustomElement('h-dropdown-toggler'),
|
|
66
61
|
__metadata("design:paramtypes", [])
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts
CHANGED
|
@@ -2,11 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
|
|
|
2
2
|
import { TemplateResult } from 'lit';
|
|
3
3
|
export declare class HSelectSearch extends PhoenixLightLitElement {
|
|
4
4
|
value: string;
|
|
5
|
-
private _$selectOptions;
|
|
6
5
|
connectedCallback(): void;
|
|
7
|
-
private _handleSearchKeydown;
|
|
8
|
-
private _handleDispatchEventOnOptionsList;
|
|
9
|
-
private _handleFocusOptionOnArrowNavigation;
|
|
10
6
|
private _handleInputChange;
|
|
11
7
|
protected render(): TemplateResult;
|
|
12
8
|
}
|
package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators';
|
|
4
|
-
import '@dreamcommerce/utilities';
|
|
5
4
|
import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
6
5
|
import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
|
|
7
6
|
import { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
|
|
@@ -12,32 +11,6 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
|
|
|
12
11
|
constructor() {
|
|
13
12
|
super(...arguments);
|
|
14
13
|
this.value = '';
|
|
15
|
-
this._$selectOptions = null;
|
|
16
|
-
this._handleSearchKeydown = (ev) => {
|
|
17
|
-
if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp')
|
|
18
|
-
return;
|
|
19
|
-
this._handleFocusOptionOnArrowNavigation();
|
|
20
|
-
this._handleDispatchEventOnOptionsList(ev);
|
|
21
|
-
};
|
|
22
|
-
this._handleDispatchEventOnOptionsList = (ev) => {
|
|
23
|
-
var _a;
|
|
24
|
-
const arrowNavigationEvent = new KeyboardEvent('keydown', {
|
|
25
|
-
key: ev.key
|
|
26
|
-
});
|
|
27
|
-
(_a = this._$selectOptions) === null || _a === void 0 ? void 0 : _a.dispatchEvent(arrowNavigationEvent);
|
|
28
|
-
};
|
|
29
|
-
this._handleFocusOptionOnArrowNavigation = () => {
|
|
30
|
-
const $options = this._$selectOptions ? [...this._$selectOptions.querySelectorAll('h-option')] : [];
|
|
31
|
-
const $availableOptions = $options.filter(($option) => {
|
|
32
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.hidden;
|
|
33
|
-
});
|
|
34
|
-
const $firstOption = $availableOptions.find(($option) => {
|
|
35
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
|
|
36
|
-
});
|
|
37
|
-
const $selectedOption = $availableOptions.find(($option) => $option.getAttribute('aria-selected'));
|
|
38
|
-
const $optionToFocus = $selectedOption || $firstOption;
|
|
39
|
-
$optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
|
|
40
|
-
};
|
|
41
14
|
this._handleInputChange = debounce_1(({ target }) => {
|
|
42
15
|
this.value = target.value;
|
|
43
16
|
this.emitCustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
|
|
@@ -48,9 +21,6 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
|
|
|
48
21
|
connectedCallback() {
|
|
49
22
|
super.connectedCallback();
|
|
50
23
|
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');
|
|
53
|
-
this.addEventListener('keydown', this._handleSearchKeydown);
|
|
54
24
|
}
|
|
55
25
|
render() {
|
|
56
26
|
return html `
|
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
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;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;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
|
|
2
|
-
import '@dreamcommerce/utilities';
|
|
2
|
+
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
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_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
|
|
@@ -22,6 +22,7 @@ let HOptions = class HOptions extends PhoenixLightLitElement {
|
|
|
22
22
|
});
|
|
23
23
|
};
|
|
24
24
|
this.setAttribute('role', 'listbox');
|
|
25
|
+
UiDomUtils.makeNavigable(this);
|
|
25
26
|
this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
|
|
26
27
|
this.addEventListener(SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
|
|
27
28
|
}
|
package/build/esm/packages/phoenix/src/components/form/select/components/select_options.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,8 +1,5 @@
|
|
|
1
1
|
import { PropertyValues, TemplateResult } from 'lit';
|
|
2
|
-
import { HDropdown } from "../../dropdown/dropdown";
|
|
3
2
|
import { HOption } from "./components/option/select_option";
|
|
4
|
-
import { HSelectSearch } from "./components/search/select_search";
|
|
5
|
-
import { ListBoxKeyboardController } from "../../../controllers/list_box_controller/list_box_keyboard_controller";
|
|
6
3
|
import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
|
|
7
4
|
import { SelectOption } from "./model/select_option";
|
|
8
5
|
import type { TSelectType } from "./select_types";
|
|
@@ -31,18 +28,15 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
31
28
|
private _searchValue;
|
|
32
29
|
private _selectController;
|
|
33
30
|
private _$options;
|
|
34
|
-
$dropdown
|
|
35
|
-
$search
|
|
31
|
+
private _$dropdown;
|
|
32
|
+
private _$search;
|
|
36
33
|
private _$optionsList;
|
|
37
34
|
private _$dropdownContent;
|
|
38
35
|
private _$dropdownToggler;
|
|
39
36
|
private _selectContext;
|
|
40
|
-
|
|
41
|
-
private _selectTogglerKeyboardController;
|
|
37
|
+
private _listBoxController;
|
|
42
38
|
private _optionsObserver;
|
|
43
|
-
private _selectedOptionsAriaObserver;
|
|
44
39
|
private $placeholder;
|
|
45
|
-
private $searchLabel;
|
|
46
40
|
constructor();
|
|
47
41
|
updated(changedProperties: PropertyValues): void;
|
|
48
42
|
private _focusElementAfterSelectOpened;
|
|
@@ -53,7 +47,6 @@ export declare class HSelect extends PhoenixLightLitElement {
|
|
|
53
47
|
private _setupEvents;
|
|
54
48
|
private _handleOptionDeselect;
|
|
55
49
|
private _updateOptionsView;
|
|
56
|
-
private _updateLabelAria;
|
|
57
50
|
private _appendNewHTMLOption;
|
|
58
51
|
updateOptionAriaAttribute($option: HOption): void;
|
|
59
52
|
private _removeHTMLOptions;
|
|
@@ -25,7 +25,6 @@ import { SelectControlUtils } from './select_utils.js';
|
|
|
25
25
|
import { SelectController } from './controllers/select_controller.js';
|
|
26
26
|
import { SelectOptionMapper } from './model/select_option_mapper.js';
|
|
27
27
|
import { repeat } from 'lit/directives/repeat';
|
|
28
|
-
import { SelectTogglerKeyboardController } from './controllers/select_toggler_keyboard_controller/select_toggler_keyboard_controller.js';
|
|
29
28
|
|
|
30
29
|
let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
31
30
|
constructor() {
|
|
@@ -40,8 +39,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
40
39
|
this.ariaLabelledby = '';
|
|
41
40
|
this._searchValue = '';
|
|
42
41
|
this._$options = new Map();
|
|
43
|
-
this
|
|
44
|
-
this
|
|
42
|
+
this._$dropdown = createRef();
|
|
43
|
+
this._$search = createRef();
|
|
45
44
|
this._$optionsList = createRef();
|
|
46
45
|
this._$dropdownContent = createRef();
|
|
47
46
|
this._$dropdownToggler = createRef();
|
|
@@ -102,18 +101,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
102
101
|
this.updateOptionAriaAttribute($option);
|
|
103
102
|
});
|
|
104
103
|
};
|
|
105
|
-
this._updateLabelAria = (options) => {
|
|
106
|
-
var _a, _b;
|
|
107
|
-
if (!this.$searchLabel)
|
|
108
|
-
return;
|
|
109
|
-
(_a = this.$searchLabel.querySelector(`[id="value-label"]`)) === null || _a === void 0 ? void 0 : _a.remove();
|
|
110
|
-
this.$searchLabel.innerHTML = `
|
|
111
|
-
${(_b = this.$searchLabel) === null || _b === void 0 ? void 0 : _b.innerHTML}
|
|
112
|
-
<span id="value-label" class="sr-only">
|
|
113
|
-
${options.reduce((totalSelectedContent, currentOption) => (totalSelectedContent += currentOption.content), '')}
|
|
114
|
-
</span>
|
|
115
|
-
`;
|
|
116
|
-
};
|
|
117
104
|
this._handleOptionClicked = ({ detail }) => {
|
|
118
105
|
if (!(detail === null || detail === void 0 ? void 0 : detail.$option))
|
|
119
106
|
return;
|
|
@@ -148,7 +135,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
148
135
|
var _a;
|
|
149
136
|
if (!this.opened)
|
|
150
137
|
return;
|
|
151
|
-
(_a = this
|
|
138
|
+
(_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
|
|
152
139
|
};
|
|
153
140
|
this._clearOptions = () => {
|
|
154
141
|
this._selectController.deselectAll();
|
|
@@ -192,7 +179,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
192
179
|
return Array.from(this._$options.values());
|
|
193
180
|
}
|
|
194
181
|
updated(changedProperties) {
|
|
195
|
-
var _a, _b;
|
|
196
182
|
super.updated(changedProperties);
|
|
197
183
|
if (changedProperties.has('opened')) {
|
|
198
184
|
if (this.opened) {
|
|
@@ -206,52 +192,28 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
206
192
|
if (changedProperties.has('optionsList')) {
|
|
207
193
|
this._updateOptions();
|
|
208
194
|
}
|
|
209
|
-
if (this._$optionsList.value)
|
|
210
|
-
|
|
211
|
-
this.listBoxController = new ListBoxKeyboardController({
|
|
212
|
-
host: this,
|
|
213
|
-
$list: this._$optionsList.value
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
if (this.listBoxController) {
|
|
217
|
-
this.listBoxController.calculateSelectedOptionIndex();
|
|
218
|
-
}
|
|
219
|
-
if (this._$optionsList.value && this._$dropdownToggler.value) {
|
|
220
|
-
(_b = this._selectTogglerKeyboardController) === null || _b === void 0 ? void 0 : _b.hostDisconnected();
|
|
221
|
-
this._selectTogglerKeyboardController = new SelectTogglerKeyboardController({
|
|
195
|
+
if (this._$optionsList.value && !this._listBoxController)
|
|
196
|
+
this._listBoxController = new ListBoxKeyboardController({
|
|
222
197
|
host: this,
|
|
223
|
-
$toggler: this._$dropdownToggler.value,
|
|
224
198
|
$list: this._$optionsList.value
|
|
225
199
|
});
|
|
226
|
-
}
|
|
227
200
|
}
|
|
228
201
|
_focusElementAfterSelectOpened() {
|
|
229
|
-
var _a;
|
|
230
|
-
const $searchInput = (_a = this
|
|
231
|
-
|
|
232
|
-
const $firstOption = $options.find(($option) => {
|
|
233
|
-
return !$option.getAttribute('inactive') && !$option.getAttribute('disabled') && !$option.getAttribute('hidden');
|
|
234
|
-
});
|
|
235
|
-
const $selectedOption = this.selectedOptions[0];
|
|
236
|
-
const $optionToFocus = $selectedOption || $firstOption;
|
|
237
|
-
$searchInput ? $searchInput.focus() : $optionToFocus === null || $optionToFocus === void 0 ? void 0 : $optionToFocus.focus();
|
|
202
|
+
var _a, _b;
|
|
203
|
+
const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
|
|
204
|
+
$searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
|
|
238
205
|
}
|
|
239
206
|
connectedCallback() {
|
|
240
|
-
var _a;
|
|
241
207
|
super.connectedCallback();
|
|
242
208
|
this.classList.add(SELECT_CSS_CLASSES.select);
|
|
243
209
|
if (!this.searchDisabled) {
|
|
244
210
|
this.classList.add(SELECT_CSS_CLASSES.selectWithSearch);
|
|
245
211
|
}
|
|
246
|
-
this.$searchLabel = document.querySelector(`[id="${this.ariaLabelledby}"]`);
|
|
247
|
-
(_a = this.$searchLabel) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
|
|
248
212
|
this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
|
|
249
213
|
this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
|
|
250
214
|
this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
|
|
251
215
|
this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
|
|
252
216
|
this._selectController.options$.subscribe(this._optionsObserver);
|
|
253
|
-
this._selectedOptionsAriaObserver = new Observer((selectedOptions) => this._updateLabelAria(selectedOptions));
|
|
254
|
-
this._selectController.selectedOptions$.subscribe(this._selectedOptionsAriaObserver);
|
|
255
217
|
this._updateOptions();
|
|
256
218
|
this._setupEvents();
|
|
257
219
|
}
|
|
@@ -281,10 +243,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
281
243
|
SelectControlUtils.appendHTMLOption($option, $list, position);
|
|
282
244
|
}
|
|
283
245
|
updateOptionAriaAttribute($option) {
|
|
284
|
-
if (!this.multiple) {
|
|
285
|
-
const $options = this._$optionsList.value ? [...this._$optionsList.value.querySelectorAll('h-option')] : [];
|
|
286
|
-
$options.forEach(($option) => ($option.removeAttribute('aria-selected')));
|
|
287
|
-
}
|
|
288
246
|
$option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', String($option.selected));
|
|
289
247
|
}
|
|
290
248
|
_removeHTMLOptions(optionsValues) {
|
|
@@ -294,12 +252,6 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
294
252
|
const option = this._selectController.getOption(value);
|
|
295
253
|
if (!option)
|
|
296
254
|
return;
|
|
297
|
-
const $selectedOption = this._$options.get(option.value);
|
|
298
|
-
const $selectedOptionLink = $selectedOption === null || $selectedOption === void 0 ? void 0 : $selectedOption.querySelector('a');
|
|
299
|
-
if ($selectedOptionLink) {
|
|
300
|
-
$selectedOptionLink.click();
|
|
301
|
-
return;
|
|
302
|
-
}
|
|
303
255
|
this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
|
|
304
256
|
if (!this.multiple)
|
|
305
257
|
this._closeSelect();
|
|
@@ -350,14 +302,13 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
350
302
|
const isSearchEnabled = !this.searchDisabled && options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
|
|
351
303
|
return html `
|
|
352
304
|
<h-dropdown
|
|
353
|
-
${ref(this
|
|
305
|
+
${ref(this._$dropdown)}
|
|
354
306
|
@showed=${() => (this.opened = true)}
|
|
355
307
|
@hidden=${this._handleDropdownHidden}
|
|
356
308
|
name="${this.controlName}"
|
|
357
309
|
offset=${this.offset}
|
|
358
310
|
content-width="full"
|
|
359
311
|
prevent-focus-trap
|
|
360
|
-
no-autofocus
|
|
361
312
|
>
|
|
362
313
|
<h-dropdown-toggler
|
|
363
314
|
${ref(this._$dropdownToggler)}
|
|
@@ -385,7 +336,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
|
|
|
385
336
|
${isSearchEnabled
|
|
386
337
|
? html ` <h-select-search
|
|
387
338
|
class=${SELECT_CSS_CLASSES.selectSearch}
|
|
388
|
-
${ref(this
|
|
339
|
+
${ref(this._$search)}
|
|
389
340
|
.value=${this._searchValue}
|
|
390
341
|
@search=${this._handleSearch}
|
|
391
342
|
></h-select-search>`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -8,5 +8,9 @@ export declare class HSlider extends PhoenixLightLitElement {
|
|
|
8
8
|
private _settings;
|
|
9
9
|
private _slider;
|
|
10
10
|
connectedCallback(): void;
|
|
11
|
+
private _showFocusableNodes;
|
|
12
|
+
private _hideFocusableNodes;
|
|
13
|
+
private _handleFocusableNodes;
|
|
11
14
|
getSlider(): ISlider | null;
|
|
15
|
+
disconnectedCallback(): void;
|
|
12
16
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
|
|
2
2
|
import { property } from 'lit/decorators';
|
|
3
|
-
import { JsonUtils } from '@dreamcommerce/utilities';
|
|
3
|
+
import { UiDomUtils, JsonUtils } from '@dreamcommerce/utilities';
|
|
4
4
|
import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
|
|
5
5
|
import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
|
|
6
6
|
import { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
|
|
7
|
+
import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants.js';
|
|
7
8
|
|
|
8
9
|
let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
9
10
|
constructor() {
|
|
@@ -17,6 +18,19 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
|
17
18
|
focus: 'center'
|
|
18
19
|
};
|
|
19
20
|
this._slider = null;
|
|
21
|
+
this._showFocusableNodes = (slideComponent) => {
|
|
22
|
+
this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
|
|
23
|
+
};
|
|
24
|
+
this._hideFocusableNodes = (slideComponent) => {
|
|
25
|
+
this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
|
|
26
|
+
};
|
|
27
|
+
this._handleFocusableNodes = ({ slide }, action) => {
|
|
28
|
+
const $focusableElements = UiDomUtils.getFocusableElements(slide);
|
|
29
|
+
if ($focusableElements.length === 0)
|
|
30
|
+
return;
|
|
31
|
+
const newTabindex = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
|
|
32
|
+
$focusableElements.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
|
|
33
|
+
};
|
|
20
34
|
}
|
|
21
35
|
get sliderSettings() {
|
|
22
36
|
return this._settings;
|
|
@@ -36,10 +50,18 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
|
36
50
|
if (this._settings.mountOnConnectedCallback) {
|
|
37
51
|
this._slider.mount();
|
|
38
52
|
}
|
|
53
|
+
this._slider.on('visible', this._showFocusableNodes);
|
|
54
|
+
this._slider.on('hidden', this._hideFocusableNodes);
|
|
39
55
|
}
|
|
40
56
|
getSlider() {
|
|
41
57
|
return this._slider;
|
|
42
58
|
}
|
|
59
|
+
disconnectedCallback() {
|
|
60
|
+
var _a, _b;
|
|
61
|
+
super.disconnectedCallback();
|
|
62
|
+
(_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
|
|
63
|
+
(_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
|
|
64
|
+
}
|
|
43
65
|
};
|
|
44
66
|
__decorate([
|
|
45
67
|
property({ reflect: true }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { Options, Splide } from '@splidejs/splide';
|
|
2
|
+
import { SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS } from './slider_constants';
|
|
3
|
+
import { Any } from 'ts-toolbelt';
|
|
2
4
|
export interface ISlider extends Splide {
|
|
3
5
|
}
|
|
4
6
|
export interface ISliderOptions extends Options {
|
|
5
7
|
mountOnConnectedCallback: boolean;
|
|
6
8
|
}
|
|
9
|
+
export declare type THandleNodesOption = typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS[Any.Keys<typeof SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS>];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC;AACnD,OAAsD,oBAAoB,CAAC;AAC3E,OAAoB,aAAa,CAAC"}
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import { Any } from 'ts-toolbelt';
|
|
2
|
-
import {
|
|
2
|
+
import { ReactiveControllerHost } from 'lit';
|
|
3
3
|
import { LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS } from "./list_box_controller_constants";
|
|
4
|
-
import { HSelect } from "../../components/form/select/select";
|
|
5
4
|
export declare type TListBoxKeyboardNavigationDirection = Any.Keys<typeof LIST_BOX_KEYBOARD_NAVIGATION_DIRECTIONS>;
|
|
6
5
|
export declare type TListBoxKeyboardControllerConstructorOptions = {
|
|
7
|
-
host: ReactiveControllerHost &
|
|
6
|
+
host: ReactiveControllerHost & HTMLElement;
|
|
8
7
|
$list: HTMLElement;
|
|
9
8
|
listItemSelector?: string;
|
|
10
9
|
orientation?: TListBoxKeyboardNavigationDirection;
|
|
11
10
|
};
|
|
12
|
-
export interface IListboxController extends ReactiveController {
|
|
13
|
-
calculateSelectedOptionIndex(): void;
|
|
14
|
-
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,
|
|
1
|
+
{"version":3,"file":"list_box_controller_types.js","sourceRoot":"","sources":["../../../../../../../src/controllers/list_box_controller/list_box_controller_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,KAAK,CAAC;AAC7C,OAAwD,4EAA4E,CAAC"}
|
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { ReactiveController } from 'lit';
|
|
2
|
+
import { TListBoxKeyboardControllerConstructorOptions } from "./list_box_controller_types";
|
|
3
|
+
export declare class ListBoxKeyboardController implements ReactiveController {
|
|
3
4
|
#private;
|
|
4
|
-
currentOptionIndex: number | undefined;
|
|
5
5
|
constructor({ host, $list, listItemSelector, orientation }: TListBoxKeyboardControllerConstructorOptions);
|
|
6
6
|
hostConnected(): void;
|
|
7
|
-
private _handleKeyboardNavigation;
|
|
8
7
|
private _handleArrowNavigation;
|
|
9
|
-
private _findCurrentIndex;
|
|
10
|
-
private _handleWriteableCharacter;
|
|
11
|
-
calculateSelectedOptionIndex: () => void;
|
|
12
8
|
private _getPrevOptionIndex;
|
|
13
9
|
private _getNextOptionIndex;
|
|
14
|
-
hostDisconnected(): void;
|
|
15
10
|
}
|