@skyux/core 4.7.0 → 4.9.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/CHANGELOG.md +17 -0
- package/bundles/skyux-core.umd.js +246 -39
- package/bundles/skyux-core.umd.js.map +1 -1
- package/bundles/skyux-core.umd.min.js +1 -1
- package/bundles/skyux-core.umd.min.js.map +1 -1
- package/esm2015/modules/dock/dock-dom-adapter.service.js +60 -3
- package/esm2015/modules/dock/dock.component.js +13 -4
- package/esm2015/modules/numeric/numeric.options.js +6 -1
- package/esm2015/modules/numeric/numeric.service.js +2 -2
- package/esm2015/modules/scrollable-host/scrollable-host.module.js +16 -0
- package/esm2015/modules/scrollable-host/scrollable-host.service.js +89 -0
- package/esm2015/modules/shared/number-format/number-format-utility.js +4 -3
- package/esm2015/modules/viewkeeper/viewkeeper-host-options.js +1 -1
- package/esm2015/modules/viewkeeper/viewkeeper-options.js +1 -1
- package/esm2015/modules/viewkeeper/viewkeeper.directive.js +35 -16
- package/esm2015/modules/viewkeeper/viewkeeper.js +27 -11
- package/esm2015/modules/viewkeeper/viewkeeper.module.js +5 -1
- package/esm2015/public_api.js +2 -1
- package/esm2015/skyux-core.js +2 -1
- package/esm5/modules/dock/dock-dom-adapter.service.js +61 -3
- package/esm5/modules/dock/dock.component.js +13 -4
- package/esm5/modules/numeric/numeric.options.js +6 -1
- package/esm5/modules/numeric/numeric.service.js +2 -2
- package/esm5/modules/scrollable-host/scrollable-host.module.js +19 -0
- package/esm5/modules/scrollable-host/scrollable-host.service.js +91 -0
- package/esm5/modules/shared/number-format/number-format-utility.js +4 -3
- package/esm5/modules/viewkeeper/viewkeeper-host-options.js +1 -1
- package/esm5/modules/viewkeeper/viewkeeper-options.js +1 -1
- package/esm5/modules/viewkeeper/viewkeeper.directive.js +45 -25
- package/esm5/modules/viewkeeper/viewkeeper.js +31 -11
- package/esm5/modules/viewkeeper/viewkeeper.module.js +5 -1
- package/esm5/public_api.js +2 -1
- package/esm5/skyux-core.js +2 -1
- package/fesm2015/skyux-core.js +226 -32
- package/fesm2015/skyux-core.js.map +1 -1
- package/fesm5/skyux-core.js +246 -41
- package/fesm5/skyux-core.js.map +1 -1
- package/modules/dock/dock-dom-adapter.service.d.ts +14 -3
- package/modules/numeric/numeric.options.d.ts +5 -0
- package/modules/scrollable-host/scrollable-host.module.d.ts +2 -0
- package/modules/scrollable-host/scrollable-host.service.d.ts +13 -0
- package/modules/shared/number-format/number-format-utility.d.ts +1 -1
- package/modules/viewkeeper/viewkeeper-host-options.d.ts +1 -0
- package/modules/viewkeeper/viewkeeper-options.d.ts +5 -0
- package/modules/viewkeeper/viewkeeper.d.ts +4 -1
- package/modules/viewkeeper/viewkeeper.directive.d.ts +4 -1
- package/package.json +2 -2
- package/public_api.d.ts +1 -0
- package/skyux-core.d.ts +1 -0
- package/skyux-core.metadata.json +1 -1
package/fesm5/skyux-core.js
CHANGED
@@ -2,7 +2,7 @@ import { __decorate, __assign, __read, __param, __values, __spread } from 'tslib
|
|
2
2
|
import { RendererFactory2, Injectable, NgModule, EventEmitter, ElementRef, Input, Output, Directive, ComponentFactoryResolver, ApplicationRef, Injector, ChangeDetectorRef, ViewChild, ViewContainerRef, Component, ChangeDetectionStrategy, ɵɵdefineInjectable, ɵɵinject, Renderer2, NgZone, Pipe, Optional } from '@angular/core';
|
3
3
|
import { CommonModule } from '@angular/common';
|
4
4
|
import { Subject, fromEvent, BehaviorSubject, of } from 'rxjs';
|
5
|
-
import { takeUntil } from 'rxjs/operators';
|
5
|
+
import { takeUntil, debounceTime, take } from 'rxjs/operators';
|
6
6
|
import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter, SkyLibResourcesService, SkyAppLocaleProvider, SkyI18nModule } from '@skyux/i18n';
|
7
7
|
import { NavigationStart, Router, RouterModule } from '@angular/router';
|
8
8
|
import { Title } from '@angular/platform-browser';
|
@@ -1098,16 +1098,71 @@ var MutationObserverService = /** @class */ (function () {
|
|
1098
1098
|
* @internal
|
1099
1099
|
*/
|
1100
1100
|
var SkyDockDomAdapterService = /** @class */ (function () {
|
1101
|
-
function SkyDockDomAdapterService(rendererFactory) {
|
1101
|
+
function SkyDockDomAdapterService(mutationService, rendererFactory) {
|
1102
|
+
this.mutationService = mutationService;
|
1103
|
+
this.ngUnsubscribe = new Subject();
|
1102
1104
|
this.renderer = rendererFactory.createRenderer(undefined, undefined);
|
1103
1105
|
}
|
1106
|
+
SkyDockDomAdapterService.prototype.ngOnDestroy = function () {
|
1107
|
+
if (this.observer) {
|
1108
|
+
this.observer.disconnect();
|
1109
|
+
}
|
1110
|
+
this.ngUnsubscribe.next();
|
1111
|
+
if (this.styleElement) {
|
1112
|
+
this.destroyStyleElement();
|
1113
|
+
}
|
1114
|
+
this.currentDockHeight =
|
1115
|
+
this.ngUnsubscribe =
|
1116
|
+
this.observer =
|
1117
|
+
this.styleElement = undefined;
|
1118
|
+
};
|
1119
|
+
SkyDockDomAdapterService.prototype.setSticky = function (elementRef) {
|
1120
|
+
this.renderer.addClass(elementRef.nativeElement, 'sky-dock-sticky');
|
1121
|
+
};
|
1104
1122
|
SkyDockDomAdapterService.prototype.setZIndex = function (zIndex, elementRef) {
|
1105
1123
|
this.renderer.setStyle(elementRef.nativeElement, 'z-index', zIndex);
|
1106
1124
|
};
|
1107
1125
|
SkyDockDomAdapterService.prototype.unbindDock = function (elementRef) {
|
1108
1126
|
this.renderer.addClass(elementRef.nativeElement, 'sky-dock-unbound');
|
1109
1127
|
};
|
1128
|
+
SkyDockDomAdapterService.prototype.watchDomChanges = function (elementRef) {
|
1129
|
+
var _this = this;
|
1130
|
+
this.observer = this.mutationService.create(function () {
|
1131
|
+
_this.adjustBodyStyles(elementRef);
|
1132
|
+
});
|
1133
|
+
this.observer.observe(elementRef.nativeElement, {
|
1134
|
+
attributes: true,
|
1135
|
+
childList: true,
|
1136
|
+
characterData: true,
|
1137
|
+
subtree: true
|
1138
|
+
});
|
1139
|
+
fromEvent(window, 'resize')
|
1140
|
+
.pipe(debounceTime(250), takeUntil(this.ngUnsubscribe))
|
1141
|
+
.subscribe(function () { return _this.adjustBodyStyles(elementRef); });
|
1142
|
+
};
|
1143
|
+
SkyDockDomAdapterService.prototype.adjustBodyStyles = function (elementRef) {
|
1144
|
+
var dockHeight = elementRef.nativeElement.getBoundingClientRect().height;
|
1145
|
+
if (dockHeight === this.currentDockHeight) {
|
1146
|
+
return;
|
1147
|
+
}
|
1148
|
+
// Create a style element to avoid overwriting any existing inline body styles.
|
1149
|
+
var styleElement = this.renderer.createElement('style');
|
1150
|
+
var textNode = this.renderer.createText("body { margin-bottom: " + dockHeight + "px; }");
|
1151
|
+
// Apply a `data-` attribute to make unit testing easier.
|
1152
|
+
this.renderer.setAttribute(styleElement, 'data-test-selector', 'sky-layout-dock-bottom-styles');
|
1153
|
+
this.renderer.appendChild(styleElement, textNode);
|
1154
|
+
this.renderer.appendChild(document.head, styleElement);
|
1155
|
+
if (this.styleElement) {
|
1156
|
+
this.destroyStyleElement();
|
1157
|
+
}
|
1158
|
+
this.currentDockHeight = dockHeight;
|
1159
|
+
this.styleElement = styleElement;
|
1160
|
+
};
|
1161
|
+
SkyDockDomAdapterService.prototype.destroyStyleElement = function () {
|
1162
|
+
this.renderer.removeChild(document.head, this.styleElement);
|
1163
|
+
};
|
1110
1164
|
SkyDockDomAdapterService.ctorParameters = function () { return [
|
1165
|
+
{ type: MutationObserverService },
|
1111
1166
|
{ type: RendererFactory2 }
|
1112
1167
|
]; };
|
1113
1168
|
SkyDockDomAdapterService = __decorate([
|
@@ -1172,8 +1227,17 @@ var SkyDockComponent = /** @class */ (function () {
|
|
1172
1227
|
SkyDockComponent.prototype.setOptions = function (options) {
|
1173
1228
|
var _a, _b;
|
1174
1229
|
this.options = options;
|
1175
|
-
|
1176
|
-
|
1230
|
+
switch ((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) {
|
1231
|
+
case SkyDockLocation.BeforeElement:
|
1232
|
+
this.domAdapter.unbindDock(this.elementRef);
|
1233
|
+
break;
|
1234
|
+
case SkyDockLocation.ElementBottom:
|
1235
|
+
this.domAdapter.setSticky(this.elementRef);
|
1236
|
+
break;
|
1237
|
+
case SkyDockLocation.BodyBottom:
|
1238
|
+
default:
|
1239
|
+
this.domAdapter.watchDomChanges(this.elementRef);
|
1240
|
+
break;
|
1177
1241
|
}
|
1178
1242
|
if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.zIndex) {
|
1179
1243
|
this.domAdapter.setZIndex(this.options.zIndex, this.elementRef);
|
@@ -1212,7 +1276,7 @@ var SkyDockComponent = /** @class */ (function () {
|
|
1212
1276
|
SkyDockDomAdapterService
|
1213
1277
|
],
|
1214
1278
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
1215
|
-
styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:
|
1279
|
+
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:-webkit-sticky;position:sticky}"]
|
1216
1280
|
})
|
1217
1281
|
], SkyDockComponent);
|
1218
1282
|
return SkyDockComponent;
|
@@ -1620,7 +1684,7 @@ var SkyNumberFormatUtility = /** @class */ (function () {
|
|
1620
1684
|
/* istanbul ignore next */
|
1621
1685
|
function SkyNumberFormatUtility() {
|
1622
1686
|
}
|
1623
|
-
SkyNumberFormatUtility.formatNumber = function (locale, value, style, digits, currency, currencyAsSymbol) {
|
1687
|
+
SkyNumberFormatUtility.formatNumber = function (locale, value, style, digits, currency, currencyAsSymbol, currencySign) {
|
1624
1688
|
if (currency === void 0) { currency = null; }
|
1625
1689
|
if (currencyAsSymbol === void 0) { currencyAsSymbol = false; }
|
1626
1690
|
if (value == null) {
|
@@ -1663,7 +1727,8 @@ var SkyNumberFormatUtility = /** @class */ (function () {
|
|
1663
1727
|
minimumFractionDigits: minFraction,
|
1664
1728
|
maximumFractionDigits: maxFraction,
|
1665
1729
|
currency: currency,
|
1666
|
-
currencyAsSymbol: currencyAsSymbol
|
1730
|
+
currencyAsSymbol: currencyAsSymbol,
|
1731
|
+
currencySign: currencySign
|
1667
1732
|
});
|
1668
1733
|
};
|
1669
1734
|
SkyNumberFormatUtility._NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
|
@@ -1752,7 +1817,7 @@ var SkyNumericService = /** @class */ (function () {
|
|
1752
1817
|
// and the appropriate string value for Angular 5+.
|
1753
1818
|
// See: https://angular.io/api/common/CurrencyPipe#parameters
|
1754
1819
|
var symbolDisplay = 'symbol';
|
1755
|
-
output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digits, options.iso, symbolDisplay);
|
1820
|
+
output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), SkyIntlNumberFormatStyle.Currency, digits, options.iso, symbolDisplay, options.currencySign);
|
1756
1821
|
break;
|
1757
1822
|
// The following is a catch-all to ensure that if
|
1758
1823
|
// anything but currency (or a future option) are entered,
|
@@ -1871,6 +1936,11 @@ var NumericOptions = /** @class */ (function () {
|
|
1871
1936
|
* @default "number"
|
1872
1937
|
*/
|
1873
1938
|
this.format = 'number';
|
1939
|
+
/**
|
1940
|
+
* Specifies the format of the currency`.
|
1941
|
+
* @default "standard"
|
1942
|
+
*/
|
1943
|
+
this.currencySign = 'standard';
|
1874
1944
|
/**
|
1875
1945
|
* Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
|
1876
1946
|
* currency code, the component uses the browser's culture to determine the currency unless your
|
@@ -2458,6 +2528,87 @@ var SkyPercentPipeModule = /** @class */ (function () {
|
|
2458
2528
|
return SkyPercentPipeModule;
|
2459
2529
|
}());
|
2460
2530
|
|
2531
|
+
var SkyScrollableHostService = /** @class */ (function () {
|
2532
|
+
function SkyScrollableHostService(mutationObserverSvc, windowRef) {
|
2533
|
+
this.mutationObserverSvc = mutationObserverSvc;
|
2534
|
+
this.windowRef = windowRef;
|
2535
|
+
}
|
2536
|
+
SkyScrollableHostService.prototype.getScrollabeHost = function (elementRef) {
|
2537
|
+
return this.findScrollableHost(elementRef.nativeElement);
|
2538
|
+
};
|
2539
|
+
SkyScrollableHostService.prototype.watchScrollableHost = function (elementRef, completionObservable) {
|
2540
|
+
var _this = this;
|
2541
|
+
var scrollableHost = this.findScrollableHost(elementRef.nativeElement);
|
2542
|
+
var behaviorSubject = new BehaviorSubject(scrollableHost);
|
2543
|
+
var mutationObserver = this.mutationObserverSvc.create(function () {
|
2544
|
+
var newScrollableHost = _this.findScrollableHost(elementRef.nativeElement);
|
2545
|
+
if (newScrollableHost !== scrollableHost) {
|
2546
|
+
scrollableHost = newScrollableHost;
|
2547
|
+
_this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
|
2548
|
+
behaviorSubject.next(scrollableHost);
|
2549
|
+
}
|
2550
|
+
});
|
2551
|
+
this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
|
2552
|
+
completionObservable.pipe(take(1)).subscribe(function () {
|
2553
|
+
mutationObserver.disconnect();
|
2554
|
+
});
|
2555
|
+
return behaviorSubject;
|
2556
|
+
};
|
2557
|
+
SkyScrollableHostService.prototype.findScrollableHost = function (element) {
|
2558
|
+
var regex = /(auto|scroll)/;
|
2559
|
+
var windowObj = this.windowRef.nativeWindow;
|
2560
|
+
var bodyObj = windowObj.document.body;
|
2561
|
+
/* Sanity check */
|
2562
|
+
if (!element) {
|
2563
|
+
return windowObj;
|
2564
|
+
}
|
2565
|
+
var style = windowObj.getComputedStyle(element);
|
2566
|
+
var parent = element;
|
2567
|
+
do {
|
2568
|
+
parent = parent.parentNode;
|
2569
|
+
/* Sanity check for if this function is called for an element which has been removed from the DOM */
|
2570
|
+
if (!(parent instanceof HTMLElement)) {
|
2571
|
+
return windowObj;
|
2572
|
+
}
|
2573
|
+
style = windowObj.getComputedStyle(parent);
|
2574
|
+
} while (!regex.test(style.overflow) &&
|
2575
|
+
!regex.test(style.overflowY) &&
|
2576
|
+
parent !== bodyObj);
|
2577
|
+
if (parent === bodyObj) {
|
2578
|
+
return windowObj;
|
2579
|
+
}
|
2580
|
+
return parent;
|
2581
|
+
};
|
2582
|
+
SkyScrollableHostService.prototype.observeForScrollableHostChanges = function (element, mutationObserver) {
|
2583
|
+
mutationObserver.disconnect();
|
2584
|
+
if (element instanceof HTMLElement) {
|
2585
|
+
mutationObserver.observe(element, {
|
2586
|
+
attributes: true,
|
2587
|
+
attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
|
2588
|
+
subtree: true
|
2589
|
+
});
|
2590
|
+
}
|
2591
|
+
else {
|
2592
|
+
mutationObserver.observe(document.documentElement, {
|
2593
|
+
attributes: true,
|
2594
|
+
attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
|
2595
|
+
subtree: true
|
2596
|
+
});
|
2597
|
+
}
|
2598
|
+
};
|
2599
|
+
SkyScrollableHostService.ctorParameters = function () { return [
|
2600
|
+
{ type: MutationObserverService },
|
2601
|
+
{ type: SkyAppWindowRef }
|
2602
|
+
]; };
|
2603
|
+
SkyScrollableHostService.ɵprov = ɵɵdefineInjectable({ factory: function SkyScrollableHostService_Factory() { return new SkyScrollableHostService(ɵɵinject(MutationObserverService), ɵɵinject(SkyAppWindowRef)); }, token: SkyScrollableHostService, providedIn: "root" });
|
2604
|
+
SkyScrollableHostService = __decorate([
|
2605
|
+
Injectable({
|
2606
|
+
providedIn: 'root'
|
2607
|
+
})
|
2608
|
+
], SkyScrollableHostService);
|
2609
|
+
return SkyScrollableHostService;
|
2610
|
+
}());
|
2611
|
+
|
2461
2612
|
/**
|
2462
2613
|
* Provides a method for setting a formatted title on the current window.
|
2463
2614
|
*/
|
@@ -2525,11 +2676,12 @@ function nextId() {
|
|
2525
2676
|
nextIdIndex = (nextIdIndex || 0) + 1;
|
2526
2677
|
return 'viewkeeper-' + nextIdIndex;
|
2527
2678
|
}
|
2528
|
-
function getOffset(el) {
|
2679
|
+
function getOffset(el, scrollableHost) {
|
2529
2680
|
var rect = el.getBoundingClientRect();
|
2681
|
+
var parent = scrollableHost ? scrollableHost : document.documentElement;
|
2530
2682
|
return {
|
2531
|
-
top: rect.top +
|
2532
|
-
left: rect.left +
|
2683
|
+
top: rect.top + parent.scrollTop,
|
2684
|
+
left: rect.left + parent.scrollLeft
|
2533
2685
|
};
|
2534
2686
|
}
|
2535
2687
|
function px(value) {
|
@@ -2566,6 +2718,7 @@ var SkyViewkeeper = /** @class */ (function () {
|
|
2566
2718
|
this.id = nextId();
|
2567
2719
|
this.el = options.el;
|
2568
2720
|
this.boundaryEl = options.boundaryEl;
|
2721
|
+
this.scrollableHost = options.scrollableHost;
|
2569
2722
|
this.verticalOffset = options.verticalOffset || 0;
|
2570
2723
|
this.verticalOffsetEl = options.verticalOffsetEl;
|
2571
2724
|
this.viewportMarginTop = options.viewportMarginTop || 0;
|
@@ -2573,12 +2726,27 @@ var SkyViewkeeper = /** @class */ (function () {
|
|
2573
2726
|
if (this.verticalOffsetEl) {
|
2574
2727
|
this.verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
|
2575
2728
|
}
|
2576
|
-
window.addEventListener('scroll', this.syncElPositionHandler);
|
2729
|
+
window.addEventListener('scroll', this.syncElPositionHandler, true);
|
2577
2730
|
window.addEventListener('resize', this.syncElPositionHandler);
|
2578
2731
|
window.addEventListener('orientationchange', this.syncElPositionHandler);
|
2579
2732
|
ensureStyleEl();
|
2580
2733
|
this.syncElPosition();
|
2581
2734
|
}
|
2735
|
+
Object.defineProperty(SkyViewkeeper.prototype, "viewportMarginTop", {
|
2736
|
+
get: function () {
|
2737
|
+
if (this.scrollableHost) {
|
2738
|
+
return 0;
|
2739
|
+
}
|
2740
|
+
else {
|
2741
|
+
return this._viewportMarginTop;
|
2742
|
+
}
|
2743
|
+
},
|
2744
|
+
set: function (margin) {
|
2745
|
+
this._viewportMarginTop = margin;
|
2746
|
+
},
|
2747
|
+
enumerable: true,
|
2748
|
+
configurable: true
|
2749
|
+
});
|
2582
2750
|
SkyViewkeeper.prototype.syncElPosition = function () {
|
2583
2751
|
var verticalOffset = this.calculateVerticalOffset();
|
2584
2752
|
// When the element isn't visible, its size can't be calculated, so don't attempt syncing position in this case.
|
@@ -2601,7 +2769,7 @@ var SkyViewkeeper = /** @class */ (function () {
|
|
2601
2769
|
};
|
2602
2770
|
SkyViewkeeper.prototype.destroy = function () {
|
2603
2771
|
if (!this.isDestroyed) {
|
2604
|
-
window.removeEventListener('scroll', this.syncElPositionHandler);
|
2772
|
+
window.removeEventListener('scroll', this.syncElPositionHandler, true);
|
2605
2773
|
window.removeEventListener('resize', this.syncElPositionHandler);
|
2606
2774
|
window.removeEventListener('orientationchange', this.syncElPositionHandler);
|
2607
2775
|
this.unfixEl();
|
@@ -2639,16 +2807,19 @@ var SkyViewkeeper = /** @class */ (function () {
|
|
2639
2807
|
var verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
|
2640
2808
|
offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
|
2641
2809
|
}
|
2810
|
+
else if (this.scrollableHost) {
|
2811
|
+
offset += this.scrollableHost.getBoundingClientRect().top;
|
2812
|
+
}
|
2642
2813
|
return offset;
|
2643
2814
|
};
|
2644
2815
|
SkyViewkeeper.prototype.shouldFixEl = function (boundaryInfo, verticalOffset) {
|
2645
2816
|
var anchorTop;
|
2646
2817
|
var doFixEl;
|
2647
2818
|
if (boundaryInfo.spacerEl) {
|
2648
|
-
anchorTop = getOffset(boundaryInfo.spacerEl).top;
|
2819
|
+
anchorTop = getOffset(boundaryInfo.spacerEl, this.scrollableHost).top;
|
2649
2820
|
}
|
2650
2821
|
else {
|
2651
|
-
anchorTop = getOffset(this.el).top;
|
2822
|
+
anchorTop = getOffset(this.el, this.scrollableHost).top;
|
2652
2823
|
}
|
2653
2824
|
doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop > anchorTop;
|
2654
2825
|
return doFixEl;
|
@@ -2707,11 +2878,11 @@ var SkyViewkeeper = /** @class */ (function () {
|
|
2707
2878
|
var spacerId = this.getSpacerId();
|
2708
2879
|
var spacerEl = document.getElementById(spacerId);
|
2709
2880
|
var boundaryEl = this.boundaryEl;
|
2710
|
-
var boundaryOffset = getOffset(boundaryEl);
|
2881
|
+
var boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
|
2711
2882
|
var boundaryTop = boundaryOffset.top;
|
2712
2883
|
var boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
|
2713
|
-
var scrollLeft = document.documentElement.scrollLeft;
|
2714
|
-
var scrollTop = document.documentElement.scrollTop;
|
2884
|
+
var scrollLeft = this.scrollableHost ? this.scrollableHost.scrollLeft : document.documentElement.scrollLeft;
|
2885
|
+
var scrollTop = this.scrollableHost ? this.scrollableHost.scrollTop : document.documentElement.scrollTop;
|
2715
2886
|
var elHeight = getHeightWithMargin(this.el);
|
2716
2887
|
return {
|
2717
2888
|
boundaryBottom: boundaryBottom,
|
@@ -2760,11 +2931,13 @@ var SkyViewkeeperService = /** @class */ (function () {
|
|
2760
2931
|
}());
|
2761
2932
|
|
2762
2933
|
var SkyViewkeeperDirective = /** @class */ (function () {
|
2763
|
-
function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc) {
|
2934
|
+
function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
|
2764
2935
|
this.el = el;
|
2765
2936
|
this.mutationObserverSvc = mutationObserverSvc;
|
2766
2937
|
this.viewkeeperSvc = viewkeeperSvc;
|
2938
|
+
this.scrollableHostService = scrollableHostService;
|
2767
2939
|
this.viewkeepers = [];
|
2940
|
+
this.scrollableHostWatchUnsubscribe = undefined;
|
2768
2941
|
}
|
2769
2942
|
Object.defineProperty(SkyViewkeeperDirective.prototype, "skyViewkeeper", {
|
2770
2943
|
get: function () {
|
@@ -2845,37 +3018,51 @@ var SkyViewkeeperDirective = /** @class */ (function () {
|
|
2845
3018
|
return false;
|
2846
3019
|
};
|
2847
3020
|
SkyViewkeeperDirective.prototype.detectElements = function () {
|
2848
|
-
var
|
3021
|
+
var _this = this;
|
2849
3022
|
var viewkeeperEls = this.getViewkeeperEls();
|
2850
3023
|
if (this.viewkeeperElsChanged(viewkeeperEls)) {
|
2851
|
-
this.
|
2852
|
-
|
2853
|
-
|
2854
|
-
for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
|
2855
|
-
var viewkeeperEl = viewkeeperEls_1_1.value;
|
2856
|
-
this.viewkeepers.push(this.viewkeeperSvc.create({
|
2857
|
-
boundaryEl: this.el.nativeElement,
|
2858
|
-
el: viewkeeperEl,
|
2859
|
-
setWidth: true,
|
2860
|
-
verticalOffsetEl: previousViewkeeperEl
|
2861
|
-
}));
|
2862
|
-
previousViewkeeperEl = viewkeeperEl;
|
2863
|
-
}
|
3024
|
+
if (this.scrollableHostWatchUnsubscribe) {
|
3025
|
+
this.scrollableHostWatchUnsubscribe.next();
|
3026
|
+
this.scrollableHostWatchUnsubscribe = new Subject();
|
2864
3027
|
}
|
2865
|
-
|
2866
|
-
|
3028
|
+
else {
|
3029
|
+
this.scrollableHostWatchUnsubscribe = new Subject();
|
3030
|
+
}
|
3031
|
+
this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
|
3032
|
+
.pipe(takeUntil(this.scrollableHostWatchUnsubscribe))
|
3033
|
+
.subscribe(function (scrollableHost) {
|
3034
|
+
var e_3, _a;
|
3035
|
+
_this.destroyViewkeepers();
|
3036
|
+
var previousViewkeeperEl;
|
2867
3037
|
try {
|
2868
|
-
|
3038
|
+
for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
|
3039
|
+
var viewkeeperEl = viewkeeperEls_1_1.value;
|
3040
|
+
_this.viewkeepers.push(_this.viewkeeperSvc.create({
|
3041
|
+
boundaryEl: _this.el.nativeElement,
|
3042
|
+
scrollableHost: scrollableHost instanceof HTMLElement ? scrollableHost : undefined,
|
3043
|
+
el: viewkeeperEl,
|
3044
|
+
setWidth: true,
|
3045
|
+
verticalOffsetEl: previousViewkeeperEl
|
3046
|
+
}));
|
3047
|
+
previousViewkeeperEl = viewkeeperEl;
|
3048
|
+
}
|
2869
3049
|
}
|
2870
|
-
|
2871
|
-
|
3050
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
3051
|
+
finally {
|
3052
|
+
try {
|
3053
|
+
if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
|
3054
|
+
}
|
3055
|
+
finally { if (e_3) throw e_3.error; }
|
3056
|
+
}
|
3057
|
+
});
|
2872
3058
|
this.currentViewkeeperEls = viewkeeperEls;
|
2873
3059
|
}
|
2874
3060
|
};
|
2875
3061
|
SkyViewkeeperDirective.ctorParameters = function () { return [
|
2876
3062
|
{ type: ElementRef },
|
2877
3063
|
{ type: MutationObserverService },
|
2878
|
-
{ type: SkyViewkeeperService }
|
3064
|
+
{ type: SkyViewkeeperService },
|
3065
|
+
{ type: SkyScrollableHostService, decorators: [{ type: Optional }] }
|
2879
3066
|
]; };
|
2880
3067
|
__decorate([
|
2881
3068
|
Input()
|
@@ -2883,11 +3070,26 @@ var SkyViewkeeperDirective = /** @class */ (function () {
|
|
2883
3070
|
SkyViewkeeperDirective = __decorate([
|
2884
3071
|
Directive({
|
2885
3072
|
selector: '[skyViewkeeper]'
|
2886
|
-
})
|
3073
|
+
}),
|
3074
|
+
__param(3, Optional())
|
2887
3075
|
], SkyViewkeeperDirective);
|
2888
3076
|
return SkyViewkeeperDirective;
|
2889
3077
|
}());
|
2890
3078
|
|
3079
|
+
var SkyScrollableHostModule = /** @class */ (function () {
|
3080
|
+
function SkyScrollableHostModule() {
|
3081
|
+
}
|
3082
|
+
SkyScrollableHostModule = __decorate([
|
3083
|
+
NgModule({
|
3084
|
+
providers: [
|
3085
|
+
MutationObserverService,
|
3086
|
+
SkyAppWindowRef
|
3087
|
+
]
|
3088
|
+
})
|
3089
|
+
], SkyScrollableHostModule);
|
3090
|
+
return SkyScrollableHostModule;
|
3091
|
+
}());
|
3092
|
+
|
2891
3093
|
var SkyViewkeeperModule = /** @class */ (function () {
|
2892
3094
|
function SkyViewkeeperModule() {
|
2893
3095
|
}
|
@@ -2896,6 +3098,9 @@ var SkyViewkeeperModule = /** @class */ (function () {
|
|
2896
3098
|
declarations: [
|
2897
3099
|
SkyViewkeeperDirective
|
2898
3100
|
],
|
3101
|
+
imports: [
|
3102
|
+
SkyScrollableHostModule
|
3103
|
+
],
|
2899
3104
|
exports: [
|
2900
3105
|
SkyViewkeeperDirective
|
2901
3106
|
],
|
@@ -2912,5 +3117,5 @@ var SkyViewkeeperModule = /** @class */ (function () {
|
|
2912
3117
|
* Generated bundle index. Do not edit.
|
2913
3118
|
*/
|
2914
3119
|
|
2915
|
-
export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as ɵa, SkyDockComponent as ɵb, SkyDockDomAdapterService as ɵc, SkyIdDirective as ɵd, SkyCoreResourcesModule as ɵe, SkyCoreResourcesProvider as ɵf, SkyOverlayComponent as ɵg, SkyOverlayContext as ɵh, SkyOverlayAdapterService as ɵi, SkyViewkeeperDirective as ɵj };
|
3120
|
+
export { MutationObserverService, NumericOptions, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyIdModule, SkyLogModule, SkyLogService, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyScrollableHostService, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as ɵa, SkyDockComponent as ɵb, SkyDockDomAdapterService as ɵc, SkyIdDirective as ɵd, SkyCoreResourcesModule as ɵe, SkyCoreResourcesProvider as ɵf, SkyOverlayComponent as ɵg, SkyOverlayContext as ɵh, SkyOverlayAdapterService as ɵi, SkyViewkeeperDirective as ɵj, SkyScrollableHostModule as ɵk };
|
2916
3121
|
//# sourceMappingURL=skyux-core.js.map
|