@skyux/core 12.5.0 → 12.6.0

package/fesm2022/skyux-core.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable, inject, RendererFactory2, NgZone, EventEmitter, Output, Input, Directive, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, input, effect, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, concat } from 'rxjs';
+import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, combineLatestWith, concat } from 'rxjs';
 import { takeUntil, debounceTime, switchMap, map as map$1 } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -3690,6 +3690,7 @@ class SkyScrollShadowDirective {
         return this.#_enabled;
     }
     #currentShadow;
+    #boxShadows;
     #mutationObserver;
     #ngUnsubscribe;
     #elRef;
@@ -3743,11 +3744,83 @@ class SkyScrollShadowDirective {
             });
         }
     }
+    #splitBoxShadowDetails(boxShadow) {
+        const colorRegex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/;
+        const match = boxShadow.match(colorRegex);
+        if (match) {
+            const colorParts = `${match[1]}, ${match[2]}, ${match[3]}`; // Extract RGB values as a comma-separated string
+            const opacity = match[4] ? parseFloat(match[4]) : 1; // Use the captured opacity or default to 1
+            const lengths = boxShadow.replace(match[0], '').trim(); // Remove the color from the rest
+            return { colorParts, opacity, lengths };
+        }
+        /* istanbul ignore next */
+        return;
+    }
+    #formatBoxShadows(boxShadowString) {
+        const boxShadows = [];
+        let currentShadow = '';
+        let openParentheses = 0;
+        for (const char of boxShadowString) {
+            if (char === ',' && openParentheses === 0) {
+                const details = this.#splitBoxShadowDetails(currentShadow.trim());
+                if (details) {
+                    boxShadows.push(details);
+                }
+                currentShadow = '';
+            }
+            else {
+                currentShadow += char;
+                if (char === '(') {
+                    openParentheses++;
+                }
+                else if (char === ')') {
+                    openParentheses--;
+                }
+            }
+        }
+        if (currentShadow.trim()) {
+            const details = this.#splitBoxShadowDetails(currentShadow.trim());
+            if (details) {
+                boxShadows.push(details);
+            }
+        }
+        return boxShadows;
+    }
+    #getBoxShadowInfo() {
+        const elStyles = window.getComputedStyle(this.#elRef.nativeElement);
+        const boxShadowStyle = elStyles.getPropertyValue('--sky-elevation-overflow');
+        // Creating a temporary element and setting box shadow converts the color in the box shadows to rgba or rgb
+        const tempEl = document.createElement('div');
+        tempEl.style.setProperty('box-shadow', boxShadowStyle);
+        const convertedBoxShadows = tempEl.style.getPropertyValue('box-shadow');
+        const boxShadows = this.#formatBoxShadows(convertedBoxShadows);
+        return boxShadows;
+    }
     #buildShadowStyle(pixelsFromEnd) {
-        // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
-        // of the scrollable element, with a max opacity of 0.3.
-        const opacity = Math.min(pixelsFromEnd / 30, 1) * 0.3;
-        return opacity > 0 ? `0px 1px 8px 0px rgba(0, 0, 0, ${opacity})` : 'none';
+        if (!this.#boxShadows) {
+            const boxShadowInfo = this.#getBoxShadowInfo();
+            if (boxShadowInfo.length > 0) {
+                this.#boxShadows = boxShadowInfo;
+            }
+            else {
+                this.#boxShadows = 'none';
+            }
+        }
+        const boxShadowStyles = [];
+        if (this.#boxShadows === 'none' || pixelsFromEnd === 0) {
+            return 'none';
+        }
+        else {
+            for (const shadow of this.#boxShadows) {
+                const { colorParts, lengths, opacity } = shadow;
+                // Progressively darken the shadow until the user scrolls 30 pixels from the top or bottom
+                // of the scrollable element, with a max opacity of 0.3.
+                const adjustedOpacity = Math.min(pixelsFromEnd / 30, 1) * opacity;
+                const adjustedShadow = `${lengths} rgba(${colorParts}, ${adjustedOpacity})`;
+                boxShadowStyles.push(adjustedShadow);
+            }
+            return boxShadowStyles.join(', ');
+        }
     }
     #emitShadow(shadow) {
         if (!this.#currentShadow ||
@@ -3903,25 +3976,40 @@ class SkyScrollableHostService {
             });
         });
     }
-    watchScrollableHostClipPathChanges(elementRef) {
+    watchScrollableHostClipPathChanges(elementRef, additionalContainers = of([])) {
         if (!this.#resizeObserverSvc) {
             return of('none');
         }
-        return this.watchScrollableHost(elementRef).pipe(switchMap((scrollableHost) => {
-            if (!this.#resizeObserverSvc ||
-                !scrollableHost ||
-                scrollableHost === this.#windowRef.nativeWindow) {
+        return this.watchScrollableHost(elementRef).pipe(combineLatestWith(additionalContainers), switchMap(([scrollableHost, additionalHosts]) => {
+            const resizeObserverSvc = this.#resizeObserverSvc;
+            if (!resizeObserverSvc ||
+                ((!scrollableHost ||
+                    scrollableHost === this.#windowRef.nativeWindow) &&
+                    additionalHosts.length === 0)) {
                 return of('none');
             }
-            return concat([
+            const inputs = [
                 of(undefined),
-                this.#resizeObserverSvc.observe({ nativeElement: scrollableHost }),
-            ]).pipe(debounceTime(0, animationFrameScheduler), map$1(() => {
+                ...additionalHosts.map((container) => resizeObserverSvc.observe(container)),
+            ];
+            if (scrollableHost && scrollableHost !== this.#windowRef.nativeWindow) {
+                inputs.push(resizeObserverSvc.observe({ nativeElement: scrollableHost }));
+            }
+            return concat(inputs).pipe(debounceTime(0, animationFrameScheduler), map$1(() => {
                 const viewportSize = this.#getViewportSize();
-                const { top, left, width, height } = scrollableHost.getBoundingClientRect();
-                const right = Math.max(viewportSize.width - left - width, 0);
-                const bottom = Math.max(viewportSize.height - top - height, 0);
-                return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
+                let { top, left, right, bottom } = scrollableHost.getBoundingClientRect();
+                for (const container of additionalHosts) {
+                    if (container.nativeElement?.parentNode) {
+                        const containerRect = container.nativeElement.getBoundingClientRect();
+                        top = Math.max(top, containerRect.top);
+                        left = Math.max(left, containerRect.left);
+                        right = Math.min(right, containerRect.right);
+                        bottom = Math.min(bottom, containerRect.bottom);
+                    }
+                }
+                top = Math.max(0, top);
+                left = Math.max(0, left);
+                return `inset(${top}px ${viewportSize.width - right}px ${viewportSize.height - bottom}px ${left}px)`;
             }));
         }));
     }
@@ -4603,7 +4691,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('12.5.0');
+const VERSION = new Version('12.6.0');
 
 /**
  * Generated bundle index. Do not edit.