@skyux/core 7.8.0 → 7.9.0

package/fesm2020/skyux-core.mjs

@@ -3,8 +3,8 @@ import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector,
 import { __classPrivateFieldSet, __classPrivateFieldGet } 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';
@@ -1117,10 +1117,10 @@ _SkyDockComponent_changeDetector = new WeakMap(), _SkyDockComponent_domAdapter =
     return __classPrivateFieldGet(this, _SkyDockComponent_itemRefs, "f")[0].stackOrder + 1;
 };
 SkyDockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDockComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: SkyDockDomAdapterService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyDockComponent, selector: "sky-dock", providers: [SkyDockDomAdapterService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:0;bottom:0;right:0}:host.sky-dock-sticky{position:sticky}\n"] }]
+            args: [{ selector: 'sky-dock', providers: [SkyDockDomAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #target></ng-container>\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:fixed;left:var(--sky-viewport-left, 0);bottom:var(--sky-viewport-bottom, 0);right:var(--sky-viewport-right, 0);width:auto}:host.sky-dock-sticky{position:sticky}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: SkyDockDomAdapterService }]; }, propDecorators: { target: [{
                 type: ViewChild,
                 args: ['target', {
@@ -2213,6 +2213,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
@@ -2248,6 +2253,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);
@@ -2300,7 +2306,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, {
@@ -2318,6 +2334,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 || '';
@@ -2357,10 +2376,10 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
     }
 };
 SkyOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", 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: "14.2.11", 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: "14.2.11", 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: "14.2.11", 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
                 }] }]; }, propDecorators: { id: [{
@@ -2815,18 +2834,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                 }]
         }], 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;
 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");
     }
     /**
@@ -2940,8 +2961,29 @@ 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 === __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 { top, left, width, height } = scrollableHost.getBoundingClientRect();
+                const win = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
+                const right = Math.max(win.visualViewport.width - left - width, 0);
+                const bottom = Math.max(win.visualViewport.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;
@@ -2983,14 +3025,16 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
 }, _SkyScrollableHostService_isElementVisible = function _SkyScrollableHostService_isElementVisible(elementRef) {
     return elementRef.nativeElement.offsetParent;
 };
-SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: SkyMutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", 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: "14.2.11", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", 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;
 /**
@@ -3574,5 +3618,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
  * 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