@js-smart/ng-kit
Version:
Reusable Angular components built with Angular Material and Bootstrap 5.x, Utility classes/functions for Date, Form and String operations
748 lines (738 loc) • 175 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, input, signal, output, effect, Component, Pipe, Injectable, HostListener, ViewChild, forwardRef, Input, Optional, DOCUMENT, Directive, ElementRef, ViewContainerRef, Inject, computed } from '@angular/core';
import { trigger, state, transition, style, animate } from '@angular/animations';
import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
import { filter, takeUntil, startWith, map } from 'rxjs/operators';
import * as i1 from '@angular/platform-browser';
import * as i1$1 from '@angular/material/progress-spinner';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { AsyncPipe } from '@angular/common';
import * as i1$2 from '@angular/forms';
import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i3 from '@angular/material/autocomplete';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i1$3 from '@angular/material/button';
import { MatButtonModule, MatAnchor, MatButton } from '@angular/material/button';
import * as i2 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i1$4 from '@angular/material/icon';
import { MatIconModule, MatIcon } from '@angular/material/icon';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i1$5 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import * as i3$1 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import * as i1$6 from '@angular/material/snack-bar';
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
/**
* Boostrap Alert component that can be used to alert messages to the user
*
* @author Pavan Kumar Jadda
* @since 12.0.0
*/
class AlertComponent {
constructor() {
this.cdr = inject(ChangeDetectorRef);
/**
* Type of the BootStrap Alert. Following values are supported. See BootStrap docs for more information
*/
this.type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
/**
* Is alert visible or open
*/
this.isOpen = input(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
/**
* Writable signal for isOpen
*/
this.open = signal(this.isOpen(), ...(ngDevMode ? [{ debugName: "open" }] : []));
/**
* If set, displays an inline “Close” button
*/
this.dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
/**
* If set, dismisses the alert after Dismiss Timeout
*/
this.dismissOnTimeout = input(true, ...(ngDevMode ? [{ debugName: "dismissOnTimeout" }] : []));
/**
* Number in milliseconds, after which alert will be closed. Default value is 5000 ms
*/
this.dismissTimeout = input(5000, ...(ngDevMode ? [{ debugName: "dismissTimeout" }] : []));
/**
* Additional classes to be added to the alert. This can be used to add custom styles to the alert
*/
this.class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
/**
* Emits when the alert is closed.
*/
this.closed = output();
// React to isOpen input changes
effect(() => {
this.open.set(this.isOpen());
});
}
/**
* Initialize the component and settings
*
* @author Pavan Kumar Jadda
* @since 12.0.0
*/
ngOnInit() {
this.openAlert();
if (this.dismissOnTimeout()) {
setTimeout(() => {
this.closeAlert();
this.cdr.markForCheck();
}, this.dismissTimeout());
}
}
/**
* Closes BootStrap Alert if not open
*
* @author Pavan Kumar Jadda
* @since 12.0.0
*/
closeAlert() {
if (!this.isOpen()) {
return;
}
this.open.set(false);
this.closed.emit();
}
/**
* Opens Bootstrap Alert
*
* @author Pavan Kumar Jadda
* @since 12.0.0
*/
openAlert() {
this.open.set(true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AlertComponent, isStandalone: true, selector: "lib-alert, alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissOnTimeout: { classPropertyName: "dismissOnTimeout", publicName: "dismissOnTimeout", isSignal: true, isRequired: false, transformFunction: null }, dismissTimeout: { classPropertyName: "dismissTimeout", publicName: "dismissTimeout", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-alert, alert', template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"] }]
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissOnTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnTimeout", required: false }] }], dismissTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissTimeout", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
const LOADERS = {
'ball-clip-rotate': 1,
};
const DEFAULTS = {
BD_COLOR: 'rgba(51,51,51,0.8)',
SPINNER_COLOR: '#fff',
SPINNER_TYPE: 'ball-clip-rotate',
Z_INDEX: 99999,
};
const PRIMARY_SPINNER = 'primary';
class NgxSpinner {
constructor(init) {
Object.assign(this, init);
}
}
class SafeHtmlPipe {
constructor(_sanitizer) {
this._sanitizer = _sanitizer;
}
transform(v) {
if (v) {
return this._sanitizer.bypassSecurityTrustHtml(v);
}
return undefined;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
type: Pipe,
args: [{
name: 'safeHtml',
standalone: true,
}]
}], ctorParameters: () => [{ type: i1.DomSanitizer }] });
class NgxSpinnerService {
constructor() {
/**
* Spinner observable
*
* @memberof NgxSpinnerService
*/
// private spinnerObservable = new ReplaySubject<NgxSpinner>(1);
this.spinnerObservable = new BehaviorSubject(undefined);
}
/**
* Creates an instance of NgxSpinnerService.
* @memberof NgxSpinnerService
*/
/**
* Get subscription of desired spinner
* @memberof NgxSpinnerService
**/
getSpinner(name) {
// @ts-ignore
return this.spinnerObservable.asObservable().pipe(filter((x) => x?.name === name));
}
/**
* To show spinner
*
* @memberof NgxSpinnerService
*/
show(name = PRIMARY_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 = PRIMARY_SPINNER, debounce = 10) {
return new Promise((resolve, _reject) => {
setTimeout(() => {
this.spinnerObservable.next(new NgxSpinner({ name, show: false }));
resolve(true);
}, debounce);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxSpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxSpinnerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxSpinnerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class NgxSpinnerComponent {
/**
* Creates an instance of NgxSpinnerComponent.
*/
constructor(spinnerService, changeDetector) {
this.spinnerService = spinnerService;
this.changeDetector = changeDetector;
/**
* To set backdrop color
* Only supports RGBA color format
*/
this.bdColor = input(DEFAULTS.BD_COLOR, ...(ngDevMode ? [{ debugName: "bdColor" }] : []));
/**
* To set spinner size
*/
this.size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : []));
/**
* To set spinner color(DEFAULTS.SPINNER_COLOR)
*/
this.color = input(DEFAULTS.SPINNER_COLOR, ...(ngDevMode ? [{ debugName: "color" }] : []));
/**
* To set type of spinner
*/
this.type = input(DEFAULTS.SPINNER_TYPE, ...(ngDevMode ? [{ debugName: "type" }] : []));
/**
* To toggle fullscreen mode
*/
this.fullScreen = input(true, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
/**
* Spinner name
*/
this.name = input(PRIMARY_SPINNER, ...(ngDevMode ? [{ debugName: "name" }] : []));
/**
* z-index value
*/
this.zIndex = input(DEFAULTS.Z_INDEX, ...(ngDevMode ? [{ debugName: "zIndex" }] : []));
/**
* Custom template for spinner/loader
*/
this.template = input('', ...(ngDevMode ? [{ debugName: "template" }] : []));
/**
* Show/Hide the spinner
*/
this.showSpinner = input(false, ...(ngDevMode ? [{ debugName: "showSpinner" }] : []));
/**
* To enable/disable animation
*/
this.disableAnimation = input(false, ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
/**
* Spinner Object
*/
this.spinner = new NgxSpinner();
/**
* Array for spinner's div
*/
this.divArray = [];
/**
* Counter for div
*/
this.divCount = 0;
/**
* Show spinner
**/
this.show = false;
/**
* Unsubscribe from spinner's observable
**/
this.ngUnsubscribe = new Subject();
/**
* To set default ngx-spinner options
*/
this.setDefaultOptions = () => {
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(),
});
};
}
handleKeyboardEvent(event) {
if (this.spinnerDOM?.nativeElement) {
event.returnValue = false;
event.preventDefault();
}
}
/**
* Initialization method
*/
ngOnInit() {
this.setDefaultOptions();
this.spinnerService
.getSpinner(this.name())
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((spinner) => {
this.setDefaultOptions();
Object.assign(this.spinner, spinner);
if (spinner.show) {
this.onInputChange();
}
this.changeDetector.detectChanges();
});
}
/**
* To get class for spinner
*/
getClass(type, size) {
// @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() {
this.spinner.class = this.getClass(this.spinner.type ?? DEFAULTS.SPINNER_TYPE, this.spinner.size ?? 'default');
}
/**
* Component destroy event
*/
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxSpinnerComponent, deps: [{ token: NgxSpinnerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: NgxSpinnerComponent, isStandalone: true, selector: "ngx-spinner", inputs: { bdColor: { classPropertyName: "bdColor", publicName: "bdColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, showSpinner: { classPropertyName: "showSpinner", publicName: "showSpinner", isSignal: true, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "spinnerDOM", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation()\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template()) {\n\t\t\t<div [innerHTML]=\"template() | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [
trigger('fadeIn', [
state('in', style({ opacity: 1 })),
transition(':enter', [style({ opacity: 0 }), animate(300)]),
transition(':leave', animate(200, style({ opacity: 0 }))),
]),
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgxSpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-spinner', imports: [SafeHtmlPipe], animations: [
trigger('fadeIn', [
state('in', style({ opacity: 1 })),
transition(':enter', [style({ opacity: 0 }), animate(300)]),
transition(':leave', animate(200, style({ opacity: 0 }))),
]),
], template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation()\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template()) {\n\t\t\t<div [innerHTML]=\"template() | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"] }]
}], ctorParameters: () => [{ type: NgxSpinnerService }, { type: i0.ChangeDetectorRef }], propDecorators: { bdColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bdColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], showSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSpinner", required: false }] }], disableAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimation", required: false }] }], spinnerDOM: [{
type: ViewChild,
args: ['overlay']
}], handleKeyboardEvent: [{
type: HostListener,
args: ['document:keydown', ['$event']]
}] } });
class SpinnerComponent {
constructor() {
/**
* Use Boostrap Spinner. Default `true`
*/
this.bootstrapSpinner = input(true, ...(ngDevMode ? [{ debugName: "bootstrapSpinner" }] : []));
/**
* Diameter of the Angular Material spinner
*/
this.diameter = input(50, ...(ngDevMode ? [{ debugName: "diameter" }] : []));
/**
* Color of the Angular Material spinner
*/
this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
/**
* Stroke Width of the Angular Material spinner
*/
this.strokeWidth = input(5, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SpinnerComponent, isStandalone: true, selector: "spinner,lib-spinner", inputs: { bootstrapSpinner: { classPropertyName: "bootstrapSpinner", publicName: "bootstrapSpinner", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Angular Material Spinner -->\n@if (!bootstrapSpinner()) {\n\t<mat-spinner [color]=\"color()\" [diameter]=\"diameter()\" [strokeWidth]=\"strokeWidth()\" class=\"mx-auto\"> </mat-spinner>\n}\n\n<!-- Bootstrap Spinner -->\n@if (bootstrapSpinner()) {\n\t<div class=\"d-flex justify-content-center\">\n\t\t<div class=\"spinner-border bs-spinner\" role=\"status\"></div>\n\t</div>\n}\n", styles: [".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}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'spinner,lib-spinner', imports: [MatProgressSpinnerModule], template: "<!-- Angular Material Spinner -->\n@if (!bootstrapSpinner()) {\n\t<mat-spinner [color]=\"color()\" [diameter]=\"diameter()\" [strokeWidth]=\"strokeWidth()\" class=\"mx-auto\"> </mat-spinner>\n}\n\n<!-- Bootstrap Spinner -->\n@if (bootstrapSpinner()) {\n\t<div class=\"d-flex justify-content-center\">\n\t\t<div class=\"spinner-border bs-spinner\" role=\"status\"></div>\n\t</div>\n}\n", styles: [".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}\n"] }]
}], propDecorators: { bootstrapSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "bootstrapSpinner", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
/**
* Reusable Auto Complete component that extends MatAutoComplete to show Clear icon and Arrow buttons
*
* @author Pavan Kumar Jadda
* @since 12.0.0
*/
class AutocompleteComponent {
constructor() {
this.cdRef = inject(ChangeDetectorRef);
/**
* Internal form control for the autocomplete
*/
this.control = new FormControl('');
/**
* Label of the AutoComplete
*/
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
/**
* Placeholder of the AutoComplete
*/
this.placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
/**
* Appearance of the AutoComplete, defaults to `fill`
*/
this.appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
/**
* List of CSS classes that need to applied to autocomplete
*/
this.classes = input('', ...(ngDevMode ? [{ debugName: "classes" }] : []));
/**
* Attribute of the Object whose value would be shown when searching for data. Defaults to `ID`
*/
this.bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
/**
* Attribute of the Object whose value would be used for search
*/
this.bindValue = input('id', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
/**
* Function that maps an option's control value to its display value in the trigger.
*/
this.displayWith = null;
/**
* Specifies if the autocomplete is required. Default is not required.
*/
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
/**
* Specifies if the autocomplete is disabled. Default is not required.
*/
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
/**
* List of Objects that need to be bind and searched for
*/
this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
/**
* Emit selected value on selection changes
*/
this.onSelectionChange = output();
/**
* BehaviorSubject that shows the current active arrow icon
*/
this.arrowIconSubject = new BehaviorSubject('arrow_drop_down');
// ControlValueAccessor implementation
this.onChange = () => { };
this.onTouched = () => { };
}
writeValue(value) {
this.control.setValue(value, { emitEvent: false });
}
registerOnChange(fn) {
this.onChange = fn;
// Forward value changes from internal control to parent form
this.control.valueChanges.subscribe((value) => fn(value));
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
if (isDisabled) {
this.control.disable();
}
else {
this.control.enable();
}
}
ngAfterContentChecked() {
this.cdRef.detectChanges();
}
ngOnInit() {
this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')), map((propertyName) => this.data()?.filter((option) => {
return typeof option === 'string'
? option?.toLowerCase().startsWith(propertyName.toLowerCase())
: option[this.bindLabel()]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
}) ?? this.data()?.slice()));
}
ngOnChanges(_changes) {
this.displayFn = this.displayFn.bind(this);
}
clearInput(evt) {
evt.stopPropagation();
this.control.reset();
this.onChange(null);
this.inputAutoComplete?.nativeElement.focus();
}
openOrClosePanel(evt, trigger) {
evt.stopPropagation();
if (trigger.panelOpen) {
trigger.closePanel();
}
else {
trigger.openPanel();
}
}
displayFn(object) {
if (this.displayWith !== undefined && this.displayWith !== null && typeof this.displayWith === 'function') {
this.displayFn = this.displayWith.bind(this);
return this.displayWith(object);
}
else {
if (typeof object === 'string') {
return object;
}
return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
}
}
emitSelectedValue($event) {
this.onSelectionChange.emit($event.source.value);
this.onChange($event.source.value);
this.onTouched();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AutocompleteComponent),
multi: true,
},
], viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
type: Component,
args: [{ selector: 'autocomplete, lib-autocomplete', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AutocompleteComponent),
multi: true,
},
], template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n" }]
}], propDecorators: { inputAutoComplete: [{
type: ViewChild,
args: ['inputAutoComplete']
}], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], displayWith: [{
type: Input
}, {
type: Optional
}], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }] } });
class PrintOptions {
constructor(options) {
this.printSectionId = '';
this.printTitle = '';
this.useExistingCss = false;
this.bodyClass = '';
this.openNewTab = false;
this.previewOnly = false;
this.closeWindow = true;
this.printDelay = 0;
if (options) {
Object.assign(this, options);
}
}
}
/**
* Reusable Angular directory that prints given contents of HTML element
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
class NgxPrintDirective {
constructor() {
this.document = inject(DOCUMENT);
/**
* If `true`, uses CSS of HTMl element, otherwise no CSS applied
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.useExistingCss = false;
/**
* A delay in milliseconds to force the print dialog to wait before opened. Default: 0
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.printDelay = 0;
/**
* ID of the Mat Paginator
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.paginatorId = '';
/**
* HTML tag ID of the Mat-Table Input Filter
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.inputFilterId = '';
/**
* If `true`, referenced table is Mat-Table
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.isMatTable = false;
/**
* If `true` Mat-Table paginator will be hidden
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.hideMatTablePaginator = false;
this.printStyleArray = [];
this.printOptions = new PrintOptions();
/**
* List of Style sheet files
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
this.styleSheetFileArray = '';
}
/**
* Prevents the print dialog from opening on the window
*
* @memberof NgxPrintDirective
*/
set previewOnly(value) {
this.printOptions = { ...this.printOptions, previewOnly: value };
}
/**
* List of CSS properties that needs to be applied while printing the document
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
set printStyle({ values }) {
for (const key in values) {
if (Object.prototype.hasOwnProperty.call(values, key)) {
this.printStyleArray.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
}
}
this.returnStyleValues();
}
/**
* Sets given style sheet files to print document
*
* @param cssList Comma separated value of CSS file names
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
set styleSheetFile(cssList) {
if (cssList.indexOf(',') !== -1) {
const cssFileArray = cssList.split(',');
for (const cssFileName of cssFileArray) {
this.styleSheetFileArray = this.styleSheetFileArray + NgxPrintDirective.linkTagFn(cssFileName);
}
}
else {
this.styleSheetFileArray = NgxPrintDirective.linkTagFn(cssList);
}
}
/**
* Build link HTMl tag based on given file name
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
static linkTagFn(cssFileName) {
return `<link rel="stylesheet" type="text/css" href="${cssFileName}">`;
}
/**
* Gets HTML element by tag name
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
static getElementTag(tag) {
const html = [];
const elements = document.getElementsByTagName(tag);
// @ts-ignore
for (const element of elements) {
html.push(element.outerHTML);
}
return html.join('\r\n');
}
/**
* Print the element upon clicking the button
*
* @since 12.0.0
* @author Pavan Kumar Jadda
*/
print() {
//Hide paginator for Material table
if (this.isMatTable && this.hideMatTablePaginator && this.matTableDataSource) {
this.matTableDataSource.paginator = null;
}
setTimeout(() => {
if (this.isMatTable) {
this.hideMatPaginatorBeforePrinting();
}
// Do something after
let printContents;
let popupWin;
let styles = '';
let links = '';
if (this.useExistingCss) {
styles = NgxPrintDirective.getElementTag('style');
links = NgxPrintDirective.getElementTag('link');
}
if (this.printSectionId) {