@skyux/core 8.0.0-alpha.0 → 8.0.0-alpha.2

package/esm2020/lib/modules/stacking-context/stacking-context-token.mjs

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+/**
+ * @internal
+ */
+export const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhY2tpbmctY29udGV4dC10b2tlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb3JlL3NyYy9saWIvbW9kdWxlcy9zdGFja2luZy1jb250ZXh0L3N0YWNraW5nLWNvbnRleHQtdG9rZW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUkvQzs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLG9CQUFvQixHQUFHLElBQUksY0FBYyxDQUNwRCxvQkFBb0IsQ0FDckIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGlvblRva2VuIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNreVN0YWNraW5nQ29udGV4dCB9IGZyb20gJy4vc3RhY2tpbmctY29udGV4dCc7XG5cbi8qKlxuICogQGludGVybmFsXG4gKi9cbmV4cG9ydCBjb25zdCBTS1lfU1RBQ0tJTkdfQ09OVEVYVCA9IG5ldyBJbmplY3Rpb25Ub2tlbjxTa3lTdGFja2luZ0NvbnRleHQ+KFxuICAnU2t5U3RhY2tpbmdDb250ZXh0J1xuKTtcbiJdfQ==

package/esm2020/lib/modules/stacking-context/stacking-context.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhY2tpbmctY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb3JlL3NyYy9saWIvbW9kdWxlcy9zdGFja2luZy1jb250ZXh0L3N0YWNraW5nLWNvbnRleHQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcblxuLyoqXG4gKiBAaW50ZXJuYWxcbiAqL1xuZXhwb3J0IGludGVyZmFjZSBTa3lTdGFja2luZ0NvbnRleHQge1xuICAvLyBUaGUgei1pbmRleCB0byB1c2UgZm9yIHRoZSBzdGFja2luZyBjb250ZXh0LlxuICB6SW5kZXg6IE9ic2VydmFibGU8bnVtYmVyPjtcbn1cbiJdfQ==

package/fesm2015/skyux-core.mjs

@@ -3,8 +3,8 @@ import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector,
 import { __classPrivateFieldSet, __classPrivateFieldGet, __awaiter } from 'tslib';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
-import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
+import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
+import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i4 from '@angular/router';
@@ -1504,7 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  */
 const SKY_LOG_LEVEL = new InjectionToken('SkyLogLevel');
 
-var _SkyLogService_instances, _SkyLogService_applicationLogLevel, _SkyLogService_formatter, _SkyLogService_convertStringToCode, _SkyLogService_canLog, _SkyLogService_logBasedOnLevel;
+var _SkyLogService_instances, _SkyLogService_applicationLogLevel, _SkyLogService_formatter, _SkyLogService_previousWarnings, _SkyLogService_convertStringToCode, _SkyLogService_canLog, _SkyLogService_logBasedOnLevel, _SkyLogService_logWithParams, _SkyLogService_buildMessageKey;
 /**
  * Logs information to the console based on the application's log level as provided by the `SKY_LOG_LEVEL` injection token. If no token is provided, only `error` logs will be shown.
  * @internal
@@ -1514,6 +1514,7 @@ class SkyLogService {
         _SkyLogService_instances.add(this);
         _SkyLogService_applicationLogLevel.set(this, void 0);
         _SkyLogService_formatter.set(this, void 0);
+        _SkyLogService_previousWarnings.set(this, new Set());
         __classPrivateFieldSet(this, _SkyLogService_formatter, formatter, "f");
         __classPrivateFieldSet(this, _SkyLogService_applicationLogLevel, applicationLogLevel !== null && applicationLogLevel !== void 0 ? applicationLogLevel : 3 /* SkyLogLevel.Error */, "f");
     }
