@skyux/core 7.8.0 → 7.8.1
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.
- package/documentation.json +188 -103
- package/esm2020/lib/modules/overlay/overlay.component.mjs +8 -4
- package/esm2020/lib/modules/scrollable-host/scrollable-host.service.mjs +35 -9
- package/fesm2015/skyux-core.mjs +41 -10
- package/fesm2015/skyux-core.mjs.map +1 -1
- package/fesm2020/skyux-core.mjs +39 -10
- package/fesm2020/skyux-core.mjs.map +1 -1
- package/lib/modules/overlay/overlay.component.d.ts +3 -1
- package/lib/modules/scrollable-host/scrollable-host.service.d.ts +4 -2
- package/package.json +2 -2
package/fesm2020/skyux-core.mjs
CHANGED
@@ -3,8 +3,8 @@ import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector,
|
|
3
3
|
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
4
4
|
import * as i5 from '@angular/common';
|
5
5
|
import { CommonModule } from '@angular/common';
|
6
|
-
import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
|
7
|
-
import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
|
6
|
+
import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of, concat, animationFrameScheduler } from 'rxjs';
|
7
|
+
import { takeUntil, debounceTime, finalize, switchMap, map } from 'rxjs/operators';
|
8
8
|
import * as i1 from '@skyux/i18n';
|
9
9
|
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
|
10
10
|
import * as i4 from '@angular/router';
|
@@ -2248,6 +2248,7 @@ class SkyOverlayComponent {
|
|
2248
2248
|
this.enablePointerEvents = false;
|
2249
2249
|
this.showBackdrop = false;
|
2250
2250
|
this.zIndex = `${++uniqueZIndex}`;
|
2251
|
+
this.clipPath$ = new ReplaySubject(1);
|
2251
2252
|
_SkyOverlayComponent_backdropClick.set(this, void 0);
|
2252
2253
|
_SkyOverlayComponent_backdropClickObs.set(this, void 0);
|
2253
2254
|
_SkyOverlayComponent_changeDetector.set(this, void 0);
|
@@ -2318,6 +2319,9 @@ class SkyOverlayComponent {
|
|
2318
2319
|
this.targetRef.clear();
|
2319
2320
|
return this.targetRef.createEmbeddedView(templateRef, context);
|
2320
2321
|
}
|
2322
|
+
updateClipPath(clipPath) {
|
2323
|
+
this.clipPath$.next(clipPath);
|
2324
|
+
}
|
2321
2325
|
}
|
2322
2326
|
_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) {
|
2323
2327
|
this.wrapperClass = config.wrapperClass || '';
|
@@ -2357,10 +2361,10 @@ _SkyOverlayComponent_backdropClick = new WeakMap(), _SkyOverlayComponent_backdro
|
|
2357
2361
|
}
|
2358
2362
|
};
|
2359
2363
|
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 });
|
2360
|
-
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.
|
2364
|
+
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 });
|
2361
2365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyOverlayComponent, decorators: [{
|
2362
2366
|
type: Component,
|
2363
|
-
args: [{ selector: 'sky-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"wrapperClass\"\n [style.
|
2367
|
+
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"] }]
|
2364
2368
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: SkyCoreAdapterService }, { type: SkyOverlayContext }, { type: SkyIdService }, { type: i4.Router, decorators: [{
|
2365
2369
|
type: Optional
|
2366
2370
|
}] }]; }, propDecorators: { id: [{
|
@@ -2815,18 +2819,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
2815
2819
|
}]
|
2816
2820
|
}], ctorParameters: function () { return [{ type: SkyResizeObserverService }]; } });
|
2817
2821
|
|
2818
|
-
var _SkyScrollableHostService_instances, _SkyScrollableHostService_mutationObserverSvc, _SkyScrollableHostService_windowRef, _SkyScrollableHostService_findScrollableHost, _SkyScrollableHostService_observeDocumentHiddenElementChanges, _SkyScrollableHostService_observeForScrollableHostChanges, _SkyScrollableHostService_isElementVisible;
|
2822
|
+
var _SkyScrollableHostService_instances, _SkyScrollableHostService_mutationObserverSvc, _SkyScrollableHostService_windowRef, _SkyScrollableHostService_resizeObserverSvc, _SkyScrollableHostService_findScrollableHost, _SkyScrollableHostService_observeDocumentHiddenElementChanges, _SkyScrollableHostService_observeForScrollableHostChanges, _SkyScrollableHostService_isElementVisible;
|
2819
2823
|
function notifySubscribers(subscribers, item) {
|
2820
2824
|
for (const subscriber of subscribers) {
|
2821
2825
|
subscriber.next(item);
|
2822
2826
|
}
|
2823
2827
|
}
|
2824
2828
|
class SkyScrollableHostService {
|
2825
|
-
constructor(mutationObserverSvc, windowRef) {
|
2829
|
+
constructor(mutationObserverSvc, windowRef, resizeObserverSvc) {
|
2826
2830
|
_SkyScrollableHostService_instances.add(this);
|
2827
2831
|
_SkyScrollableHostService_mutationObserverSvc.set(this, void 0);
|
2828
2832
|
_SkyScrollableHostService_windowRef.set(this, void 0);
|
2833
|
+
_SkyScrollableHostService_resizeObserverSvc.set(this, void 0);
|
2829
2834
|
__classPrivateFieldSet(this, _SkyScrollableHostService_mutationObserverSvc, mutationObserverSvc, "f");
|
2835
|
+
__classPrivateFieldSet(this, _SkyScrollableHostService_resizeObserverSvc, resizeObserverSvc, "f");
|
2830
2836
|
__classPrivateFieldSet(this, _SkyScrollableHostService_windowRef, windowRef, "f");
|
2831
2837
|
}
|
2832
2838
|
/**
|
@@ -2940,8 +2946,29 @@ class SkyScrollableHostService {
|
|
2940
2946
|
});
|
2941
2947
|
});
|
2942
2948
|
}
|
2943
|
-
|
2944
|
-
|
2949
|
+
watchScrollableHostClipPathChanges(elementRef) {
|
2950
|
+
if (!__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f")) {
|
2951
|
+
return of('none');
|
2952
|
+
}
|
2953
|
+
return this.watchScrollableHost(elementRef).pipe(switchMap((scrollableHost) => {
|
2954
|
+
if (!__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f") ||
|
2955
|
+
scrollableHost === __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow) {
|
2956
|
+
return of('none');
|
2957
|
+
}
|
2958
|
+
return concat([
|
2959
|
+
of(undefined),
|
2960
|
+
__classPrivateFieldGet(this, _SkyScrollableHostService_resizeObserverSvc, "f").observe({ nativeElement: scrollableHost }),
|
2961
|
+
]).pipe(debounceTime(0, animationFrameScheduler), map(() => {
|
2962
|
+
const { top, left, width, height } = scrollableHost.getBoundingClientRect();
|
2963
|
+
const win = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
|
2964
|
+
const right = Math.max(win.visualViewport.width - left - width, 0);
|
2965
|
+
const bottom = Math.max(win.visualViewport.height - top - height, 0);
|
2966
|
+
return `inset(${top}px ${right}px ${bottom}px ${left}px)`;
|
2967
|
+
}));
|
2968
|
+
}));
|
2969
|
+
}
|
2970
|
+
}
|
2971
|
+
_SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHostService_windowRef = new WeakMap(), _SkyScrollableHostService_resizeObserverSvc = new WeakMap(), _SkyScrollableHostService_instances = new WeakSet(), _SkyScrollableHostService_findScrollableHost = function _SkyScrollableHostService_findScrollableHost(element) {
|
2945
2972
|
const regex = /(auto|scroll)/;
|
2946
2973
|
const windowObj = __classPrivateFieldGet(this, _SkyScrollableHostService_windowRef, "f").nativeWindow;
|
2947
2974
|
const bodyObj = windowObj.document.body;
|
@@ -2983,14 +3010,16 @@ _SkyScrollableHostService_mutationObserverSvc = new WeakMap(), _SkyScrollableHos
|
|
2983
3010
|
}, _SkyScrollableHostService_isElementVisible = function _SkyScrollableHostService_isElementVisible(elementRef) {
|
2984
3011
|
return elementRef.nativeElement.offsetParent;
|
2985
3012
|
};
|
2986
|
-
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 });
|
3013
|
+
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 });
|
2987
3014
|
SkyScrollableHostService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyScrollableHostService, providedIn: 'root' });
|
2988
3015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyScrollableHostService, decorators: [{
|
2989
3016
|
type: Injectable,
|
2990
3017
|
args: [{
|
2991
3018
|
providedIn: 'root',
|
2992
3019
|
}]
|
2993
|
-
}], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }
|
3020
|
+
}], ctorParameters: function () { return [{ type: SkyMutationObserverService }, { type: SkyAppWindowRef }, { type: SkyResizeObserverService, decorators: [{
|
3021
|
+
type: Optional
|
3022
|
+
}] }]; } });
|
2994
3023
|
|
2995
3024
|
var _SkyAppTitleService_title;
|
2996
3025
|
/**
|