@shoper/phoenix_design_system 1.15.13-2 → 1.15.13-4
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/accordion/accordion.js +0 -1
- package/build/cjs/packages/phoenix/src/components/accordion/accordion.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js +0 -1
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/slider/slider.js +47 -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/esm/packages/phoenix/src/components/accordion/accordion.js +0 -1
- package/build/esm/packages/phoenix/src/components/accordion/accordion.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js +0 -1
- package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +6 -0
- package/build/esm/packages/phoenix/src/components/slider/slider.js +48 -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/package.json +1 -1
|
@@ -18,7 +18,6 @@ exports.HAccordion = class HAccordion extends phoenix_light_lit_element.PhoenixL
|
|
|
18
18
|
this._accordionSubject = new behavior_subject.BehaviorSubject(this._getProps());
|
|
19
19
|
this._accordionContext = new context_provider_controller.ContextProviderController(this);
|
|
20
20
|
this._accordionContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionProps, this._accordionSubject);
|
|
21
|
-
this.setAttribute('role', 'none');
|
|
22
21
|
}
|
|
23
22
|
enable() {
|
|
24
23
|
this.disabled = false;
|
|
@@ -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;
|
|
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;"}
|
|
@@ -26,7 +26,6 @@ exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_elemen
|
|
|
26
26
|
this._accordionGroupPropsSubject = new behavior_subject.BehaviorSubject(this._getProps());
|
|
27
27
|
this._accordionGroupContext = new context_provider_controller.ContextProviderController(this);
|
|
28
28
|
this._accordionGroupContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
|
|
29
|
-
this.setAttribute('role', 'none');
|
|
30
29
|
}
|
|
31
30
|
connectedCallback() {
|
|
32
31
|
super.connectedCallback();
|
|
@@ -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;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;AACA;AACA;"}
|
|
@@ -8,6 +8,7 @@ var utilities = require('@dreamcommerce/utilities');
|
|
|
8
8
|
var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
|
|
9
9
|
var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
|
|
10
10
|
var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
|
|
11
|
+
var slider_constants = require('./slider_constants.js');
|
|
11
12
|
|
|
12
13
|
exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLitElement {
|
|
13
14
|
constructor() {
|
|
@@ -21,6 +22,26 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
21
22
|
focus: 'center'
|
|
22
23
|
};
|
|
23
24
|
this._slider = null;
|
|
25
|
+
this._$focusableElements = [];
|
|
26
|
+
this._handleFocusableElementOnInit = ($element) => {
|
|
27
|
+
this._$focusableElements.push($element);
|
|
28
|
+
if ($element.closest('[aria-hidden="true"]')) {
|
|
29
|
+
$element.setAttribute('tabindex', '-1');
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
this._showFocusableNodes = (slideComponent) => {
|
|
33
|
+
this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
|
|
34
|
+
};
|
|
35
|
+
this._hideFocusableNodes = (slideComponent) => {
|
|
36
|
+
this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
|
|
37
|
+
};
|
|
38
|
+
this._handleFocusableNodes = ({ slide }, action) => {
|
|
39
|
+
const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
|
|
40
|
+
if ($focusableSlideChildren.length === 0)
|
|
41
|
+
return;
|
|
42
|
+
const newTabindex = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
|
|
43
|
+
$focusableSlideChildren.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
|
|
44
|
+
};
|
|
24
45
|
}
|
|
25
46
|
get sliderSettings() {
|
|
26
47
|
return this._settings;
|
|
@@ -40,10 +61,36 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
40
61
|
if (this._settings.mountOnConnectedCallback) {
|
|
41
62
|
this._slider.mount();
|
|
42
63
|
}
|
|
64
|
+
this._slider.on('visible', this._showFocusableNodes);
|
|
65
|
+
this._slider.on('hidden', this._hideFocusableNodes);
|
|
66
|
+
const mutationObserver = new MutationObserver((mutationList) => {
|
|
67
|
+
for (const mutation of mutationList) {
|
|
68
|
+
if (mutation.type !== "childList")
|
|
69
|
+
continue;
|
|
70
|
+
const $target = mutation.target;
|
|
71
|
+
const isFocusable = utilities.UiDomUtils.isFocusable($target);
|
|
72
|
+
const hasBeenEncountered = this._$focusableElements.includes($target);
|
|
73
|
+
const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
|
|
74
|
+
if ($focusableChildren.length === 0 && (!isFocusable || hasBeenEncountered))
|
|
75
|
+
continue;
|
|
76
|
+
if (isFocusable) {
|
|
77
|
+
this._handleFocusableElementOnInit($target);
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
$focusableChildren.forEach(($child) => this._handleFocusableElementOnInit($child));
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
mutationObserver.observe(this, { childList: true, subtree: true });
|
|
43
84
|
}
|
|
44
85
|
getSlider() {
|
|
45
86
|
return this._slider;
|
|
46
87
|
}
|
|
88
|
+
disconnectedCallback() {
|
|
89
|
+
var _a, _b;
|
|
90
|
+
super.disconnectedCallback();
|
|
91
|
+
(_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
|
|
92
|
+
(_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
|
|
93
|
+
}
|
|
47
94
|
};
|
|
48
95
|
tslib_es6.__decorate([
|
|
49
96
|
decorators.property({ reflect: true }),
|
|
@@ -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,yBAAyB,gEAAoE;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;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,yBAAyB,gEAAoE;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
|
|
6
|
+
show: 'show',
|
|
7
|
+
hide: 'hide'
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
exports.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS;
|
|
11
|
+
//# sourceMappingURL=slider_constants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -14,7 +14,6 @@ let HAccordion = class HAccordion extends PhoenixLightLitElement {
|
|
|
14
14
|
this._accordionSubject = new BehaviorSubject(this._getProps());
|
|
15
15
|
this._accordionContext = new ContextProviderController(this);
|
|
16
16
|
this._accordionContext.provide(ACCORDION_CONTEXTS.accordionProps, this._accordionSubject);
|
|
17
|
-
this.setAttribute('role', 'none');
|
|
18
17
|
}
|
|
19
18
|
enable() {
|
|
20
19
|
this.disabled = false;
|
|
@@ -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;
|
|
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;"}
|
|
@@ -22,7 +22,6 @@ let HAccordionGroup = class HAccordionGroup extends PhoenixLightLitElement {
|
|
|
22
22
|
this._accordionGroupPropsSubject = new BehaviorSubject(this._getProps());
|
|
23
23
|
this._accordionGroupContext = new ContextProviderController(this);
|
|
24
24
|
this._accordionGroupContext.provide(ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
|
|
25
|
-
this.setAttribute('role', 'none');
|
|
26
25
|
}
|
|
27
26
|
connectedCallback() {
|
|
28
27
|
super.connectedCallback();
|
|
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,6 +7,12 @@ export declare class HSlider extends PhoenixLightLitElement {
|
|
|
7
7
|
set sliderSettings(newSettingsObject: ISliderOptions);
|
|
8
8
|
private _settings;
|
|
9
9
|
private _slider;
|
|
10
|
+
private _$focusableElements;
|
|
10
11
|
connectedCallback(): void;
|
|
12
|
+
private _handleFocusableElementOnInit;
|
|
13
|
+
private _showFocusableNodes;
|
|
14
|
+
private _hideFocusableNodes;
|
|
15
|
+
private _handleFocusableNodes;
|
|
11
16
|
getSlider(): ISlider | null;
|
|
17
|
+
disconnectedCallback(): void;
|
|
12
18
|
}
|
|
@@ -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 { JsonUtils, UiDomUtils } 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,26 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
|
17
18
|
focus: 'center'
|
|
18
19
|
};
|
|
19
20
|
this._slider = null;
|
|
21
|
+
this._$focusableElements = [];
|
|
22
|
+
this._handleFocusableElementOnInit = ($element) => {
|
|
23
|
+
this._$focusableElements.push($element);
|
|
24
|
+
if ($element.closest('[aria-hidden="true"]')) {
|
|
25
|
+
$element.setAttribute('tabindex', '-1');
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
this._showFocusableNodes = (slideComponent) => {
|
|
29
|
+
this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
|
|
30
|
+
};
|
|
31
|
+
this._hideFocusableNodes = (slideComponent) => {
|
|
32
|
+
this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
|
|
33
|
+
};
|
|
34
|
+
this._handleFocusableNodes = ({ slide }, action) => {
|
|
35
|
+
const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
|
|
36
|
+
if ($focusableSlideChildren.length === 0)
|
|
37
|
+
return;
|
|
38
|
+
const newTabindex = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? '0' : '-1';
|
|
39
|
+
$focusableSlideChildren.forEach(($element) => $element.setAttribute('tabindex', newTabindex));
|
|
40
|
+
};
|
|
20
41
|
}
|
|
21
42
|
get sliderSettings() {
|
|
22
43
|
return this._settings;
|
|
@@ -36,10 +57,36 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
|
36
57
|
if (this._settings.mountOnConnectedCallback) {
|
|
37
58
|
this._slider.mount();
|
|
38
59
|
}
|
|
60
|
+
this._slider.on('visible', this._showFocusableNodes);
|
|
61
|
+
this._slider.on('hidden', this._hideFocusableNodes);
|
|
62
|
+
const mutationObserver = new MutationObserver((mutationList) => {
|
|
63
|
+
for (const mutation of mutationList) {
|
|
64
|
+
if (mutation.type !== "childList")
|
|
65
|
+
continue;
|
|
66
|
+
const $target = mutation.target;
|
|
67
|
+
const isFocusable = UiDomUtils.isFocusable($target);
|
|
68
|
+
const hasBeenEncountered = this._$focusableElements.includes($target);
|
|
69
|
+
const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
|
|
70
|
+
if ($focusableChildren.length === 0 && (!isFocusable || hasBeenEncountered))
|
|
71
|
+
continue;
|
|
72
|
+
if (isFocusable) {
|
|
73
|
+
this._handleFocusableElementOnInit($target);
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
$focusableChildren.forEach(($child) => this._handleFocusableElementOnInit($child));
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
mutationObserver.observe(this, { childList: true, subtree: true });
|
|
39
80
|
}
|
|
40
81
|
getSlider() {
|
|
41
82
|
return this._slider;
|
|
42
83
|
}
|
|
84
|
+
disconnectedCallback() {
|
|
85
|
+
var _a, _b;
|
|
86
|
+
super.disconnectedCallback();
|
|
87
|
+
(_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
|
|
88
|
+
(_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
|
|
89
|
+
}
|
|
43
90
|
};
|
|
44
91
|
__decorate([
|
|
45
92
|
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;AACA;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"}
|