@@ -1529,26 +1530,26 @@ class SkyLogService {
             const logLevel = (_a = args === null || args === void 0 ? void 0 : args.logLevel) !== null && _a !== void 0 ? _a : 2 /* SkyLogLevel.Warn */;
             name = __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_convertStringToCode).call(this, name);
             if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, logLevel)) {
-                const localizedStrings = [];
+                const messageParts = [];
                 if (args === null || args === void 0 ? void 0 : args.deprecationMajorVersion) {
-                    localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated starting in SKY UX {1}.', name, args.deprecationMajorVersion.toLocaleString()));
+                    messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated starting in SKY UX {1}.', name, args.deprecationMajorVersion.toLocaleString()));
                 }
                 else {
-                    localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated.', name));
+                    messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('{0} is deprecated.', name));
                 }
                 if (args === null || args === void 0 ? void 0 : args.removalMajorVersion) {
-                    localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('We will remove it in version {0}.', args.removalMajorVersion.toLocaleString()));
+                    messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('We will remove it in version {0}.', args.removalMajorVersion.toLocaleString()));
                 }
                 else {
-                    localizedStrings.push('We will remove it in a future major version.');
+                    messageParts.push('We will remove it in a future major version.');
                 }
                 if (args === null || args === void 0 ? void 0 : args.replacementRecommendation) {
-                    localizedStrings.push(args.replacementRecommendation);
+                    messageParts.push(args.replacementRecommendation);
                 }
                 if (args === null || args === void 0 ? void 0 : args.moreInfoUrl) {
-                    localizedStrings.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('For more information, see {0}.', args.moreInfoUrl));
+                    messageParts.push(__classPrivateFieldGet(this, _SkyLogService_formatter, "f").formatText('For more information, see {0}.', args.moreInfoUrl));
                 }
-                __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logBasedOnLevel).call(this, logLevel, localizedStrings.join(' '));
+                __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logBasedOnLevel).call(this, logLevel, messageParts.join(' '));
             }
             return Promise.resolve();
         });
@@ -1560,12 +1561,7 @@ class SkyLogService {
      */
     error(message, params) {
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, 3 /* SkyLogLevel.Error */)) {
-            if (params) {
-                console.error(message, ...params);
-            }
-            else {
-                console.error(message);
-            }
+            __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'error', message, params);
         }
     }
     /**
@@ -1575,12 +1571,7 @@ class SkyLogService {
      */
     info(message, params) {
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, 1 /* SkyLogLevel.Info */)) {
-            if (params) {
-                console.log(message, ...params);
-            }
-            else {
-                console.log(message);
-            }
+            __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'log', message, params);
         }
     }
     /**
@@ -1590,16 +1581,17 @@ class SkyLogService {
      */
     warn(message, params) {
         if (__classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_canLog).call(this, 2 /* SkyLogLevel.Warn */)) {
-            if (params) {
-                console.warn(message, ...params);
-            }
-            else {
-                console.warn(message);
+            const messageKey = __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_buildMessageKey).call(this, message, params);
+            // Only log each warning once per application instance to avoid drowning out other
+            // important messages in the console.
+            if (!__classPrivateFieldGet(this, _SkyLogService_previousWarnings, "f").has(message)) {
+                __classPrivateFieldGet(this, _SkyLogService_instances, "m", _SkyLogService_logWithParams).call(this, 'warn', message, params);
+                __classPrivateFieldGet(this, _SkyLogService_previousWarnings, "f").add(messageKey);
             }
         }
     }
 }
-_SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = new WeakMap(), _SkyLogService_instances = new WeakSet(), _SkyLogService_convertStringToCode = function _SkyLogService_convertStringToCode(typeString) {
+_SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = new WeakMap(), _SkyLogService_previousWarnings = new WeakMap(), _SkyLogService_instances = new WeakSet(), _SkyLogService_convertStringToCode = function _SkyLogService_convertStringToCode(typeString) {
     if (typeString.charAt(0) !== '`' && typeString.charAt(-1) !== '`') {
         typeString = '`' + typeString + '`';
     }
@@ -1618,6 +1610,19 @@ _SkyLogService_applicationLogLevel = new WeakMap(), _SkyLogService_formatter = n
             this.error(message, params);
             break;
     }
+}, _SkyLogService_logWithParams = function _SkyLogService_logWithParams(logMethod, message, params) {
+    if (params) {
+        console[logMethod](message, ...params);
+    }
+    else {
+        console[logMethod](message);
+    }
+}, _SkyLogService_buildMessageKey = function _SkyLogService_buildMessageKey(message, params) {
+    let key = message;
+    if (params === null || params === void 0 ? void 0 : params.length) {
+        key = `${key} ${params.join(' ')}`;
+    }
+    return key;
 };
 SkyLogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogService, deps: [{ token: SkyAppFormat }, { token: SKY_LOG_LEVEL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyLogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyLogService, providedIn: 'root' });
@@ -1830,7 +1835,7 @@ class NumericOptions {
     }
 }
 
-// This file is mostly ported from the Angular 4.x NumberPipe in order to maintain the old
+/* eslint-disable eqeqeq */
 function isNumeric(value) {
     return !isNaN(value - parseFloat(value));
 }
