@asante-org/atlascopco-vt-litesitegenerator 3.6.19 → 3.6.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/index.esm.js +359 -545
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.esm.scss +295 -552
  4. package/dist/index.js +361 -543
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.scss +295 -552
  7. package/dist/lsg-clientlib.css +2106 -0
  8. package/dist/lsg-clientlib.css.map +1 -0
  9. package/dist/lsg-clientlib.js +524 -0
  10. package/dist/lsg-clientlib.js.map +1 -0
  11. package/dist/src/components/lsg/LsgCarousel/LsgCarousel.d.ts +12 -33
  12. package/dist/src/components/lsg/LsgCarousel/LsgCarousel.stories.d.ts +3 -18
  13. package/dist/src/components/lsg/LsgCarousel/LsgCarouselController.d.ts +1 -46
  14. package/dist/src/components/lsg/LsgCarousel/bootLsgCarousel.d.ts +9 -2
  15. package/dist/src/components/lsg/LsgTable/LsgTable.d.ts +19 -0
  16. package/dist/src/components/lsg/LsgTable/LsgTable.stories.d.ts +8 -0
  17. package/dist/src/components/lsg/LsgTable/index.d.ts +2 -0
  18. package/dist/src/components/lsg/index.d.ts +2 -0
  19. package/dist/src/index.d.ts +5 -5
  20. package/dist/src/themes/createThemeComponents.d.ts +1 -0
  21. package/dist/src/themes/theme-1/components.d.ts +2 -1
  22. package/dist/src/themes/theme-2/components.d.ts +2 -1
  23. package/dist/src/themes/theme-3/components.d.ts +2 -1
  24. package/dist/themes/theme-1.css +645 -298
  25. package/dist/themes/theme-1.css.map +1 -1
  26. package/dist/themes/theme-1.js +49 -217
  27. package/dist/themes/theme-1.js.map +1 -1
  28. package/dist/themes/theme-2.css +362 -479
  29. package/dist/themes/theme-2.css.map +1 -1
  30. package/dist/themes/theme-2.js +49 -217
  31. package/dist/themes/theme-2.js.map +1 -1
  32. package/dist/themes/theme-3.css +268 -495
  33. package/dist/themes/theme-3.css.map +1 -1
  34. package/dist/themes/theme-3.js +49 -217
  35. package/dist/themes/theme-3.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -142,37 +142,6 @@ var LsgBanner = function (_a) {
142
142
  })))));
143
143
  };
144
144
 
