@progress/kendo-angular-utils
Version:
Kendo UI Angular utils component
119 lines (118 loc) • 5.01 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Inject, Injectable, NgZone, Optional } from '@angular/core';
import { BehaviorSubject, fromEvent, Subscription } from 'rxjs';
import { filter, map, tap } from 'rxjs/operators';
import { AdaptiveSettingsService } from './adaptive-settings.service';
import { ADAPTIVE_SETTINGS } from './adaptive-settings';
import { areObjectsEqual, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "./adaptive-settings.service";
const DEFAULT_ADAPTIVE_SETTINGS = {
small: 500,
medium: 768
};
/**
* The service responsible for handling changes in the adaptive settings. Should be included in the providers array when implementing the functionality in a standalone component.
*
* @example
*
* ```ts-no-run
* // Import the AdaptiveService
* import { AdaptiveService } from '@progress/kendo-angular-utils';
*
* // Define a standalone component
* @Component({
* selector: my-component,
* standalone: true,
* imports: [ ... ],
* providers: [AdaptiveService, { provide: ADAPTIVE_SETTINGS , useValue: { small: 300 } }],
* template: ...
* })
* export class AppComponent {}
* ```
*/
export class AdaptiveService {
_adaptiveSettings;
zone;
/**
* Notifies subscribers of the initial adaptive settings, and upon each call to `notify`.
* @hidden
*/
changes = new BehaviorSubject(this.adaptiveSettings || { small: 500, medium: 700 });
/**
* Notifies subscribers when the window size changes to any of small, medium, or large depending on the set adaptive size breakpoints.
* @hidden
*/
sizeChanges = new BehaviorSubject(this.size);
subs = new Subscription();
previousSize;
constructor(_adaptiveSettings, adaptiveSettingsService, zone) {
this._adaptiveSettings = _adaptiveSettings;
this.zone = zone;
if (adaptiveSettingsService) {
this.subs.add(adaptiveSettingsService.changes
.pipe(map(adaptiveSettings => isPresent(adaptiveSettings) ? adaptiveSettings : this._adaptiveSettings), tap(adaptiveSettings => this._adaptiveSettings = adaptiveSettings))
.subscribe(adaptiveSettings => this.changes.next(adaptiveSettings)));
}
if (isPresent(this.adaptiveSettings) && !areObjectsEqual(this.adaptiveSettings, DEFAULT_ADAPTIVE_SETTINGS)) {
this.changes.next(this.adaptiveSettings);
}
if (isDocumentAvailable()) {
this.zone.runOutsideAngular(() => {
this.subs.add(fromEvent(window, 'resize')
.pipe(tap(() => !this.previousSize && (this.previousSize = this.size)), filter(() => this.previousSize !== this.size))
.subscribe(() => {
this.previousSize = this.size;
this.zone.run(() => {
this.sizeChanges.next(this.size);
});
}));
});
}
}
/**
* @hidden
*/
get adaptiveSettings() {
return this._adaptiveSettings;
}
/**
* @hidden
*/
get size() {
if (!isDocumentAvailable()) {
return;
}
const settings = Object.assign(DEFAULT_ADAPTIVE_SETTINGS, this.adaptiveSettings);
if (window.innerWidth > settings.medium) {
return 'large';
}
else if (window.innerWidth > settings.small) {
return 'medium';
}
else {
return 'small';
}
}
ngOnDestroy() {
this.subs.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveService, deps: [{ token: ADAPTIVE_SETTINGS, optional: true }, { token: i1.AdaptiveSettingsService, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [ADAPTIVE_SETTINGS]
}] }, { type: i1.AdaptiveSettingsService, decorators: [{
type: Optional
}] }, { type: i0.NgZone }]; } });