@js-smart/ng-kit 20.6.2-beta.1 → 20.6.2

package/src/lib/components/ngx-spinner/ngx-spinner.component.spec.ts

@@ -1,186 +0,0 @@
-import { ChangeDetectorRef } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { BehaviorSubject } from 'rxjs';
-import { NgxSpinnerComponent } from './ngx-spinner.component';
-import { DEFAULTS, NgxSpinner, PRIMARY_SPINNER } from './ngx-spinner.enum';
-import { NgxSpinnerService } from './ngx-spinner.service';
-
-describe('NgxSpinnerComponent', () => {
-	let component: NgxSpinnerComponent;
-	let fixture: ComponentFixture<NgxSpinnerComponent>;
-	let spinnerService: jasmine.SpyObj<NgxSpinnerService>;
-	let changeDetectorRef: jasmine.SpyObj<ChangeDetectorRef>;
-
-	const mockSpinnerSubject = new BehaviorSubject<NgxSpinner>(new NgxSpinner());
-
-	// Helper function to create a keyboard event with spies
-	const createKeyboardEvent = (type = 'keydown'): KeyboardEvent => {
-		const event = new KeyboardEvent(type);
-		spyOn(event, 'preventDefault');
-		Object.defineProperty(event, 'returnValue', {
-			set: jasmine.createSpy('set returnValue'),
-			get: jasmine.createSpy('get returnValue').and.returnValue(false),
-		});
-		return event;
-	};
-
-	beforeEach(async () => {
-		const spySpinnerService = jasmine.createSpyObj('NgxSpinnerService', ['getSpinner', 'show', 'hide']);
-		const spyChangeDetectorRef = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
-
-		spySpinnerService.getSpinner.and.returnValue(mockSpinnerSubject.asObservable());
-
-		await TestBed.configureTestingModule({
-			imports: [NgxSpinnerComponent],
-			providers: [
-				{ provide: NgxSpinnerService, useValue: spySpinnerService },
-				{ provide: ChangeDetectorRef, useValue: spyChangeDetectorRef },
-				provideAnimations(),
-			],
-		}).compileComponents();
-
-		spinnerService = TestBed.inject(NgxSpinnerService) as jasmine.SpyObj<NgxSpinnerService>;
-		changeDetectorRef = TestBed.inject(ChangeDetectorRef) as jasmine.SpyObj<ChangeDetectorRef>;
-	});
-
-	beforeEach(() => {
-		fixture = TestBed.createComponent(NgxSpinnerComponent);
-		component = fixture.componentInstance;
-		fixture.detectChanges();
-	});
-
-	it('should create', () => {
-		expect(component).toBeTruthy();
-	});
-
-	it('should initialize with default values', () => {
-		expect(component.bdColor()).toBe(DEFAULTS.BD_COLOR);
-		expect(component.size()).toBe('large');
-		expect(component.color()).toBe(DEFAULTS.SPINNER_COLOR);
-		expect(component.type()).toBe(DEFAULTS.SPINNER_TYPE);
-		expect(component.fullScreen()).toBe(true);
-		expect(component.name()).toBe(PRIMARY_SPINNER);
-		expect(component.zIndex()).toBe(DEFAULTS.Z_INDEX);
-		expect(component.template()).toBeUndefined();
-		expect(component.showSpinner()).toBe(false);
-		expect(component.disableAnimation()).toBe(false);
-	});
-
-	it('should update spinner when service emits new value', () => {
-		const newSpinner = new NgxSpinner({
-			name: 'test-spinner',
-			bdColor: 'rgba(0,0,0,0.8)',
-			size: 'medium',
-			color: '#ffffff',
-			type: 'ball-spin',
-			fullScreen: false,
-			show: true,
-		});
-
-		mockSpinnerSubject.next(newSpinner);
-
-		expect(component.spinner.name).toBe('test-spinner');
-		expect(component.spinner.bdColor).toBe('rgba(0,0,0,0.8)');
-		expect(component.spinner.size).toBe('medium');
-		expect(component.spinner.color).toBe('#ffffff');
-		expect(component.spinner.type).toBe('ball-spin');
-		expect(component.spinner.fullScreen).toBe(false);
-		expect(component.spinner.show).toBe(true);
-	});
-
-	describe('Keyboard Event Handling', () => {
-		it('should handle keydown event when spinner is visible', () => {
-			const event = createKeyboardEvent();
-			component.spinnerDOM = { nativeElement: document.createElement('div') };
-
-			component.handleKeyboardEvent(event);
-
-			expect(event.preventDefault).toHaveBeenCalled();
-			expect(event.returnValue).toBe(false);
-		});
-
-		it('should handle keyup event when spinner is visible', () => {
-			const event = createKeyboardEvent('keyup');
-			component.spinnerDOM = { nativeElement: document.createElement('div') };
-
-			component.handleKeyboardEvent(event);
-
-			expect(event.preventDefault).toHaveBeenCalled();
-			expect(event.returnValue).toBe(false);
-		});
-
-		it('should not handle keyboard events when spinner is not visible', () => {
-			const event = createKeyboardEvent();
-			component.spinnerDOM = null;
-
-			component.handleKeyboardEvent(event);
-
-			expect(event.preventDefault).not.toHaveBeenCalled();
-		});
-
-		it('should not handle keyboard events when spinner DOM is not initialized', () => {
-			const event = createKeyboardEvent();
-			component.spinnerDOM = undefined;
-
-			component.handleKeyboardEvent(event);
-
-			expect(event.preventDefault).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('Spinner Class Generation', () => {
-		it('should generate correct class name for large spinner', () => {
-			const type = 'ball-spin';
-			const size = 'large';
-			const className = component.getClass(type, size);
-			expect(className).toBe('la-ball-spin la-3x');
-		});
-
-		it('should generate correct class name for medium spinner', () => {
-			const type = 'ball-spin';
-			const size = 'medium';
-			const className = component.getClass(type, size);
-			expect(className).toBe('la-ball-spin la-2x');
-		});
-
-		it('should generate correct class name for small spinner', () => {
-			const type = 'ball-spin';
-			const size = 'small';
-			const className = component.getClass(type, size);
-			expect(className).toBe('la-ball-spin la-sm');
-		});
-
-		it('should update spinner class on input change', () => {
-			component.spinner.type = 'ball-spin';
-			component.spinner.size = 'large';
-			component.onInputChange();
-			expect(component.spinner.class).toBe('la-ball-spin la-3x');
-		});
-
-		it('should use default values when type or size is undefined', () => {
-			component.spinner.type = undefined;
-			component.spinner.size = undefined;
-			component.onInputChange();
-			expect(component.spinner.class).toBe(`la-${DEFAULTS.SPINNER_TYPE} `);
-		});
-	});
-
-	describe('Component Lifecycle', () => {
-		it('should clean up subscription on destroy', () => {
-			spyOn(component.ngUnsubscribe, 'next');
-			spyOn(component.ngUnsubscribe, 'complete');
-
-			component.ngOnDestroy();
-
-			expect(component.ngUnsubscribe.next).toHaveBeenCalled();
-			expect(component.ngUnsubscribe.complete).toHaveBeenCalled();
-		});
-
-		it('should set default options on init', () => {
-			spyOn(component, 'setDefaultOptions');
-			component.ngOnInit();
-			expect(component.setDefaultOptions).toHaveBeenCalled();
-		});
-	});
-});

package/src/lib/components/ngx-spinner/ngx-spinner.component.ts

@@ -1,199 +0,0 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { ChangeDetectorRef, Component, HostListener, input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { DEFAULTS, LOADERS, NgxSpinner, PRIMARY_SPINNER, Size } from './ngx-spinner.enum';
-import { NgxSpinnerService } from './ngx-spinner.service';
-import { SafeHtmlPipe } from './safe-html.pipe';
-
-@Component({
-	selector: 'ngx-spinner',
-	imports: [SafeHtmlPipe],
-	templateUrl: 'ngx-spinner.component.html',
-	styleUrls: ['ngx-spinner.component.css'],
-	animations: [
-		trigger('fadeIn', [
-			state('in', style({ opacity: 1 })),
-			transition(':enter', [style({ opacity: 0 }), animate(300)]),
-			transition(':leave', animate(200, style({ opacity: 0 }))),
-		]),
-	],
-})
-export class NgxSpinnerComponent implements OnDestroy, OnInit {
-	/**
-	 * To set backdrop color
-	 * Only supports RGBA color format
-	 */
-	bdColor = input<string>(DEFAULTS.BD_COLOR);
-
-	/**
-	 * To set spinner size
-	 */
-	size = input<Size>('large');
-
-	/**
-	 * To set spinner color(DEFAULTS.SPINNER_COLOR)
-	 */
-	color = input<string>(DEFAULTS.SPINNER_COLOR);
-
-	/**
-	 * To set type of spinner
-	 */
-	type = input<string>(DEFAULTS.SPINNER_TYPE);
-
-	/**
-	 * To toggle fullscreen mode
-	 */
-	fullScreen = input<boolean>(true);
-
-	/**
-	 * Spinner name
-	 */
-	name = input<string>(PRIMARY_SPINNER);
-
-	/**
-	 * z-index value
-	 */
-	zIndex = input<number>(DEFAULTS.Z_INDEX);
-
-	/**
-	 * Custom template for spinner/loader
-	 */
-	template = input<string>('');
-
-	/**
-	 * Show/Hide the spinner
-	 */
-	showSpinner = input<boolean>(false);
-
-	/**
-	 * To enable/disable animation
-	 */
-	disableAnimation = input<boolean>(false);
-
-	/**
-	 * Spinner Object
-	 */
-	spinner: NgxSpinner = new NgxSpinner();
-
-	/**
-	 * Array for spinner's div
-	 */
-	divArray: number[] = [];
-
-	/**
-	 * Counter for div
-	 */
-	divCount = 0;
-
-	/**
-	 * Show spinner
-	 **/
-	show = false;
-
-	/**
-	 * Unsubscribe from spinner's observable
-	 **/
-	ngUnsubscribe = new Subject<void>();
-
-	/**
-	 * Element Reference
-	 */
-	// @ts-ignore
-	@ViewChild('overlay') spinnerDOM;
-
-	/**
-	 * Creates an instance of NgxSpinnerComponent.
-	 */
-	constructor(
-		private readonly spinnerService: NgxSpinnerService,
-		private readonly changeDetector: ChangeDetectorRef,
-	) {}
-
-	@HostListener('document:keydown', ['$event'])
-	handleKeyboardEvent(event: KeyboardEvent): void {
-		if (this.spinnerDOM?.nativeElement) {
-			event.returnValue = false;
-			event.preventDefault();
-		}
-	}
-
-	/**
-	 * Initialization method
-	 */
-	ngOnInit(): void {
-		this.setDefaultOptions();
-		this.spinnerService
-			.getSpinner(this.name())
-			.pipe(takeUntil(this.ngUnsubscribe))
-			.subscribe((spinner: NgxSpinner) => {
-				this.setDefaultOptions();
-				Object.assign(this.spinner, spinner);
-				if (spinner.show) {
-					this.onInputChange();
-				}
-				this.changeDetector.detectChanges();
-			});
-	}
-
-	/**
-	 * To set default ngx-spinner options
-	 */
-	setDefaultOptions = (): void => {
-		this.spinner = new NgxSpinner({
-			name: this.name(),
-			bdColor: this.bdColor(),
-			size: this.size(),
-			color: this.color(),
-			type: this.type(),
-			fullScreen: this.fullScreen(),
-			divArray: this.divArray,
-			divCount: this.divCount,
-			show: this.show,
-			zIndex: this.zIndex(),
-			template: this.template(),
-			showSpinner: this.showSpinner(),
-		});
-	};
-
-	/**
-	 * To get class for spinner
-	 */
-	getClass(type: string, size: Size): string {
-		// @ts-ignore
-		this.spinner.divCount = LOADERS[type];
-		this.spinner.divArray = Array(this.spinner.divCount)
-			.fill(0)
-			.map((_x, i) => i);
-		let sizeClass = '';
-		switch (size.toLowerCase()) {
-			case 'small':
-				sizeClass = 'la-sm';
-				break;
-			case 'medium':
-				sizeClass = 'la-2x';
-				break;
-			case 'large':
-				sizeClass = 'la-3x';
-				break;
-			default:
-				break;
-		}
-		return 'la-' + type + ' ' + sizeClass;
-	}
-
-	/**
-	 * Check if input variables have changed
-	 */
-	onInputChange(): void {
-		this.spinner.class = this.getClass(this.spinner.type ?? DEFAULTS.SPINNER_TYPE, this.spinner.size ?? 'default');
-	}
-
-	/**
-	 * Component destroy event
-	 */
-	ngOnDestroy(): void {
-		this.ngUnsubscribe.next();
-		this.ngUnsubscribe.complete();
-	}
-}

package/src/lib/components/ngx-spinner/ngx-spinner.enum.ts

@@ -1,45 +0,0 @@
-export const LOADERS = {
-	'ball-clip-rotate': 1,
-};
-
-export const DEFAULTS = {
-	BD_COLOR: 'rgba(51,51,51,0.8)',
-	SPINNER_COLOR: '#fff',
-	SPINNER_TYPE: 'ball-clip-rotate',
-	Z_INDEX: 99999,
-};
-
-export const PRIMARY_SPINNER = 'primary';
-
-export type Size = 'default' | 'small' | 'medium' | 'large';
-
-export interface Spinner {
-	bdColor?: string;
-	size?: Size;
-	color?: string;
-	type?: string;
-	fullScreen?: boolean;
-	zIndex?: number;
-	template?: string;
-	showSpinner?: boolean;
-}
-
-export class NgxSpinner {
-	name?: string;
-	bdColor?: string;
-	size?: Size;
-	color?: string;
-	type?: string;
-	class?: string;
-	divCount?: number;
-	divArray?: number[];
-	fullScreen?: boolean;
-	show?: boolean;
-	zIndex?: number;
-	template?: string;
-	showSpinner?: boolean;
-
-	constructor(init?: Partial<NgxSpinner>) {
-		Object.assign(this, init);
-	}
-}

package/src/lib/components/ngx-spinner/ngx-spinner.service.ts

@@ -1,66 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { NgxSpinner, PRIMARY_SPINNER, Spinner } from './ngx-spinner.enum';
-
-@Injectable({
-	providedIn: 'root',
-})
-export class NgxSpinnerService {
-	/**
-	 * Spinner observable
-	 *
-	 * @memberof NgxSpinnerService
-	 */
-	// private spinnerObservable = new ReplaySubject<NgxSpinner>(1);
-	public spinnerObservable = new BehaviorSubject<NgxSpinner | undefined>(undefined);
-
-	/**
-	 * Creates an instance of NgxSpinnerService.
-	 * @memberof NgxSpinnerService
-	 */
-
-	/**
-	 * Get subscription of desired spinner
-	 * @memberof NgxSpinnerService
-	 **/
-	getSpinner(name: string): Observable<NgxSpinner> {
-		// @ts-ignore
-		return this.spinnerObservable.asObservable().pipe(filter((x) => x?.name === name));
-	}
-
-	/**
-	 * To show spinner
-	 *
-	 * @memberof NgxSpinnerService
-	 */
-	show(name: string = PRIMARY_SPINNER, spinner?: Spinner) {
-		return new Promise((resolve, _reject) => {
-			setTimeout(() => {
-				if (spinner && Object.keys(spinner).length) {
-					// @ts-ignore
-					spinner['name'] = name;
-					this.spinnerObservable.next(new NgxSpinner({ ...spinner, show: true }));
-					resolve(true);
-				} else {
-					this.spinnerObservable.next(new NgxSpinner({ name, show: true }));
-					resolve(true);
-				}
-			}, 10);
-		});
-	}
-
-	/**
-	 * To hide spinner
-	 *
-	 * @memberof NgxSpinnerService
-	 */
-	hide(name: string = PRIMARY_SPINNER, debounce = 10) {
-		return new Promise((resolve, _reject) => {
-			setTimeout(() => {
-				this.spinnerObservable.next(new NgxSpinner({ name, show: false }));
-				resolve(true);
-			}, debounce);
-		});
-	}
-}

package/src/lib/components/ngx-spinner/safe-html.pipe.ts

@@ -1,17 +0,0 @@
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-	name: 'safeHtml',
-	standalone: true,
-})
-export class SafeHtmlPipe implements PipeTransform {
-	constructor(private _sanitizer: DomSanitizer) {}
-
-	transform(v: string): SafeHtml | undefined {
-		if (v) {
-			return this._sanitizer.bypassSecurityTrustHtml(v);
-		}
-		return undefined;
-	}
-}

package/src/lib/components/snack-bar/error-snack-bar/error-snack-bar.component.ts

@@ -1,36 +0,0 @@
-import { Component, Inject } from '@angular/core';
-
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
-
-@Component({
-	selector: 'app-error-snack-bar',
-	imports: [MatIconModule, MatButtonModule],
-	template: `
-		<div class="app-flex-center error-snackbar">
-			<mat-icon style="font-size:1.3rem">error</mat-icon>
-			<label>{{ data.message }}</label>
-			<button style="margin-left: auto" (click)="close()" mat-icon-button>
-				<mat-icon>close</mat-icon>
-			</button>
-		</div>
-	`,
-	styleUrls: ['../../../../assets/app-mat-snack-bar.css'],
-})
-export class ErrorSnackBarComponent {
-	constructor(
-		public msb: MatSnackBarRef<ErrorSnackBarComponent>,
-		@Inject(MAT_SNACK_BAR_DATA) public data: { message: string; action?: string },
-	) {}
-
-	/**
-	 * Close the Snack Bar
-	 *
-	 * @author Pavan Kumar Jadda
-	 * @since 2.7.18
-	 */
-	close(): void {
-		this.msb.dismissWithAction();
-	}
-}

package/src/lib/components/snack-bar/success-snack-bar/success-snack-bar.component.ts

@@ -1,35 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
-
-@Component({
-	selector: 'app-success-snack-bar',
-	imports: [MatButtonModule, MatIconModule],
-	template: `
-		<div class="app-flex-center success-snackbar">
-			<mat-icon style="font-size:1.3rem">check_circle</mat-icon>
-			<label>{{ data.message }}</label>
-			<button style="margin-left: auto" (click)="close()" mat-icon-button>
-				<mat-icon>close</mat-icon>
-			</button>
-		</div>
-	`,
-	styleUrls: ['../../../../assets/app-mat-snack-bar.css'],
-})
-export class SuccessSnackBarComponent {
-	constructor(
-		public msb: MatSnackBarRef<SuccessSnackBarComponent>,
-		@Inject(MAT_SNACK_BAR_DATA) public data: { message: string; action?: string },
-	) {}
-
-	/**
-	 * Close the Snack Bar
-	 *
-	 * @author Pavan Kumar Jadda
-	 * @since 2.7.18
-	 */
-	close(): void {
-		this.msb.dismissWithAction();
-	}
-}

package/src/lib/components/spinner/spinner.component.html

@@ -1,11 +0,0 @@
-<!-- Angular Material Spinner -->
-@if (!bootstrapSpinner()) {
-	<mat-spinner [color]="color()" [diameter]="diameter()" [strokeWidth]="strokeWidth()" class="mx-auto"> </mat-spinner>
-}
-
-<!-- Bootstrap Spinner -->
-@if (bootstrapSpinner()) {
-	<div class="d-flex justify-content-center">
-		<div class="spinner-border bs-spinner" role="status"></div>
-	</div>
-}

package/src/lib/components/spinner/spinner.component.scss

@@ -1,18 +0,0 @@
-.bs-spinner-sm {
-	color: #3f51b5;
-	margin-bottom: 20px;
-}
-
-.bs-spinner {
-	color: #3f51b5;
-	width: 3rem;
-	height: 3rem;
-	margin-bottom: 20px;
-}
-
-.bs-spinner-lg {
-	color: #3f51b5;
-	width: 5rem;
-	height: 5rem;
-	margin-bottom: 20px;
-}

package/src/lib/components/spinner/spinner.component.ts

@@ -1,31 +0,0 @@
-import { Component, input } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
-@Component({
-	selector: 'spinner,lib-spinner',
-	imports: [MatProgressSpinnerModule],
-	templateUrl: './spinner.component.html',
-	styleUrls: ['./spinner.component.scss'],
-})
-export class SpinnerComponent {
-	/**
-	 *  Use Boostrap Spinner. Default `true`
-	 */
-	bootstrapSpinner = input(true);
-
-	/**
-	 * Diameter of the Angular Material spinner
-	 */
-	diameter = input(50);
-
-	/**
-	 *  Color of the Angular Material spinner
-	 */
-	color = input<ThemePalette>('primary');
-
-	/**
-	 *  Stroke Width of the Angular Material spinner
-	 */
-	strokeWidth = input(5);
-}