@skyux/core 6.0.0 → 6.1.0

package/fesm2015/skyux-core.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, Pipe, ElementRef } from '@angular/core';
+import { __classPrivateFieldSet, __classPrivateFieldGet, __awaiter } from 'tslib';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
 import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
-import { __awaiter } from 'tslib';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i3 from '@angular/router';
@@ -45,6 +45,7 @@ var SkyMediaBreakpoints;
     SkyMediaBreakpoints[SkyMediaBreakpoints["lg"] = 4] = "lg";
 })(SkyMediaBreakpoints || (SkyMediaBreakpoints = {}));
 
+var _SkyCoreAdapterService_renderer;
 const SKY_TABBABLE_SELECTOR = [
     'a[href]',
     'area[href]',
@@ -61,7 +62,8 @@ const SKY_TABBABLE_SELECTOR = [
 class SkyCoreAdapterService {
     constructor(rendererFactory) {
         this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        _SkyCoreAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyCoreAdapterService_renderer, this.rendererFactory.createRenderer(undefined, null), "f");
     }
     /**
      * Set the responsive container CSS class for a given element.
@@ -72,10 +74,10 @@ class SkyCoreAdapterService {
      */
     setResponsiveContainerClass(elementRef, breakpoint) {
         const nativeEl = elementRef.nativeElement;
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+        __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
+        __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
+        __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
+        __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-lg');
         let newClass;
         switch (breakpoint) {
             case SkyMediaBreakpoints.xs: {
@@ -95,7 +97,7 @@ class SkyCoreAdapterService {
                 break;
             }
         }
-        this.renderer.addClass(nativeEl, newClass);
+        __classPrivateFieldGet(this, _SkyCoreAdapterService_renderer, "f").addClass(nativeEl, newClass);
     }
     /**
      * This method temporarily enables/disables pointer events.
@@ -258,6 +260,7 @@ class SkyCoreAdapterService {
         return hasBounds;
     }
 }
+_SkyCoreAdapterService_renderer = new WeakMap();
 SkyCoreAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCoreAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyCoreAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCoreAdapterService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCoreAdapterService, decorators: [{
@@ -716,18 +719,21 @@ class SkyAffixer {
     }
 }
 
+var _SkyAffixService_renderer;
 class SkyAffixService {
     constructor(rendererFactory) {
-        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+        _SkyAffixService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyAffixService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     /**
      * Creates an instance of [[SkyAffixer]].
      * @param affixed The element to be affixed.
      */
     createAffixer(affixed) {
-        return new SkyAffixer(affixed.nativeElement, this.renderer);
+        return new SkyAffixer(affixed.nativeElement, __classPrivateFieldGet(this, _SkyAffixService_renderer, "f"));
     }
 }
+_SkyAffixService_renderer = new WeakMap();
 SkyAffixService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAffixService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyAffixService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAffixService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyAffixService, decorators: [{
@@ -1816,7 +1822,7 @@ class SkyNumericService {
         return this._locale || 'en-US';
     }
     /**
-     * Shortens with or without symbol (K/M/B/T) depending on value of number.
+     * Formats a number based on the provided options.
      * @param value The number to format.
      * @param options Format options.
      */
@@ -1982,10 +1988,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * M for millions, B for billions, and T for trillions. The pipe also formats for currency.
  * Be sure you have a space after the two curly brackets opening the pipe and
  * a space before the two curly brackets closing the pipe or it will not work.
- * Usage:
- * ```
- * {{ value | skyNumeric(config) }}
- * ```
  */
 class SkyNumericPipe {
     constructor(localeProvider, numericService, changeDetector) {
@@ -2006,6 +2008,9 @@ class SkyNumericPipe {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
+    /**
+     * Formats a number based on the provided options.
+     */
     transform(value, config) {
         const newCacheKey = (config ? JSON.stringify(config, Object.keys(config).sort()) : '') +
             `${value}_${(config === null || config === void 0 ? void 0 : config.locale) || this.providerLocale}`;
@@ -2488,19 +2493,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+var _SkyResizeObserverService_resizeObserver, _SkyResizeObserverService_tracking;
 /**
  * Service to create rxjs observables for changes to the content box dimensions of elements.
  */
 class SkyResizeObserverService {
     constructor(zone) {
         this.zone = zone;
-        this._tracking = [];
-        this._resizeObserver = new ResizeObserver((entries) => {
+        _SkyResizeObserverService_resizeObserver.set(this, void 0);
+        _SkyResizeObserverService_tracking.set(this, []);
+        __classPrivateFieldSet(this, _SkyResizeObserverService_resizeObserver, new ResizeObserver((entries) => {
             entries.forEach((entry) => this.callback(entry));
-        });
+        }), "f");
     }
     ngOnDestroy() {
-        this._resizeObserver.disconnect();
+        __classPrivateFieldGet(this, _SkyResizeObserverService_resizeObserver, "f").disconnect();
     }
     /**
      * Create rxjs observable to get size changes for an element ref.
@@ -2509,22 +2516,22 @@ class SkyResizeObserverService {
         return this.observeAndTrack(element).subjectObservable;
     }
     observeAndTrack(element) {
-        const checkTracking = this._tracking.findIndex((value) => {
+        const checkTracking = __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f").findIndex((value) => {
             return !value.subject.closed && value.element === element.nativeElement;
         });
         if (checkTracking === -1) {
-            this._resizeObserver.observe(element.nativeElement);
+            __classPrivateFieldGet(this, _SkyResizeObserverService_resizeObserver, "f").observe(element.nativeElement);
         }
         const subject = new Subject();
         const subjectObservable = subject.pipe(finalize(() => {
             // Are there any other tracking entries still watching this element?
-            const checkTracking = this._tracking.findIndex((value) => {
+            const checkTracking = __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f").findIndex((value) => {
                 return (value.subject !== subject &&
                     !value.subject.closed &&
                     value.element === element.nativeElement);
             });
             if (checkTracking === -1) {
-                this._resizeObserver.unobserve(element.nativeElement);
+                __classPrivateFieldGet(this, _SkyResizeObserverService_resizeObserver, "f").unobserve(element.nativeElement);
             }
         }));
         const tracking = {
@@ -2532,15 +2539,17 @@ class SkyResizeObserverService {
             subject,
             subjectObservable,
         };
-        this._tracking.push(tracking);
+        __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f").push(tracking);
         return tracking;
     }
     callback(entry) {
-        this._tracking
+        __classPrivateFieldGet(this, _SkyResizeObserverService_tracking, "f")
             .filter((value) => !(value.subject.closed || value.subject.isStopped))
             .forEach((value) => {
             /* istanbul ignore else */
             if (value.element === entry.target) {
+                // Execute the callback within NgZone because Angular does not "monkey patch"
+                // ResizeObserver like it does for other features in the DOM.
                 this.zone.run(() => {
                     value.subject.next(entry);
                 });
@@ -2548,6 +2557,7 @@ class SkyResizeObserverService {
         });
     }
 }
+_SkyResizeObserverService_resizeObserver = new WeakMap(), _SkyResizeObserverService_tracking = new WeakMap();
 SkyResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyResizeObserverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyResizeObserverService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyResizeObserverService, decorators: [{
@@ -2557,15 +2567,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+var _SkyResizeObserverMediaQueryService_breakpoints, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, _SkyResizeObserverMediaQueryService_stopListening, _SkyResizeObserverMediaQueryService_target;
 /**
  * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
  */
 class SkyResizeObserverMediaQueryService {
     constructor(resizeObserverService) {
         this.resizeObserverService = resizeObserverService;
-        this._breakpoints = [
+        _SkyResizeObserverMediaQueryService_breakpoints.set(this, [
             {
-                check: (width) => width <= 767,
+                check: (width) => width > 0 && width <= 767,
                 name: SkyMediaBreakpoints.xs,
             },
             {
@@ -2580,11 +2591,12 @@ class SkyResizeObserverMediaQueryService {
                 check: (width) => width > 1199,
                 name: SkyMediaBreakpoints.lg,
             },
-        ];
-        this._currentBreakpointObservable = new ReplaySubject(1);
-        this._stopListening = new Subject();
-        this._stopListening.subscribe(() => {
-            this._target = undefined;
+        ]);
+        _SkyResizeObserverMediaQueryService_currentBreakpointObservable.set(this, new ReplaySubject(1));
+        _SkyResizeObserverMediaQueryService_stopListening.set(this, new Subject());
+        _SkyResizeObserverMediaQueryService_target.set(this, void 0);
+        __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").subscribe(() => {
+            __classPrivateFieldSet(this, _SkyResizeObserverMediaQueryService_target, undefined, "f");
             this.updateBreakpoint(undefined);
         });
     }
@@ -2595,10 +2607,10 @@ class SkyResizeObserverMediaQueryService {
         return this._currentBreakpoint;
     }
     ngOnDestroy() {
-        this._stopListening.next();
+        __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").next();
         this._currentBreakpoint = undefined;
-        this._stopListening.complete();
-        this._currentBreakpointObservable.complete();
+        __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").complete();
+        __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, "f").complete();
     }
     /**
      * @internal
@@ -2611,25 +2623,21 @@ class SkyResizeObserverMediaQueryService {
      * time. Any previous subscriptions will be unsubscribed when a new element is observed.
      */
     observe(element) {
-        if (this._target) {
-            if (this._target === element) {
+        if (__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_target, "f")) {
+            if (__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_target, "f") === element) {
                 return this;
             }
-            this._stopListening.next();
-        }
-        this._target = element;
-        const width = element.nativeElement.offsetWidth;
-        if (width) {
-            const breakpoint = this.checkBreakpoint(width);
-            this.updateBreakpoint(breakpoint);
+            __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").next();
         }
+        __classPrivateFieldSet(this, _SkyResizeObserverMediaQueryService_target, element, "f");
+        this.checkWidth(element);
         this.resizeObserverService
             .observe(element)
-            .pipe(takeUntil(this._stopListening))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f")))
             .subscribe((value) => {
             const breakpoint = this.checkBreakpoint(value.contentRect.width);
             /* istanbul ignore else */
-            if (breakpoint !== this._currentBreakpoint) {
+            if (breakpoint !== this.current) {
                 this.updateBreakpoint(breakpoint);
             }
         });
@@ -2639,25 +2647,39 @@ class SkyResizeObserverMediaQueryService {
      * Stop watching the container element.
      */
     unobserve() {
-        this._stopListening.next();
+        __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f").next();
     }
     /**
      * Subscribes to element size changes that cross breakpoints.
      */
     subscribe(listener) {
-        return this._currentBreakpointObservable
-            .pipe(takeUntil(this._stopListening))
-            .subscribe(listener);
+        return __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, "f")
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_stopListening, "f")))
+            .subscribe((value) => {
+            listener(value);
+        });
     }
     updateBreakpoint(breakpoint) {
         this._currentBreakpoint = breakpoint;
-        this._currentBreakpointObservable.next(breakpoint);
+        __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_currentBreakpointObservable, "f").next(breakpoint);
     }
     checkBreakpoint(width) {
-        var _a;
-        return (_a = this._breakpoints.find((breakpoint) => breakpoint.check(width))) === null || _a === void 0 ? void 0 : _a.name;
+        const breakpoint = __classPrivateFieldGet(this, _SkyResizeObserverMediaQueryService_breakpoints, "f").find((breakpoint) => breakpoint.check(width));
+        /* istanbul ignore else */
+        if (breakpoint) {
+            return breakpoint.name;
+        }
+    }
+    checkWidth(element) {
+        const width = element.nativeElement.offsetWidth || 0;
+        const breakpoint = this.checkBreakpoint(width);
+        /* istanbul ignore else */
+        if (breakpoint !== this._currentBreakpoint) {
+            this.updateBreakpoint(breakpoint);
+        }
     }
 }
+_SkyResizeObserverMediaQueryService_breakpoints = new WeakMap(), _SkyResizeObserverMediaQueryService_currentBreakpointObservable = new WeakMap(), _SkyResizeObserverMediaQueryService_stopListening = new WeakMap(), _SkyResizeObserverMediaQueryService_target = new WeakMap();
 SkyResizeObserverMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyResizeObserverMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyResizeObserverMediaQueryService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
@@ -2688,8 +2710,7 @@ class SkyScrollableHostService {
     /**
      * Returns an observable which emits the given element's current scrollable host
      * @param elementRef The element whose scrollable host is being requested
-     * @param completionObservable An observable which alerts the internal observers that they should complete
-     * @returns An observable which emits the current scrollable host
+     * @returns An observable which emits the current scrollable host element.
      * @internal
      */
     watchScrollableHost(elementRef) {
@@ -2699,11 +2720,13 @@ class SkyScrollableHostService {
         return new Observable((subscriber) => {
             subscribers.push(subscriber);
             let scrollableHost = this.findScrollableHost(elementRef.nativeElement);
+            // Setup mutation observers only once, for all subscribers.
             if (subscribers.length === 1) {
                 parentMutationObserver = this.mutationObserverSvc.create(() => {
                     const newScrollableHost = this.findScrollableHost(elementRef.nativeElement);
+                    // Reset observer if scrollable host changes.
                     if (newScrollableHost !== scrollableHost &&
-                        elementRef.nativeElement.offsetParent) {
+                        this.isElementVisible(elementRef)) {
                         scrollableHost = newScrollableHost;
                         this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
                         notifySubscribers(subscribers, scrollableHost);
@@ -2711,7 +2734,9 @@ class SkyScrollableHostService {
                 });
                 this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
                 documentHiddenElementMutationObserver = this.mutationObserverSvc.create(() => {
-                    if (scrollableHost && !elementRef.nativeElement.offsetParent) {
+                    if (scrollableHost && !this.isElementVisible(elementRef)) {
+                        // If the scrollable host is not visible, set it to undefined and unsubscribe from its mutation changes.
+                        // Then, observe the document element so that a new scrollable host can be found.
                         scrollableHost = undefined;
                         this.observeForScrollableHostChanges(scrollableHost, parentMutationObserver);
                         notifySubscribers(subscribers, scrollableHost);
@@ -2719,10 +2744,11 @@ class SkyScrollableHostService {
                 });
                 this.observeDocumentHiddenElementChanges(documentHiddenElementMutationObserver);
             }
+            // Emit the scrollable host to the subscriber.
             subscriber.next(scrollableHost);
+            // Teardown callback for the subscription.
             subscriber.add(() => {
                 const subIndex = subscribers.indexOf(subscriber);
-                /* sanity check */
                 /* istanbul ignore else */
                 if (subIndex >= 0) {
                     subscribers.splice(subIndex, 1);
@@ -2737,7 +2763,6 @@ class SkyScrollableHostService {
     /**
      * Returns an observable which emits whenever the element's scrollable host emits a scroll event. The observable will always emit the scroll events from the elements current scrollable host and will update based on any scrollable host changes. The observable will also emit once whenever the scrollable host changes.
      * @param elementRef The element whose scrollable host scroll events are being requested
-     * @param completionObservable An observable which alerts the internal observers that they should complete
      * @returns An observable which emits when the elements scrollable host is scrolled or is changed
      */
     watchScrollableHostScrollEvents(elementRef) {
@@ -2748,6 +2773,7 @@ class SkyScrollableHostService {
         let scrollEventSubscription;
         return new Observable((subscriber) => {
             subscribers.push(subscriber);
+            // Setup mutation observers only once, for all subscribers.
             if (subscribers.length === 1) {
                 scrollableHostSubscription = this.watchScrollableHost(elementRef).subscribe((newScrollableHost) => {
                     newScrollableHostObservable.next();
@@ -2757,6 +2783,8 @@ class SkyScrollableHostService {
                     }
                     scrollableHost = newScrollableHost;
                     newScrollableHostObservable = new Subject();
+                    // Only subscribe to scroll events if the host element is defined.
+                    /* istanbul ignore else */
                     if (newScrollableHost) {
                         scrollEventSubscription = fromEvent(newScrollableHost, 'scroll')
                             .pipe(takeUntil(newScrollableHostObservable))
@@ -2766,9 +2794,9 @@ class SkyScrollableHostService {
                     }
                 });
             }
+            // Teardown callback for the subscription.
             subscriber.add(() => {
                 const subIndex = subscribers.indexOf(subscriber);
-                /* sanity check */
                 /* istanbul ignore else */
                 if (subIndex >= 0) {
                     subscribers.splice(subIndex, 1);
@@ -2785,7 +2813,6 @@ class SkyScrollableHostService {
         const regex = /(auto|scroll)/;
         const windowObj = this.windowRef.nativeWindow;
         const bodyObj = windowObj.document.body;
-        /* Sanity check */
         if (!element) {
             return windowObj;
         }
@@ -2793,7 +2820,7 @@ class SkyScrollableHostService {
         let parent = element;
         do {
             parent = parent.parentNode;
-            /* Sanity check for if this function is called for an element which has been removed from the DOM */
+            // Return `window` if the parent element has been removed from the DOM.
             if (!(parent instanceof HTMLElement)) {
                 return windowObj;
             }
@@ -2816,22 +2843,20 @@ class SkyScrollableHostService {
     }
     observeForScrollableHostChanges(element, mutationObserver) {
         mutationObserver.disconnect();
-        if (element instanceof HTMLElement) {
-            mutationObserver.observe(element, {
-                attributes: true,
-                attributeFilter: ['class', 'style'],
-                childList: true,
-                subtree: true,
-            });
-        }
-        else {
-            mutationObserver.observe(document.documentElement, {
-                attributes: true,
-                attributeFilter: ['class', 'style'],
-                childList: true,
-                subtree: true,
-            });
-        }
+        const target = element instanceof HTMLElement ? element : document.documentElement;
+        mutationObserver.observe(target, {
+            attributes: true,
+            attributeFilter: ['class', 'style'],
+            childList: true,
+            subtree: true,
+        });
+    }
+    /**
+     * Determines if an element is "visible" in the DOM.
+     * @see https://stackoverflow.com/a/11639664/6178885
+     */
+    isElementVisible(elementRef) {
+        return elementRef.nativeElement.offsetParent;
     }
 }
 SkyScrollableHostService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyScrollableHostService, deps: [{ token: MutationObserverService }, { token: SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });