@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.
Files changed (50) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/bundles/skyux-core.umd.js +246 -39
  3. package/bundles/skyux-core.umd.js.map +1 -1
  4. package/bundles/skyux-core.umd.min.js +1 -1
  5. package/bundles/skyux-core.umd.min.js.map +1 -1
  6. package/esm2015/modules/dock/dock-dom-adapter.service.js +60 -3
  7. package/esm2015/modules/dock/dock.component.js +13 -4
  8. package/esm2015/modules/numeric/numeric.options.js +6 -1
  9. package/esm2015/modules/numeric/numeric.service.js +2 -2
  10. package/esm2015/modules/scrollable-host/scrollable-host.module.js +16 -0
  11. package/esm2015/modules/scrollable-host/scrollable-host.service.js +89 -0
  12. package/esm2015/modules/shared/number-format/number-format-utility.js +4 -3
  13. package/esm2015/modules/viewkeeper/viewkeeper-host-options.js +1 -1
  14. package/esm2015/modules/viewkeeper/viewkeeper-options.js +1 -1
  15. package/esm2015/modules/viewkeeper/viewkeeper.directive.js +35 -16
  16. package/esm2015/modules/viewkeeper/viewkeeper.js +27 -11
  17. package/esm2015/modules/viewkeeper/viewkeeper.module.js +5 -1
  18. package/esm2015/public_api.js +2 -1
  19. package/esm2015/skyux-core.js +2 -1
  20. package/esm5/modules/dock/dock-dom-adapter.service.js +61 -3
  21. package/esm5/modules/dock/dock.component.js +13 -4
  22. package/esm5/modules/numeric/numeric.options.js +6 -1
  23. package/esm5/modules/numeric/numeric.service.js +2 -2
  24. package/esm5/modules/scrollable-host/scrollable-host.module.js +19 -0
  25. package/esm5/modules/scrollable-host/scrollable-host.service.js +91 -0
  26. package/esm5/modules/shared/number-format/number-format-utility.js +4 -3
  27. package/esm5/modules/viewkeeper/viewkeeper-host-options.js +1 -1
  28. package/esm5/modules/viewkeeper/viewkeeper-options.js +1 -1
  29. package/esm5/modules/viewkeeper/viewkeeper.directive.js +45 -25
  30. package/esm5/modules/viewkeeper/viewkeeper.js +31 -11
  31. package/esm5/modules/viewkeeper/viewkeeper.module.js +5 -1
  32. package/esm5/public_api.js +2 -1
  33. package/esm5/skyux-core.js +2 -1
  34. package/fesm2015/skyux-core.js +226 -32
  35. package/fesm2015/skyux-core.js.map +1 -1
  36. package/fesm5/skyux-core.js +246 -41
  37. package/fesm5/skyux-core.js.map +1 -1
  38. package/modules/dock/dock-dom-adapter.service.d.ts +14 -3
  39. package/modules/numeric/numeric.options.d.ts +5 -0
  40. package/modules/scrollable-host/scrollable-host.module.d.ts +2 -0
  41. package/modules/scrollable-host/scrollable-host.service.d.ts +13 -0
  42. package/modules/shared/number-format/number-format-utility.d.ts +1 -1
  43. package/modules/viewkeeper/viewkeeper-host-options.d.ts +1 -0
  44. package/modules/viewkeeper/viewkeeper-options.d.ts +5 -0
  45. package/modules/viewkeeper/viewkeeper.d.ts +4 -1
  46. package/modules/viewkeeper/viewkeeper.directive.d.ts +4 -1
  47. package/package.json +2 -2
  48. package/public_api.d.ts +1 -0
  49. package/skyux-core.d.ts +1 -0
  50. package/skyux-core.metadata.json +1 -1
@@ -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
- if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) === SkyDockLocation.BeforeElement) {
1176
- this.domAdapter.unbindDock(this.elementRef);
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:sticky;left:0;bottom:0;right:0}"]
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 + document.documentElement.scrollTop,
2532
- left: rect.left + document.documentElement.scrollLeft
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 e_3, _a;
3021
+ var _this = this;
2849
3022
  var viewkeeperEls = this.getViewkeeperEls();
2850
3023
  if (this.viewkeeperElsChanged(viewkeeperEls)) {
2851
- this.destroyViewkeepers();
2852
- var previousViewkeeperEl = void 0;
2853
- try {
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
- catch (e_3_1) { e_3 = { error: e_3_1 }; }
2866
- finally {
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
- if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
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
- finally { if (e_3) throw e_3.error; }
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