@skyux/core 4.7.0 → 4.9.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# 4.9.1 (2021-12-06)
+
+- Fixed the viewkeeper directive to ignore the viewport margin when attaching to a scrollable host. [#279](https://github.com/blackbaud/skyux-core/pull/279)
+
+# 4.9.0 (2021-11-02)
+
+- Added the `SkyScrollableHostService` to be able to get and watch for an element's scrollable host. [#269](https://github.com/blackbaud/skyux-core/pull/269)
+- Updated the viewkeeper directive to watch for scrollable hosts when positioning elements. [#269](https://github.com/blackbaud/skyux-core/pull/269)
+
+# 4.8.1 (2021-09-29)
+
+- Fixed the dock component to properly position elements when docked to the bottom of the screen and the `body` element does not fill the entire height of the viewport. [#258](https://github.com/blackbaud/skyux-core/pull/258)
+
+# 4.8.0 (2021-09-10)
+
+- Updated the `SkyNumericPipe` to format currency values using the ["accounting" currency sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters). [#251](https://github.com/blackbaud/skyux-core/pull/251) (Thanks [@Blackbaud-TomMaszk](https://github.com/Blackbaud-TomMaszk)!)
+
 # 4.7.0 (2021-09-08)
 
 - Added the ability to place an element at the bottom of another element or before another element when using the dock service and the dynamic component service. [#250](https://github.com/blackbaud/skyux-core/pull/250)

package/bundles/skyux-core.umd.js

@@ -1313,16 +1313,71 @@
      * @internal
      */
     var SkyDockDomAdapterService = /** @class */ (function () {
-        function SkyDockDomAdapterService(rendererFactory) {
+        function SkyDockDomAdapterService(mutationService, rendererFactory) {
+            this.mutationService = mutationService;
+            this.ngUnsubscribe = new rxjs.Subject();
             this.renderer = rendererFactory.createRenderer(undefined, undefined);
         }
+        SkyDockDomAdapterService.prototype.ngOnDestroy = function () {
+            if (this.observer) {
+                this.observer.disconnect();
+            }
+            this.ngUnsubscribe.next();
+            if (this.styleElement) {
+                this.destroyStyleElement();
+            }
+            this.currentDockHeight =
+                this.ngUnsubscribe =
+                    this.observer =
+                        this.styleElement = undefined;
+        };
+        SkyDockDomAdapterService.prototype.setSticky = function (elementRef) {
+            this.renderer.addClass(elementRef.nativeElement, 'sky-dock-sticky');
+        };
         SkyDockDomAdapterService.prototype.setZIndex = function (zIndex, elementRef) {
             this.renderer.setStyle(elementRef.nativeElement, 'z-index', zIndex);
         };
         SkyDockDomAdapterService.prototype.unbindDock = function (elementRef) {
             this.renderer.addClass(elementRef.nativeElement, 'sky-dock-unbound');
         };
+        SkyDockDomAdapterService.prototype.watchDomChanges = function (elementRef) {
+            var _this = this;
+            this.observer = this.mutationService.create(function () {
+                _this.adjustBodyStyles(elementRef);
+            });
+            this.observer.observe(elementRef.nativeElement, {
+                attributes: true,
+                childList: true,
+                characterData: true,
+                subtree: true
+            });
+            rxjs.fromEvent(window, 'resize')
+                .pipe(operators.debounceTime(250), operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function () { return _this.adjustBodyStyles(elementRef); });
+        };
+        SkyDockDomAdapterService.prototype.adjustBodyStyles = function (elementRef) {
+            var dockHeight = elementRef.nativeElement.getBoundingClientRect().height;
+            if (dockHeight === this.currentDockHeight) {
+                return;
+            }
+            // Create a style element to avoid overwriting any existing inline body styles.
+            var styleElement = this.renderer.createElement('style');
+            var textNode = this.renderer.createText("body { margin-bottom: " + dockHeight + "px; }");
+            // Apply a `data-` attribute to make unit testing easier.
+            this.renderer.setAttribute(styleElement, 'data-test-selector', 'sky-layout-dock-bottom-styles');
+            this.renderer.appendChild(styleElement, textNode);
+            this.renderer.appendChild(document.head, styleElement);
+            if (this.styleElement) {
+                this.destroyStyleElement();
+            }
+            this.currentDockHeight = dockHeight;
+            this.styleElement = styleElement;
+        };
+        SkyDockDomAdapterService.prototype.destroyStyleElement = function () {
+            this.renderer.removeChild(document.head, this.styleElement);
+        };
         SkyDockDomAdapterService.ctorParameters = function () { return [
+            { type: MutationObserverService },
             { type: core.RendererFactory2 }
         ]; };
         SkyDockDomAdapterService = __decorate([
@@ -1387,8 +1442,17 @@
         SkyDockComponent.prototype.setOptions = function (options) {
             var _a, _b;
             this.options = options;
-            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) === exports.SkyDockLocation.BeforeElement) {
-                this.domAdapter.unbindDock(this.elementRef);
+            switch ((_a = this.options) === null || _a === void 0 ? void 0 : _a.location) {
+                case exports.SkyDockLocation.BeforeElement:
+                    this.domAdapter.unbindDock(this.elementRef);
+                    break;
+                case exports.SkyDockLocation.ElementBottom:
+                    this.domAdapter.setSticky(this.elementRef);
+                    break;
+                case exports.SkyDockLocation.BodyBottom:
+                default:
+                    this.domAdapter.watchDomChanges(this.elementRef);
+                    break;
             }
             if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.zIndex) {
                 this.domAdapter.setZIndex(this.options.zIndex, this.elementRef);
@@ -1427,7 +1491,7 @@
                     SkyDockDomAdapterService
                 ],
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column;width:100%}:host:not(.sky-dock-unbound){position:sticky;left:0;bottom:0;right:0}"]
+                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}"]
             })
         ], SkyDockComponent);
         return SkyDockComponent;
@@ -1835,7 +1899,7 @@
         /* istanbul ignore next */
         function SkyNumberFormatUtility() {
         }
-        SkyNumberFormatUtility.formatNumber = function (locale, value, style, digits, currency, currencyAsSymbol) {
+        SkyNumberFormatUtility.formatNumber = function (locale, value, style, digits, currency, currencyAsSymbol, currencySign) {
             if (currency === void 0) { currency = null; }
             if (currencyAsSymbol === void 0) { currencyAsSymbol = false; }
             if (value == null) {
@@ -1878,7 +1942,8 @@
                 minimumFractionDigits: minFraction,
                 maximumFractionDigits: maxFraction,
                 currency: currency,
-                currencyAsSymbol: currencyAsSymbol
+                currencyAsSymbol: currencyAsSymbol,
+                currencySign: currencySign
             });
         };
         SkyNumberFormatUtility._NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
@@ -1967,7 +2032,7 @@
                     // and the appropriate string value for Angular 5+.
                     // See: https://angular.io/api/common/CurrencyPipe#parameters
                     var symbolDisplay = 'symbol';
-                    output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), i18n.SkyIntlNumberFormatStyle.Currency, digits, options.iso, symbolDisplay);
+                    output = SkyNumberFormatUtility.formatNumber(locale, parseFloat(output), i18n.SkyIntlNumberFormatStyle.Currency, digits, options.iso, symbolDisplay, options.currencySign);
                     break;
                 // The following is a catch-all to ensure that if
                 // anything but currency (or a future option) are entered,
@@ -2086,6 +2151,11 @@
              * @default "number"
              */
             this.format = 'number';
+            /**
+             * Specifies the format of the currency`.
+             * @default "standard"
+             */
+            this.currencySign = 'standard';
             /**
              * Specifies the ISO4217 currency code to use for currency formatting. If you do not specify a
              * currency code, the component uses the browser's culture to determine the currency unless your
@@ -2673,6 +2743,87 @@
         return SkyPercentPipeModule;
     }());
 
+    var SkyScrollableHostService = /** @class */ (function () {
+        function SkyScrollableHostService(mutationObserverSvc, windowRef) {
+            this.mutationObserverSvc = mutationObserverSvc;
+            this.windowRef = windowRef;
+        }
+        SkyScrollableHostService.prototype.getScrollabeHost = function (elementRef) {
+            return this.findScrollableHost(elementRef.nativeElement);
+        };
+        SkyScrollableHostService.prototype.watchScrollableHost = function (elementRef, completionObservable) {
+            var _this = this;
+            var scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+            var behaviorSubject = new rxjs.BehaviorSubject(scrollableHost);
+            var mutationObserver = this.mutationObserverSvc.create(function () {
+                var newScrollableHost = _this.findScrollableHost(elementRef.nativeElement);
+                if (newScrollableHost !== scrollableHost) {
+                    scrollableHost = newScrollableHost;
+                    _this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+                    behaviorSubject.next(scrollableHost);
+                }
+            });
+            this.observeForScrollableHostChanges(scrollableHost, mutationObserver);
+            completionObservable.pipe(operators.take(1)).subscribe(function () {
+                mutationObserver.disconnect();
+            });
+            return behaviorSubject;
+        };
+        SkyScrollableHostService.prototype.findScrollableHost = function (element) {
+            var regex = /(auto|scroll)/;
+            var windowObj = this.windowRef.nativeWindow;
+            var bodyObj = windowObj.document.body;
+            /* Sanity check */
+            if (!element) {
+                return windowObj;
+            }
+            var style = windowObj.getComputedStyle(element);
+            var parent = element;
+            do {
+                parent = parent.parentNode;
+                /* Sanity check for if this function is called for an element which has been removed from the DOM */
+                if (!(parent instanceof HTMLElement)) {
+                    return windowObj;
+                }
+                style = windowObj.getComputedStyle(parent);
+            } while (!regex.test(style.overflow) &&
+                !regex.test(style.overflowY) &&
+                parent !== bodyObj);
+            if (parent === bodyObj) {
+                return windowObj;
+            }
+            return parent;
+        };
+        SkyScrollableHostService.prototype.observeForScrollableHostChanges = function (element, mutationObserver) {
+            mutationObserver.disconnect();
+            if (element instanceof HTMLElement) {
+                mutationObserver.observe(element, {
+                    attributes: true,
+                    attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
+                    subtree: true
+                });
+            }
+            else {
+                mutationObserver.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ['class', 'style.overflow', 'style.overflow-y'],
+                    subtree: true
+                });
+            }
+        };
+        SkyScrollableHostService.ctorParameters = function () { return [
+            { type: MutationObserverService },
+            { type: SkyAppWindowRef }
+        ]; };
+        SkyScrollableHostService.ɵprov = core.ɵɵdefineInjectable({ factory: function SkyScrollableHostService_Factory() { return new SkyScrollableHostService(core.ɵɵinject(MutationObserverService), core.ɵɵinject(SkyAppWindowRef)); }, token: SkyScrollableHostService, providedIn: "root" });
+        SkyScrollableHostService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], SkyScrollableHostService);
+        return SkyScrollableHostService;
+    }());
+
     /**
      * Provides a method for setting a formatted title on the current window.
      */