@@ -2217,6 +2222,11 @@ class SkyOverlayInstance {
 }
 _SkyOverlayInstance_backdropClick = new WeakMap(), _SkyOverlayInstance_backdropClickObs = new WeakMap(), _SkyOverlayInstance_closed = new WeakMap(), _SkyOverlayInstance_closedObs = new WeakMap();
 
+/**
+ * @internal
+ */
+const SKY_STACKING_CONTEXT = new InjectionToken('SkyStackingContext');
+
 /**
  * Contextual information for each overlay.
  * @internal
@@ -2252,6 +2262,7 @@ class SkyOverlayComponent {
         this.enablePointerEvents = false;
         this.showBackdrop = false;
         this.zIndex = `${++uniqueZIndex}`;
+        this.clipPath$ = new ReplaySubject(1);
         _SkyOverlayComponent_backdropClick.set(this, void 0);
         _SkyOverlayComponent_backdropClickObs.set(this, void 0);
         _SkyOverlayComponent_changeDetector.set(this, void 0);
@@ -2304,7 +2315,17 @@ class SkyOverlayComponent {
         }
         this.targetRef.clear();
         const injector = Injector.create({
-            providers,
+            providers: [
+                {
+                    provide: SKY_STACKING_CONTEXT,
+                    useValue: {
+                        zIndex: new BehaviorSubject(parseInt(this.zIndex, 10))
+                            .asObservable()
+                            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyOverlayComponent_ngUnsubscribe, "f"))),
+                    },
+                },
+                ...providers,
+            ],
             parent: __classPrivateFieldGet(this, _SkyOverlayComponent_injector, "f"),
         });
         const componentRef = this.targetRef.createComponent(component, {
@@ -2322,6 +2343,9 @@ class SkyOverlayComponent {
         this.targetRef.clear();
         return this.targetRef.createEmbeddedView(templateRef, context);
     }
+    updateClipPath(clipPath) {
+        this.clipPath$.next(clipPath);
+    }
 }
 _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdropClickObs = new WeakMap(), _SkyOverlayComponent_changeDetector = new WeakMap(), _SkyOverlayComponent_closed = new WeakMap(), _SkyOverlayComponent_closedObs = new WeakMap(), _SkyOverlayComponent_context = new WeakMap(), _SkyOverlayComponent_coreAdapter = new WeakMap(), _SkyOverlayComponent_injector = new WeakMap(), _SkyOverlayComponent_ngUnsubscribe = new WeakMap(), _SkyOverlayComponent_router = new WeakMap(), _SkyOverlayComponent_routerSubscription = new WeakMap(), _SkyOverlayComponent_instances = new WeakSet(), _SkyOverlayComponent_applyConfig = function _SkyOverlayComponent_applyConfig(config) {
     this.wrapperClass = config.wrapperClass || '';
@@ -2361,10 +2385,10 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     }
 };
 SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: SkyCoreAdapterService }, { token: SkyOverlayContext }, { token: SkyIdService }, { token: i4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SkyOverlayComponent, selector: "sky-overlay", host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "overlayContentRef", first: true, predicate: ["overlayContentRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "overlayRef", first: true, predicate: ["overlayRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "targetRef", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n  [class]=\"wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.zIndex]=\"zIndex\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
+            args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"wrapperClass\"\n  [style.z-index]=\"zIndex\"\n  [style.clip-path]=\"clipPath$ | async\"\n  [ngClass]=\"{\n    'enable-pointer-events-pass-through': enablePointerEvents,\n    'sky-overlay': true\n  }\"\n  #overlayRef\n>\n  <div class=\"sky-overlay-content\" #overlayContentRef>\n    <ng-template #target> </ng-template>\n  </div>\n  <div *ngIf=\"showBackdrop\" class=\"sky-overlay-backdrop\"></div>\n</div>\n", styles: [".sky-overlay{position:fixed;inset:0;width:100%;height:100%;display:flex;pointer-events:auto}.sky-overlay-content{position:relative;z-index:1;display:inline-flex;align-self:start;pointer-events:auto}.sky-overlay-backdrop{background:rgba(0,0,0,.5);inset:0;width:100%;height:100%;position:absolute}.enable-pointer-events-pass-through,.enable-pointer-events-pass-through .sky-overlay-backdrop{pointer-events:none}.enable-pointer-events-pass-through .sky-overlay-content{pointer-events:auto}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
                         type: Optional
@@ -2821,18 +2845,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: SkyResizeObserverService }]; } });
 
-var _SkyScrollableHostService_instances, _SkyScrollableHostService_mutationObserverSvc, _SkyScrollableHostService_windowRef, _SkyScrollableHostService_findScrollableHost, _SkyScrollableHostService_observeDocumentHiddenElementChanges, _SkyScrollableHostService_observeForScrollableHostChanges, _SkyScrollableHostService_isElementVisible;
+var _SkyScrollableHostService_instances, _SkyScrollableHostService_mutationObserverSvc, _SkyScrollableHostService_windowRef, _SkyScrollableHostService_resizeObserverSvc, _SkyScrollableHostService_findScrollableHost, _SkyScrollableHostService_observeDocumentHiddenElementChanges, _SkyScrollableHostService_observeForScrollableHostChanges, _SkyScrollableHostService_isElementVisible, _SkyScrollableHostService_getViewportSize;
 function notifySubscribers(subscribers, item) {
     for (const subscriber of subscribers) {
         subscriber.next(item);
     }
 }
 class SkyScrollableHostService {
-    constructor(mutationObserverSvc, windowRef) {
+    constructor(mutationObserverSvc, windowRef, resizeObserverSvc) {
         _SkyScrollableHostService_instances.add(this);
         _SkyScrollableHostService_mutationObserverSvc.set(this, void 0);
         _SkyScrollableHostService_windowRef.set(this, void 0);
+        _SkyScrollableHostService_resizeObserverSvc.set(this, void 0);
         __classPrivateFieldSet(this, _SkyScrollableHostService_mutationObserverSvc, mutationObserverSvc, "f");
+        __classPrivateFieldSet(this, _SkyScrollableHostService_resizeObserverSvc, resizeObserverSvc, "f");
         __classPrivateFieldSet(this, _SkyScrollableHostService_windowRef, windowRef, "f");
     }
     /**
@@ -2946,8 +2972,30 @@ class SkyScrollableHostService {
             });
         });
     }
-}
-_SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHostService_windowRef = new WeakMap(), _SkyScrollableHostService_instances = new WeakSet(), _SkyScrollableHostService_findScrollableHost = function _SkyScrollableHostService_findScrollableHost(element) {
+    watchScrollableHostClipPathChanges(elementRef) {
+        if (!__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f")) {
+            return of('none');
+        }
+        return this.watchScrollableHost(elementRef).pipe(switchMap((scrollableHost) => {
+            if (!__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f") ||
+                !scrollableHost ||
+                scrollableHost === __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow) {
+                return of('none');
+            }
+            return concat([
+                of(undefined),
+                __classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f").observe({ nativeElement: scrollableHost }),
+            ]).pipe(debounceTime(0, animationFrameScheduler), map(() => {
+                const viewportSize = __classPrivateFieldGet(this, _SkyScrollableHostService_instances, "m", _SkyScrollableHostService_getViewportSize).call(this);
+                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)`;
+            }));
+        }));
+    }
+}
+_SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHostService_windowRef = new WeakMap(), _SkyScrollableHostService_resizeObserverSvc = new WeakMap(), _SkyScrollableHostService_instances = new WeakSet(), _SkyScrollableHostService_findScrollableHost = function _SkyScrollableHostService_findScrollableHost(element) {
     const regex = /(auto|scroll)/;
     const windowObj = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
     const bodyObj = windowObj.document.body;
@@ -2987,16 +3035,28 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
         subtree: true,
     });
 }, _SkyScrollableHostService_isElementVisible = function _SkyScrollableHostService_isElementVisible(elementRef) {
-    return elementRef.nativeElement.offsetParent;
+    var _a;
+    return !!((_a = elementRef.nativeElement) === null || _a === void 0 ? void 0 : _a.offsetParent);
+}, _SkyScrollableHostService_getViewportSize = function _SkyScrollableHostService_getViewportSize() {
+    const win = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
+    const docElem = win.document.documentElement;
+    return {
+        width: docElem.clientWidth,
+        height: docElem.clientHeight,
+    };
 };
-SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }, { token: SkyResizeObserverService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SkyScrollableHostService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }]; } });
+        }], ctorParameters: function () {
+        return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }, { type: SkyResizeObserverService, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 
 var _SkyAppTitleService_title;
 /**
@@ -3586,5 +3646,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NumericOptions, SKY_LOG_LEVEL, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
+export { NumericOptions, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyIdService, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
 //# sourceMappingURL=skyux-core.mjs.map