145
- /******************************************************************************
146
- Copyright (c) Microsoft Corporation.
147
-
148
- Permission to use, copy, modify, and/or distribute this software for any
149
- purpose with or without fee is hereby granted.
150
-
151
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
152
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
153
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
154
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
155
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
156
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
157
- PERFORMANCE OF THIS SOFTWARE.
158
- ***************************************************************************** */
159
- /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
160
-
161
- var __assign = function () {
162
- __assign = Object.assign || function __assign(t) {
163
- for (var s, i = 1, n = arguments.length; i < n; i++) {
164
- s = arguments[i];
165
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
166
- }
167
- return t;
168
- };
169
- return __assign.apply(this, arguments);
170
- };
171
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
172
- var e = new Error(message);
173
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
174
- };
175
-
176
145
  function isSafeUrl$1(url) {
177
146
  if (!url) return false;
178
147
  var lower = url.toLowerCase().trim();
@@ -2138,240 +2107,8 @@ function EmblaCarousel(root, userOptions, userPlugins) {
2138
2107
  }
2139
2108
  EmblaCarousel.globalOptions = undefined;
2140
2109
 
2141
- function clampNumber(number, min, max) {
2142
- return Math.min(Math.max(number, min), max);
2143
- }
2144
- function isNumber(value) {
2145
- return typeof value === 'number' && !isNaN(value);
2146
- }
2147
- function Fade(userOptions = {}) {
2148
- const fullOpacity = 1;
2149
- const noOpacity = 0;
2150
- const fadeFriction = 0.68;
2151
- let emblaApi;
2152
- let opacities = [];
2153
- let fadeToNextDistance;
2154
- let distanceFromPointerDown = 0;
2155
- let fadeVelocity = 0;
2156
- let progress = 0;
2157
- let shouldFadePair = false;
2158
- let defaultSettledBehaviour;
2159
- let defaultProgressBehaviour;
2160
- function init(emblaApiInstance) {
2161
- emblaApi = emblaApiInstance;
2162
- const selectedSnap = emblaApi.selectedScrollSnap();
2163
- const {
2164
- scrollBody,
2165
- containerRect,
2166
- axis
2167
- } = emblaApi.internalEngine();
2168
- const containerSize = axis.measureSize(containerRect);
2169
- fadeToNextDistance = clampNumber(containerSize * 0.75, 200, 500);
2170
- shouldFadePair = false;
2171
- opacities = emblaApi.scrollSnapList().map((_, index) => index === selectedSnap ? fullOpacity : noOpacity);
2172
- defaultSettledBehaviour = scrollBody.settled;
2173
- defaultProgressBehaviour = emblaApi.scrollProgress;
2174
- scrollBody.settled = settled;
2175
- emblaApi.scrollProgress = scrollProgress;
2176
- emblaApi.on('select', select).on('slideFocus', fadeToSelectedSnapInstantly).on('pointerDown', pointerDown).on('pointerUp', pointerUp);
2177
- disableScroll();
2178
- fadeToSelectedSnapInstantly();
2179
- }
2180
- function destroy() {
2181
- const {
2182
- scrollBody
2183
- } = emblaApi.internalEngine();
2184
- scrollBody.settled = defaultSettledBehaviour;
2185
- emblaApi.scrollProgress = defaultProgressBehaviour;
2186
- emblaApi.off('select', select).off('slideFocus', fadeToSelectedSnapInstantly).off('pointerDown', pointerDown).off('pointerUp', pointerUp);
2187
- emblaApi.slideNodes().forEach(slideNode => {
2188
- const slideStyle = slideNode.style;
2189
- slideStyle.opacity = '';
2190
- slideStyle.transform = '';
2191
- slideStyle.pointerEvents = '';
2192
- if (!slideNode.getAttribute('style')) slideNode.removeAttribute('style');
2193
- });
2194
- }
2195
- function fadeToSelectedSnapInstantly() {
2196
- const selectedSnap = emblaApi.selectedScrollSnap();
2197
- setOpacities(selectedSnap, fullOpacity);
2198
- }
2199
- function pointerUp() {
2200
- shouldFadePair = false;
2201
- }
2202
- function pointerDown() {
2203
- shouldFadePair = false;
2204
- distanceFromPointerDown = 0;
2205
- fadeVelocity = 0;
2206
- }
2207
- function select() {
2208
- const duration = emblaApi.internalEngine().scrollBody.duration();
2209
- fadeVelocity = duration ? 0 : fullOpacity;
2210
- shouldFadePair = true;
2211
- if (!duration) fadeToSelectedSnapInstantly();
2212
- }
2213
- function getSlideTransform(position) {
2214
- const {
2215
- axis
2216
- } = emblaApi.internalEngine();
2217
- const translateAxis = axis.scroll.toUpperCase();
2218
- return `translate${translateAxis}(${axis.direction(position)}px)`;
2219
- }
2220
- function disableScroll() {
2221
- const {
2222
- translate,
2223
- slideLooper
2224
- } = emblaApi.internalEngine();
2225
- translate.clear();
2226
- translate.toggleActive(false);
2227
- slideLooper.loopPoints.forEach(({
2228
- translate
2229
- }) => {
2230
- translate.clear();
2231
- translate.toggleActive(false);
2232
- });
2233
- }
2234
- function lockExcessiveScroll(fadeIndex) {
2235
- const {
2236
- scrollSnaps,
2237
- location,
2238
- target
2239
- } = emblaApi.internalEngine();
2240
- if (!isNumber(fadeIndex) || opacities[fadeIndex] < 0.5) return;
2241
- location.set(scrollSnaps[fadeIndex]);
2242
- target.set(location);
2243
- }
2244
- function setOpacities(fadeIndex, velocity) {
2245
- const scrollSnaps = emblaApi.scrollSnapList();
2246
- scrollSnaps.forEach((_, indexA) => {
2247
- const absVelocity = Math.abs(velocity);
2248
- const currentOpacity = opacities[indexA];
2249
- const isFadeIndex = indexA === fadeIndex;
2250
- const nextOpacity = isFadeIndex ? currentOpacity + absVelocity : currentOpacity - absVelocity;
2251
- const clampedOpacity = clampNumber(nextOpacity, noOpacity, fullOpacity);
2252
- opacities[indexA] = clampedOpacity;
2253
- const fadePair = isFadeIndex && shouldFadePair;
2254
- const indexB = emblaApi.previousScrollSnap();
2255
- if (fadePair) opacities[indexB] = 1 - clampedOpacity;
2256
- if (isFadeIndex) setProgress(fadeIndex, clampedOpacity);
2257
- setOpacity(indexA);
2258
- });
2259
- }
2260
- function setOpacity(index) {
2261
- const slidesInSnap = emblaApi.internalEngine().slideRegistry[index];
2262
- const {
2263
- scrollSnaps,
2264
- containerRect
2265
- } = emblaApi.internalEngine();
2266
- const opacity = opacities[index];
2267
- slidesInSnap.forEach(slideIndex => {
2268
- const slideStyle = emblaApi.slideNodes()[slideIndex].style;
2269
- const roundedOpacity = parseFloat(opacity.toFixed(2));
2270
- const hasOpacity = roundedOpacity > noOpacity;
2271
- const position = hasOpacity ? scrollSnaps[index] : containerRect.width + 2;
2272
- const transform = getSlideTransform(position);
2273
- if (hasOpacity) slideStyle.transform = transform;
2274
- slideStyle.opacity = roundedOpacity.toString();
2275
- slideStyle.pointerEvents = opacity > 0.5 ? 'auto' : 'none';
2276
- if (!hasOpacity) slideStyle.transform = transform;
2277
- });
2278
- }
2279
- function setProgress(fadeIndex, opacity) {
2280
- const {
2281
- index,
2282
- dragHandler,
2283
- scrollSnaps
2284
- } = emblaApi.internalEngine();
2285
- const pointerDown = dragHandler.pointerDown();
2286
- const snapFraction = 1 / (scrollSnaps.length - 1);
2287
- let indexA = fadeIndex;
2288
- let indexB = pointerDown ? emblaApi.selectedScrollSnap() : emblaApi.previousScrollSnap();
2289
- if (pointerDown && indexA === indexB) {
2290
- const reverseSign = Math.sign(distanceFromPointerDown) * -1;
2291
- indexA = indexB;
2292
- indexB = index.clone().set(indexB).add(reverseSign).get();
2293
- }
2294
- const currentPosition = indexB * snapFraction;
2295
- const diffPosition = (indexA - indexB) * snapFraction;
2296
- progress = currentPosition + diffPosition * opacity;
2297
- }
2298
- function getFadeIndex() {
2299
- const {
2300
- dragHandler,
2301
- index,
2302
- scrollBody
2303
- } = emblaApi.internalEngine();
2304
- const selectedSnap = emblaApi.selectedScrollSnap();
2305
- if (!dragHandler.pointerDown()) return selectedSnap;
2306
- const directionSign = Math.sign(scrollBody.velocity());
2307
- const distanceSign = Math.sign(distanceFromPointerDown);
2308
- const nextSnap = index.clone().set(selectedSnap).add(directionSign * -1).get();
2309
- if (!directionSign || !distanceSign) return null;
2310
- return distanceSign === directionSign ? nextSnap : selectedSnap;
2311
- }
2312
- function fade(emblaApi) {
2313
- const {
2314
- dragHandler,
2315
- scrollBody
2316
- } = emblaApi.internalEngine();
2317
- const pointerDown = dragHandler.pointerDown();
2318
- const velocity = scrollBody.velocity();
2319
- const duration = scrollBody.duration();
2320
- const fadeIndex = getFadeIndex();
2321
- const noFadeIndex = !isNumber(fadeIndex);
2322
- if (pointerDown) {
2323
- if (!velocity) return;
2324
- distanceFromPointerDown += velocity;
2325
- fadeVelocity = Math.abs(velocity / fadeToNextDistance);
2326
- lockExcessiveScroll(fadeIndex);
2327
- }
2328
- if (!pointerDown) {
2329
- if (!duration || noFadeIndex) return;
2330
- fadeVelocity += (fullOpacity - opacities[fadeIndex]) / duration;
2331
- fadeVelocity *= fadeFriction;
2332
- }
2333
- if (noFadeIndex) return;
2334
- setOpacities(fadeIndex, fadeVelocity);
2335
- }
2336
- function settled() {
2337
- const {
2338
- target,
2339
- location
2340
- } = emblaApi.internalEngine();
2341
- const diffToTarget = target.get() - location.get();
2342
- const notReachedTarget = Math.abs(diffToTarget) >= 1;
2343
- const fadeIndex = getFadeIndex();
2344
- const noFadeIndex = !isNumber(fadeIndex);
2345
- fade(emblaApi);
2346
- if (noFadeIndex || notReachedTarget) return false;
2347
- return opacities[fadeIndex] > 0.999;
2348
- }
2349
- function scrollProgress() {
2350
- return progress;
2351
- }
2352
- const self = {
2353
- name: 'fade',
2354
- options: userOptions,
2355
- init,
2356
- destroy
2357
- };
2358
- return self;
2359
- }
2360
- Fade.globalOptions = undefined;
2361
-
2362
- var MOBILE_MEDIA_QUERY$1 = "(max-width: 767px)";
2363
- /** Media track slides. Also the dot/aria-label source of truth. */
2364
- var MEDIA_ITEM_SELECTOR = "[data-lsg-carousel-item]";
2365
- /** Text track slides, one per media slide. */
2366
- var CONTENT_ITEM_SELECTOR = "[data-lsg-carousel-content-item]";
2367
- var directChildren = function (container, selector) {
2368
- return container ? Array.from(container.children).filter(function (el) {
2369
- return el instanceof HTMLElement && el.matches(selector);
2370
- }) : [];
2371
- };
2372
2110
  var LsgCarouselController = /** @class */function () {
2373
2111
  function LsgCarouselController(viewport, elements, options) {
2374
- var _a;
2375
2112
  if (elements === void 0) {
2376
2113
  elements = {};
2377
2114
  }
@@ -2379,10 +2116,8 @@ var LsgCarouselController = /** @class */function () {
2379
2116
  options = {};
2380
2117
  }
2381
2118
  var _this = this;
2382
- var _b, _c, _d, _e, _f, _g, _h;
2383
- this.media = null;
2384
- this.content = null;
2385
- this.syncing = false;
2119
+ var _a, _b, _c, _d;
2120
+ this.embla = null;
2386
2121
  /**
2387
2122
  * Embla automatically falls back to non-looping mode when there is not enough
2388
2123
  * slide content to create a safe loop (most noticeable with two-up layouts and
@@ -2390,228 +2125,82 @@ var LsgCarouselController = /** @class */function () {
2390
2125
  * when there is no native previous snap, jump to the final authored snap.
2391
2126
  */
2392
2127
  this.scrollPrev = function () {
2393
- if (!_this.media) return;
2394
- if (_this.media.canScrollPrev()) {
2395
- _this.media.scrollPrev();
2128
+ if (!_this.embla) return;
2129
+ if (_this.embla.canScrollPrev()) {
2130
+ _this.embla.scrollPrev();
2396
2131
  return;
2397
2132
  }
2398
- var lastSnap = _this.media.scrollSnapList().length - 1;
2399
- if (lastSnap >= 0) _this.media.scrollTo(lastSnap);
2133
+ var lastSnap = _this.embla.scrollSnapList().length - 1;
2134
+ if (lastSnap >= 0) _this.embla.scrollTo(lastSnap);
2400
2135
  };
2401
2136
  /** See `scrollPrev` for why the explicit wrap fallback is required. */
2402
2137
  this.scrollNext = function () {
2403
- if (!_this.media) return;
2404
- if (_this.media.canScrollNext()) {
2405
- _this.media.scrollNext();
2138
+ if (!_this.embla) return;
2139
+ if (_this.embla.canScrollNext()) {
2140
+ _this.embla.scrollNext();
2406
2141
  return;
2407
2142
  }
2408
- if (_this.media.scrollSnapList().length > 0) _this.media.scrollTo(0);
2409
- };
2410
- /**
2411
- * The text track never initiates navigation, but it owns its own resize and
2412
- * mutation observers. If one instance re-measures without the other, this pulls
2413
- * the media track back onto the text track's index rather than letting them drift.
2414
- */
2415
- this.handleContentSelect = function () {
2416
- if (!_this.media || !_this.content || _this.syncing) return;
2417
- var target = _this.content.selectedScrollSnap();
2418
- if (_this.media.selectedScrollSnap() === target) return;
2419
- _this.syncing = true;
2420
- try {
2421
- _this.media.scrollTo(target, true);
2422
- } finally {
2423
- _this.syncing = false;
2424
- }
2425
- };
2426
- /** Reader-initiated navigation: repaint state, then crossfade the text. */
2427
- this.handleMediaSelect = function () {
2428
- _this.syncSelectedState();
2429
- _this.pushToContent();
2430
- };
2431
- /**
2432
- * Re-measure events (breakpoint flip, resize, authored items added/removed).
2433
- * The text is realigned with a hard cut because nothing moved for the reader.
2434
- */
2435
- this.handleResync = function () {
2436
- _this.syncSelectedState();
2437
- _this.pushToContent(true);
2143
+ if (_this.embla.scrollSnapList().length > 0) _this.embla.scrollTo(0);
2438
2144
  };
2439
- /** Repaints dot/arrow/a11y state from the media index. Never navigates. */
2440
2145
  this.syncSelectedState = function () {
2441
- var _a, _b, _c, _d, _e, _f;
2442
- var selected = (_b = (_a = _this.media) === null || _a === void 0 ? void 0 : _a.selectedScrollSnap()) !== null && _b !== void 0 ? _b : 0;
2443
- var snapCount = (_d = (_c = _this.media) === null || _c === void 0 ? void 0 : _c.scrollSnapList().length) !== null && _d !== void 0 ? _d : 0;
2146
+ var _a, _b;
2147
+ var selected = (_b = (_a = _this.embla) === null || _a === void 0 ? void 0 : _a.selectedScrollSnap()) !== null && _b !== void 0 ? _b : 0;
2444
2148
  _this.paginationBtns.forEach(function (button, index) {
2445
2149
  var active = index === selected;
2446
2150
  button.classList.toggle("lsg-carousel__dot--active", active);
2447
2151
  button.setAttribute("aria-current", active ? "true" : "false");
2448
2152
  });
2449
- // Cosmetic only. Looping plus the cyclic wrap above mean both arrows always
2450
- // act, so `disabled`/`aria-disabled` would misreport them to assistive tech.
2451
- // Themes use these classes to mute the leading/trailing half of the pill.
2452
- (_e = _this.els.prevBtn) === null || _e === void 0 ? void 0 : _e.classList.toggle("lsg-carousel__arrow--at-start", selected === 0);
2453
- (_f = _this.els.nextBtn) === null || _f === void 0 ? void 0 : _f.classList.toggle("lsg-carousel__arrow--at-end", snapCount > 0 && selected === snapCount - 1);
2454
- // The fade plugin only sets opacity and pointer-events, so without this every
2455
- // faded-out text block keeps its heading in the accessibility tree and its CTA
2456
- // in the tab order - N copies of the same landmark for a sighted-equivalent
2457
- // view of one.
2458
- _this.contentSlides.forEach(function (slide, index) {
2459
- var active = index === selected;
2460
- slide.toggleAttribute("inert", !active);
2461
- if (active) slide.removeAttribute("aria-hidden");else slide.setAttribute("aria-hidden", "true");
2462
- });
2463
2153
  };
2464
2154
  this.els = elements;
2465
- this.mediaViewport = viewport;
2466
2155
  this.paginationBtns = elements.paginationBtns ? Array.from(elements.paginationBtns) : [];
2467
- var mediaTrack = viewport.firstElementChild;
2468
- var mediaSlides = directChildren(mediaTrack, MEDIA_ITEM_SELECTOR);
2469
- // Embla resolves `container` as `root.children[0]` and `slides` as its
2470
- // element children. Passing both explicitly instead makes the instance
2471
- // immune to AEM injecting its own nodes (e.g. the edit-mode
2472
- // `div.new.section.aem-Grid-newComponent` drop target) into the track.
2473
- this.media = EmblaCarousel(viewport, {
2156
+ this.embla = EmblaCarousel(viewport, {
2474
2157
  align: "start",
2475
2158
  // Every authored media item owns a pagination dot. `trimSnaps` can remove
2476
2159
  // the final snap when two-up/peek layouts do not have enough overflow,
2477
2160
  // leaving the last authored item only partially reachable. Keep all snaps
2478
2161
  // so dot/item indexes stay 1:1 for 2, 3, 4, ... media items.
2479
- //
2480
- // This is ALSO load-bearing for the text/media sync: `containSnaps` is
2481
- // `!loop && !!containScroll`, so with this `false` the snap list is
2482
- // always `snapsAligned` - one snap per slide, whatever the slide's
2483
- // flex-basis. That is the only reason a 380px peek track and a 100%-wide
2484
- // crossfade track can share one index. Reverting this to `trimSnaps`
2485
- // drops trailing snaps on the media track alone and desyncs the tail.
2486
2162
  containScroll: false,
2487
- direction: (_b = options.direction) !== null && _b !== void 0 ? _b : "ltr",
2488
- loop: (_c = options.loop) !== null && _c !== void 0 ? _c : true,
2163
+ direction: (_a = options.direction) !== null && _a !== void 0 ? _a : "ltr",
2164
+ loop: (_b = options.loop) !== null && _b !== void 0 ? _b : true,
2489
2165
  skipSnaps: false,
2490
- slidesToScroll: 1,
2491
- container: mediaTrack !== null && mediaTrack !== void 0 ? mediaTrack : undefined,
2492
- slides: mediaSlides.length ? mediaSlides : undefined,
2493
- // All layouts collapse to the same mobile stack, which is never
2494
- // mirrored. Embla restores the selected index when a breakpoint
2495
- // re-activates, so the flip is not visible to the reader.
2496
- breakpoints: (_a = {}, _a[MOBILE_MEDIA_QUERY$1] = {
2497
- direction: "ltr"
2498
- }, _a)
2166
+ slidesToScroll: 1
2499
2167
  });
2500
- var contentViewport = (_d = elements.contentViewport) !== null && _d !== void 0 ? _d : null;
2501
- var contentTrack = contentViewport === null || contentViewport === void 0 ? void 0 : contentViewport.firstElementChild;
2502
- this.contentSlides = directChildren(contentTrack, CONTENT_ITEM_SELECTOR);
2503
- // Unequal counts are the one remaining way the two tracks can desync, and a
2504
- // text block silently paired with the wrong image is worse than no text
2505
- // animation at all. Degrade to media-only rather than risk it.
2506
- var countsMatch = mediaSlides.length > 0 && this.contentSlides.length === mediaSlides.length;
2507
- if (contentViewport && contentTrack && countsMatch) {
2508
- this.content = EmblaCarousel(contentViewport, {
2509
- align: "start",
2510
- // Must match the media track's snap arithmetic - see above.
2511
- containScroll: false,
2512
- // The text crossfades in place, so there is nothing to mirror.
2513
- direction: "ltr",
2514
- // Inert on a fade instance: the plugin calls `disableScroll()`, which
2515
- // deactivates the translate and every loop point. Set for config
2516
- // symmetry with the media track, not for behaviour.
2517
- loop: (_e = options.loop) !== null && _e !== void 0 ? _e : true,
2518
- skipSnaps: false,
2519
- slidesToScroll: 1,
2520
- // The reader drags the media, never the text. Without this the text
2521
- // track would fight the media track for the same pointer.
2522
- watchDrag: false,
2523
- container: contentTrack,
2524
- slides: this.contentSlides
2525
- }, [Fade()]);
2526
- }
2527
2168
  this.paginationHandlers = this.paginationBtns.map(function (_, index) {
2528
2169
  return function () {
2529
2170
  var _a;
2530
- (_a = _this.media) === null || _a === void 0 ? void 0 : _a.scrollTo(index);
2171
+ (_a = _this.embla) === null || _a === void 0 ? void 0 : _a.scrollTo(index);
2531
2172
  };
2532
2173
  });
2533
- (_f = this.els.prevBtn) === null || _f === void 0 ? void 0 : _f.addEventListener("click", this.scrollPrev);
2534
- (_g = this.els.nextBtn) === null || _g === void 0 ? void 0 : _g.addEventListener("click", this.scrollNext);
2174
+ (_c = this.els.prevBtn) === null || _c === void 0 ? void 0 : _c.addEventListener("click", this.scrollPrev);
2175
+ (_d = this.els.nextBtn) === null || _d === void 0 ? void 0 : _d.addEventListener("click", this.scrollNext);
2535
2176
  this.paginationBtns.forEach(function (button, index) {
2536
2177
  button.addEventListener("click", _this.paginationHandlers[index]);
2537
2178
  });
2538
- this.media.on("select", this.handleMediaSelect);
2539
- this.media.on("reInit", this.handleResync);
2540
- this.media.on("slidesChanged", this.handleResync);
2541
- (_h = this.content) === null || _h === void 0 ? void 0 : _h.on("select", this.handleContentSelect);
2542
- // Initial alignment is a hard cut - there is nothing to crossfade from.
2543
- this.handleResync();
2544
- }
2545
- /**
2546
- * Drive the text track from the media index.
2547
- *
2548
- * `jump` skips the crossfade (Embla sets duration 0, and the fade plugin then
2549
- * snaps opacity instantly). Use it only for re-measure events, never for
2550
- * reader-initiated navigation, or the text hard-cuts instead of fading.
2551
- */
2552
- LsgCarouselController.prototype.pushToContent = function (jump) {
2553
- if (jump === void 0) {
2554
- jump = false;
2555
- }
2556
- if (!this.media || !this.content || this.syncing) return;
2557
- var target = this.media.selectedScrollSnap();
2558
- if (this.content.selectedScrollSnap() === target) return;
2559
- this.syncing = true;
2560
- try {
2561
- this.content.scrollTo(target, jump);
2562
- } finally {
2563
- this.syncing = false;
2564
- }
2565
- };
2179
+ this.embla.on("select", this.syncSelectedState);
2180
+ this.embla.on("reInit", this.syncSelectedState);
2181
+ this.syncSelectedState();
2182
+ }
2566
2183
  Object.defineProperty(LsgCarouselController.prototype, "emblaApi", {
2567
2184
  get: function () {
2568
- return this.media;
2569
- },
2570
- enumerable: false,
2571
- configurable: true
2572
- });
2573
- Object.defineProperty(LsgCarouselController.prototype, "contentApi", {
2574
- /** Text track handle. Exposed for the index-parity checks in the test plan. */
2575
- get: function () {
2576
- return this.content;
2185
+ return this.embla;
2577
2186
  },
2578
2187
  enumerable: false,
2579
2188
  configurable: true
2580
2189
  });
2581
2190
  LsgCarouselController.prototype.destroy = function () {
2582
2191
  var _this = this;
2583
- var _a, _b, _c, _d;
2192
+ var _a, _b;
2584
2193
  (_a = this.els.prevBtn) === null || _a === void 0 ? void 0 : _a.removeEventListener("click", this.scrollPrev);
2585
2194
  (_b = this.els.nextBtn) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.scrollNext);
2586
2195
  this.paginationBtns.forEach(function (button, index) {
2587
2196
  button.removeEventListener("click", _this.paginationHandlers[index]);
2588
2197
  });
2589
- // Content first: its plugin restores the inline opacity/transform it wrote,
2590
- // and it reads `internalEngine()` while doing so.
2591
- if (this.content) {
2592
- this.content.off("select", this.handleContentSelect);
2593
- this.content.destroy();
2594
- this.content = null;
2595
- }
2596
- if (this.media) {
2597
- this.media.off("select", this.handleMediaSelect);
2598
- this.media.off("reInit", this.handleResync);
2599
- this.media.off("slidesChanged", this.handleResync);
2600
- this.media.destroy();
2601
- this.media = null;
2198
+ if (this.embla) {
2199
+ this.embla.off("select", this.syncSelectedState);
2200
+ this.embla.off("reInit", this.syncSelectedState);
2201
+ this.embla.destroy();
2202
+ this.embla = null;
2602
2203
  }
2603
- // Embla restores what Embla wrote. Everything below is ours, and leaving it
2604
- // behind would make server-rendered markup re-initialise into a stale state.
2605
- this.paginationBtns.forEach(function (button) {
2606
- button.classList.remove("lsg-carousel__dot--active");
2607
- button.removeAttribute("aria-current");
2608
- });
2609
- (_c = this.els.prevBtn) === null || _c === void 0 ? void 0 : _c.classList.remove("lsg-carousel__arrow--at-start");
2610
- (_d = this.els.nextBtn) === null || _d === void 0 ? void 0 : _d.classList.remove("lsg-carousel__arrow--at-end");
2611
- this.contentSlides.forEach(function (slide) {
2612
- slide.removeAttribute("inert");
2613
- slide.removeAttribute("aria-hidden");
2614
- });
2615
2204
  };
2616
2205
  return LsgCarouselController;
2617
2206
  }();
@@ -2623,27 +2212,24 @@ var mediaTypeFor = function (item) {
2623
2212
  var directionForLayout = function (layout) {
2624
2213
  return layout === "media-left" ? "rtl" : "ltr";
2625
2214
  };
2626
- var hasText = function (item) {
2627
- return Boolean(item.preTitle || item.heading || item.body || item.cta);
2628
- };
2629
2215
  var LsgCarousel = function (_a) {
2630
- var _b = _a.items,
2631
- items = _b === void 0 ? [] : _b,
2632
- _c = _a.layout,
2633
- layout = _c === void 0 ? "media-right" : _c,
2634
- background = _a.background,
2635
- _d = _a.headingTag,
2636
- headingTag = _d === void 0 ? "h2" : _d,
2637
- _e = _a.ariaLabel,
2638
- ariaLabel = _e === void 0 ? "Media carousel" : _e,
2639
- _f = _a.className,
2640
- className = _f === void 0 ? "" : _f,
2641
- heading = _a.heading,
2216
+ var _b;
2217
+ var heading = _a.heading,
2642
2218
  preTitle = _a.preTitle,
2643
2219
  body = _a.body,
2644
- cta = _a.cta;
2220
+ cta = _a.cta,
2221
+ _c = _a.items,
2222
+ items = _c === void 0 ? [] : _c,
2223
+ _d = _a.layout,
2224
+ layout = _d === void 0 ? "media-right" : _d,
2225
+ _e = _a.headingTag,
2226
+ headingTag = _e === void 0 ? "h2" : _e,
2227
+ _f = _a.ariaLabel,
2228
+ ariaLabel = _f === void 0 ? "Media carousel" : _f,
2229
+ _g = _a.className,
2230
+ className = _g === void 0 ? "" : _g;
2231
+ var rootRef = React.useRef(null);
2645
2232
  var viewportRef = React.useRef(null);
2646
- var contentViewportRef = React.useRef(null);
2647
2233
  var prevBtnRef = React.useRef(null);
2648
2234
  var nextBtnRef = React.useRef(null);
2649
2235
  var dotsRef = React.useRef(null);
@@ -2651,29 +2237,13 @@ var LsgCarousel = function (_a) {
2651
2237
  var HeadingTag = headingTag;
2652
2238
  var isCarousel = items.length > 1;
2653
2239
  var carouselDirection = directionForLayout(layout);
2654
- // Legacy single-content-block callers passed the text alongside `items`. Fold
2655
- // it onto the first item so their carousel still renders its copy.
2656
- var resolvedItems = React.useMemo(function () {
2657
- var legacy = {
2658
- preTitle: preTitle,
2659
- heading: heading,
2660
- body: body,
2661
- cta: cta
2662
- };
2663
- var hasLegacy = Boolean(legacy.preTitle || legacy.heading || legacy.body || legacy.cta);
2664
- if (!hasLegacy || !items.length || hasText(items[0])) return items;
2665
- return items.map(function (item, index) {
2666
- return index === 0 ? __assign(__assign({}, legacy), item) : item;
2667
- });
2668
- }, [items, preTitle, heading, body, cta]);
2669
2240
  React.useEffect(function () {
2670
2241
  var _a, _b;
2671
2242
  if (!viewportRef.current || !isCarousel) return;
2672
2243
  controllerRef.current = new LsgCarouselController(viewportRef.current, {
2673
2244
  prevBtn: prevBtnRef.current,
2674
2245
  nextBtn: nextBtnRef.current,
2675
- paginationBtns: (_b = (_a = dotsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-lsg-carousel-dot]")) !== null && _b !== void 0 ? _b : [],
2676
- contentViewport: contentViewportRef.current
2246
+ paginationBtns: (_b = (_a = dotsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-lsg-carousel-dot]")) !== null && _b !== void 0 ? _b : []
2677
2247
  }, {
2678
2248
  loop: true,
2679
2249
  direction: carouselDirection
@@ -2683,72 +2253,55 @@ var LsgCarousel = function (_a) {
2683
2253
  (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
2684
2254
  controllerRef.current = null;
2685
2255
  };
2686
- }, [carouselDirection, isCarousel, resolvedItems.length]);
2687
- var rootClasses = ["lsg-carousel", "lsg-carousel--".concat(layout),
2688
- // In AEM this class arrives on the decoration div instead; the SCSS only
2689
- // sets inherited custom properties, so either position works.
2690
- background ? "lsg-carousel--bg-".concat(background) : "", className].filter(Boolean).join(" ");
2691
- var keyFor = function (item, index) {
2692
- var _a, _b, _c;
2693
- return (_a = item.id) !== null && _a !== void 0 ? _a : "".concat(mediaTypeFor(item), "-").concat((_c = (_b = item.imageUrl) !== null && _b !== void 0 ? _b : item.videoUrl) !== null && _c !== void 0 ? _c : index, "-").concat(index);
2694
- };
2256
+ }, [carouselDirection, isCarousel, items.length]);
2257
+ var rootClasses = ["lsg-carousel", "lsg-carousel--".concat(layout), className].filter(Boolean).join(" ");
2695
2258
  return /*#__PURE__*/React.createElement("section", {
2259
+ ref: rootRef,
2696
2260
  className: rootClasses,
2697
2261
  "data-lsg-is": "carousel",
2698
2262
  "data-lsg-carousel-layout": layout,
2699
2263
  "data-lsg-carousel-direction": carouselDirection,
2700
- "data-lsg-carousel-count": resolvedItems.length,
2264
+ "data-lsg-carousel-count": items.length,
2701
2265
  "aria-label": ariaLabel
2702
2266
  }, /*#__PURE__*/React.createElement("div", {
2703
2267
  className: "lsg-carousel__shell"
2704
2268
  }, /*#__PURE__*/React.createElement("div", {
2705
- className: "lsg-carousel__content",
2706
- ref: contentViewportRef,
2707
- "data-lsg-carousel-content-viewport": true
2708
- }, /*#__PURE__*/React.createElement("div", {
2709
- className: "lsg-carousel__content-track"
2710
- }, resolvedItems.map(function (item, index) {
2711
- var _a;
2712
- return /*#__PURE__*/React.createElement("div", {
2713
- key: keyFor(item, index),
2714
- className: "lsg-carousel__content-slide",
2715
- "data-lsg-carousel-content-item": true
2716
- }, item.preTitle && /*#__PURE__*/React.createElement("div", {
2717
- className: "lsg-carousel__pre-title"
2718
- }, /*#__PURE__*/React.createElement("span", {
2719
- className: "lsg-carousel__pre-title-marker",
2720
- "aria-hidden": "true"
2721
- }), /*#__PURE__*/React.createElement("span", null, item.preTitle)), item.heading && /*#__PURE__*/React.createElement(HeadingTag, {
2722
- className: "lsg-carousel__heading"
2723
- }, item.heading), item.body && /*#__PURE__*/React.createElement("p", {
2724
- className: "lsg-carousel__body"
2725
- }, item.body), item.cta && /*#__PURE__*/React.createElement("div", {
2726
- className: "lsg-carousel__actions"
2727
- }, /*#__PURE__*/React.createElement(LsgButton, {
2728
- className: "lsg-carousel__cta",
2729
- href: item.cta.href,
2730
- external: item.cta.external,
2731
- variant: (_a = item.cta.variant) !== null && _a !== void 0 ? _a : "primary",
2732
- onClick: item.cta.onClick
2733
- }, item.cta.label)));
2734
- }))), /*#__PURE__*/React.createElement("div", {
2269
+ className: "lsg-carousel__content"
2270
+ }, preTitle && /*#__PURE__*/React.createElement("div", {
2271
+ className: "lsg-carousel__pre-title"
2272
+ }, /*#__PURE__*/React.createElement("span", {
2273
+ className: "lsg-carousel__pre-title-marker",
2274
+ "aria-hidden": "true"
2275
+ }), /*#__PURE__*/React.createElement("span", null, preTitle)), /*#__PURE__*/React.createElement(HeadingTag, {
2276
+ className: "lsg-carousel__heading"
2277
+ }, heading), body && /*#__PURE__*/React.createElement("p", {
2278
+ className: "lsg-carousel__body"
2279
+ }, body), cta && /*#__PURE__*/React.createElement("div", {
2280
+ className: "lsg-carousel__actions"
2281
+ }, /*#__PURE__*/React.createElement(LsgButton, {
2282
+ className: "lsg-carousel__cta",
2283
+ href: cta.href,
2284
+ external: cta.external,
2285
+ variant: (_b = cta.variant) !== null && _b !== void 0 ? _b : "primary",
2286
+ onClick: cta.onClick
2287
+ }, cta.label))), /*#__PURE__*/React.createElement("div", {
2735
2288
  className: "lsg-carousel__media-column"
2736
2289
  }, /*#__PURE__*/React.createElement("div", {
2737
2290
  className: "lsg-carousel__viewport",
2738
2291
  ref: viewportRef,
2739
- dir: carouselDirection,
2740
- "data-lsg-carousel-media-viewport": true
2292
+ dir: carouselDirection
2741
2293
  }, /*#__PURE__*/React.createElement("div", {
2742
2294
  className: "lsg-carousel__track",
2743
2295
  role: "list"
2744
- }, resolvedItems.map(function (item, index) {
2745
- var _a, _b, _c, _d;
2296
+ }, items.map(function (item, index) {
2297
+ var _a, _b, _c, _d, _e, _f, _g;
2746
2298
  var type = mediaTypeFor(item);
2299
+ var key = (_a = item.id) !== null && _a !== void 0 ? _a : "".concat(type, "-").concat((_c = (_b = item.imageUrl) !== null && _b !== void 0 ? _b : item.videoUrl) !== null && _c !== void 0 ? _c : index, "-").concat(index);
2747
2300
  return /*#__PURE__*/React.createElement("article", {
2748
- key: keyFor(item, index),
2301
+ key: key,
2749
2302
  className: "lsg-carousel__slide",
2750
2303
  role: "listitem",
2751
- "aria-label": "Slide ".concat(index + 1, " of ").concat(resolvedItems.length),
2304
+ "aria-label": "Slide ".concat(index + 1, " of ").concat(items.length),
2752
2305
  "data-lsg-carousel-item": true
2753
2306
  }, /*#__PURE__*/React.createElement("div", {
2754
2307
  className: "lsg-carousel__media"
@@ -2756,10 +2309,10 @@ var LsgCarousel = function (_a) {
2756
2309
  videoUrl: item.videoUrl,
2757
2310
  imageUrl: item.videoPoster,
2758
2311
  imageAlt: item.imageAlt,
2759
- controls: (_a = item.videoControls) !== null && _a !== void 0 ? _a : true,
2760
- autoplay: (_b = item.videoAutoPlay) !== null && _b !== void 0 ? _b : false,
2761
- muted: (_c = item.videoMuted) !== null && _c !== void 0 ? _c : true,
2762
- loop: (_d = item.videoLoop) !== null && _d !== void 0 ? _d : false,
2312
+ controls: (_d = item.videoControls) !== null && _d !== void 0 ? _d : true,
2313
+ autoplay: (_e = item.videoAutoPlay) !== null && _e !== void 0 ? _e : false,
2314
+ muted: (_f = item.videoMuted) !== null && _f !== void 0 ? _f : true,
2315
+ loop: (_g = item.videoLoop) !== null && _g !== void 0 ? _g : false,
2763
2316
  displayMode: "content",
2764
2317
  showTags: false,
2765
2318
  className: "lsg-carousel__video-component"
@@ -2774,10 +2327,8 @@ var LsgCarousel = function (_a) {
2774
2327
  className: "lsg-carousel__media-label"
2775
2328
  }, item.label)));
2776
2329
  }))), isCarousel && /*#__PURE__*/React.createElement("div", {
2777
- className: "lsg-carousel__controls",
2330
+ className: "lsg-carousel__navigation",
2778
2331
  "aria-label": "Carousel navigation"
2779
- }, /*#__PURE__*/React.createElement("div", {
2780
- className: "lsg-carousel__nav"
2781
2332
  }, /*#__PURE__*/React.createElement("button", {
2782
2333
  ref: prevBtnRef,
2783
2334
  className: "lsg-carousel__arrow lsg-carousel__arrow--prev",
@@ -2787,19 +2338,10 @@ var LsgCarousel = function (_a) {
2787
2338
  }, /*#__PURE__*/React.createElement("span", {
2788
2339
  className: "lsg-carousel__arrow-icon",
2789
2340
  "aria-hidden": "true"
2790
- })), /*#__PURE__*/React.createElement("button", {
2791
- ref: nextBtnRef,
2792
- className: "lsg-carousel__arrow lsg-carousel__arrow--next",
2793
- type: "button",
2794
- "aria-label": "Next slide",
2795
- "data-lsg-carousel-next": true
2796
- }, /*#__PURE__*/React.createElement("span", {
2797
- className: "lsg-carousel__arrow-icon",
2798
- "aria-hidden": "true"
2799
- }))), /*#__PURE__*/React.createElement("div", {
2341
+ })), /*#__PURE__*/React.createElement("div", {
2800
2342
  className: "lsg-carousel__pagination",
2801
2343
  ref: dotsRef
2802
- }, resolvedItems.map(function (item, index) {
2344
+ }, items.map(function (item, index) {
2803
2345
  var _a;
2804
2346
  return /*#__PURE__*/React.createElement("button", {
2805
2347
  key: (_a = item.id) !== null && _a !== void 0 ? _a : "dot-".concat(index),
@@ -2809,6 +2351,15 @@ var LsgCarousel = function (_a) {
2809
2351
  "aria-current": index === 0 ? "true" : "false",
2810
2352
  "data-lsg-carousel-dot": true
2811
2353
  });
2354
+ })), /*#__PURE__*/React.createElement("button", {
2355
+ ref: nextBtnRef,
2356
+ className: "lsg-carousel__arrow lsg-carousel__arrow--next",
2357
+ type: "button",
2358
+ "aria-label": "Next slide",
2359
+ "data-lsg-carousel-next": true
2360
+ }, /*#__PURE__*/React.createElement("span", {
2361
+ className: "lsg-carousel__arrow-icon",
2362
+ "aria-hidden": "true"
2812
2363
  }))))));
2813
2364
  };
2814
2365
 
@@ -4212,6 +3763,227 @@ var LsgFooter = function (_a) {
4212
3763
  }))))), bottomBar);
4213
3764
  };
4214
3765
 
3766
+ function clampNumber(number, min, max) {
3767
+ return Math.min(Math.max(number, min), max);
3768
+ }
3769
+ function isNumber(value) {
3770
+ return typeof value === 'number' && !isNaN(value);
3771
+ }
3772
+ function Fade(userOptions = {}) {
3773
+ const fullOpacity = 1;
3774
+ const noOpacity = 0;
3775
+ const fadeFriction = 0.68;
3776
+ let emblaApi;
3777
+ let opacities = [];
3778
+ let fadeToNextDistance;
3779
+ let distanceFromPointerDown = 0;
3780
+ let fadeVelocity = 0;
3781
+ let progress = 0;
3782
+ let shouldFadePair = false;
3783
+ let defaultSettledBehaviour;
3784
+ let defaultProgressBehaviour;
3785
+ function init(emblaApiInstance) {
3786
+ emblaApi = emblaApiInstance;
3787
+ const selectedSnap = emblaApi.selectedScrollSnap();
3788
+ const {
3789
+ scrollBody,
3790
+ containerRect,
3791
+ axis
3792
+ } = emblaApi.internalEngine();
3793
+ const containerSize = axis.measureSize(containerRect);
3794
+ fadeToNextDistance = clampNumber(containerSize * 0.75, 200, 500);
3795
+ shouldFadePair = false;
3796
+ opacities = emblaApi.scrollSnapList().map((_, index) => index === selectedSnap ? fullOpacity : noOpacity);
3797
+ defaultSettledBehaviour = scrollBody.settled;
3798
+ defaultProgressBehaviour = emblaApi.scrollProgress;
3799
+ scrollBody.settled = settled;
3800
+ emblaApi.scrollProgress = scrollProgress;
3801
+ emblaApi.on('select', select).on('slideFocus', fadeToSelectedSnapInstantly).on('pointerDown', pointerDown).on('pointerUp', pointerUp);
3802
+ disableScroll();
3803
+ fadeToSelectedSnapInstantly();
3804
+ }
3805
+ function destroy() {
3806
+ const {
3807
+ scrollBody
3808
+ } = emblaApi.internalEngine();
3809
+ scrollBody.settled = defaultSettledBehaviour;
3810
+ emblaApi.scrollProgress = defaultProgressBehaviour;
3811
+ emblaApi.off('select', select).off('slideFocus', fadeToSelectedSnapInstantly).off('pointerDown', pointerDown).off('pointerUp', pointerUp);
3812
+ emblaApi.slideNodes().forEach(slideNode => {
3813
+ const slideStyle = slideNode.style;
3814
+ slideStyle.opacity = '';
3815
+ slideStyle.transform = '';
3816
+ slideStyle.pointerEvents = '';
3817
+ if (!slideNode.getAttribute('style')) slideNode.removeAttribute('style');
3818
+ });
3819
+ }
3820
+ function fadeToSelectedSnapInstantly() {
3821
+ const selectedSnap = emblaApi.selectedScrollSnap();
3822
+ setOpacities(selectedSnap, fullOpacity);
3823
+ }
3824
+ function pointerUp() {
3825
+ shouldFadePair = false;
3826
+ }
3827
+ function pointerDown() {
3828
+ shouldFadePair = false;
3829
+ distanceFromPointerDown = 0;
3830
+ fadeVelocity = 0;
3831
+ }
3832
+ function select() {
3833
+ const duration = emblaApi.internalEngine().scrollBody.duration();
3834
+ fadeVelocity = duration ? 0 : fullOpacity;
3835
+ shouldFadePair = true;
3836
+ if (!duration) fadeToSelectedSnapInstantly();
3837
+ }
3838
+ function getSlideTransform(position) {
3839
+ const {
3840
+ axis
3841
+ } = emblaApi.internalEngine();
3842
+ const translateAxis = axis.scroll.toUpperCase();
3843
+ return `translate${translateAxis}(${axis.direction(position)}px)`;
3844
+ }
3845
+ function disableScroll() {
3846
+ const {
3847
+ translate,
3848
+ slideLooper
3849
+ } = emblaApi.internalEngine();
3850
+ translate.clear();
3851
+ translate.toggleActive(false);
3852
+ slideLooper.loopPoints.forEach(({
3853
+ translate
3854
+ }) => {
3855
+ translate.clear();
3856
+ translate.toggleActive(false);
3857
+ });
3858
+ }
3859
+ function lockExcessiveScroll(fadeIndex) {
3860
+ const {
3861
+ scrollSnaps,
3862
+ location,
3863
+ target
3864
+ } = emblaApi.internalEngine();
3865
+ if (!isNumber(fadeIndex) || opacities[fadeIndex] < 0.5) return;
3866
+ location.set(scrollSnaps[fadeIndex]);
3867
+ target.set(location);
3868
+ }
3869
+ function setOpacities(fadeIndex, velocity) {
3870
+ const scrollSnaps = emblaApi.scrollSnapList();
3871
+ scrollSnaps.forEach((_, indexA) => {
3872
+ const absVelocity = Math.abs(velocity);
3873
+ const currentOpacity = opacities[indexA];
3874
+ const isFadeIndex = indexA === fadeIndex;
3875
+ const nextOpacity = isFadeIndex ? currentOpacity + absVelocity : currentOpacity - absVelocity;
3876
+ const clampedOpacity = clampNumber(nextOpacity, noOpacity, fullOpacity);
3877
+ opacities[indexA] = clampedOpacity;
3878
+ const fadePair = isFadeIndex && shouldFadePair;
3879
+ const indexB = emblaApi.previousScrollSnap();
3880
+ if (fadePair) opacities[indexB] = 1 - clampedOpacity;
3881
+ if (isFadeIndex) setProgress(fadeIndex, clampedOpacity);
3882
+ setOpacity(indexA);
3883
+ });
3884
+ }
3885
+ function setOpacity(index) {
3886
+ const slidesInSnap = emblaApi.internalEngine().slideRegistry[index];
3887
+ const {
3888
+ scrollSnaps,
3889
+ containerRect
3890
+ } = emblaApi.internalEngine();
3891
+ const opacity = opacities[index];
3892
+ slidesInSnap.forEach(slideIndex => {
3893
+ const slideStyle = emblaApi.slideNodes()[slideIndex].style;
3894
+ const roundedOpacity = parseFloat(opacity.toFixed(2));
3895
+ const hasOpacity = roundedOpacity > noOpacity;
3896
+ const position = hasOpacity ? scrollSnaps[index] : containerRect.width + 2;
3897
+ const transform = getSlideTransform(position);
3898
+ if (hasOpacity) slideStyle.transform = transform;
3899
+ slideStyle.opacity = roundedOpacity.toString();
3900
+ slideStyle.pointerEvents = opacity > 0.5 ? 'auto' : 'none';
3901
+ if (!hasOpacity) slideStyle.transform = transform;
3902
+ });
3903
+ }
3904
+ function setProgress(fadeIndex, opacity) {
3905
+ const {
3906
+ index,
3907
+ dragHandler,
3908
+ scrollSnaps
3909
+ } = emblaApi.internalEngine();
3910
+ const pointerDown = dragHandler.pointerDown();
3911
+ const snapFraction = 1 / (scrollSnaps.length - 1);
3912
+ let indexA = fadeIndex;
3913
+ let indexB = pointerDown ? emblaApi.selectedScrollSnap() : emblaApi.previousScrollSnap();
3914
+ if (pointerDown && indexA === indexB) {
3915
+ const reverseSign = Math.sign(distanceFromPointerDown) * -1;
3916
+ indexA = indexB;
3917
+ indexB = index.clone().set(indexB).add(reverseSign).get();
3918
+ }
3919
+ const currentPosition = indexB * snapFraction;
3920
+ const diffPosition = (indexA - indexB) * snapFraction;
3921
+ progress = currentPosition + diffPosition * opacity;
3922
+ }
3923
+ function getFadeIndex() {
3924
+ const {
3925
+ dragHandler,
3926
+ index,
3927
+ scrollBody
3928
+ } = emblaApi.internalEngine();
3929
+ const selectedSnap = emblaApi.selectedScrollSnap();
3930
+ if (!dragHandler.pointerDown()) return selectedSnap;
3931
+ const directionSign = Math.sign(scrollBody.velocity());
3932
+ const distanceSign = Math.sign(distanceFromPointerDown);
3933
+ const nextSnap = index.clone().set(selectedSnap).add(directionSign * -1).get();
3934
+ if (!directionSign || !distanceSign) return null;
3935
+ return distanceSign === directionSign ? nextSnap : selectedSnap;
3936
+ }
3937
+ function fade(emblaApi) {
3938
+ const {
3939
+ dragHandler,
3940
+ scrollBody
3941
+ } = emblaApi.internalEngine();
3942
+ const pointerDown = dragHandler.pointerDown();
3943
+ const velocity = scrollBody.velocity();
3944
+ const duration = scrollBody.duration();
3945
+ const fadeIndex = getFadeIndex();
3946
+ const noFadeIndex = !isNumber(fadeIndex);
3947
+ if (pointerDown) {
3948
+ if (!velocity) return;
3949
+ distanceFromPointerDown += velocity;
3950
+ fadeVelocity = Math.abs(velocity / fadeToNextDistance);
3951
+ lockExcessiveScroll(fadeIndex);
3952
+ }
3953
+ if (!pointerDown) {
3954
+ if (!duration || noFadeIndex) return;
3955
+ fadeVelocity += (fullOpacity - opacities[fadeIndex]) / duration;
3956
+ fadeVelocity *= fadeFriction;
3957
+ }
3958
+ if (noFadeIndex) return;
3959
+ setOpacities(fadeIndex, fadeVelocity);
3960
+ }
3961
+ function settled() {
3962
+ const {
3963
+ target,
3964
+ location
3965
+ } = emblaApi.internalEngine();
3966
+ const diffToTarget = target.get() - location.get();
3967
+ const notReachedTarget = Math.abs(diffToTarget) >= 1;
3968
+ const fadeIndex = getFadeIndex();
3969
+ const noFadeIndex = !isNumber(fadeIndex);
3970
+ fade(emblaApi);
3971
+ if (noFadeIndex || notReachedTarget) return false;
3972
+ return opacities[fadeIndex] > 0.999;
3973
+ }
3974
+ function scrollProgress() {
3975
+ return progress;
3976
+ }
3977
+ const self = {
3978
+ name: 'fade',
3979
+ options: userOptions,
3980
+ init,
3981
+ destroy
3982
+ };
3983
+ return self;
3984
+ }
3985
+ Fade.globalOptions = undefined;
3986
+
4215
3987
  var LsgHeroController = /** @class */function () {
4216
3988
  function LsgHeroController(viewport, elements, options) {
4217
3989
  if (elements === void 0) {
@@ -4774,6 +4546,43 @@ var LsgTabs = function (_a) {
4774
4546
  }));
4775
4547
  };
4776
4548
 
4549
+ /**
4550
+ * Storybook representation of the AEM LSG table markup.
4551
+ * It deliberately emits the same Style System class contract as AEM.
4552
+ */
4553
+ var LsgTable = function (_a) {
4554
+ var headers = _a.headers,
4555
+ rows = _a.rows,
4556
+ _b = _a.headerBackground,
4557
+ headerBackground = _b === void 0 ? "primary" : _b,
4558
+ _c = _a.accentColors,
4559
+ accentColors = _c === void 0 ? "black" : _c,
4560
+ _d = _a.noAlternatingRows,
4561
+ noAlternatingRows = _d === void 0 ? false : _d,
4562
+ caption = _a.caption,
4563
+ id = _a.id,
4564
+ className = _a.className;
4565
+ var wrapperClassName = ["table-focus", "background-color-".concat(headerBackground), "accent-color-".concat(accentColors), "no-alternating-rows-".concat(noAlternatingRows), className].filter(Boolean).join(" ");
4566
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
4567
+ id: id,
4568
+ className: wrapperClassName
4569
+ }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, headers.map(function (cell, index) {
4570
+ return /*#__PURE__*/React.createElement("td", {
4571
+ key: "header-".concat(index)
4572
+ }, cell);
4573
+ })), rows.map(function (row, rowIndex) {
4574
+ return /*#__PURE__*/React.createElement("tr", {
4575
+ key: "row-".concat(rowIndex)
4576
+ }, row.map(function (cell, cellIndex) {
4577
+ return /*#__PURE__*/React.createElement("td", {
4578
+ key: "cell-".concat(rowIndex, "-").concat(cellIndex)
4579
+ }, cell);
4580
+ }));
4581
+ })))), /*#__PURE__*/React.createElement("div", {
4582
+ className: "table-caption"
4583
+ }, caption));
4584
+ };
4585
+
4777
4586
  var LsgFormFieldText = function (_a) {
4778
4587
  var _b = _a.id,
4779
4588
  id = _b === void 0 ? "field-text" : _b,
@@ -5534,6 +5343,7 @@ var BASE_COMPONENTS = {
5534
5343
  LsgFooter: LsgFooter,
5535
5344
  LsgHero: LsgHero,
5536
5345
  LsgTabs: LsgTabs,
5346
+ LsgTable: LsgTable,
5537
5347
  LsgFormContainer: LsgFormContainer,
5538
5348
  LsgFormFieldText: LsgFormFieldText,
5539
5349
  LsgFormFieldEmail: LsgFormFieldEmail,
@@ -5582,7 +5392,8 @@ function createThemeComponents(themeName) {
5582
5392
  LsgFormFieldConsent: createThemeComponent(themeName, "form-field-consent", BASE_COMPONENTS.LsgFormFieldConsent),
5583
5393
  LsgFormPolicyNotice: createThemeComponent(themeName, "form-policy-notice", BASE_COMPONENTS.LsgFormPolicyNotice),
5584
5394
  LsgFormStep: createThemeComponent(themeName, "form-step", BASE_COMPONENTS.LsgFormStep),
5585
- LsgTabs: createThemeComponent(themeName, "tabs", BASE_COMPONENTS.LsgTabs)
5395
+ LsgTabs: createThemeComponent(themeName, "tabs", BASE_COMPONENTS.LsgTabs),
5396
+ LsgTable: createThemeComponent(themeName, "table", BASE_COMPONENTS.LsgTable)
5586
5397
  };
5587
5398
  }
5588
5399
 
@@ -5604,6 +5415,7 @@ var Theme1LsgButton = theme1Components.LsgButton,
5604
5415
  Theme1LsgFooter = theme1Components.LsgFooter,
5605
5416
  Theme1LsgHero = theme1Components.LsgHero;
5606
5417
  theme1Components.LsgTabs;
5418
+ var Theme1LsgTable = theme1Components.LsgTable;
5607
5419
  // Form components
5608
5420
  theme1Components.LsgFormContainer;
5609
5421
  theme1Components.LsgFormFieldText;
@@ -5632,7 +5444,8 @@ var Theme2LsgButton = theme2Components.LsgButton,
5632
5444
  Theme2LsgQuickLinks = theme2Components.LsgQuickLinks,
5633
5445
  Theme2LsgSocialMediaIcons = theme2Components.LsgSocialMediaIcons,
5634
5446
  Theme2LsgFooter = theme2Components.LsgFooter,
5635
- Theme2LsgHero = theme2Components.LsgHero;
5447
+ Theme2LsgHero = theme2Components.LsgHero,
5448
+ Theme2LsgTable = theme2Components.LsgTable;
5636
5449
  // Form components
5637
5450
  theme2Components.LsgFormContainer;
5638
5451
  theme2Components.LsgFormFieldText;
@@ -5660,7 +5473,8 @@ var Theme3LsgButton = theme3Components.LsgButton,
5660
5473
  Theme3LsgQuickLinks = theme3Components.LsgQuickLinks,
5661
5474
  Theme3LsgSocialMediaIcons = theme3Components.LsgSocialMediaIcons,
5662
5475
  Theme3LsgFooter = theme3Components.LsgFooter,
5663
- Theme3LsgHero = theme3Components.LsgHero;
5476
+ Theme3LsgHero = theme3Components.LsgHero,
5477
+ Theme3LsgTable = theme3Components.LsgTable;
5664
5478
  // Form components
5665
5479
  theme3Components.LsgFormContainer;
5666
5480
  theme3Components.LsgFormFieldText;
@@ -5691,6 +5505,7 @@ exports.LsgQuickLinks = LsgQuickLinks;
5691
5505
  exports.LsgSearchOverlay = LsgSearchOverlay;
5692
5506
  exports.LsgSearchTrigger = LsgSearchTrigger;
5693
5507
  exports.LsgSocialMediaIcons = LsgSocialMediaIcons;
5508
+ exports.LsgTable = LsgTable;
5694
5509
  exports.Theme1LsgBanner = Theme1LsgBanner;
5695
5510
  exports.Theme1LsgBreadcrumb = Theme1LsgBreadcrumb;
5696
5511
  exports.Theme1LsgButton = Theme1LsgButton;
@@ -5707,6 +5522,7 @@ exports.Theme1LsgQuickLinks = Theme1LsgQuickLinks;
5707
5522
  exports.Theme1LsgSearchOverlay = Theme1LsgSearchOverlay;
5708
5523
  exports.Theme1LsgSearchTrigger = Theme1LsgSearchTrigger;
5709
5524
  exports.Theme1LsgSocialMediaIcons = Theme1LsgSocialMediaIcons;
5525
+ exports.Theme1LsgTable = Theme1LsgTable;
5710
5526
  exports.Theme2LsgBanner = Theme2LsgBanner;
5711
5527
  exports.Theme2LsgBreadcrumb = Theme2LsgBreadcrumb;
5712
5528
  exports.Theme2LsgButton = Theme2LsgButton;
@@ -5723,6 +5539,7 @@ exports.Theme2LsgQuickLinks = Theme2LsgQuickLinks;
5723
5539
  exports.Theme2LsgSearchOverlay = Theme2LsgSearchOverlay;
5724
5540
  exports.Theme2LsgSearchTrigger = Theme2LsgSearchTrigger;
5725
5541
  exports.Theme2LsgSocialMediaIcons = Theme2LsgSocialMediaIcons;
5542
+ exports.Theme2LsgTable = Theme2LsgTable;
5726
5543
  exports.Theme3LsgBanner = Theme3LsgBanner;
5727
5544
  exports.Theme3LsgBreadcrumb = Theme3LsgBreadcrumb;
5728
5545
  exports.Theme3LsgButton = Theme3LsgButton;
@@ -5739,6 +5556,7 @@ exports.Theme3LsgQuickLinks = Theme3LsgQuickLinks;
5739
5556
  exports.Theme3LsgSearchOverlay = Theme3LsgSearchOverlay;
5740
5557
  exports.Theme3LsgSearchTrigger = Theme3LsgSearchTrigger;
5741
5558
  exports.Theme3LsgSocialMediaIcons = Theme3LsgSocialMediaIcons;
5559
+ exports.Theme3LsgTable = Theme3LsgTable;
5742
5560
  exports.getTelValue = getTelValue;
5743
5561
  exports.initTelPickers = initTelPickers;
5744
5562
  exports.theme1Components = theme1Components;