@ferhaps/easy-ui-lib 1.0.0 → 1.1.0

package/fesm2022/ferhaps-easy-ui-lib.mjs

@@ -0,0 +1,551 @@
+import * as i0 from '@angular/core';
+import { Pipe, input, Directive, HostListener, output, Component, Input, viewChild, Injectable, inject, Inject } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NG_VALIDATORS, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i1 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i1$4 from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
+import { debounceTime, distinctUntilChanged, BehaviorSubject, Subject, Subscription } from 'rxjs';
+import { trigger, transition, style, animate, state } from '@angular/animations';
+import * as i1$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i3$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1$3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { NoopScrollStrategy } from '@angular/cdk/overlay';
+
+class WhiteSpaceFillerPipe {
+    transform(value, fillWith = '-') {
+        if (value === 0) {
+            return '0';
+        }
+        return value ? value : fillWith;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: WhiteSpaceFillerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: WhiteSpaceFillerPipe, isStandalone: true, name: "blankFiller" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: WhiteSpaceFillerPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'blankFiller',
+                }]
+        }] });
+
+class SnakeCaseParserPipe {
+    transform(str) {
+        if (str) {
+            let temp = str.split('_').map(word => {
+                return word.toLowerCase();
+            }).join(' ');
+            return temp.charAt(0).toUpperCase() + temp.slice(1);
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SnakeCaseParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SnakeCaseParserPipe, isStandalone: true, name: "snakeCaseParser" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SnakeCaseParserPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'snakeCaseParser',
+                }]
+        }] });
+
+class FieldsMatchValidatorDirective {
+    constructor() {
+        this.fieldToMatch = input.required();
+    }
+    validate(control) {
+        const value = control.value;
+        if (!value) {
+            return null;
+        }
+        const matchingControl = control.root.get(this.fieldToMatch());
+        if (!matchingControl) {
+            return null;
+        }
+        if (value !== matchingControl.value) {
+            return { mismatch: true };
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FieldsMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: FieldsMatchValidatorDirective, isStandalone: true, selector: "[libFieldsMatchValidator]", inputs: { fieldToMatch: { classPropertyName: "fieldToMatch", publicName: "fieldToMatch", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: FieldsMatchValidatorDirective,
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FieldsMatchValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libFieldsMatchValidator]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: FieldsMatchValidatorDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+class PhoneValidationDirective {
+    onInput(event) {
+        const input = event.target;
+        if (!input.value.includes('+')) {
+            input.value = `+${input.value}`;
+        }
+        const regex = /^[0-9+]*$/;
+        if (!regex.test(input.value)) {
+            input.value = input.value.replace(/[^0-9+]/g, '');
+        }
+    }
+    onKeyDown(event) {
+        const inputValue = event.target.value;
+        if (event.key === 'Backspace' && inputValue === '+') {
+            event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PhoneValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: PhoneValidationDirective, isStandalone: true, selector: "[libPhoneValidation]", host: { listeners: { "input": "onInput($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PhoneValidationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libPhoneValidation]',
+                }]
+        }], propDecorators: { onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class PasswordValidatorDirective {
+    validate(control) {
+        const password = control.value;
+        const pattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#\$%\^&\*])(?=.*\d).{8,}$/;
+        if (password && !pattern.test(password)) {
+            return { passwordInvalid: true };
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PasswordValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: PasswordValidatorDirective, isStandalone: true, selector: "[libPasswordValidator]", providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: PasswordValidatorDirective,
+                multi: true
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PasswordValidatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[libPasswordValidator]',
+                    providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: PasswordValidatorDirective,
+                            multi: true
+                        }
+                    ]
+                }]
+        }] });
+
+class DefaultDialogComponent {
+    constructor() {
+        this.height = input();
+        this.dialogTitle = input();
+        this.withBack = input();
+        this.back = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DefaultDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: DefaultDialogComponent, isStandalone: true, selector: "lib-default-dialog", inputs: { temRef: { classPropertyName: "temRef", publicName: "temRef", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, dialogTitle: { classPropertyName: "dialogTitle", publicName: "dialogTitle", isSignal: true, isRequired: false, transformFunction: null }, withBack: { classPropertyName: "withBack", publicName: "withBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"modal\" [style]=\"{'height': height()}\">\r\n  <div class=\"dialog-title\">\r\n    @if (withBack()) {\r\n      <div class=\"back-arrow\" (click)=\"back.emit()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n    }\r\n    <h4 class=\"title\">{{ dialogTitle() }}</h4>\r\n    <div class=\"closer\" mat-dialog-close>\r\n      <mat-icon>close</mat-icon>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"dialog-content\">\r\n    <ng-content select=\".dialog-content\"></ng-content>\r\n    <ng-template #tempBody></ng-template>\r\n    <ng-container *ngTemplateOutlet=\"temRef ? temRef: tempBody\" />\r\n  </div>\r\n</div>", styles: [".modal{display:flex;flex-direction:column}.dialog-title{padding-inline:2rem;padding-top:1rem;margin-bottom:1rem;position:relative;display:flex;font-size:20px;justify-content:center}.dialog-title .back-arrow{cursor:pointer;margin-right:.5rem}.dialog-title .title{font-weight:700;font-size:24px;margin:0!important}.dialog-title .closer{right:3%;position:absolute;cursor:pointer}.dialog-content{flex:1;min-height:0;overflow:hidden;padding-bottom:1rem;display:flex;flex-direction:column;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DefaultDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-default-dialog', imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatDialogModule
+                    ], template: "<div class=\"modal\" [style]=\"{'height': height()}\">\r\n  <div class=\"dialog-title\">\r\n    @if (withBack()) {\r\n      <div class=\"back-arrow\" (click)=\"back.emit()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n    }\r\n    <h4 class=\"title\">{{ dialogTitle() }}</h4>\r\n    <div class=\"closer\" mat-dialog-close>\r\n      <mat-icon>close</mat-icon>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"dialog-content\">\r\n    <ng-content select=\".dialog-content\"></ng-content>\r\n    <ng-template #tempBody></ng-template>\r\n    <ng-container *ngTemplateOutlet=\"temRef ? temRef: tempBody\" />\r\n  </div>\r\n</div>", styles: [".modal{display:flex;flex-direction:column}.dialog-title{padding-inline:2rem;padding-top:1rem;margin-bottom:1rem;position:relative;display:flex;font-size:20px;justify-content:center}.dialog-title .back-arrow{cursor:pointer;margin-right:.5rem}.dialog-title .title{font-weight:700;font-size:24px;margin:0!important}.dialog-title .closer{right:3%;position:absolute;cursor:pointer}.dialog-content{flex:1;min-height:0;overflow:hidden;padding-bottom:1rem;display:flex;flex-direction:column;align-items:center}\n"] }]
+        }], propDecorators: { temRef: [{
+                type: Input
+            }] } });
+
+class ErrorDispalyComponent {
+    constructor() {
+        this.error = input.required();
+        this.displayError = '';
+    }
+    ngOnInit() {
+        if (this.error() instanceof HttpErrorResponse) {
+            if (typeof this.error().error === 'string') {
+                this.displayError = this.error().error;
+            }
+            else if (this.error && this.error()?.error?.message) {
+                this.displayError = this.error().error.message;
+            }
+            else {
+                this.displayError = 'Unknown error';
+            }
+        }
+        else if (typeof this.error() === 'string') {
+            this.displayError = this.error();
+        }
+        else {
+            this.displayError = 'Unknown error';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorDispalyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: ErrorDispalyComponent, isStandalone: true, selector: "lib-error-dispaly", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<strong class="err-container">{{ displayError | snakeCaseParser }}</strong>`, isInline: true, styles: [".err-container{display:block;max-width:300px;font-size:20px;text-align:center;border:1px solid red;border-radius:5px;padding:.5rem 1.5rem;background-color:#ffe6e6;color:red;overflow-wrap:break-word}\n"], dependencies: [{ kind: "pipe", type: SnakeCaseParserPipe, name: "snakeCaseParser" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorDispalyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-error-dispaly', imports: [
+                        SnakeCaseParserPipe
+                    ], template: `<strong class="err-container">{{ displayError | snakeCaseParser }}</strong>`, styles: [".err-container{display:block;max-width:300px;font-size:20px;text-align:center;border:1px solid red;border-radius:5px;padding:.5rem 1.5rem;background-color:#ffe6e6;color:red;overflow-wrap:break-word}\n"] }]
+        }] });
+
+class SearchBarComponent {
+    constructor() {
+        this.for = input.required();
+        this.search = output();
+        this.searchForm = new FormGroup({
+            search: new FormControl('')
+        });
+        this.searchForm.get('search')?.valueChanges.
+            pipe(debounceTime(1000), distinctUntilChanged()).subscribe((searchTerm) => {
+            if (searchTerm.trim() !== '') {
+                this.search.emit(searchTerm);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { search: "search" }, ngImport: i0, template: `
+  <form class="search-bar" [formGroup]="searchForm">
+    <mat-icon>search</mat-icon>
+    <input class="search-input" type="search" name="field"
+      [placeholder]="'Search ' + for()" autocomplete="off" formControlName="search" />
+  </form>
+`, isInline: true, styles: [".search-bar{width:270px;border:1px solid #A4A4A4;display:flex;align-items:center}.search-input{border:none;padding:7px 11px;height:100%;width:100%;background-color:transparent}mat-icon{margin-inline:8px}.search-input:focus{border:none;outline:none}@media (max-width: 1086px){.search-bar{width:170px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-search-bar', template: `
+  <form class="search-bar" [formGroup]="searchForm">
+    <mat-icon>search</mat-icon>
+    <input class="search-input" type="search" name="field"
+      [placeholder]="'Search ' + for()" autocomplete="off" formControlName="search" />
+  </form>
+`, imports: [
+                        MatIconModule,
+                        ReactiveFormsModule
+                    ], styles: [".search-bar{width:270px;border:1px solid #A4A4A4;display:flex;align-items:center}.search-input{border:none;padding:7px 11px;height:100%;width:100%;background-color:transparent}mat-icon{margin-inline:8px}.search-input:focus{border:none;outline:none}@media (max-width: 1086px){.search-bar{width:170px}}\n"] }]
+        }], ctorParameters: () => [] });
+
+const fader = trigger('fadeInOut', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate('200ms', style({ opacity: 1 })),
+    ]),
+    transition(':leave', [
+        animate('200ms', style({ opacity: 0 })),
+    ]),
+]);
+const openDropdown = trigger('open-close-dropdown', [
+    transition(':enter', [
+        style({ height: 0, overflow: 'hidden' }),
+        animate('200ms ease', style({ height: '*' }))
+    ]),
+    transition(':leave', [
+        style({ height: '*', overflow: 'hidden' }),
+        animate('200ms ease', style({ height: 0 }))
+    ])
+]);
+const textFader = trigger('textFader', [
+    state('void', style({ opacity: 0 })),
+    state('*', style({ opacity: 1 })),
+    transition('void => *', [animate('0.3s 0.3s ease-in')]),
+    transition('* => void', [animate('0.3s ease-in')])
+]);
+
+class TableSortHeaderComponent {
+    constructor() {
+        this.selected = input.required();
+        this.sort = output();
+        this.sortState = 'none';
+    }
+    onSortClick() {
+        if (this.sortState === 'none') {
+            this.sortState = 'desc';
+        }
+        else if (this.sortState === 'desc') {
+            this.sortState = 'asc';
+        }
+        else {
+            this.sortState = 'none';
+        }
+        this.sort.emit(this.sortState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: TableSortHeaderComponent, isStandalone: true, selector: "lib-table-sort-header", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sort: "sort" }, ngImport: i0, template: "<div class=\"sorting-container\" (click)=\"onSortClick()\">\r\n  <mat-icon\r\n    [class.selected]=\"selected() && sortState != 'none'\"\r\n    [class.rotated]=\"sortState == 'asc'\">\r\n    sort\r\n  </mat-icon>\r\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container *{cursor:pointer}.sorting-container .selected{color:#31adff;background-color:#ebf7fc}.sorting-container .rotated{transform:rotate(180deg) scaleX(-1)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableSortHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-table-sort-header', imports: [
+                        MatIconModule,
+                    ], template: "<div class=\"sorting-container\" (click)=\"onSortClick()\">\r\n  <mat-icon\r\n    [class.selected]=\"selected() && sortState != 'none'\"\r\n    [class.rotated]=\"sortState == 'asc'\">\r\n    sort\r\n  </mat-icon>\r\n</div>", styles: [".sorting-container{display:flex;align-items:center}.sorting-container *{cursor:pointer}.sorting-container .selected{color:#31adff;background-color:#ebf7fc}.sorting-container .rotated{transform:rotate(180deg) scaleX(-1)}\n"] }]
+        }] });
+
+class TableComponent {
+    constructor() {
+        this.config = input.required();
+        this.action = output();
+        this.scrollContainer = viewChild.required('scrollContainer');
+        this.selectedRowIndex = -1;
+        this.hoverRowIndex = -1;
+        this.currentSortColumn = -1;
+    }
+    getClass(obj, prop) {
+        if (!this.config().classRules)
+            return '';
+        const classes = [];
+        for (let rule of this.config().classRules) {
+            if (rule.condition(obj, prop)) {
+                classes.push(rule.className);
+            }
+        }
+        return classes.join(' ');
+    }
+    drop(event) {
+        if (this.config().draggable) {
+            moveItemInArray(this.config().data, event.previousIndex, event.currentIndex);
+            this.action.emit({ action: 'drag', obj: this.config().data[event.currentIndex], index: event.currentIndex });
+        }
+    }
+    onScroll() {
+        const container = this.scrollContainer().nativeElement;
+        // console.log(Math.ceil(container.scrollTop), container.offsetHeight, container.scrollHeight)
+        if ((Math.ceil(container.scrollTop) + container.offsetHeight) >= container.scrollHeight) {
+            this.action.emit({ action: 'scrolled' });
+        }
+    }
+    onRowClick(event, obj, index) {
+        this.selectedRowIndex = index === this.selectedRowIndex ? -1 : index;
+        this.action.emit({ action: 'rowClick', obj, index, selected: this.selectedRowIndex === index, event });
+    }
+    selectOption(оption, obj, index) {
+        this.action.emit({ action: оption.toLowerCase(), obj, index, selected: this.selectedRowIndex === index });
+    }
+    sortByProp(prop, sortState) {
+        this.action.emit({ action: 'sort', prop, sortState });
+    }
+    trackById(index, obj) {
+        return obj.id || index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flexer\">\r\n  @if (config().title) {\r\n    <div class=\"row-heading-labels mb05\">{{config().title}}</div>\r\n  }\r\n  <ng-content select=\".upper-part\"></ng-content>\r\n  @if (config().withAdd) {\r\n    <div class=\"flexer action pointer gap05 mb05\" (click)=\"action.emit({action: 'add'})\">\r\n      <mat-icon>add_circle_outline</mat-icon>\r\n      <div>add</div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"scroll\" #scrollContainer (scroll)=\"onScroll()\">\r\n  <table [class.with-options]=\"config().options?.length\">\r\n    <thead>\r\n      <tr>\r\n        @for (heading of config().tableHeadings; track heading; let i = $index) {\r\n          <th>\r\n            <div class=\"flexer gap05\">\r\n              {{heading}}\r\n              @if (config().sortable && !config().draggable) {\r\n                <lib-table-sort-header\r\n                  [selected]=\"currentSortColumn === i\"\r\n                  (click)=\"currentSortColumn = i\"\r\n                  (sort)=\"sortByProp(config().dataProps[i], $event)\"\r\n                />\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n        @if (config().options?.length) {\r\n          <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    @if (config().draggable) {\r\n      <tbody cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        @for (obj of config().data; track trackById(i, obj); let i = $index) {\r\n          <tr\r\n            (mouseover)=\"hoverRowIndex = i\"\r\n            (mouseleave)=\"hoverRowIndex = -1\"\r\n            cdkDrag cdkDragLockAxis=\"y\"\r\n            [class.pointer]=\"config().selectableRows\"\r\n            [class.hover-row]=\"hoverRowIndex == i\"\r\n            [class.selected-row]=\"config().selectableRows && selectedRowIndex == i\"\r\n            (click)=\"onRowClick($event, obj, i)\"\r\n            @fadeInOut>\r\n            @for (prop of config().dataProps; track prop; let cellIndex = $index) {\r\n              <td\r\n                [class.dragCol]=\"cellIndex === 0\">\r\n                <div class=\"data\" [classList]=\"getClass(obj, prop)\"\r\n                  [class.flexer]=\"cellIndex === 0\">\r\n                  @if (cellIndex === 0) {\r\n                    <mat-icon class=\"draggable\" cdkDragHandle>\r\n                      drag_indicator\r\n                    </mat-icon>\r\n                  }\r\n                  {{obj[prop] | blankFiller}}\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (config().options?.length) {\r\n              <td class=\"right-align\" (click)=\"$event.stopPropagation()\">\r\n                <button mat-icon-button class=\"pointer dots right\" [matMenuTriggerFor]=\"optionsMenu\">\r\n                  <mat-icon>more_vert</mat-icon>\r\n                </button>\r\n                <mat-menu #optionsMenu=\"matMenu\">\r\n                  @for (option of config().options; track option) {\r\n                    <div\r\n                      mat-menu-item (click)=\"selectOption(option, obj, i)\"\r\n                      [class.red]=\"option == 'Remove' || option == 'Delete'\">\r\n                      {{option}}\r\n                    </div>\r\n                  }\r\n                </mat-menu>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    } @else {\r\n      <tbody>\r\n        @for (obj of config().data; track trackById(i, obj); let i = $index) {\r\n          <tr\r\n            (mouseover)=\"hoverRowIndex = i\"\r\n            (mouseleave)=\"hoverRowIndex = -1\"\r\n            [class.pointer]=\"config().selectableRows\"\r\n            [class.hover-row]=\"hoverRowIndex == i\"\r\n            [class.selected-row]=\"config().selectableRows && selectedRowIndex == i\"\r\n            (click)=\"onRowClick($event, obj, i)\"\r\n            @fadeInOut>\r\n            @for (prop of config().dataProps; track prop; let cellIndex = $index) {\r\n              <td>\r\n                <div class=\"data\" [classList]=\"getClass(obj, prop)\">\r\n                  {{obj[prop] | blankFiller}}\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (config().options?.length) {\r\n              <td class=\"right-align\" (click)=\"$event.stopPropagation()\">\r\n                <button mat-icon-button class=\"pointer dots right\" [matMenuTriggerFor]=\"optionsMenu\">\r\n                  <mat-icon>more_vert</mat-icon>\r\n                </button>\r\n                <mat-menu #optionsMenu=\"matMenu\">\r\n                  @for (option of config().options; track option) {\r\n                    <div\r\n                      mat-menu-item (click)=\"selectOption(option, obj, i)\"\r\n                      [class.red]=\"option == 'Remove' || option == 'Delete'\">\r\n                      {{option}}\r\n                    </div>\r\n                  }\r\n                </mat-menu>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    }\r\n  </table>\r\n</div>", styles: [".scroll{overflow-y:auto;max-height:94%}table{width:100%;border-collapse:collapse;border-spacing:0px}table.with-options td{padding-block:3px!important}.flexer{display:flex;align-items:center}.action{color:#009ddc;font-weight:500;text-align:right;margin-left:auto}.pointer{cursor:pointer}.gap05{gap:.5rem}.mb05{margin-bottom:.5}.data{white-space:pre-wrap}.row-heading-labels{font-weight:700;font-size:20px}.selected-row td{background-color:#d3edf8}.hover-row{background-color:#ebf7fc}.red{color:red}@media (max-width: 1086px){table td,table th{padding:3px!important;width:auto!important}}td,th{padding:.5rem 1rem;font-size:14px}th{background-color:#f6f6f6;text-align:left;position:sticky;top:0;z-index:2;border-top:2px solid #E5E4E7}td{border-bottom:2px solid #E5E4E7;border-top:2px solid #E5E4E7}.dots{width:fit-content}.draggable{cursor:grabbing}.dragCol{padding-left:0!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;font-size:1.5em;text-align:center;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dragdrop-placeholder{background:#ccc;border:dotted 3px #999;min-height:30px;transition:transform .1s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "pipe", type: WhiteSpaceFillerPipe, name: "blankFiller" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: TableSortHeaderComponent, selector: "lib-table-sort-header", inputs: ["selected"], outputs: ["sort"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [fader] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-table', animations: [fader], imports: [
+                        WhiteSpaceFillerPipe,
+                        MatMenuModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        TableSortHeaderComponent,
+                        DragDropModule
+                    ], template: "<div class=\"flexer\">\r\n  @if (config().title) {\r\n    <div class=\"row-heading-labels mb05\">{{config().title}}</div>\r\n  }\r\n  <ng-content select=\".upper-part\"></ng-content>\r\n  @if (config().withAdd) {\r\n    <div class=\"flexer action pointer gap05 mb05\" (click)=\"action.emit({action: 'add'})\">\r\n      <mat-icon>add_circle_outline</mat-icon>\r\n      <div>add</div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"scroll\" #scrollContainer (scroll)=\"onScroll()\">\r\n  <table [class.with-options]=\"config().options?.length\">\r\n    <thead>\r\n      <tr>\r\n        @for (heading of config().tableHeadings; track heading; let i = $index) {\r\n          <th>\r\n            <div class=\"flexer gap05\">\r\n              {{heading}}\r\n              @if (config().sortable && !config().draggable) {\r\n                <lib-table-sort-header\r\n                  [selected]=\"currentSortColumn === i\"\r\n                  (click)=\"currentSortColumn = i\"\r\n                  (sort)=\"sortByProp(config().dataProps[i], $event)\"\r\n                />\r\n              }\r\n            </div>\r\n          </th>\r\n        }\r\n        @if (config().options?.length) {\r\n          <th></th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    @if (config().draggable) {\r\n      <tbody cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n        @for (obj of config().data; track trackById(i, obj); let i = $index) {\r\n          <tr\r\n            (mouseover)=\"hoverRowIndex = i\"\r\n            (mouseleave)=\"hoverRowIndex = -1\"\r\n            cdkDrag cdkDragLockAxis=\"y\"\r\n            [class.pointer]=\"config().selectableRows\"\r\n            [class.hover-row]=\"hoverRowIndex == i\"\r\n            [class.selected-row]=\"config().selectableRows && selectedRowIndex == i\"\r\n            (click)=\"onRowClick($event, obj, i)\"\r\n            @fadeInOut>\r\n            @for (prop of config().dataProps; track prop; let cellIndex = $index) {\r\n              <td\r\n                [class.dragCol]=\"cellIndex === 0\">\r\n                <div class=\"data\" [classList]=\"getClass(obj, prop)\"\r\n                  [class.flexer]=\"cellIndex === 0\">\r\n                  @if (cellIndex === 0) {\r\n                    <mat-icon class=\"draggable\" cdkDragHandle>\r\n                      drag_indicator\r\n                    </mat-icon>\r\n                  }\r\n                  {{obj[prop] | blankFiller}}\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (config().options?.length) {\r\n              <td class=\"right-align\" (click)=\"$event.stopPropagation()\">\r\n                <button mat-icon-button class=\"pointer dots right\" [matMenuTriggerFor]=\"optionsMenu\">\r\n                  <mat-icon>more_vert</mat-icon>\r\n                </button>\r\n                <mat-menu #optionsMenu=\"matMenu\">\r\n                  @for (option of config().options; track option) {\r\n                    <div\r\n                      mat-menu-item (click)=\"selectOption(option, obj, i)\"\r\n                      [class.red]=\"option == 'Remove' || option == 'Delete'\">\r\n                      {{option}}\r\n                    </div>\r\n                  }\r\n                </mat-menu>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    } @else {\r\n      <tbody>\r\n        @for (obj of config().data; track trackById(i, obj); let i = $index) {\r\n          <tr\r\n            (mouseover)=\"hoverRowIndex = i\"\r\n            (mouseleave)=\"hoverRowIndex = -1\"\r\n            [class.pointer]=\"config().selectableRows\"\r\n            [class.hover-row]=\"hoverRowIndex == i\"\r\n            [class.selected-row]=\"config().selectableRows && selectedRowIndex == i\"\r\n            (click)=\"onRowClick($event, obj, i)\"\r\n            @fadeInOut>\r\n            @for (prop of config().dataProps; track prop; let cellIndex = $index) {\r\n              <td>\r\n                <div class=\"data\" [classList]=\"getClass(obj, prop)\">\r\n                  {{obj[prop] | blankFiller}}\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (config().options?.length) {\r\n              <td class=\"right-align\" (click)=\"$event.stopPropagation()\">\r\n                <button mat-icon-button class=\"pointer dots right\" [matMenuTriggerFor]=\"optionsMenu\">\r\n                  <mat-icon>more_vert</mat-icon>\r\n                </button>\r\n                <mat-menu #optionsMenu=\"matMenu\">\r\n                  @for (option of config().options; track option) {\r\n                    <div\r\n                      mat-menu-item (click)=\"selectOption(option, obj, i)\"\r\n                      [class.red]=\"option == 'Remove' || option == 'Delete'\">\r\n                      {{option}}\r\n                    </div>\r\n                  }\r\n                </mat-menu>\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    }\r\n  </table>\r\n</div>", styles: [".scroll{overflow-y:auto;max-height:94%}table{width:100%;border-collapse:collapse;border-spacing:0px}table.with-options td{padding-block:3px!important}.flexer{display:flex;align-items:center}.action{color:#009ddc;font-weight:500;text-align:right;margin-left:auto}.pointer{cursor:pointer}.gap05{gap:.5rem}.mb05{margin-bottom:.5}.data{white-space:pre-wrap}.row-heading-labels{font-weight:700;font-size:20px}.selected-row td{background-color:#d3edf8}.hover-row{background-color:#ebf7fc}.red{color:red}@media (max-width: 1086px){table td,table th{padding:3px!important;width:auto!important}}td,th{padding:.5rem 1rem;font-size:14px}th{background-color:#f6f6f6;text-align:left;position:sticky;top:0;z-index:2;border-top:2px solid #E5E4E7}td{border-bottom:2px solid #E5E4E7;border-top:2px solid #E5E4E7}.dots{width:fit-content}.draggable{cursor:grabbing}.dragCol{padding-left:0!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;font-size:1.5em;text-align:center;opacity:.8;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.dragdrop-placeholder{background:#ccc;border:dotted 3px #999;min-height:30px;transition:transform .1s cubic-bezier(0,0,.2,1)}\n"] }]
+        }] });
+
+class LoaderService {
+    constructor() {
+        this.loadingSubject = new BehaviorSubject(false);
+        this.loading$ = this.loadingSubject.asObservable();
+    }
+    setLoading(loadingState) {
+        this.loadingSubject.next(loadingState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class GlobalLoaderComponent {
+    constructor() {
+        this.loaderService = inject(LoaderService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GlobalLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: GlobalLoaderComponent, isStandalone: true, selector: "lib-global-loader", ngImport: i0, template: "@if (loaderService.loading$ | async) {\r\n  <div class=\"loader\">\r\n    <mat-spinner />\r\n  </div>\r\n}", styles: [".loader{display:flex;justify-content:center;align-items:center;height:100%;width:100%;position:fixed;top:0;left:0;background-color:#0003;z-index:9999}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: GlobalLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-global-loader', imports: [
+                        AsyncPipe,
+                        MatProgressSpinnerModule
+                    ], template: "@if (loaderService.loading$ | async) {\r\n  <div class=\"loader\">\r\n    <mat-spinner />\r\n  </div>\r\n}", styles: [".loader{display:flex;justify-content:center;align-items:center;height:100%;width:100%;position:fixed;top:0;left:0;background-color:#0003;z-index:9999}\n"] }]
+        }] });
+
+class ErrorService {
+    constructor() {
+        this.errorSubject = new Subject();
+        this.error$ = this.errorSubject.asObservable();
+    }
+    sendError(error) {
+        this.errorSubject.next(error);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const HTTP_STATUS_CODES = {
+    100: 'Continue',
+    101: 'Switching Protocols',
+    102: 'Processing',
+    103: 'Early Hints',
+    200: 'OK',
+    201: 'Created',
+    202: 'Accepted',
+    203: 'Non-Authoritative Information',
+    204: 'No Content',
+    205: 'Reset Content',
+    206: 'Partial Content',
+    207: 'Multi-Status',
+    208: 'Already Reported',
+    226: 'IM Used',
+    300: 'Multiple Choices',
+    301: 'Moved Permanently',
+    302: 'Found',
+    303: 'See Other',
+    304: 'Not Modified',
+    305: 'Use Proxy',
+    306: '(Unused)',
+    307: 'Temporary Redirect',
+    308: 'Permanent Redirect',
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    402: 'Payment Required',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    406: 'Not Acceptable',
+    407: 'Proxy Authentication Required',
+    408: 'Request Timeout',
+    409: 'Conflict',
+    410: 'Gone',
+    411: 'Length Required',
+    412: 'Precondition Failed',
+    413: 'Payload Too Large',
+    414: 'URI Too Long',
+    415: 'Unsupported Media Type',
+    416: 'Range Not Satisfiable',
+    417: 'Expectation Failed',
+    418: "I'm a teapot",
+    421: 'Misdirected Request',
+    422: 'Unprocessable Entity',
+    423: 'Locked',
+    424: 'Failed Dependency',
+    425: 'Too Early',
+    426: 'Upgrade Required',
+    428: 'Precondition Required',
+    429: 'Too Many Requests',
+    431: 'Request Header Fields Too Large',
+    451: 'Unavailable For Legal Reasons',
+    500: 'Internal Server Error',
+    501: 'Not Implemented',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout',
+    505: 'HTTP Version Not Supported',
+    506: 'Variant Also Negotiates',
+    507: 'Insufficient Storage',
+    508: 'Loop Detected',
+    510: 'Not Extended',
+    511: 'Network Authentication Required'
+};
+
+class ErrorPopupComponent {
+    constructor(error) {
+        this.error = error;
+        this.httpStatusCodes = HTTP_STATUS_CODES;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorPopupComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: ErrorPopupComponent, isStandalone: true, selector: "lib-error-popup", ngImport: i0, template: "<lib-default-dialog [dialogTitle]=\"'\u0410n error has occurred'\">\r\n  <div class=\"dialog-content\">\r\n    <div class=\"status-info\">\r\n      <div>{{ error.status }}</div>\r\n      @if (error.status) {\r\n        <div>{{ httpStatusCodes[error.status] }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"error-info\">\r\n      <lib-error-dispaly [error]=\"error\" />\r\n    </div>\r\n  </div>\r\n</lib-default-dialog>", styles: [".dialog-content{display:flex;flex-direction:column;align-items:center;padding-inline:1rem}.dialog-content .status-info{display:flex;margin-bottom:.5rem;font-weight:600;font-size:18px;gap:.5rem}.dialog-content .error-info{display:grid;place-items:center}\n"], dependencies: [{ kind: "component", type: DefaultDialogComponent, selector: "lib-default-dialog", inputs: ["temRef", "height", "dialogTitle", "withBack"], outputs: ["back"] }, { kind: "component", type: ErrorDispalyComponent, selector: "lib-error-dispaly", inputs: ["error"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-error-popup', imports: [
+                        DefaultDialogComponent,
+                        ErrorDispalyComponent
+                    ], template: "<lib-default-dialog [dialogTitle]=\"'\u0410n error has occurred'\">\r\n  <div class=\"dialog-content\">\r\n    <div class=\"status-info\">\r\n      <div>{{ error.status }}</div>\r\n      @if (error.status) {\r\n        <div>{{ httpStatusCodes[error.status] }}</div>\r\n      }\r\n    </div>\r\n    <div class=\"error-info\">\r\n      <lib-error-dispaly [error]=\"error\" />\r\n    </div>\r\n  </div>\r\n</lib-default-dialog>", styles: [".dialog-content{display:flex;flex-direction:column;align-items:center;padding-inline:1rem}.dialog-content .status-info{display:flex;margin-bottom:.5rem;font-weight:600;font-size:18px;gap:.5rem}.dialog-content .error-info{display:grid;place-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1$4.HttpErrorResponse, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class ErrorHandlerComponent {
+    constructor() {
+        this.errSubscriptions = new Subscription();
+        this.errorService = inject(ErrorService);
+        this.dialog = inject(MatDialog);
+        this.errSubscriptions.add(this.errorService.error$.subscribe((err) => {
+            console.log(err);
+            this.showPopup(err);
+        }));
+    }
+    showPopup(error) {
+        this.dialog.closeAll();
+        this.dialog.open(ErrorPopupComponent, {
+            data: error,
+            width: '400px',
+            scrollStrategy: new NoopScrollStrategy(),
+        });
+    }
+    ngOnDestroy() {
+        this.errSubscriptions.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorHandlerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ErrorHandlerComponent, isStandalone: true, selector: "lib-error-handler", ngImport: i0, template: "", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ErrorHandlerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-error-handler', imports: [
+                        MatDialogModule
+                    ], template: "" }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of ui-lib
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DefaultDialogComponent, ErrorDispalyComponent, ErrorHandlerComponent, ErrorService, FieldsMatchValidatorDirective, GlobalLoaderComponent, LoaderService, PasswordValidatorDirective, PhoneValidationDirective, SearchBarComponent, SnakeCaseParserPipe, TableComponent, TableSortHeaderComponent, WhiteSpaceFillerPipe, fader, openDropdown, textFader };
+//# sourceMappingURL=ferhaps-easy-ui-lib.mjs.map