@@ -2740,11 +2891,12 @@
         nextIdIndex = (nextIdIndex || 0) + 1;
         return 'viewkeeper-' + nextIdIndex;
     }
-    function getOffset(el) {
+    function getOffset(el, scrollableHost) {
         var rect = el.getBoundingClientRect();
+        var parent = scrollableHost ? scrollableHost : document.documentElement;
         return {
-            top: rect.top + document.documentElement.scrollTop,
-            left: rect.left + document.documentElement.scrollLeft
+            top: rect.top + parent.scrollTop,
+            left: rect.left + parent.scrollLeft
         };
     }
     function px(value) {
@@ -2781,6 +2933,7 @@
             this.id = nextId();
             this.el = options.el;
             this.boundaryEl = options.boundaryEl;
+            this.scrollableHost = options.scrollableHost;
             this.verticalOffset = options.verticalOffset || 0;
             this.verticalOffsetEl = options.verticalOffsetEl;
             this.viewportMarginTop = options.viewportMarginTop || 0;
@@ -2788,12 +2941,27 @@
             if (this.verticalOffsetEl) {
                 this.verticalOffsetEl.addEventListener(EVT_AFTER_VIEWKEEPER_SYNC, this.syncElPositionHandler);
             }
-            window.addEventListener('scroll', this.syncElPositionHandler);
+            window.addEventListener('scroll', this.syncElPositionHandler, true);
             window.addEventListener('resize', this.syncElPositionHandler);
             window.addEventListener('orientationchange', this.syncElPositionHandler);
             ensureStyleEl();
             this.syncElPosition();
         }
+        Object.defineProperty(SkyViewkeeper.prototype, "viewportMarginTop", {
+            get: function () {
+                if (this.scrollableHost) {
+                    return 0;
+                }
+                else {
+                    return this._viewportMarginTop;
+                }
+            },
+            set: function (margin) {
+                this._viewportMarginTop = margin;
+            },
+            enumerable: true,
+            configurable: true
+        });
         SkyViewkeeper.prototype.syncElPosition = function () {
             var verticalOffset = this.calculateVerticalOffset();
             // When the element isn't visible, its size can't be calculated, so don't attempt syncing position in this case.
@@ -2816,7 +2984,7 @@
         };
         SkyViewkeeper.prototype.destroy = function () {
             if (!this.isDestroyed) {
-                window.removeEventListener('scroll', this.syncElPositionHandler);
+                window.removeEventListener('scroll', this.syncElPositionHandler, true);
                 window.removeEventListener('resize', this.syncElPositionHandler);
                 window.removeEventListener('orientationchange', this.syncElPositionHandler);
                 this.unfixEl();
@@ -2854,16 +3022,19 @@
                 var verticalOffsetElTop = parseInt(verticalOffsetElTopStyle, 10) || 0;
                 offset += (this.verticalOffsetEl.offsetHeight + verticalOffsetElTop);
             }
+            else if (this.scrollableHost) {
+                offset += this.scrollableHost.getBoundingClientRect().top;
+            }
             return offset;
         };
         SkyViewkeeper.prototype.shouldFixEl = function (boundaryInfo, verticalOffset) {
             var anchorTop;
             var doFixEl;
             if (boundaryInfo.spacerEl) {
-                anchorTop = getOffset(boundaryInfo.spacerEl).top;
+                anchorTop = getOffset(boundaryInfo.spacerEl, this.scrollableHost).top;
             }
             else {
-                anchorTop = getOffset(this.el).top;
+                anchorTop = getOffset(this.el, this.scrollableHost).top;
             }
             doFixEl = boundaryInfo.scrollTop + verticalOffset + this.viewportMarginTop > anchorTop;
             return doFixEl;
@@ -2922,11 +3093,11 @@
             var spacerId = this.getSpacerId();
             var spacerEl = document.getElementById(spacerId);
             var boundaryEl = this.boundaryEl;
-            var boundaryOffset = getOffset(boundaryEl);
+            var boundaryOffset = getOffset(boundaryEl, this.scrollableHost);
             var boundaryTop = boundaryOffset.top;
             var boundaryBottom = boundaryTop + boundaryEl.getBoundingClientRect().height;
-            var scrollLeft = document.documentElement.scrollLeft;
-            var scrollTop = document.documentElement.scrollTop;
+            var scrollLeft = this.scrollableHost ? this.scrollableHost.scrollLeft : document.documentElement.scrollLeft;
+            var scrollTop = this.scrollableHost ? this.scrollableHost.scrollTop : document.documentElement.scrollTop;
             var elHeight = getHeightWithMargin(this.el);
             return {
                 boundaryBottom: boundaryBottom,
@@ -2975,11 +3146,13 @@
     }());
 
     var SkyViewkeeperDirective = /** @class */ (function () {
-        function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc) {
+        function SkyViewkeeperDirective(el, mutationObserverSvc, viewkeeperSvc, scrollableHostService) {
             this.el = el;
             this.mutationObserverSvc = mutationObserverSvc;
             this.viewkeeperSvc = viewkeeperSvc;
+            this.scrollableHostService = scrollableHostService;
             this.viewkeepers = [];
+            this.scrollableHostWatchUnsubscribe = undefined;
         }
         Object.defineProperty(SkyViewkeeperDirective.prototype, "skyViewkeeper", {
             get: function () {
@@ -3060,37 +3233,51 @@
             return false;
         };
         SkyViewkeeperDirective.prototype.detectElements = function () {
-            var e_3, _a;
+            var _this = this;
             var viewkeeperEls = this.getViewkeeperEls();
             if (this.viewkeeperElsChanged(viewkeeperEls)) {
-                this.destroyViewkeepers();
-                var previousViewkeeperEl = void 0;
-                try {
-                    for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
-                        var viewkeeperEl = viewkeeperEls_1_1.value;
-                        this.viewkeepers.push(this.viewkeeperSvc.create({
-                            boundaryEl: this.el.nativeElement,
-                            el: viewkeeperEl,
-                            setWidth: true,
-                            verticalOffsetEl: previousViewkeeperEl
-                        }));
-                        previousViewkeeperEl = viewkeeperEl;
-                    }
+                if (this.scrollableHostWatchUnsubscribe) {
+                    this.scrollableHostWatchUnsubscribe.next();
+                    this.scrollableHostWatchUnsubscribe = new rxjs.Subject();
                 }
-                catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                finally {
+                else {
+                    this.scrollableHostWatchUnsubscribe = new rxjs.Subject();
+                }
+                this.scrollableHostService.watchScrollableHost(this.el, this.scrollableHostWatchUnsubscribe)
+                    .pipe(operators.takeUntil(this.scrollableHostWatchUnsubscribe))
+                    .subscribe(function (scrollableHost) {
+                    var e_3, _a;
+                    _this.destroyViewkeepers();
+                    var previousViewkeeperEl;
                     try {
-                        if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
+                        for (var viewkeeperEls_1 = __values(viewkeeperEls), viewkeeperEls_1_1 = viewkeeperEls_1.next(); !viewkeeperEls_1_1.done; viewkeeperEls_1_1 = viewkeeperEls_1.next()) {
+                            var viewkeeperEl = viewkeeperEls_1_1.value;
+                            _this.viewkeepers.push(_this.viewkeeperSvc.create({
+                                boundaryEl: _this.el.nativeElement,
+                                scrollableHost: scrollableHost instanceof HTMLElement ? scrollableHost : undefined,
+                                el: viewkeeperEl,
+                                setWidth: true,
+                                verticalOffsetEl: previousViewkeeperEl
+                            }));
+                            previousViewkeeperEl = viewkeeperEl;
+                        }
                     }
-                    finally { if (e_3) throw e_3.error; }
-                }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (viewkeeperEls_1_1 && !viewkeeperEls_1_1.done && (_a = viewkeeperEls_1.return)) _a.call(viewkeeperEls_1);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                });
                 this.currentViewkeeperEls = viewkeeperEls;
             }
         };
         SkyViewkeeperDirective.ctorParameters = function () { return [
             { type: core.ElementRef },
             { type: MutationObserverService },
-            { type: SkyViewkeeperService }
+            { type: SkyViewkeeperService },
+            { type: SkyScrollableHostService, decorators: [{ type: core.Optional }] }
         ]; };
         __decorate([
             core.Input()
@@ -3098,11 +3285,26 @@
         SkyViewkeeperDirective = __decorate([
             core.Directive({
                 selector: '[skyViewkeeper]'
-            })
+            }),
+            __param(3, core.Optional())
         ], SkyViewkeeperDirective);
         return SkyViewkeeperDirective;
     }());
 
+    var SkyScrollableHostModule = /** @class */ (function () {
+        function SkyScrollableHostModule() {
+        }
+        SkyScrollableHostModule = __decorate([
+            core.NgModule({
+                providers: [
+                    MutationObserverService,
+                    SkyAppWindowRef
+                ]
+            })
+        ], SkyScrollableHostModule);
+        return SkyScrollableHostModule;
+    }());
+
     var SkyViewkeeperModule = /** @class */ (function () {
         function SkyViewkeeperModule() {
         }
@@ -3111,6 +3313,9 @@
                 declarations: [
                     SkyViewkeeperDirective
                 ],
+                imports: [
+                    SkyScrollableHostModule
+                ],
                 exports: [
                     SkyViewkeeperDirective
                 ],
@@ -3151,6 +3356,7 @@
     exports.SkyOverlayService = SkyOverlayService;
     exports.SkyPercentPipe = SkyPercentPipe;
     exports.SkyPercentPipeModule = SkyPercentPipeModule;
+    exports.SkyScrollableHostService = SkyScrollableHostService;
     exports.SkyUIConfigService = SkyUIConfigService;
     exports.SkyViewkeeperHostOptions = SkyViewkeeperHostOptions;
     exports.SkyViewkeeperModule = SkyViewkeeperModule;
@@ -3166,6 +3372,7 @@
     exports.ɵh = SkyOverlayContext;
     exports.ɵi = SkyOverlayAdapterService;
     exports.ɵj = SkyViewkeeperDirective;
+    exports.ɵk = SkyScrollableHostModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });