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

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';
@@ -2248,6 +2248,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);
@@ -2318,6 +2319,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 +2361,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
                 }] }]; }, propDecorators: { id: [{
@@ -2815,18 +2819,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");
     }
     /**
@@ -2940,8 +2946,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;
@@ -2981,16 +3009,25 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
         subtree: true,
     });
 }, _SkyScrollableHostService_isElementVisible = function _SkyScrollableHostService_isElementVisible(elementRef) {
-    return elementRef.nativeElement.offsetParent;
+    return !!elementRef.nativeElement?.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;
 /**