@shoper/phoenix_design_system 1.17.0 → 1.17.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.
- package/build/cjs/packages/phoenix/src/components/accordion/accordion.js +1 -0
- package/build/cjs/packages/phoenix/src/components/accordion/accordion.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js +1 -0
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/accordion/accordion_toggler.js +1 -1
- package/build/cjs/packages/phoenix/src/components/scroll_to/scroll_to.js +1 -0
- package/build/cjs/packages/phoenix/src/components/scroll_to/scroll_to.js.map +1 -1
- package/build/cjs/packages/phoenix/src/components/slider/slider.js +50 -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 +1 -0
- package/build/esm/packages/phoenix/src/components/accordion/accordion.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js +1 -0
- package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.js +1 -1
- package/build/esm/packages/phoenix/src/components/scroll_to/scroll_to.js +1 -0
- package/build/esm/packages/phoenix/src/components/scroll_to/scroll_to.js.map +1 -1
- package/build/esm/packages/phoenix/src/components/slider/slider.d.ts +9 -0
- package/build/esm/packages/phoenix/src/components/slider/slider.js +51 -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,6 +18,7 @@ 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');
|
|
21
22
|
}
|
|
22
23
|
enable() {
|
|
23
24
|
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;AACA;"}
|
|
@@ -26,6 +26,7 @@ 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');
|
|
29
30
|
}
|
|
30
31
|
connectedCallback() {
|
|
31
32
|
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;AACA;"}
|
|
@@ -39,7 +39,7 @@ exports.HAccordionToggler = class HAccordionToggler extends phoenix_light_lit_el
|
|
|
39
39
|
this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
|
40
40
|
if (disabled) {
|
|
41
41
|
this.removeAttribute('role');
|
|
42
|
-
this.
|
|
42
|
+
this.setAttribute('tabindex', '-1');
|
|
43
43
|
}
|
|
44
44
|
else {
|
|
45
45
|
this.setAttribute('role', 'button');
|
|
@@ -19,6 +19,7 @@ exports.HScrollTo = class HScrollTo extends phoenix_light_lit_element.PhoenixLig
|
|
|
19
19
|
const elTopPosition = $scrollTo.getBoundingClientRect().top;
|
|
20
20
|
requestAnimationFrame(() => {
|
|
21
21
|
window.scrollTo({ top: elTopPosition + window.scrollY, behavior: this.behavior });
|
|
22
|
+
$scrollTo.focus();
|
|
22
23
|
});
|
|
23
24
|
}
|
|
24
25
|
};
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -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,37 @@ 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._showFocusableNodes = (slideComponent) => {
|
|
27
|
+
this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
|
|
28
|
+
};
|
|
29
|
+
this._hideFocusableNodes = (slideComponent) => {
|
|
30
|
+
this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
|
|
31
|
+
};
|
|
32
|
+
this._handleFocusableNodes = ({ slide }, action) => {
|
|
33
|
+
const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
|
|
34
|
+
if ($focusableSlideChildren.length === 0)
|
|
35
|
+
return;
|
|
36
|
+
const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
|
|
37
|
+
$focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
|
|
38
|
+
};
|
|
39
|
+
this._scanMutationsForNewFocusableElements = (mutationList) => {
|
|
40
|
+
for (const mutation of mutationList) {
|
|
41
|
+
if (mutation.type !== "childList")
|
|
42
|
+
continue;
|
|
43
|
+
const $target = mutation.target;
|
|
44
|
+
const isFocusable = utilities.UiDomUtils.isFocusable($target);
|
|
45
|
+
const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
|
|
46
|
+
isFocusable && this._initializeFocusableElement($target);
|
|
47
|
+
$focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
this._initializeFocusableElement = ($element) => {
|
|
51
|
+
!this._$focusableElements.includes($element) && this._$focusableElements.push($element);
|
|
52
|
+
if ($element.closest('[aria-hidden="true"]')) {
|
|
53
|
+
this._hideFocusableElement($element);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
24
56
|
}
|
|
25
57
|
get sliderSettings() {
|
|
26
58
|
return this._settings;
|
|
@@ -40,10 +72,28 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
|
|
|
40
72
|
if (this._settings.mountOnConnectedCallback) {
|
|
41
73
|
this._slider.mount();
|
|
42
74
|
}
|
|
75
|
+
this._slider.on('visible', this._showFocusableNodes);
|
|
76
|
+
this._slider.on('hidden', this._hideFocusableNodes);
|
|
77
|
+
const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
|
|
78
|
+
mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
|
|
79
|
+
}
|
|
80
|
+
_showFocusableElement($element) {
|
|
81
|
+
$element.setAttribute('tabindex', '0');
|
|
82
|
+
$element.removeAttribute('aria-hidden');
|
|
83
|
+
}
|
|
84
|
+
_hideFocusableElement($element) {
|
|
85
|
+
$element.setAttribute('tabindex', '-1');
|
|
86
|
+
$element.setAttribute('aria-hidden', 'true');
|
|
43
87
|
}
|
|
44
88
|
getSlider() {
|
|
45
89
|
return this._slider;
|
|
46
90
|
}
|
|
91
|
+
disconnectedCallback() {
|
|
92
|
+
var _a, _b;
|
|
93
|
+
super.disconnectedCallback();
|
|
94
|
+
(_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
|
|
95
|
+
(_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
|
|
96
|
+
}
|
|
47
97
|
};
|
|
48
98
|
tslib_es6.__decorate([
|
|
49
99
|
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;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,6 +14,7 @@ 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');
|
|
17
18
|
}
|
|
18
19
|
enable() {
|
|
19
20
|
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;AACA;"}
|
|
@@ -22,6 +22,7 @@ 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');
|
|
25
26
|
}
|
|
26
27
|
connectedCallback() {
|
|
27
28
|
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;AACA;"}
|
|
@@ -35,7 +35,7 @@ let HAccordionToggler = class HAccordionToggler extends PhoenixLightLitElement {
|
|
|
35
35
|
this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
|
|
36
36
|
if (disabled) {
|
|
37
37
|
this.removeAttribute('role');
|
|
38
|
-
this.
|
|
38
|
+
this.setAttribute('tabindex', '-1');
|
|
39
39
|
}
|
|
40
40
|
else {
|
|
41
41
|
this.setAttribute('role', 'button');
|
|
@@ -15,6 +15,7 @@ let HScrollTo = class HScrollTo extends PhoenixLightLitElement {
|
|
|
15
15
|
const elTopPosition = $scrollTo.getBoundingClientRect().top;
|
|
16
16
|
requestAnimationFrame(() => {
|
|
17
17
|
window.scrollTo({ top: elTopPosition + window.scrollY, behavior: this.behavior });
|
|
18
|
+
$scrollTo.focus();
|
|
18
19
|
});
|
|
19
20
|
}
|
|
20
21
|
};
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -7,6 +7,15 @@ 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 _showFocusableNodes;
|
|
13
|
+
private _hideFocusableNodes;
|
|
14
|
+
private _handleFocusableNodes;
|
|
15
|
+
private _showFocusableElement;
|
|
16
|
+
private _hideFocusableElement;
|
|
17
|
+
private _scanMutationsForNewFocusableElements;
|
|
18
|
+
private _initializeFocusableElement;
|
|
11
19
|
getSlider(): ISlider | null;
|
|
20
|
+
disconnectedCallback(): void;
|
|
12
21
|
}
|
|
@@ -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,37 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
|
17
18
|
focus: 'center'
|
|
18
19
|
};
|
|
19
20
|
this._slider = null;
|
|
21
|
+
this._$focusableElements = [];
|
|
22
|
+
this._showFocusableNodes = (slideComponent) => {
|
|
23
|
+
this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
|
|
24
|
+
};
|
|
25
|
+
this._hideFocusableNodes = (slideComponent) => {
|
|
26
|
+
this._handleFocusableNodes(slideComponent, SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
|
|
27
|
+
};
|
|
28
|
+
this._handleFocusableNodes = ({ slide }, action) => {
|
|
29
|
+
const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
|
|
30
|
+
if ($focusableSlideChildren.length === 0)
|
|
31
|
+
return;
|
|
32
|
+
const updateFocusability = action === SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
|
|
33
|
+
$focusableSlideChildren.forEach(($element) => (updateFocusability($element)));
|
|
34
|
+
};
|
|
35
|
+
this._scanMutationsForNewFocusableElements = (mutationList) => {
|
|
36
|
+
for (const mutation of mutationList) {
|
|
37
|
+
if (mutation.type !== "childList")
|
|
38
|
+
continue;
|
|
39
|
+
const $target = mutation.target;
|
|
40
|
+
const isFocusable = UiDomUtils.isFocusable($target);
|
|
41
|
+
const $focusableChildren = [...$target.querySelectorAll(UiDomUtils.getFocusableSelector())];
|
|
42
|
+
isFocusable && this._initializeFocusableElement($target);
|
|
43
|
+
$focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
this._initializeFocusableElement = ($element) => {
|
|
47
|
+
!this._$focusableElements.includes($element) && this._$focusableElements.push($element);
|
|
48
|
+
if ($element.closest('[aria-hidden="true"]')) {
|
|
49
|
+
this._hideFocusableElement($element);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
20
52
|
}
|
|
21
53
|
get sliderSettings() {
|
|
22
54
|
return this._settings;
|
|
@@ -36,10 +68,28 @@ let HSlider = class HSlider extends PhoenixLightLitElement {
|
|
|
36
68
|
if (this._settings.mountOnConnectedCallback) {
|
|
37
69
|
this._slider.mount();
|
|
38
70
|
}
|
|
71
|
+
this._slider.on('visible', this._showFocusableNodes);
|
|
72
|
+
this._slider.on('hidden', this._hideFocusableNodes);
|
|
73
|
+
const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
|
|
74
|
+
mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
|
|
75
|
+
}
|
|
76
|
+
_showFocusableElement($element) {
|
|
77
|
+
$element.setAttribute('tabindex', '0');
|
|
78
|
+
$element.removeAttribute('aria-hidden');
|
|
79
|
+
}
|
|
80
|
+
_hideFocusableElement($element) {
|
|
81
|
+
$element.setAttribute('tabindex', '-1');
|
|
82
|
+
$element.setAttribute('aria-hidden', 'true');
|
|
39
83
|
}
|
|
40
84
|
getSlider() {
|
|
41
85
|
return this._slider;
|
|
42
86
|
}
|
|
87
|
+
disconnectedCallback() {
|
|
88
|
+
var _a, _b;
|
|
89
|
+
super.disconnectedCallback();
|
|
90
|
+
(_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
|
|
91
|
+
(_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
|
|
92
|
+
}
|
|
43
93
|
};
|
|
44
94
|
__decorate([
|
|
45
95
|
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;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"}
|