@carbon/ibm-products-web-components 0.21.1 → 0.22.0
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/custom-elements.json +102 -15
- package/es/components/about-modal/about-modal.d.ts +19 -3
- package/es/components/about-modal/about-modal.js +33 -2
- package/es/components/about-modal/about-modal.js.map +1 -1
- package/es/components/interstitial-screen/interstitial-screen-body-item.scss.js +1 -1
- package/es/components/interstitial-screen/interstitial-screen-body.d.ts +2 -0
- package/es/components/interstitial-screen/interstitial-screen-body.js +30 -6
- package/es/components/interstitial-screen/interstitial-screen-body.js.map +1 -1
- package/es/components/interstitial-screen/interstitial-screen-body.scss.js +1 -1
- package/es/components/interstitial-screen/interstitial-screen-footer.d.ts +3 -0
- package/es/components/interstitial-screen/interstitial-screen-footer.js +32 -3
- package/es/components/interstitial-screen/interstitial-screen-footer.js.map +1 -1
- package/es/components/interstitial-screen/interstitial-screen-footer.scss.js +1 -1
- package/es/components/interstitial-screen/interstitial-screen-header.d.ts +2 -0
- package/es/components/interstitial-screen/interstitial-screen-header.js +17 -1
- package/es/components/interstitial-screen/interstitial-screen-header.js.map +1 -1
- package/es/components/interstitial-screen/interstitial-screen.d.ts +9 -5
- package/es/components/interstitial-screen/interstitial-screen.js +45 -22
- package/es/components/interstitial-screen/interstitial-screen.js.map +1 -1
- package/es/components/interstitial-screen/interstitial-screen.test.d.ts +1 -0
- package/es/components/interstitial-screen/interstitial-screen.test.js +329 -0
- package/es/components/interstitial-screen/interstitial-screen.test.js.map +1 -0
- package/es/components/notification-panel/notification-panel.d.ts +6 -1
- package/es/components/notification-panel/notification-panel.js +27 -8
- package/es/components/notification-panel/notification-panel.js.map +1 -1
- package/es/components/notification-panel/notification-panel.test.js +53 -0
- package/es/components/notification-panel/notification-panel.test.js.map +1 -1
- package/es/components/options-tile/options-tile.d.ts +9 -2
- package/es/components/options-tile/options-tile.js +26 -12
- package/es/components/options-tile/options-tile.js.map +1 -1
- package/es/components/options-tile/options-tile.scss.js +1 -1
- package/es/components/options-tile/options-tile.test.js +7 -7
- package/es/components/options-tile/options-tile.test.js.map +1 -1
- package/es/components/page-header/_story-assets/set-of-tags/index.d.ts +9 -0
- package/es/components/page-header/_story-assets/set-of-tags/index.js +9 -0
- package/es/components/page-header/_story-assets/set-of-tags/index.js.map +1 -0
- package/es/components/page-header/_story-assets/set-of-tags/set-of-tags.d.ts +40 -0
- package/es/components/page-header/_story-assets/set-of-tags/set-of-tags.js +260 -0
- package/es/components/page-header/_story-assets/set-of-tags/set-of-tags.js.map +1 -0
- package/es/components/page-header/_story-assets/set-of-tags/set-of-tags.scss.js +13 -0
- package/es/components/page-header/_story-assets/set-of-tags/set-of-tags.scss.js.map +1 -0
- package/es/components/page-header/_story-assets/set-of-tags/utils.d.ts +23 -0
- package/es/components/page-header/_story-assets/set-of-tags/utils.js +44 -0
- package/es/components/page-header/_story-assets/set-of-tags/utils.js.map +1 -0
- package/es/components/page-header/context.d.ts +1 -0
- package/es/components/page-header/context.js +1 -0
- package/es/components/page-header/context.js.map +1 -1
- package/es/components/page-header/page-header-breadcrumb.d.ts +1 -0
- package/es/components/page-header/page-header-breadcrumb.js +14 -2
- package/es/components/page-header/page-header-breadcrumb.js.map +1 -1
- package/es/components/page-header/page-header-content.d.ts +1 -0
- package/es/components/page-header/page-header-content.js +12 -2
- package/es/components/page-header/page-header-content.js.map +1 -1
- package/es/components/page-header/page-header-title-breadcrumb.js +6 -0
- package/es/components/page-header/page-header-title-breadcrumb.js.map +1 -1
- package/es/components/page-header/page-header.d.ts +2 -0
- package/es/components/page-header/page-header.js +33 -1
- package/es/components/page-header/page-header.js.map +1 -1
- package/es/components/page-header/page-header.scss.js +1 -1
- package/es/components/side-panel/_story-assets/index.js +4 -0
- package/es/components/side-panel/_story-assets/index.js.map +1 -1
- package/es/components/side-panel/side-panel.d.ts +12 -13
- package/es/components/side-panel/side-panel.js +59 -89
- package/es/components/side-panel/side-panel.js.map +1 -1
- package/es/components/side-panel/side-panel.scss.js +1 -1
- package/es/components/truncated-text/truncated-text.js +25 -7
- package/es/components/truncated-text/truncated-text.js.map +1 -1
- package/es/components/truncated-text/truncated-text.scss.js +1 -1
- package/es/node_modules/@carbon/utilities/es/overflowHandler/overflowHandler.js +11 -0
- package/es/node_modules/@carbon/utilities/es/overflowHandler/overflowHandler.js.map +1 -0
- package/es/packages/ibm-products-web-components/package.json.js +1 -1
- package/es/utilities/carousel/carousel.d.ts +6 -0
- package/es/utilities/carousel/carousel.js +133 -2
- package/es/utilities/carousel/carousel.js.map +1 -1
- package/es/utilities/carousel/types.d.ts +1 -0
- package/es-custom/components/about-modal/about-modal.d.ts +19 -3
- package/es-custom/components/about-modal/about-modal.js +33 -2
- package/es-custom/components/about-modal/about-modal.js.map +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-body-item.scss.js +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-body.d.ts +2 -0
- package/es-custom/components/interstitial-screen/interstitial-screen-body.js +30 -6
- package/es-custom/components/interstitial-screen/interstitial-screen-body.js.map +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-body.scss.js +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.d.ts +3 -0
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.js +32 -3
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.js.map +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-footer.scss.js +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-header.d.ts +2 -0
- package/es-custom/components/interstitial-screen/interstitial-screen-header.js +17 -1
- package/es-custom/components/interstitial-screen/interstitial-screen-header.js.map +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen.d.ts +9 -5
- package/es-custom/components/interstitial-screen/interstitial-screen.js +45 -22
- package/es-custom/components/interstitial-screen/interstitial-screen.js.map +1 -1
- package/es-custom/components/interstitial-screen/interstitial-screen.test.d.ts +1 -0
- package/es-custom/components/interstitial-screen/interstitial-screen.test.js +329 -0
- package/es-custom/components/interstitial-screen/interstitial-screen.test.js.map +1 -0
- package/es-custom/components/notification-panel/notification-panel.d.ts +6 -1
- package/es-custom/components/notification-panel/notification-panel.js +27 -8
- package/es-custom/components/notification-panel/notification-panel.js.map +1 -1
- package/es-custom/components/notification-panel/notification-panel.test.js +53 -0
- package/es-custom/components/notification-panel/notification-panel.test.js.map +1 -1
- package/es-custom/components/options-tile/options-tile.d.ts +9 -2
- package/es-custom/components/options-tile/options-tile.js +26 -12
- package/es-custom/components/options-tile/options-tile.js.map +1 -1
- package/es-custom/components/options-tile/options-tile.scss.js +1 -1
- package/es-custom/components/options-tile/options-tile.test.js +7 -7
- package/es-custom/components/options-tile/options-tile.test.js.map +1 -1
- package/es-custom/components/page-header/_story-assets/set-of-tags/index.d.ts +9 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/index.js +9 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/index.js.map +1 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/set-of-tags.d.ts +40 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/set-of-tags.js +260 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/set-of-tags.js.map +1 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/set-of-tags.scss.js +13 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/set-of-tags.scss.js.map +1 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/utils.d.ts +23 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/utils.js +44 -0
- package/es-custom/components/page-header/_story-assets/set-of-tags/utils.js.map +1 -0
- package/es-custom/components/page-header/context.d.ts +1 -0
- package/es-custom/components/page-header/context.js +1 -0
- package/es-custom/components/page-header/context.js.map +1 -1
- package/es-custom/components/page-header/page-header-breadcrumb.d.ts +1 -0
- package/es-custom/components/page-header/page-header-breadcrumb.js +14 -2
- package/es-custom/components/page-header/page-header-breadcrumb.js.map +1 -1
- package/es-custom/components/page-header/page-header-content.d.ts +1 -0
- package/es-custom/components/page-header/page-header-content.js +12 -2
- package/es-custom/components/page-header/page-header-content.js.map +1 -1
- package/es-custom/components/page-header/page-header-title-breadcrumb.js +6 -0
- package/es-custom/components/page-header/page-header-title-breadcrumb.js.map +1 -1
- package/es-custom/components/page-header/page-header.d.ts +2 -0
- package/es-custom/components/page-header/page-header.js +33 -1
- package/es-custom/components/page-header/page-header.js.map +1 -1
- package/es-custom/components/page-header/page-header.scss.js +1 -1
- package/es-custom/components/side-panel/_story-assets/index.js +4 -0
- package/es-custom/components/side-panel/_story-assets/index.js.map +1 -1
- package/es-custom/components/side-panel/side-panel.d.ts +12 -13
- package/es-custom/components/side-panel/side-panel.js +59 -89
- package/es-custom/components/side-panel/side-panel.js.map +1 -1
- package/es-custom/components/side-panel/side-panel.scss.js +1 -1
- package/es-custom/components/truncated-text/truncated-text.js +25 -7
- package/es-custom/components/truncated-text/truncated-text.js.map +1 -1
- package/es-custom/components/truncated-text/truncated-text.scss.js +1 -1
- package/es-custom/node_modules/@carbon/utilities/es/overflowHandler/overflowHandler.js +11 -0
- package/es-custom/node_modules/@carbon/utilities/es/overflowHandler/overflowHandler.js.map +1 -0
- package/es-custom/packages/ibm-products-web-components/package.json.js +1 -1
- package/es-custom/utilities/carousel/carousel.d.ts +6 -0
- package/es-custom/utilities/carousel/carousel.js +133 -2
- package/es-custom/utilities/carousel/carousel.js.map +1 -1
- package/es-custom/utilities/carousel/types.d.ts +1 -0
- package/lib/components/about-modal/about-modal.d.ts +19 -3
- package/lib/components/interstitial-screen/interstitial-screen-body.d.ts +2 -0
- package/lib/components/interstitial-screen/interstitial-screen-footer.d.ts +3 -0
- package/lib/components/interstitial-screen/interstitial-screen-header.d.ts +2 -0
- package/lib/components/interstitial-screen/interstitial-screen.d.ts +9 -5
- package/lib/components/interstitial-screen/interstitial-screen.test.d.ts +1 -0
- package/lib/components/notification-panel/notification-panel.d.ts +6 -1
- package/lib/components/options-tile/options-tile.d.ts +9 -2
- package/lib/components/page-header/_story-assets/set-of-tags/index.d.ts +9 -0
- package/lib/components/page-header/_story-assets/set-of-tags/set-of-tags.d.ts +40 -0
- package/lib/components/page-header/_story-assets/set-of-tags/utils.d.ts +23 -0
- package/lib/components/page-header/context.d.ts +1 -0
- package/lib/components/page-header/page-header-breadcrumb.d.ts +1 -0
- package/lib/components/page-header/page-header-content.d.ts +1 -0
- package/lib/components/page-header/page-header.d.ts +2 -0
- package/lib/components/side-panel/side-panel.d.ts +12 -13
- package/lib/utilities/carousel/carousel.d.ts +6 -0
- package/lib/utilities/carousel/types.d.ts +1 -0
- package/package.json +4 -3
- package/scss/components/interstitial-screen/interstitial-screen-body-item.scss +1 -1
- package/scss/components/interstitial-screen/interstitial-screen-body.scss +0 -1
- package/scss/components/interstitial-screen/interstitial-screen-footer.scss +0 -1
- package/scss/components/options-tile/options-tile.scss +8 -2
- package/scss/components/options-tile/story-styles.scss +21 -0
- package/scss/components/page-header/_story-assets/set-of-tags/set-of-tags.scss +94 -0
- package/scss/components/page-header/page-header.scss +69 -33
- package/scss/components/truncated-text/truncated-text.scss +4 -0
@@ -13,6 +13,12 @@ import { registerSwipeEvents } from './swipeEvents.js';
|
|
13
13
|
* This source code is licensed under the Apache-2.0 license found in the
|
14
14
|
* LICENSE file in the root directory of this source tree.
|
15
15
|
*/
|
16
|
+
/**
|
17
|
+
* Initializes a carousel with the given configuration.
|
18
|
+
* @param carouselContainer - The HTMLElement representing the carousel container.
|
19
|
+
* @param config - Optional configuration object.
|
20
|
+
* @returns An object containing methods to control the carousel.
|
21
|
+
*/
|
16
22
|
const initCarousel = (carouselContainer, config) => {
|
17
23
|
const prefix = 'carousel';
|
18
24
|
let viewIndexStack = [0];
|
@@ -20,9 +26,26 @@ const initCarousel = (carouselContainer, config) => {
|
|
20
26
|
const refs = {};
|
21
27
|
const minHeight = 10; // 10 rem
|
22
28
|
const { onViewChangeStart, onViewChangeEnd, excludeSwipeSupport } = config || {};
|
29
|
+
/**
|
30
|
+
* Registers an HTMLElement at a specific index in the refs array.
|
31
|
+
*
|
32
|
+
* @param {number} index - The index at which to register the HTMLElement.
|
33
|
+
* @param {HTMLElement} ref - The HTMLElement to register.
|
34
|
+
*
|
35
|
+
* @example
|
36
|
+
* registerRef(0, document.getElementById('myElement'));
|
37
|
+
*/
|
23
38
|
const registerRef = (index, ref) => {
|
24
39
|
refs[index] = ref;
|
25
40
|
};
|
41
|
+
/**
|
42
|
+
* Wraps all child elements of a given container into a new div with the specified class.
|
43
|
+
* If an element with the specified class already exists as a child of the container, the function does nothing.
|
44
|
+
*
|
45
|
+
* @param {HTMLElement} container - The container element to wrap child elements of.
|
46
|
+
* @param {string} wrapperClass - The class name to apply to the new wrapper div.
|
47
|
+
* @returns {void}
|
48
|
+
*/
|
26
49
|
const wrapAllItems = (container, wrapperClass) => {
|
27
50
|
if (container.querySelector(`.${wrapperClass}`)) {
|
28
51
|
return;
|
@@ -40,6 +63,10 @@ const initCarousel = (carouselContainer, config) => {
|
|
40
63
|
elem: refs[id],
|
41
64
|
}));
|
42
65
|
};
|
66
|
+
/**
|
67
|
+
* Retrieves the current carousel response based on the view index stack and reference objects.
|
68
|
+
* @returns {CarouselResponse} - An object containing carousel response details.
|
69
|
+
*/
|
43
70
|
const getCallbackResponse = () => {
|
44
71
|
const totalRefs = Object.keys(refs).length;
|
45
72
|
const lastElementRef = refs[totalRefs - 1];
|
@@ -51,11 +78,27 @@ const initCarousel = (carouselContainer, config) => {
|
|
51
78
|
historyStack: historicalData,
|
52
79
|
};
|
53
80
|
};
|
81
|
+
/**
|
82
|
+
* Handles the start of a transition in the application.
|
83
|
+
* This function is responsible for capturing the current state of the view index stack
|
84
|
+
* and invoking a callback function if it exists.
|
85
|
+
*
|
86
|
+
* @function handleTransitionStart
|
87
|
+
* @returns {void}
|
88
|
+
*/
|
54
89
|
const handleTransitionStart = () => {
|
55
90
|
previousViewIndexStack = [...viewIndexStack];
|
56
91
|
const callbackData = getCallbackResponse();
|
57
92
|
onViewChangeStart === null || onViewChangeStart === void 0 ? void 0 : onViewChangeStart(callbackData);
|
58
93
|
};
|
94
|
+
/**
|
95
|
+
* Handles the 'transitionend' event for a given element.
|
96
|
+
* This function checks if the element has a 'data-index' attribute and if its value matches the current view index.
|
97
|
+
* If both conditions are met, it calls the 'onViewChangeEnd' callback with the response from 'getCallbackResponse'.
|
98
|
+
*
|
99
|
+
* @param {HTMLElement | null} el - The element to handle the 'transitionend' event for.
|
100
|
+
* @returns {void}
|
101
|
+
*/
|
59
102
|
const handleTransitionEnd = (el) => {
|
60
103
|
if (!el) {
|
61
104
|
return;
|
@@ -67,11 +110,24 @@ const initCarousel = (carouselContainer, config) => {
|
|
67
110
|
onViewChangeEnd === null || onViewChangeEnd === void 0 ? void 0 : onViewChangeEnd(callbackData);
|
68
111
|
}
|
69
112
|
};
|
113
|
+
/**
|
114
|
+
* A utility function to sanitize an index value.
|
115
|
+
* This function ensures the index stays within the bounds of the refs array.
|
116
|
+
*
|
117
|
+
* @param {number} idx - The index to be sanitized.
|
118
|
+
* @returns {number} - The sanitized index.
|
119
|
+
*/
|
70
120
|
const sanitizeIndex = (idx) => {
|
71
121
|
const floorVal = 0;
|
72
122
|
const ceilVal = Object.keys(refs).length - 1;
|
73
123
|
return Math.max(floorVal, Math.min(idx, ceilVal));
|
74
124
|
};
|
125
|
+
/**
|
126
|
+
* Handles the 'transitionend' event for a given element.
|
127
|
+
* This function checks if the element has a 'data-index' attribute and if its value matches the current view index.
|
128
|
+
* If both conditions are met, it calls the 'onViewChangeEnd' callback with the response from 'getCallbackResponse'.
|
129
|
+
* @returns {void}
|
130
|
+
*/
|
75
131
|
const transitionToViewIndex = (idx) => {
|
76
132
|
const sanitizedIndex = sanitizeIndex(idx);
|
77
133
|
if (viewIndexStack[0] !== sanitizedIndex) {
|
@@ -83,6 +139,16 @@ const initCarousel = (carouselContainer, config) => {
|
|
83
139
|
const transitionComplete = (ref) => {
|
84
140
|
handleTransitionEnd(ref);
|
85
141
|
};
|
142
|
+
/**
|
143
|
+
* Attaches class names to an HTMLElement based on given conditions.
|
144
|
+
*
|
145
|
+
* @param {HTMLElement} viewItem - The HTML element to which class names will be added.
|
146
|
+
* @param {boolean} isInViewStack - Indicates if the view item is in the view stack.
|
147
|
+
* @param {boolean} isActive - Indicates if the view item is active.
|
148
|
+
* @param {boolean} isBeingRecycledOut - Indicates if the view item is being recycled out.
|
149
|
+
* @param {boolean} isBeingRecycledIn - Indicates if the view item is being recycled in.
|
150
|
+
* @returns {void}
|
151
|
+
*/
|
86
152
|
const attachClassNames = (viewItem, isInViewStack, isActive, isBeingRecycledOut, isBeingRecycledIn) => {
|
87
153
|
viewItem.classList.add(`${prefix}__view`);
|
88
154
|
viewItem.classList.toggle(`${prefix}__view-in-stack`, isInViewStack && !isActive);
|
@@ -100,6 +166,12 @@ const initCarousel = (carouselContainer, config) => {
|
|
100
166
|
const remToPx = (rem) => {
|
101
167
|
return (rem * parseFloat(getComputedStyle(document.documentElement).fontSize));
|
102
168
|
};
|
169
|
+
/**
|
170
|
+
* Updates the height of the items wrapper in a carousel based on the smallest item height and a threshold height.
|
171
|
+
* This function ensures that the items wrapper does not have a height smaller than the threshold, adjusting the item height if necessary.
|
172
|
+
*
|
173
|
+
* @param {number} itemHeightSmallest - The smallest height of an item in pixels.
|
174
|
+
*/
|
103
175
|
const updateHeightForWrapper = (itemHeightSmallest) => {
|
104
176
|
const thresholdHeight = remToPx(minHeight);
|
105
177
|
const containerHeight = carouselContainer.clientHeight;
|
@@ -113,6 +185,10 @@ const initCarousel = (carouselContainer, config) => {
|
|
113
185
|
}
|
114
186
|
}
|
115
187
|
};
|
188
|
+
/**
|
189
|
+
* Performs animation on view items based on their state in the view index stack.
|
190
|
+
* @param {boolean} isInitial - A flag indicating if this is the initial animation.
|
191
|
+
*/
|
116
192
|
const performAnimation = (isInitial) => {
|
117
193
|
let itemHeightSmallest = 0;
|
118
194
|
Array.from(viewItems).forEach((viewItem, index) => {
|
@@ -145,6 +221,8 @@ const initCarousel = (carouselContainer, config) => {
|
|
145
221
|
transitionComplete(viewItem);
|
146
222
|
}
|
147
223
|
};
|
224
|
+
// store reference on the element for later removal
|
225
|
+
viewItem._carouselListener = listener;
|
148
226
|
viewItem.addEventListener('animationend', listener);
|
149
227
|
viewItem.addEventListener('transitionend', listener);
|
150
228
|
viewItem.setAttribute('data-index', index.toString());
|
@@ -154,10 +232,22 @@ const initCarousel = (carouselContainer, config) => {
|
|
154
232
|
handleTransitionEnd(Array.from(viewItems)[0]);
|
155
233
|
}
|
156
234
|
};
|
235
|
+
/**
|
236
|
+
* A utility function to navigate to the next view in the stack.
|
237
|
+
* This function increments the current view index and transitions to the new index.
|
238
|
+
*
|
239
|
+
* @returns {void} - This function does not return any value.
|
240
|
+
*/
|
157
241
|
const navigateNext = () => {
|
158
242
|
const targetViewIndex = viewIndexStack[0] + 1;
|
159
243
|
transitionToViewIndex(targetViewIndex);
|
160
244
|
};
|
245
|
+
/**
|
246
|
+
* Navigates to the previous view in the view stack.
|
247
|
+
* @function navigatePrev
|
248
|
+
* @description This function checks if there is a previous view in the stack. If so, it triggers a transition start, removes the current view from the stack, and performs an animation to transition to the previous view.
|
249
|
+
* @returns {void} - This function does not return a value.
|
250
|
+
*/
|
161
251
|
const navigatePrev = () => {
|
162
252
|
if (viewIndexStack.length - 1 >= 1) {
|
163
253
|
handleTransitionStart();
|
@@ -165,22 +255,62 @@ const initCarousel = (carouselContainer, config) => {
|
|
165
255
|
performAnimation(false);
|
166
256
|
}
|
167
257
|
};
|
258
|
+
/**
|
259
|
+
* A function that transitions the view to a specified index.
|
260
|
+
*
|
261
|
+
* @param {number} index - The index to transition to.
|
262
|
+
* @returns {void} - This function does not return a value.
|
263
|
+
*/
|
168
264
|
const goToIndex = (index) => {
|
169
265
|
transitionToViewIndex(index);
|
170
266
|
};
|
267
|
+
/**
|
268
|
+
* Retrieves the currently active item and its index from the view index stack and references.
|
269
|
+
* @returns An object containing the index and the corresponding item reference.
|
270
|
+
*/
|
171
271
|
const getActiveItem = () => {
|
172
272
|
return {
|
173
273
|
index: viewIndexStack[0],
|
174
274
|
item: refs[viewIndexStack[0]],
|
175
275
|
};
|
176
276
|
};
|
277
|
+
/**
|
278
|
+
* Resets the view index stack and performs an animation.
|
279
|
+
*
|
280
|
+
* @returns {void}
|
281
|
+
*/
|
177
282
|
const reset = () => {
|
178
283
|
viewIndexStack = [0];
|
179
284
|
performAnimation(false);
|
180
285
|
};
|
286
|
+
/**
|
287
|
+
* Removes event listeners for 'animationend' and 'transitionend' events from all elements with references stored in the `refs` object.
|
288
|
+
* Also registers swipe events if `excludeSwipeSupport` is false.
|
289
|
+
*/
|
181
290
|
const destroyEvents = () => {
|
182
|
-
|
291
|
+
Object.values(refs).forEach((el) => {
|
292
|
+
if (el && el._carouselListener) {
|
293
|
+
el.removeEventListener('animationend', el._carouselListener);
|
294
|
+
el.removeEventListener('transitionend', el._carouselListener);
|
295
|
+
}
|
296
|
+
});
|
297
|
+
if (!excludeSwipeSupport) {
|
298
|
+
registerSwipeEvents(carouselContainer, navigateNext, navigatePrev, true);
|
299
|
+
}
|
183
300
|
};
|
301
|
+
/**
|
302
|
+
* Retrieves carousel items from a given container element.
|
303
|
+
* If the container has a 'slot' element, it fetches all elements assigned to that slot.
|
304
|
+
* Otherwise, it fetches all direct children of the container.
|
305
|
+
*
|
306
|
+
* @param {HTMLElement} container - The container element from which to extract carousel items.
|
307
|
+
* @returns {HTMLElement[]} An array of HTMLElements representing the carousel items.
|
308
|
+
*
|
309
|
+
* @example
|
310
|
+
* const carouselContainer = document.querySelector('.carousel-container');
|
311
|
+
* const carouselItems = getCarouselItems(carouselContainer);
|
312
|
+
* console.log(carouselItems); // Logs the carousel items as HTMLElements
|
313
|
+
*/
|
184
314
|
const getCarouselItems = (container) => {
|
185
315
|
const slot = container.querySelector('slot');
|
186
316
|
return slot
|
@@ -202,7 +332,8 @@ const initCarousel = (carouselContainer, config) => {
|
|
202
332
|
reset,
|
203
333
|
goToIndex,
|
204
334
|
getActiveItem,
|
205
|
-
destroyEvents
|
335
|
+
destroyEvents,
|
336
|
+
allViews: refs,
|
206
337
|
};
|
207
338
|
};
|
208
339
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"carousel.js","sources":["../../../src/utilities/carousel/carousel.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAAA;;;;;AAKG;
|
1
|
+
{"version":3,"file":"carousel.js","sources":["../../../src/utilities/carousel/carousel.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
@@ -32,5 +32,6 @@ interface InitCarousel {
|
|
32
32
|
goToIndex: (index: number) => void;
|
33
33
|
getActiveItem: () => ActiveItem;
|
34
34
|
destroyEvents: (() => void) | null;
|
35
|
+
allViews: Record<number, HTMLElement | null>;
|
35
36
|
}
|
36
37
|
export type { CarouselStackHistory, CarouselResponse, InitCarousel };
|
@@ -39,9 +39,11 @@ declare const CDSAboutModal_base: {
|
|
39
39
|
hidePopover(): void;
|
40
40
|
showPopover(): void;
|
41
41
|
togglePopover(force?: boolean): boolean;
|
42
|
-
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options
|
43
|
-
|
44
|
-
|
42
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options
|
43
|
+
/**
|
44
|
+
* Determines if About Modal is open or not.
|
45
|
+
*/
|
46
|
+
?: boolean | AddEventListenerOptions): void;
|
45
47
|
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
46
48
|
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
|
47
49
|
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
@@ -366,6 +368,9 @@ declare const CDSAboutModal_base: {
|
|
366
368
|
* @csspart dialog The dialog.
|
367
369
|
* The custom event fired before this about modal is being closed upon a user gesture.
|
368
370
|
* Cancellation of this event stops the user-initiated action of closing this about modal.
|
371
|
+
* @fires c4p-about-modal-beingclosed
|
372
|
+
* The custom event fired before this about modal is being closed upon a user gesture.
|
373
|
+
* Cancellation of this event stops the user-initiated action of closing this about modal.
|
369
374
|
* @fires c4p-about-modal-closed - The custom event fired after this about modal is closed upon a user gesture.
|
370
375
|
*/
|
371
376
|
declare class CDSAboutModal extends CDSAboutModal_base {
|
@@ -414,6 +419,12 @@ declare class CDSAboutModal extends CDSAboutModal_base {
|
|
414
419
|
updated(): void;
|
415
420
|
render(): import("lit-html").TemplateResult<1>;
|
416
421
|
private _handleKeydown;
|
422
|
+
/**
|
423
|
+
* Handles `click` event on this element.
|
424
|
+
*
|
425
|
+
* @param event The event.
|
426
|
+
*/
|
427
|
+
private _handleOutsideClick;
|
417
428
|
/**
|
418
429
|
* Handles user-initiated close request of this About Modal.
|
419
430
|
*
|
@@ -425,6 +436,11 @@ declare class CDSAboutModal extends CDSAboutModal_base {
|
|
425
436
|
* The name of the custom event fired after this About Modal is closed upon a user gesture.
|
426
437
|
*/
|
427
438
|
static get eventClose(): string;
|
439
|
+
/**
|
440
|
+
* The name of the custom event fired before this About modal is being closed upon a user gesture.
|
441
|
+
* Cancellation of this event stops the user-initiated action of closing this About modal.
|
442
|
+
*/
|
443
|
+
static get eventBeforeClose(): string;
|
428
444
|
static styles: any;
|
429
445
|
}
|
430
446
|
export default CDSAboutModal;
|
@@ -8,7 +8,7 @@
|
|
8
8
|
import { __decorate } from 'tslib';
|
9
9
|
import { LitElement, html } from 'lit';
|
10
10
|
import { property, state, query } from 'lit/decorators.js';
|
11
|
-
import { prefix } from '../../globals/settings.js';
|
11
|
+
import { carbonPrefix, prefix } from '../../globals/settings.js';
|
12
12
|
import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
|
13
13
|
import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
|
14
14
|
import '@carbon/web-components/es-custom/components/modal/index.js';
|
@@ -31,6 +31,9 @@ const blockClass = `${prefix}--about-modal`;
|
|
31
31
|
* @csspart dialog The dialog.
|
32
32
|
* The custom event fired before this about modal is being closed upon a user gesture.
|
33
33
|
* Cancellation of this event stops the user-initiated action of closing this about modal.
|
34
|
+
* @fires c4p-about-modal-beingclosed
|
35
|
+
* The custom event fired before this about modal is being closed upon a user gesture.
|
36
|
+
* Cancellation of this event stops the user-initiated action of closing this about modal.
|
34
37
|
* @fires c4p-about-modal-closed - The custom event fired after this about modal is closed upon a user gesture.
|
35
38
|
*/
|
36
39
|
let CDSAboutModal = class CDSAboutModal extends HostListenerMixin(LitElement) {
|
@@ -53,6 +56,20 @@ let CDSAboutModal = class CDSAboutModal extends HostListenerMixin(LitElement) {
|
|
53
56
|
this._handleClose(target);
|
54
57
|
}
|
55
58
|
};
|
59
|
+
/**
|
60
|
+
* Handles `click` event on this element.
|
61
|
+
*
|
62
|
+
* @param event The event.
|
63
|
+
*/
|
64
|
+
this._handleOutsideClick = (event) => {
|
65
|
+
var _a, _b;
|
66
|
+
const modal = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-modal`);
|
67
|
+
const modalContent = (_b = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.${carbonPrefix}--modal-container`);
|
68
|
+
const path = event.composedPath();
|
69
|
+
if (modalContent && !path.includes(modalContent)) {
|
70
|
+
this._handleClose(event.target);
|
71
|
+
}
|
72
|
+
};
|
56
73
|
/**
|
57
74
|
* Handles user-initiated close request of this About Modal.
|
58
75
|
*
|
@@ -68,7 +85,10 @@ let CDSAboutModal = class CDSAboutModal extends HostListenerMixin(LitElement) {
|
|
68
85
|
triggeredBy,
|
69
86
|
},
|
70
87
|
};
|
71
|
-
this.dispatchEvent(new CustomEvent(this.constructor.
|
88
|
+
if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
|
89
|
+
this.open = false;
|
90
|
+
this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
|
91
|
+
}
|
72
92
|
};
|
73
93
|
}
|
74
94
|
firstUpdated() {
|
@@ -124,6 +144,13 @@ let CDSAboutModal = class CDSAboutModal extends HostListenerMixin(LitElement) {
|
|
124
144
|
static get eventClose() {
|
125
145
|
return `${prefix}-about-modal-closed`;
|
126
146
|
}
|
147
|
+
/**
|
148
|
+
* The name of the custom event fired before this About modal is being closed upon a user gesture.
|
149
|
+
* Cancellation of this event stops the user-initiated action of closing this About modal.
|
150
|
+
*/
|
151
|
+
static get eventBeforeClose() {
|
152
|
+
return `${prefix}-about-modal-beingclosed`;
|
153
|
+
}
|
127
154
|
};
|
128
155
|
CDSAboutModal.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
|
129
156
|
__decorate([
|
@@ -163,6 +190,10 @@ __decorate([
|
|
163
190
|
HostListener('document:keydown')
|
164
191
|
// @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
|
165
192
|
], CDSAboutModal.prototype, "_handleKeydown", void 0);
|
193
|
+
__decorate([
|
194
|
+
HostListener('click')
|
195
|
+
// @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
|
196
|
+
], CDSAboutModal.prototype, "_handleOutsideClick", void 0);
|
166
197
|
CDSAboutModal = __decorate([
|
167
198
|
carbonElement(`${prefix}-about-modal`)
|
168
199
|
], CDSAboutModal);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"about-modal.js","sources":["../../../src/components/about-modal/about-modal.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAUU,MAAA,UAAU,GAAG,CAAG,EAAA,MAAM;AAEnC
|
1
|
+
{"version":3,"file":"about-modal.js","sources":["../../../src/components/about-modal/about-modal.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}
|
@@ -7,7 +7,7 @@
|
|
7
7
|
|
8
8
|
import { css } from 'lit';
|
9
9
|
|
10
|
-
var styles = css(["@keyframes out-to-active{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes active-to-out{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.carousel__view-stack .carousel__itemsWrapper{block-size:100%;inline-size:100%;min-inline-size:20vh;overflow:hidden;position:relative}.carousel__view,:host(.carousel__view){block-size:100%;inline-size:100%;inset-inline-start:100%;overflow:hidden auto;transform:translateX(0);z-index:80}@media (prefers-reduced-motion:no-preference){.carousel__view,:host(.carousel__view){transition:transform .24s cubic-bezier(.5,0,.1,1)}}@media (prefers-reduced-motion:reduce){.carousel__view,:host(.carousel__view){animation:none;transition:none}}.carousel__view-active,:host(.carousel__view-active){block-size:100%;inline-size:100%;inset-inline-start:100%;overflow:hidden auto;transform:translateX(-100%);z-index:100}@media (prefers-reduced-motion:no-preference){.carousel__view-active,:host(.carousel__view-active){transition:transform .24s cubic-bezier(.5,0,.1,1)}}@media (prefers-reduced-motion:reduce){.carousel__view-active,:host(.carousel__view-active){animation:none;transition:none}}.carousel__view-in-stack,:host(.carousel__view-in-stack){block-size:100%;inline-size:100%;inset-inline-start:100%;overflow:hidden auto;transform:translateX(-200%);z-index:90}@media (prefers-reduced-motion:no-preference){.carousel__view-in-stack,:host(.carousel__view-in-stack){transition:transform .24s cubic-bezier(.5,0,.1,1)}}@media (prefers-reduced-motion:reduce){.carousel__view-in-stack,:host(.carousel__view-in-stack){animation:none;transition:none}}.carousel__view-recycle-in,:host(.carousel__view-recycle-in){block-size:100%;inline-size:100%;overflow:hidden auto;z-index:100}@media (prefers-reduced-motion:no-preference){.carousel__view-recycle-in,:host(.carousel__view-recycle-in){animation:out-to-active .24s cubic-bezier(.5,0,.1,1) forwards}}@media (prefers-reduced-motion:reduce){.carousel__view-recycle-in,:host(.carousel__view-recycle-in){animation:none;transition:none}}.carousel__view-recycle-out,:host(.carousel__view-recycle-out){block-size:100%;inline-size:100%;overflow:hidden auto;z-index:90}@media (prefers-reduced-motion:no-preference){.carousel__view-recycle-out,:host(.carousel__view-recycle-out){animation:active-to-out .24s cubic-bezier(.5,0,.1,1) forwards}}@media (prefers-reduced-motion:reduce){.carousel__view-recycle-out,:host(.carousel__view-recycle-out){animation:none;transition:none}}:host{box-sizing:border-box!important;padding-inline-start:2rem}"]);
|
10
|
+
var styles = css(["@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds-custom--layout--size-xs{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xs,1.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-sm,2rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-md,2.5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-lg,3rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-xl,4rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-custom-layout-size-height-context:var(--cds-custom-layout-size-height-2xl,5rem);--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-custom-layout-size-height:var(--cds-custom-layout-size-height-context,var(--cds-custom-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-custom-layout-size-height-min:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-custom-layout-size-height-max:var(--cds-custom-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-custom-layout-density-padding-inline-context:var(--cds-custom-layout-density-padding-inline-normal,1rem);--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-custom-layout-density-padding-inline:var(--cds-custom-layout-density-padding-inline-context,var(--cds-custom-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-custom-layout-density-padding-inline-min:var(--cds-custom-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-custom-layout-density-padding-inline-max:var(--cds-custom-layout-density-padding-inline-normal,1rem)}:root{--cds-custom-layout-size-height-xs:1.5rem;--cds-custom-layout-size-height-sm:2rem;--cds-custom-layout-size-height-md:2.5rem;--cds-custom-layout-size-height-lg:3rem;--cds-custom-layout-size-height-xl:4rem;--cds-custom-layout-size-height-2xl:5rem;--cds-custom-layout-size-height-min:0px;--cds-custom-layout-size-height-max:999999999px;--cds-custom-layout-density-padding-inline-condensed:0.5rem;--cds-custom-layout-density-padding-inline-normal:1rem;--cds-custom-layout-density-padding-inline-min:0px;--cds-custom-layout-density-padding-inline-max:999999999px}.cds-custom--assistive-text,.cds-custom--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}@keyframes out-to-active{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes active-to-out{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.carousel__view-stack .carousel__itemsWrapper{block-size:100%;inline-size:100%;min-inline-size:20vh;overflow:hidden;position:relative}.carousel__view,:host(.carousel__view){block-size:100%;inline-size:100%;inset-inline-start:100%;overflow:hidden auto;transform:translateX(0);z-index:80}@media (prefers-reduced-motion:no-preference){.carousel__view,:host(.carousel__view){transition:transform .24s cubic-bezier(.5,0,.1,1)}}@media (prefers-reduced-motion:reduce){.carousel__view,:host(.carousel__view){animation:none;transition:none}}.carousel__view:focus,:host(.carousel__view:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.carousel__view:focus,:host(.carousel__view:focus){outline-style:dotted}}.carousel__view-active,:host(.carousel__view-active){block-size:100%;inline-size:100%;inset-inline-start:100%;overflow:hidden auto;transform:translateX(-100%);z-index:100}@media (prefers-reduced-motion:no-preference){.carousel__view-active,:host(.carousel__view-active){transition:transform .24s cubic-bezier(.5,0,.1,1)}}@media (prefers-reduced-motion:reduce){.carousel__view-active,:host(.carousel__view-active){animation:none;transition:none}}.carousel__view-active:focus,:host(.carousel__view-active:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.carousel__view-active:focus,:host(.carousel__view-active:focus){outline-style:dotted}}.carousel__view-in-stack,:host(.carousel__view-in-stack){block-size:100%;inline-size:100%;inset-inline-start:100%;overflow:hidden auto;transform:translateX(-200%);z-index:90}@media (prefers-reduced-motion:no-preference){.carousel__view-in-stack,:host(.carousel__view-in-stack){transition:transform .24s cubic-bezier(.5,0,.1,1)}}@media (prefers-reduced-motion:reduce){.carousel__view-in-stack,:host(.carousel__view-in-stack){animation:none;transition:none}}.carousel__view-in-stack:focus,:host(.carousel__view-in-stack:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.carousel__view-in-stack:focus,:host(.carousel__view-in-stack:focus){outline-style:dotted}}.carousel__view-recycle-in,:host(.carousel__view-recycle-in){block-size:100%;inline-size:100%;overflow:hidden auto;z-index:100}@media (prefers-reduced-motion:no-preference){.carousel__view-recycle-in,:host(.carousel__view-recycle-in){animation:out-to-active .24s cubic-bezier(.5,0,.1,1) forwards}}@media (prefers-reduced-motion:reduce){.carousel__view-recycle-in,:host(.carousel__view-recycle-in){animation:none;transition:none}}.carousel__view-recycle-in:focus,:host(.carousel__view-recycle-in:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.carousel__view-recycle-in:focus,:host(.carousel__view-recycle-in:focus){outline-style:dotted}}.carousel__view-recycle-out,:host(.carousel__view-recycle-out){block-size:100%;inline-size:100%;overflow:hidden auto;z-index:90}@media (prefers-reduced-motion:no-preference){.carousel__view-recycle-out,:host(.carousel__view-recycle-out){animation:active-to-out .24s cubic-bezier(.5,0,.1,1) forwards}}@media (prefers-reduced-motion:reduce){.carousel__view-recycle-out,:host(.carousel__view-recycle-out){animation:none;transition:none}}.carousel__view-recycle-out:focus,:host(.carousel__view-recycle-out:focus){outline:2px solid var(--cds-custom-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.carousel__view-recycle-out:focus,:host(.carousel__view-recycle-out:focus){outline-style:dotted}}:host{box-sizing:border-box!important;padding-inline-start:2rem}"]);
|
11
11
|
|
12
12
|
export { styles as default };
|
13
13
|
//# sourceMappingURL=interstitial-screen-body-item.scss.js.map
|
@@ -363,6 +363,7 @@ declare const CDSInterstitialScreenBody_base: {
|
|
363
363
|
* @fires c4p-on-after-step-change - The name of the custom event fired at the end of the step change.
|
364
364
|
*/
|
365
365
|
declare class CDSInterstitialScreenBody extends CDSInterstitialScreenBody_base {
|
366
|
+
slot: string;
|
366
367
|
stepType: 'single' | 'multi';
|
367
368
|
private carouselAPI;
|
368
369
|
private carouselElement;
|
@@ -370,6 +371,7 @@ declare class CDSInterstitialScreenBody extends CDSInterstitialScreenBody_base {
|
|
370
371
|
private _initCarousel;
|
371
372
|
private onViewChangeStart;
|
372
373
|
private onViewChangeEnd;
|
374
|
+
private updateAriaHiddenTabIndex;
|
373
375
|
render(): import("lit-html").TemplateResult<1>;
|
374
376
|
static styles: any;
|
375
377
|
/**
|
@@ -7,7 +7,7 @@
|
|
7
7
|
|
8
8
|
import { __decorate } from 'tslib';
|
9
9
|
import { LitElement, html } from 'lit';
|
10
|
-
import { state } from 'lit/decorators.js';
|
10
|
+
import { property, state } from 'lit/decorators.js';
|
11
11
|
import { prefix } from '../../globals/settings.js';
|
12
12
|
import '@carbon/web-components/es-custom/components/modal/index.js';
|
13
13
|
import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
|
@@ -35,6 +35,7 @@ const blockClass = `${prefix}--interstitial-screen`;
|
|
35
35
|
let CDSInterstitialScreenBody = class CDSInterstitialScreenBody extends HostListenerMixin(LitElement) {
|
36
36
|
constructor() {
|
37
37
|
super(...arguments);
|
38
|
+
this.slot = 'body';
|
38
39
|
this.stepType = 'multi';
|
39
40
|
this.carouselElement = createRef();
|
40
41
|
this.onViewChangeStart = ({ currentIndex, lastIndex, totalViews }) => {
|
@@ -50,6 +51,9 @@ let CDSInterstitialScreenBody = class CDSInterstitialScreenBody extends HostList
|
|
50
51
|
}));
|
51
52
|
};
|
52
53
|
this.onViewChangeEnd = ({ currentIndex, lastIndex, totalViews }) => {
|
54
|
+
if (currentIndex > 0) {
|
55
|
+
this.updateAriaHiddenTabIndex(currentIndex);
|
56
|
+
}
|
53
57
|
updateInterstitialDetailsSignal({
|
54
58
|
name: 'currentStep',
|
55
59
|
detail: currentIndex,
|
@@ -65,15 +69,31 @@ let CDSInterstitialScreenBody = class CDSInterstitialScreenBody extends HostList
|
|
65
69
|
},
|
66
70
|
}));
|
67
71
|
};
|
72
|
+
this.updateAriaHiddenTabIndex = (itemNumber) => {
|
73
|
+
var _a, _b;
|
74
|
+
const allViews = (_a = this.carouselAPI) === null || _a === void 0 ? void 0 : _a.allViews;
|
75
|
+
(_b = Object.values(allViews)) === null || _b === void 0 ? void 0 : _b.forEach((item, idx) => {
|
76
|
+
const isActive = idx === itemNumber;
|
77
|
+
if (item) {
|
78
|
+
// Set aria-hidden based on active state
|
79
|
+
item.setAttribute('aria-hidden', String(!isActive));
|
80
|
+
if (!isActive) {
|
81
|
+
item.setAttribute('inert', ''); // Disable interactivity
|
82
|
+
}
|
83
|
+
else {
|
84
|
+
item.removeAttribute('inert'); // Re-enable interactivity
|
85
|
+
}
|
86
|
+
item.removeAttribute('tabindex');
|
87
|
+
}
|
88
|
+
});
|
89
|
+
};
|
68
90
|
}
|
69
91
|
firstUpdated() {
|
70
|
-
|
71
|
-
|
72
|
-
const assigned = slot.assignedElements({ flatten: true });
|
73
|
-
if (assigned.length === 1) {
|
92
|
+
const bodyItems = this.querySelectorAll(`${prefix}-interstitial-screen-body-item`);
|
93
|
+
if (bodyItems.length === 1) {
|
74
94
|
this.stepType = 'single';
|
75
95
|
}
|
76
|
-
else if (
|
96
|
+
else if (bodyItems.length > 1) {
|
77
97
|
this.stepType = 'multi';
|
78
98
|
//initialize carousel for multi-step
|
79
99
|
this._initCarousel();
|
@@ -86,6 +106,7 @@ let CDSInterstitialScreenBody = class CDSInterstitialScreenBody extends HostList
|
|
86
106
|
excludeSwipeSupport: true,
|
87
107
|
});
|
88
108
|
interstitialDetailsSignal.set(Object.assign(Object.assign({}, interstitialDetailsSignal.get()), { carouselAPI: this.carouselAPI }));
|
109
|
+
this.updateAriaHiddenTabIndex(0);
|
89
110
|
}
|
90
111
|
render() {
|
91
112
|
return html `
|
@@ -117,6 +138,9 @@ let CDSInterstitialScreenBody = class CDSInterstitialScreenBody extends HostList
|
|
117
138
|
}
|
118
139
|
};
|
119
140
|
CDSInterstitialScreenBody.styles = styles;
|
141
|
+
__decorate([
|
142
|
+
property({ reflect: true })
|
143
|
+
], CDSInterstitialScreenBody.prototype, "slot", void 0);
|
120
144
|
__decorate([
|
121
145
|
state()
|
122
146
|
], CDSInterstitialScreenBody.prototype, "stepType", void 0);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"interstitial-screen-body.js","sources":["../../../src/components/interstitial-screen/interstitial-screen-body.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAgBH,MAAM,UAAU,GAAG,CAAG,EAAA,MAAM,uBAAuB;AAEnD;;;;;AAKG;AAEH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,iBAAiB,CAAC,UAAU,CAAC,CAAA;AAArE,IAAA,WAAA,GAAA;;QAEE,IAAQ,CAAA,QAAA,GAAuB,OAAO;QAG9B,IAAe,CAAA,eAAA,GAAG,SAAS,EAAe;
|
1
|
+
{"version":3,"file":"interstitial-screen-body.js","sources":["../../../src/components/interstitial-screen/interstitial-screen-body.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":"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"}
|