@skyux/core 6.0.0-beta.0 → 6.0.0-beta.3

package/fesm2020/skyux-core.mjs

@@ -2,8 +2,8 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable, EventEmitter, Directive, Input, Output, Injector, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild, Pipe, ElementRef, Optional } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, fromEvent, BehaviorSubject, Observable, of } from 'rxjs';
-import { takeUntil, debounceTime } from 'rxjs/operators';
+import { Subject, fromEvent, BehaviorSubject, ReplaySubject, Observable, of } from 'rxjs';
+import { takeUntil, debounceTime, finalize } from 'rxjs/operators';
 import * as i1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
 import * as i3 from '@angular/router';
@@ -1464,7 +1464,7 @@ class SkyMediaQueryService {
         this.currentSubject.complete();
     }
     /**
-     * Suscribes to screen size changes.
+     * Subscribes to screen size changes.
      * @param listener Specifies a function that is called when breakpoints change.
      */
     subscribe(listener) {
@@ -2393,6 +2393,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * 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) => {
+            entries.forEach((entry) => this.callback(entry));
+        });
+    }
+    ngOnDestroy() {
+        this._resizeObserver.disconnect();
+    }
+    /**
+     * Create rxjs observable to get size changes for an element ref.
+     */
+    observe(element) {
+        return this.observeAndTrack(element).subjectObservable;
+    }
+    observeAndTrack(element) {
+        const checkTracking = this._tracking.findIndex((value) => {
+            return !value.subject.closed && value.element === element.nativeElement;
+        });
+        if (checkTracking === -1) {
+            this._resizeObserver.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) => {
+                return (value.subject !== subject &&
+                    !value.subject.closed &&
+                    value.element === element.nativeElement);
+            });
+            if (checkTracking === -1) {
+                this._resizeObserver.unobserve(element.nativeElement);
+            }
+        }));
+        const tracking = {
+            element: element.nativeElement,
+            subject,
+            subjectObservable,
+        };
+        this._tracking.push(tracking);
+        return tracking;
+    }
+    callback(entry) {
+        this._tracking
+            .filter((value) => !(value.subject.closed || value.subject.isStopped))
+            .forEach((value) => {
+            /* istanbul ignore else */
+            if (value.element === entry.target) {
+                this.zone.run(() => {
+                    value.subject.next(entry);
+                });
+            }
+        });
+    }
+}
+SkyResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyResizeObserverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyResizeObserverService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyResizeObserverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/**
+ * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
+ */
+class SkyResizeObserverMediaQueryService {
+    constructor(resizeObserverService) {
+        this.resizeObserverService = resizeObserverService;
+        this._breakpoints = [
+            {
+                check: (width) => width <= 767,
+                name: SkyMediaBreakpoints.xs,
+            },
+            {
+                check: (width) => width > 767 && width <= 991,
+                name: SkyMediaBreakpoints.sm,
+            },
+            {
+                check: (width) => width > 991 && width <= 1199,
+                name: SkyMediaBreakpoints.md,
+            },
+            {
+                check: (width) => width > 1199,
+                name: SkyMediaBreakpoints.lg,
+            },
+        ];
+        this._currentBreakpointObservable = new ReplaySubject(1);
+        this._stopListening = new Subject();
+        this._stopListening.subscribe(() => {
+            this._target = undefined;
+            this.updateBreakpoint(undefined);
+        });
+    }
+    /**
+     * Returns the current breakpoint.
+     */
+    get current() {
+        return this._currentBreakpoint;
+    }
+    ngOnDestroy() {
+        this._stopListening.next();
+        this._currentBreakpoint = undefined;
+        this._stopListening.complete();
+        this._currentBreakpointObservable.complete();
+    }
+    /**
+     * @internal
+     */
+    destroy() {
+        this.ngOnDestroy();
+    }
+    /**
+     * Sets the container element to watch. The `SkyResizeObserverMediaQueryService` will only observe one element at a
+     * time. Any previous subscriptions will be unsubscribed when a new element is observed.
+     */
+    observe(element) {
+        if (this._target) {
+            if (this._target === element) {
+                return this;
+            }
+            this._stopListening.next();
+        }
+        this._target = element;
+        const width = element.nativeElement.offsetWidth;
+        if (width) {
+            const breakpoint = this.checkBreakpoint(width);
+            this.updateBreakpoint(breakpoint);
+        }
+        this._resizeSubscription = this.resizeObserverService
+            .observe(element)
+            .pipe(takeUntil(this._stopListening))
+            .subscribe((value) => {
+            const breakpoint = this.checkBreakpoint(value.contentRect.width);
+            /* istanbul ignore else */
+            if (breakpoint !== this._currentBreakpoint) {
+                this.updateBreakpoint(breakpoint);
+            }
+        });
+        return this;
+    }
+    /**
+     * Stop watching the container element.
+     */
+    unobserve() {
+        this._stopListening.next();
+    }
+    /**
+     * Subscribes to element size changes that cross breakpoints.
+     */
+    subscribe(listener) {
+        return this._currentBreakpointObservable
+            .pipe(takeUntil(this._stopListening))
+            .subscribe(listener);
+    }
+    updateBreakpoint(breakpoint) {
+        this._currentBreakpoint = breakpoint;
+        this._currentBreakpointObservable.next(breakpoint);
+    }
+    checkBreakpoint(width) {
+        return this._breakpoints.find((breakpoint) => breakpoint.check(width))
+            ?.name;
+    }
+}
+SkyResizeObserverMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, deps: [{ token: SkyResizeObserverService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyResizeObserverMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyResizeObserverMediaQueryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'any',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyResizeObserverService }]; } });
+
 function notifySubscribers(subscribers, item) {
     for (const subscriber of subscribers) {
         subscriber.next(item);
@@ -3030,5 +3209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3 };
+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, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyScrollableHostService, SkyUIConfigService, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, getWindow, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3 };
 //# sourceMappingURL=skyux-core.mjs.map