@skyux/core 5.7.2 → 5.8.0

package/bundles/skyux-core.umd.js

@@ -1587,7 +1587,7 @@
                 this.currentSubject.complete();
             };
             /**
-             * Suscribes to screen size changes.
+             * Subscribes to screen size changes.
              * @param listener Specifies a function that is called when breakpoints change.
              */
             SkyMediaQueryService.prototype.subscribe = function (listener) {
@@ -2904,6 +2904,201 @@
                         }]
                 }] });
 
+        /**
+         * Service to create rxjs observables for changes to the content box dimensions of elements.
+         */
+        var SkyResizeObserverService = /** @class */ (function () {
+            function SkyResizeObserverService(zone) {
+                var _this = this;
+                this.zone = zone;
+                this._tracking = [];
+                this._resizeObserver = new ResizeObserver(function (entries) {
+                    entries.forEach(function (entry) { return _this.callback(entry); });
+                });
+            }
+            SkyResizeObserverService.prototype.ngOnDestroy = function () {
+                this._resizeObserver.disconnect();
+            };
+            /**
+             * Create rxjs observable to get size changes for an element ref.
+             */
+            SkyResizeObserverService.prototype.observe = function (element) {
+                return this.observeAndTrack(element).subjectObservable;
+            };
+            SkyResizeObserverService.prototype.observeAndTrack = function (element) {
+                var _this = this;
+                var checkTracking = this._tracking.findIndex(function (value) {
+                    return !value.subject.closed && value.element === element.nativeElement;
+                });
+                if (checkTracking === -1) {
+                    this._resizeObserver.observe(element.nativeElement);
+                }
+                var subject = new rxjs.Subject();
+                var subjectObservable = subject.pipe(operators.finalize(function () {
+                    // Are there any other tracking entries still watching this element?
+                    var checkTracking = _this._tracking.findIndex(function (value) {
+                        return (value.subject !== subject &&
+                            !value.subject.closed &&
+                            value.element === element.nativeElement);
+                    });
+                    if (checkTracking === -1) {
+                        _this._resizeObserver.unobserve(element.nativeElement);
+                    }
+                }));
+                var tracking = {
+                    element: element.nativeElement,
+                    subject: subject,
+                    subjectObservable: subjectObservable,
+                };
+                this._tracking.push(tracking);
+                return tracking;
+            };
+            SkyResizeObserverService.prototype.callback = function (entry) {
+                var _this = this;
+                this._tracking
+                    .filter(function (value) { return !(value.subject.closed || value.subject.isStopped); })
+                    .forEach(function (value) {
+                    /* istanbul ignore else */
+                    if (value.element === entry.target) {
+                        _this.zone.run(function () {
+                            value.subject.next(entry);
+                        });
+                    }
+                });
+            };
+            return SkyResizeObserverService;
+        }());
+        SkyResizeObserverService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverService, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyResizeObserverService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverService, providedIn: 'any' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverService, decorators: [{
+                    type: i0.Injectable,
+                    args: [{
+                            providedIn: 'any',
+                        }]
+                }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; } });
+
+        /**
+         * Acts like `SkyMediaQueryService` for a container element, emitting the same responsive breakpoints.
+         */
+        var SkyResizeObserverMediaQueryService = /** @class */ (function (_super) {
+            __extends(SkyResizeObserverMediaQueryService, _super);
+            function SkyResizeObserverMediaQueryService(zone, resizeObserverService) {
+                var _this = _super.call(this, zone) || this;
+                _this.resizeObserverService = resizeObserverService;
+                _this._breakpoints = [
+                    {
+                        check: function (width) { return width <= 767; },
+                        name: exports.SkyMediaBreakpoints.xs,
+                    },
+                    {
+                        check: function (width) { return width > 767 && width <= 991; },
+                        name: exports.SkyMediaBreakpoints.sm,
+                    },
+                    {
+                        check: function (width) { return width > 991 && width <= 1199; },
+                        name: exports.SkyMediaBreakpoints.md,
+                    },
+                    {
+                        check: function (width) { return width > 1199; },
+                        name: exports.SkyMediaBreakpoints.lg,
+                    },
+                ];
+                _this._currentBreakpointObservable = new rxjs.ReplaySubject(1);
+                _this._stopListening = new rxjs.Subject();
+                _this._stopListening.subscribe(function () {
+                    _this._target = undefined;
+                    _this.updateBreakpoint(undefined);
+                });
+                return _this;
+            }
+            Object.defineProperty(SkyResizeObserverMediaQueryService.prototype, "current", {
+                /**
+                 * Returns the current breakpoint.
+                 */
+                get: function () {
+                    return this._currentBreakpoint;
+                },
+                enumerable: false,
+                configurable: true
+            });
+            SkyResizeObserverMediaQueryService.prototype.ngOnDestroy = function () {
+                this._stopListening.next();
+                this._currentBreakpoint = undefined;
+                this._stopListening.complete();
+                this._currentBreakpointObservable.complete();
+            };
+            /**
+             * @internal
+             */
+            SkyResizeObserverMediaQueryService.prototype.destroy = function () {
+                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.
+             */
+            SkyResizeObserverMediaQueryService.prototype.observe = function (element) {
+                var _this = this;
+                if (this._target) {
+                    if (this._target === element) {
+                        return this;
+                    }
+                    this._stopListening.next();
+                }
+                this._target = element;
+                var width = element.nativeElement.offsetWidth;
+                if (width) {
+                    var breakpoint = this.checkBreakpoint(width);
+                    this.updateBreakpoint(breakpoint);
+                }
+                this._resizeSubscription = this.resizeObserverService
+                    .observe(element)
+                    .pipe(operators.takeUntil(this._stopListening))
+                    .subscribe(function (value) {
+                    var breakpoint = _this.checkBreakpoint(value.contentRect.width);
+                    /* istanbul ignore else */
+                    if (breakpoint !== _this._currentBreakpoint) {
+                        _this.updateBreakpoint(breakpoint);
+                    }
+                });
+                return this;
+            };
+            /**
+             * Stop watching the container element.
+             */
+            SkyResizeObserverMediaQueryService.prototype.unobserve = function () {
+                this._stopListening.next();
+            };
+            /**
+             * Subscribes to element size changes that cross breakpoints.
+             */
+            SkyResizeObserverMediaQueryService.prototype.subscribe = function (listener) {
+                return this._currentBreakpointObservable
+                    .pipe(operators.takeUntil(this._stopListening))
+                    .subscribe(listener);
+            };
+            SkyResizeObserverMediaQueryService.prototype.addListeners = function () {
+                // do not add listeners in the constructor
+            };
+            SkyResizeObserverMediaQueryService.prototype.updateBreakpoint = function (breakpoint) {
+                this._currentBreakpoint = breakpoint;
+                this._currentBreakpointObservable.next(breakpoint);
+            };
+            SkyResizeObserverMediaQueryService.prototype.checkBreakpoint = function (width) {
+                var _a;
+                return (_a = this._breakpoints.find(function (breakpoint) { return breakpoint.check(width); })) === null || _a === void 0 ? void 0 : _a.name;
+            };
+            return SkyResizeObserverMediaQueryService;
+        }(SkyMediaQueryService));
+        SkyResizeObserverMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverMediaQueryService, deps: [{ token: i0__namespace.NgZone }, { token: SkyResizeObserverService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+        SkyResizeObserverMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverMediaQueryService, providedIn: 'any' });
+        i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyResizeObserverMediaQueryService, decorators: [{
+                    type: i0.Injectable,
+                    args: [{
+                            providedIn: 'any',
+                        }]
+                }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: SkyResizeObserverService }]; } });
+
         function notifySubscribers(subscribers, item) {
             var e_1, _a;
             try {
@@ -3632,6 +3827,8 @@
         exports.SkyOverlayService = SkyOverlayService;
         exports.SkyPercentPipe = SkyPercentPipe;
         exports.SkyPercentPipeModule = SkyPercentPipeModule;
+        exports.SkyResizeObserverMediaQueryService = SkyResizeObserverMediaQueryService;
+        exports.SkyResizeObserverService = SkyResizeObserverService;
         exports.SkyScrollableHostService = SkyScrollableHostService;
         exports.SkyUIConfigService = SkyUIConfigService;
         exports.SkyViewkeeperHostOptions = SkyViewkeeperHostOptions;