@ferhaps/easy-ui-lib 19.2.1 → 20.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -13
- package/fesm2022/ferhaps-easy-ui-lib.mjs +95 -56
- package/fesm2022/ferhaps-easy-ui-lib.mjs.map +1 -1
- package/index.d.ts +162 -5
- package/package.json +5 -5
- package/lib/components/default-dialog/default-dialog.component.d.ts +0 -11
- package/lib/components/error-dispaly.component.d.ts +0 -10
- package/lib/components/error-handler/error-handler.component.d.ts +0 -12
- package/lib/components/error-handler/error-popup/error-popup.component.d.ts +0 -9
- package/lib/components/global-loader/global-loader.component.d.ts +0 -7
- package/lib/components/search-bar.component.d.ts +0 -10
- package/lib/components/table/table.component.d.ts +0 -45
- package/lib/components/table-sort-header/table-sort-header.component.d.ts +0 -10
- package/lib/directives/fields-match-validator.directive.d.ts +0 -10
- package/lib/directives/password-validator.directive.d.ts +0 -7
- package/lib/directives/phone-validation.directive.d.ts +0 -7
- package/lib/pipes/blank-filler.pipe.d.ts +0 -7
- package/lib/pipes/snake-case-parser.pipe.d.ts +0 -7
- package/lib/services/error.service.d.ts +0 -9
- package/lib/services/loader.service.d.ts +0 -8
- package/lib/utils/animations.d.ts +0 -2
- package/lib/utils/types.d.ts +0 -2
- package/lib/utils/utils.d.ts +0 -1
- package/public-api.d.ts +0 -16
package/README.md
CHANGED
|
@@ -26,7 +26,7 @@ A feature-rich table component supporting:
|
|
|
26
26
|
- Infinite scroll
|
|
27
27
|
- Customizable styles
|
|
28
28
|
|
|
29
|
-
```
|
|
29
|
+
```html
|
|
30
30
|
<lib-table
|
|
31
31
|
[config]="{
|
|
32
32
|
data: items,
|
|
@@ -46,7 +46,8 @@ A feature-rich table component supporting:
|
|
|
46
46
|
|
|
47
47
|
### SearchBarComponent
|
|
48
48
|
A styled search input with debounce functionality.
|
|
49
|
-
|
|
49
|
+
The search event emits either a string or Event. Event is emitted when the "X" button is pressed
|
|
50
|
+
```html
|
|
50
51
|
<lib-search-bar
|
|
51
52
|
[for]="'users'"
|
|
52
53
|
(search)="onSearch($event)">
|
|
@@ -55,7 +56,7 @@ A styled search input with debounce functionality.
|
|
|
55
56
|
|
|
56
57
|
### DefaultDialogComponent
|
|
57
58
|
A customizable dialog component with optional back button.
|
|
58
|
-
```
|
|
59
|
+
```html
|
|
59
60
|
<lib-default-dialog
|
|
60
61
|
[dialogTitle]="'User Details'"
|
|
61
62
|
[height]="'400px'"
|
|
@@ -69,9 +70,11 @@ A customizable dialog component with optional back button.
|
|
|
69
70
|
|
|
70
71
|
### GlobalLoaderComponent
|
|
71
72
|
A centered spinner overlay for loading states.
|
|
72
|
-
```
|
|
73
|
+
```html
|
|
73
74
|
<lib-global-loader />
|
|
75
|
+
```
|
|
74
76
|
|
|
77
|
+
``` typescript
|
|
75
78
|
private loaderService = inject(LoaderService);
|
|
76
79
|
this.loaderService.setLoading(true);
|
|
77
80
|
// do stuff
|
|
@@ -80,9 +83,10 @@ this.loaderService.setLoading(false);
|
|
|
80
83
|
|
|
81
84
|
### ErrorHandlerComponent
|
|
82
85
|
Displays error messages in a dialog format.
|
|
83
|
-
```
|
|
86
|
+
```html
|
|
84
87
|
<lib-error-handler />
|
|
85
|
-
|
|
88
|
+
```
|
|
89
|
+
``` typescript
|
|
86
90
|
private errorService = inject(ErrorService);
|
|
87
91
|
try {
|
|
88
92
|
this.apiCall();
|
|
@@ -96,7 +100,7 @@ catch (e: HttpErrorResponse) {
|
|
|
96
100
|
|
|
97
101
|
### FieldsMatchValidatorDirective
|
|
98
102
|
Validates if two form fields match (useful for password confirmation).
|
|
99
|
-
```
|
|
103
|
+
```html
|
|
100
104
|
<input type="password" />
|
|
101
105
|
<input type="password-repeat" [libFieldsMatchValidator]="'password'" />
|
|
102
106
|
```
|
|
@@ -109,7 +113,7 @@ Ensures password meets the following requirments:
|
|
|
109
113
|
* At least one number
|
|
110
114
|
* Minimum length of 8 characters
|
|
111
115
|
|
|
112
|
-
```
|
|
116
|
+
```html
|
|
113
117
|
<input type="password" libPasswordValidator />
|
|
114
118
|
```
|
|
115
119
|
|
|
@@ -122,7 +126,7 @@ If missing, automatically prepends it to the value
|
|
|
122
126
|
|
|
123
127
|
* Prevents removing the initial '+' symbol:
|
|
124
128
|
|
|
125
|
-
```
|
|
129
|
+
```html
|
|
126
130
|
<input type="tel" libPhoneValidation />
|
|
127
131
|
```
|
|
128
132
|
|
|
@@ -130,14 +134,14 @@ If missing, automatically prepends it to the value
|
|
|
130
134
|
|
|
131
135
|
### BlankFillerPipe
|
|
132
136
|
Replaces empty values with a specified character.
|
|
133
|
-
```
|
|
134
|
-
{{ someValue | blankFiller:'-' }}
|
|
137
|
+
```html
|
|
138
|
+
<div>{{ someValue | blankFiller:'-' }}</div>
|
|
135
139
|
```
|
|
136
140
|
|
|
137
141
|
### SnakeCaseParserPipe
|
|
138
142
|
Converts snake_case to Title Case text.
|
|
139
|
-
```
|
|
140
|
-
{{ 'user_name' | snakeCaseParser }} <!-- Output: User name -->
|
|
143
|
+
```html
|
|
144
|
+
<div>{{ 'user_name' | snakeCaseParser }}</div> <!-- Output: User name -->
|
|
141
145
|
```
|
|
142
146
|
|
|
143
147
|
## Services
|
|
@@ -163,6 +167,19 @@ catch (e: HttpErrorResponse) {
|
|
|
163
167
|
}
|
|
164
168
|
```
|
|
165
169
|
|
|
170
|
+
## Animations
|
|
171
|
+
|
|
172
|
+
### Fade animation when the element appears and disappears
|
|
173
|
+
```html
|
|
174
|
+
<div @fadeInOut>Some text</div>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Text fader
|
|
178
|
+
The text of the element will fade in/out whenever it changes
|
|
179
|
+
```html
|
|
180
|
+
<div [@textFader]="someValue">{{ someValue }}</div>
|
|
181
|
+
```
|
|
182
|
+
|
|
166
183
|
## Contributing
|
|
167
184
|
Please read our contributing guidelines and code of conduct before submitting pull requests.
|
|
168
185
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, input, Directive, HostListener, output,
|
|
2
|
+
import { Pipe, input, Directive, HostListener, output, Input, Component, viewChild, Injectable, inject, Inject } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/forms';
|
|
4
4
|
import { NG_VALIDATORS, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i1$1 from '@angular/material/icon';
|
|
@@ -29,10 +29,10 @@ class WhiteSpaceFillerPipe {
|
|
|
29
29
|
}
|
|
30
30
|
return value ? value : fillWith;
|
|
31
31
|
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
33
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
32
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WhiteSpaceFillerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
33
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: WhiteSpaceFillerPipe, isStandalone: true, name: "blankFiller" }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WhiteSpaceFillerPipe, decorators: [{
|
|
36
36
|
type: Pipe,
|
|
37
37
|
args: [{
|
|
38
38
|
name: 'blankFiller',
|
|
@@ -49,10 +49,10 @@ class SnakeCaseParserPipe {
|
|
|
49
49
|
}
|
|
50
50
|
return '';
|
|
51
51
|
}
|
|
52
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
53
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
52
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SnakeCaseParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
53
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: SnakeCaseParserPipe, isStandalone: true, name: "snakeCaseParser" }); }
|
|
54
54
|
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SnakeCaseParserPipe, decorators: [{
|
|
56
56
|
type: Pipe,
|
|
57
57
|
args: [{
|
|
58
58
|
name: 'snakeCaseParser',
|
|
@@ -61,7 +61,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
61
61
|
|
|
62
62
|
class FieldsMatchValidatorDirective {
|
|
63
63
|
constructor() {
|
|
64
|
-
this.fieldToMatch = input.required();
|
|
64
|
+
this.fieldToMatch = input.required(...(ngDevMode ? [{ debugName: "fieldToMatch" }] : []));
|
|
65
65
|
}
|
|
66
66
|
validate(control) {
|
|
67
67
|
const value = control.value;
|
|
@@ -77,8 +77,8 @@ class FieldsMatchValidatorDirective {
|
|
|
77
77
|
}
|
|
78
78
|
return null;
|
|
79
79
|
}
|
|
80
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
81
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
80
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FieldsMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
81
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: FieldsMatchValidatorDirective, isStandalone: true, selector: "[libFieldsMatchValidator]", inputs: { fieldToMatch: { classPropertyName: "fieldToMatch", publicName: "fieldToMatch", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
82
82
|
{
|
|
83
83
|
provide: NG_VALIDATORS,
|
|
84
84
|
useExisting: FieldsMatchValidatorDirective,
|
|
@@ -86,7 +86,7 @@ class FieldsMatchValidatorDirective {
|
|
|
86
86
|
},
|
|
87
87
|
], ngImport: i0 }); }
|
|
88
88
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FieldsMatchValidatorDirective, decorators: [{
|
|
90
90
|
type: Directive,
|
|
91
91
|
args: [{
|
|
92
92
|
selector: '[libFieldsMatchValidator]',
|
|
@@ -117,10 +117,10 @@ class PhoneValidationDirective {
|
|
|
117
117
|
event.preventDefault();
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
121
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PhoneValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
121
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: PhoneValidationDirective, isStandalone: true, selector: "[libPhoneValidation]", host: { listeners: { "input": "onInput($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
|
|
122
122
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PhoneValidationDirective, decorators: [{
|
|
124
124
|
type: Directive,
|
|
125
125
|
args: [{
|
|
126
126
|
selector: '[libPhoneValidation]',
|
|
@@ -142,8 +142,8 @@ class PasswordValidatorDirective {
|
|
|
142
142
|
}
|
|
143
143
|
return null;
|
|
144
144
|
}
|
|
145
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
146
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PasswordValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
146
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: PasswordValidatorDirective, isStandalone: true, selector: "[libPasswordValidator]", providers: [
|
|
147
147
|
{
|
|
148
148
|
provide: NG_VALIDATORS,
|
|
149
149
|
useExisting: PasswordValidatorDirective,
|
|
@@ -151,7 +151,7 @@ class PasswordValidatorDirective {
|
|
|
151
151
|
}
|
|
152
152
|
], ngImport: i0 }); }
|
|
153
153
|
}
|
|
154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PasswordValidatorDirective, decorators: [{
|
|
155
155
|
type: Directive,
|
|
156
156
|
args: [{
|
|
157
157
|
selector: '[libPasswordValidator]',
|
|
@@ -167,28 +167,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
167
167
|
|
|
168
168
|
class DefaultDialogComponent {
|
|
169
169
|
constructor() {
|
|
170
|
-
this.height = input();
|
|
171
|
-
this.dialogTitle = input();
|
|
172
|
-
this.withBack = input();
|
|
170
|
+
this.height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
|
|
171
|
+
this.dialogTitle = input(...(ngDevMode ? [undefined, { debugName: "dialogTitle" }] : []));
|
|
172
|
+
this.withBack = input(...(ngDevMode ? [undefined, { debugName: "withBack" }] : []));
|
|
173
173
|
this.back = output();
|
|
174
174
|
}
|
|
175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
175
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DefaultDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
176
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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;position:absolute;left:1rem}.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"] }] }); }
|
|
177
177
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DefaultDialogComponent, decorators: [{
|
|
179
179
|
type: Component,
|
|
180
180
|
args: [{ selector: 'lib-default-dialog', imports: [
|
|
181
181
|
CommonModule,
|
|
182
182
|
MatIconModule,
|
|
183
183
|
MatDialogModule
|
|
184
|
-
], 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;
|
|
184
|
+
], 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;position:absolute;left:1rem}.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"] }]
|
|
185
185
|
}], propDecorators: { temRef: [{
|
|
186
186
|
type: Input
|
|
187
187
|
}] } });
|
|
188
188
|
|
|
189
189
|
class ErrorDispalyComponent {
|
|
190
190
|
constructor() {
|
|
191
|
-
this.error = input.required();
|
|
191
|
+
this.error = input.required(...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
192
192
|
this.displayError = '';
|
|
193
193
|
}
|
|
194
194
|
ngOnInit() {
|
|
@@ -210,10 +210,10 @@ class ErrorDispalyComponent {
|
|
|
210
210
|
this.displayError = 'Unknown error';
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
213
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorDispalyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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" }] }); }
|
|
215
215
|
}
|
|
216
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorDispalyComponent, decorators: [{
|
|
217
217
|
type: Component,
|
|
218
218
|
args: [{ selector: 'lib-error-dispaly', imports: [
|
|
219
219
|
SnakeCaseParserPipe
|
|
@@ -222,18 +222,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
222
222
|
|
|
223
223
|
class SearchBarComponent {
|
|
224
224
|
constructor() {
|
|
225
|
-
this.for = input.required();
|
|
225
|
+
this.for = input.required(...(ngDevMode ? [{ debugName: "for" }] : []));
|
|
226
226
|
this.search = output();
|
|
227
227
|
this.searchForm = new FormGroup({
|
|
228
228
|
search: new FormControl('')
|
|
229
229
|
});
|
|
230
230
|
this.searchForm.get('search')?.valueChanges.
|
|
231
231
|
pipe(debounceTime(1000), distinctUntilChanged()).subscribe((searchTerm) => {
|
|
232
|
-
|
|
232
|
+
if (typeof searchTerm === 'string') {
|
|
233
|
+
searchTerm = searchTerm.trim();
|
|
234
|
+
}
|
|
235
|
+
this.search.emit(searchTerm);
|
|
233
236
|
});
|
|
234
237
|
}
|
|
235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
238
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
239
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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: `
|
|
237
240
|
<form class="search-bar" [formGroup]="searchForm">
|
|
238
241
|
<mat-icon>search</mat-icon>
|
|
239
242
|
<input class="search-input" type="search" name="field"
|
|
@@ -241,7 +244,7 @@ class SearchBarComponent {
|
|
|
241
244
|
</form>
|
|
242
245
|
`, 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"] }] }); }
|
|
243
246
|
}
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
245
248
|
type: Component,
|
|
246
249
|
args: [{ selector: 'lib-search-bar', template: `
|
|
247
250
|
<form class="search-bar" [formGroup]="searchForm">
|
|
@@ -273,7 +276,7 @@ const textFader = trigger('textFader', [
|
|
|
273
276
|
|
|
274
277
|
class TableSortHeaderComponent {
|
|
275
278
|
constructor() {
|
|
276
|
-
this.selected = input.required();
|
|
279
|
+
this.selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
277
280
|
this.sort = output();
|
|
278
281
|
this.sortState = 'none';
|
|
279
282
|
}
|
|
@@ -289,10 +292,10 @@ class TableSortHeaderComponent {
|
|
|
289
292
|
}
|
|
290
293
|
this.sort.emit(this.sortState);
|
|
291
294
|
}
|
|
292
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
293
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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"] }] }); }
|
|
294
297
|
}
|
|
295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableSortHeaderComponent, decorators: [{
|
|
296
299
|
type: Component,
|
|
297
300
|
args: [{ selector: 'lib-table-sort-header', imports: [
|
|
298
301
|
MatIconModule,
|
|
@@ -301,7 +304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
301
304
|
|
|
302
305
|
class TableComponent {
|
|
303
306
|
constructor() {
|
|
304
|
-
this.config = input.required();
|
|
307
|
+
this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
305
308
|
this.action = output();
|
|
306
309
|
this.scrollContainer = viewChild.required('scrollContainer');
|
|
307
310
|
this.selectedRowIndex = -1;
|
|
@@ -341,10 +344,10 @@ class TableComponent {
|
|
|
341
344
|
sortByProp(prop, sortState) {
|
|
342
345
|
this.action.emit({ action: 'sort', prop, sortState });
|
|
343
346
|
}
|
|
344
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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; let i = $index; track i;) {\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; let i = $index; track i;) {\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: "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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "cdkDropListHasAnchor"], 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"] }, { kind: "pipe", type: WhiteSpaceFillerPipe, name: "blankFiller" }], animations: [fader] }); }
|
|
346
349
|
}
|
|
347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
348
351
|
type: Component,
|
|
349
352
|
args: [{ selector: 'lib-table', animations: [fader], imports: [
|
|
350
353
|
WhiteSpaceFillerPipe,
|
|
@@ -364,10 +367,13 @@ class LoaderService {
|
|
|
364
367
|
setLoading(loadingState) {
|
|
365
368
|
this.loadingSubject.next(loadingState);
|
|
366
369
|
}
|
|
367
|
-
|
|
368
|
-
|
|
370
|
+
isLoading() {
|
|
371
|
+
return this.loadingSubject.getValue();
|
|
372
|
+
}
|
|
373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
374
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoaderService, providedIn: 'root' }); }
|
|
369
375
|
}
|
|
370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoaderService, decorators: [{
|
|
371
377
|
type: Injectable,
|
|
372
378
|
args: [{
|
|
373
379
|
providedIn: 'root'
|
|
@@ -378,10 +384,10 @@ class GlobalLoaderComponent {
|
|
|
378
384
|
constructor() {
|
|
379
385
|
this.loaderService = inject(LoaderService);
|
|
380
386
|
}
|
|
381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
382
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GlobalLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
388
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
383
389
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GlobalLoaderComponent, decorators: [{
|
|
385
391
|
type: Component,
|
|
386
392
|
args: [{ selector: 'lib-global-loader', imports: [
|
|
387
393
|
AsyncPipe,
|
|
@@ -397,10 +403,10 @@ class ErrorService {
|
|
|
397
403
|
sendError(error) {
|
|
398
404
|
this.errorSubject.next(error);
|
|
399
405
|
}
|
|
400
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
401
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
406
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
407
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorService, providedIn: 'root' }); }
|
|
402
408
|
}
|
|
403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorService, decorators: [{
|
|
404
410
|
type: Injectable,
|
|
405
411
|
args: [{
|
|
406
412
|
providedIn: 'root'
|
|
@@ -472,16 +478,49 @@ const HTTP_STATUS_CODES = {
|
|
|
472
478
|
510: 'Not Extended',
|
|
473
479
|
511: 'Network Authentication Required'
|
|
474
480
|
};
|
|
481
|
+
const JSON_HTTP_OPTIONS = {
|
|
482
|
+
headers: {
|
|
483
|
+
'Accept': 'application/json',
|
|
484
|
+
'Accept-language': 'bg',
|
|
485
|
+
},
|
|
486
|
+
responseType: 'json'
|
|
487
|
+
};
|
|
488
|
+
const STRING_HTTP_OPTIONS = {
|
|
489
|
+
responseType: 'text'
|
|
490
|
+
};
|
|
491
|
+
const BLOB_HTTP_OPTIONS = {
|
|
492
|
+
headers: {
|
|
493
|
+
'Content-type': 'application/octet-stream',
|
|
494
|
+
'Accept-language': 'bg',
|
|
495
|
+
},
|
|
496
|
+
responseType: 'blob',
|
|
497
|
+
};
|
|
498
|
+
const SKIP_ERROR_OPTIONS = {
|
|
499
|
+
headers: {
|
|
500
|
+
'Accept': 'application/json',
|
|
501
|
+
'Accept-language': 'bg',
|
|
502
|
+
'X-Skip-Error': 'true',
|
|
503
|
+
},
|
|
504
|
+
responseType: 'json',
|
|
505
|
+
};
|
|
506
|
+
const JSON_OPTIONS_WITH_GLOBAL_LOADER = {
|
|
507
|
+
headers: {
|
|
508
|
+
'Accept': 'application/json',
|
|
509
|
+
'Accept-language': 'bg',
|
|
510
|
+
'X-Global-Loader': 'true',
|
|
511
|
+
},
|
|
512
|
+
responseType: 'json'
|
|
513
|
+
};
|
|
475
514
|
|
|
476
515
|
class ErrorPopupComponent {
|
|
477
516
|
constructor(error) {
|
|
478
517
|
this.error = error;
|
|
479
518
|
this.httpStatusCodes = HTTP_STATUS_CODES;
|
|
480
519
|
}
|
|
481
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorPopupComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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"] }] }); }
|
|
483
522
|
}
|
|
484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorPopupComponent, decorators: [{
|
|
485
524
|
type: Component,
|
|
486
525
|
args: [{ selector: 'lib-error-popup', imports: [
|
|
487
526
|
DefaultDialogComponent,
|
|
@@ -514,10 +553,10 @@ class ErrorHandlerComponent {
|
|
|
514
553
|
ngOnDestroy() {
|
|
515
554
|
this.errSubscriptions.unsubscribe();
|
|
516
555
|
}
|
|
517
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
518
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
556
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorHandlerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
557
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: ErrorHandlerComponent, isStandalone: true, selector: "lib-error-handler", ngImport: i0, template: "", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }] }); }
|
|
519
558
|
}
|
|
520
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorHandlerComponent, decorators: [{
|
|
521
560
|
type: Component,
|
|
522
561
|
args: [{ selector: 'lib-error-handler', imports: [
|
|
523
562
|
MatDialogModule
|