@ferhaps/easy-ui-lib 19.2.2 → 20.0.2
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 +3 -22
- package/fesm2022/ferhaps-easy-ui-lib.mjs +65 -95
- package/fesm2022/ferhaps-easy-ui-lib.mjs.map +1 -1
- package/index.d.ts +152 -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 -9
- package/lib/utils/animations.d.ts +0 -2
- package/lib/utils/types.d.ts +0 -2
- package/lib/utils/utils.d.ts +0 -6
- package/public-api.d.ts +0 -16
package/README.md
CHANGED
|
@@ -11,9 +11,9 @@ npm install @ferhaps/easy-ui-lib
|
|
|
11
11
|
## Dependencies
|
|
12
12
|
|
|
13
13
|
This library requires:
|
|
14
|
-
- Angular ^
|
|
15
|
-
- Angular Material ^
|
|
16
|
-
- Angular CDK ^
|
|
14
|
+
- Angular ^20.3.3
|
|
15
|
+
- Angular Material ^20.2.7
|
|
16
|
+
- Angular CDK ^20.3.3
|
|
17
17
|
|
|
18
18
|
## Components
|
|
19
19
|
|
|
@@ -132,12 +132,6 @@ If missing, automatically prepends it to the value
|
|
|
132
132
|
|
|
133
133
|
## Pipes
|
|
134
134
|
|
|
135
|
-
### BlankFillerPipe
|
|
136
|
-
Replaces empty values with a specified character.
|
|
137
|
-
```html
|
|
138
|
-
<div>{{ someValue | blankFiller:'-' }}</div>
|
|
139
|
-
```
|
|
140
|
-
|
|
141
135
|
### SnakeCaseParserPipe
|
|
142
136
|
Converts snake_case to Title Case text.
|
|
143
137
|
```html
|
|
@@ -167,19 +161,6 @@ catch (e: HttpErrorResponse) {
|
|
|
167
161
|
}
|
|
168
162
|
```
|
|
169
163
|
|
|
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
|
-
|
|
183
164
|
## Contributing
|
|
184
165
|
Please read our contributing guidelines and code of conduct before submitting pull requests.
|
|
185
166
|
|
|
@@ -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';
|
|
@@ -11,7 +11,6 @@ import { CommonModule, AsyncPipe } from '@angular/common';
|
|
|
11
11
|
import * as i1$4 from '@angular/common/http';
|
|
12
12
|
import { HttpErrorResponse } from '@angular/common/http';
|
|
13
13
|
import { debounceTime, distinctUntilChanged, BehaviorSubject, Subject, Subscription } from 'rxjs';
|
|
14
|
-
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
15
14
|
import * as i1$2 from '@angular/material/menu';
|
|
16
15
|
import { MatMenuModule } from '@angular/material/menu';
|
|
17
16
|
import * as i3$1 from '@angular/material/button';
|
|
@@ -22,37 +21,23 @@ import * as i1$3 from '@angular/material/progress-spinner';
|
|
|
22
21
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
23
22
|
import { NoopScrollStrategy } from '@angular/cdk/overlay';
|
|
24
23
|
|
|
25
|
-
class WhiteSpaceFillerPipe {
|
|
26
|
-
transform(value, fillWith = '-') {
|
|
27
|
-
if (value === 0) {
|
|
28
|
-
return '0';
|
|
29
|
-
}
|
|
30
|
-
return value ? value : fillWith;
|
|
31
|
-
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: WhiteSpaceFillerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
33
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: WhiteSpaceFillerPipe, isStandalone: true, name: "blankFiller" }); }
|
|
34
|
-
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: WhiteSpaceFillerPipe, decorators: [{
|
|
36
|
-
type: Pipe,
|
|
37
|
-
args: [{
|
|
38
|
-
name: 'blankFiller',
|
|
39
|
-
}]
|
|
40
|
-
}] });
|
|
41
|
-
|
|
42
24
|
class SnakeCaseParserPipe {
|
|
43
|
-
transform(
|
|
44
|
-
if (
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
25
|
+
transform(value) {
|
|
26
|
+
if (value) {
|
|
27
|
+
if (typeof value === 'string') {
|
|
28
|
+
let temp = value.split('_').map(word => {
|
|
29
|
+
return word.toLowerCase();
|
|
30
|
+
}).join(' ');
|
|
31
|
+
return temp.charAt(0).toUpperCase() + temp.slice(1);
|
|
32
|
+
}
|
|
33
|
+
return String(value);
|
|
49
34
|
}
|
|
50
35
|
return '';
|
|
51
36
|
}
|
|
52
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
53
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
37
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SnakeCaseParserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
38
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: SnakeCaseParserPipe, isStandalone: true, name: "snakeCaseParser" }); }
|
|
54
39
|
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SnakeCaseParserPipe, decorators: [{
|
|
56
41
|
type: Pipe,
|
|
57
42
|
args: [{
|
|
58
43
|
name: 'snakeCaseParser',
|
|
@@ -61,7 +46,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
61
46
|
|
|
62
47
|
class FieldsMatchValidatorDirective {
|
|
63
48
|
constructor() {
|
|
64
|
-
this.fieldToMatch = input.required();
|
|
49
|
+
this.fieldToMatch = input.required(...(ngDevMode ? [{ debugName: "fieldToMatch" }] : []));
|
|
65
50
|
}
|
|
66
51
|
validate(control) {
|
|
67
52
|
const value = control.value;
|
|
@@ -77,8 +62,8 @@ class FieldsMatchValidatorDirective {
|
|
|
77
62
|
}
|
|
78
63
|
return null;
|
|
79
64
|
}
|
|
80
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
81
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
65
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FieldsMatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
66
|
+
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
67
|
{
|
|
83
68
|
provide: NG_VALIDATORS,
|
|
84
69
|
useExisting: FieldsMatchValidatorDirective,
|
|
@@ -86,7 +71,7 @@ class FieldsMatchValidatorDirective {
|
|
|
86
71
|
},
|
|
87
72
|
], ngImport: i0 }); }
|
|
88
73
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: FieldsMatchValidatorDirective, decorators: [{
|
|
90
75
|
type: Directive,
|
|
91
76
|
args: [{
|
|
92
77
|
selector: '[libFieldsMatchValidator]',
|
|
@@ -106,6 +91,7 @@ class PhoneValidationDirective {
|
|
|
106
91
|
if (!input.value.includes('+')) {
|
|
107
92
|
input.value = `+${input.value}`;
|
|
108
93
|
}
|
|
94
|
+
// Only allow digits and plus sign
|
|
109
95
|
const regex = /^[0-9+]*$/;
|
|
110
96
|
if (!regex.test(input.value)) {
|
|
111
97
|
input.value = input.value.replace(/[^0-9+]/g, '');
|
|
@@ -117,10 +103,10 @@ class PhoneValidationDirective {
|
|
|
117
103
|
event.preventDefault();
|
|
118
104
|
}
|
|
119
105
|
}
|
|
120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
121
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PhoneValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
107
|
+
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
108
|
}
|
|
123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PhoneValidationDirective, decorators: [{
|
|
124
110
|
type: Directive,
|
|
125
111
|
args: [{
|
|
126
112
|
selector: '[libPhoneValidation]',
|
|
@@ -136,14 +122,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
136
122
|
class PasswordValidatorDirective {
|
|
137
123
|
validate(control) {
|
|
138
124
|
const password = control.value;
|
|
125
|
+
// At least one uppercase letter, one lowercase letter, one digit, one special character, and minimum eight characters long
|
|
139
126
|
const pattern = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#\$%\^&\*])(?=.*\d).{8,}$/;
|
|
140
127
|
if (password && !pattern.test(password)) {
|
|
141
128
|
return { passwordInvalid: true };
|
|
142
129
|
}
|
|
143
130
|
return null;
|
|
144
131
|
}
|
|
145
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
146
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PasswordValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
133
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: PasswordValidatorDirective, isStandalone: true, selector: "[libPasswordValidator]", providers: [
|
|
147
134
|
{
|
|
148
135
|
provide: NG_VALIDATORS,
|
|
149
136
|
useExisting: PasswordValidatorDirective,
|
|
@@ -151,7 +138,7 @@ class PasswordValidatorDirective {
|
|
|
151
138
|
}
|
|
152
139
|
], ngImport: i0 }); }
|
|
153
140
|
}
|
|
154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PasswordValidatorDirective, decorators: [{
|
|
155
142
|
type: Directive,
|
|
156
143
|
args: [{
|
|
157
144
|
selector: '[libPasswordValidator]',
|
|
@@ -167,15 +154,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
167
154
|
|
|
168
155
|
class DefaultDialogComponent {
|
|
169
156
|
constructor() {
|
|
170
|
-
this.height = input();
|
|
171
|
-
this.dialogTitle = input();
|
|
172
|
-
this.withBack = input();
|
|
157
|
+
this.height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
|
|
158
|
+
this.dialogTitle = input(...(ngDevMode ? [undefined, { debugName: "dialogTitle" }] : []));
|
|
159
|
+
this.withBack = input(...(ngDevMode ? [undefined, { debugName: "withBack" }] : []));
|
|
173
160
|
this.back = output();
|
|
174
161
|
}
|
|
175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
176
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DefaultDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
163
|
+
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
164
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: DefaultDialogComponent, decorators: [{
|
|
179
166
|
type: Component,
|
|
180
167
|
args: [{ selector: 'lib-default-dialog', imports: [
|
|
181
168
|
CommonModule,
|
|
@@ -188,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
188
175
|
|
|
189
176
|
class ErrorDispalyComponent {
|
|
190
177
|
constructor() {
|
|
191
|
-
this.error = input.required();
|
|
178
|
+
this.error = input.required(...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
192
179
|
this.displayError = '';
|
|
193
180
|
}
|
|
194
181
|
ngOnInit() {
|
|
@@ -210,10 +197,10 @@ class ErrorDispalyComponent {
|
|
|
210
197
|
this.displayError = 'Unknown error';
|
|
211
198
|
}
|
|
212
199
|
}
|
|
213
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorDispalyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
201
|
+
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
202
|
}
|
|
216
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorDispalyComponent, decorators: [{
|
|
217
204
|
type: Component,
|
|
218
205
|
args: [{ selector: 'lib-error-dispaly', imports: [
|
|
219
206
|
SnakeCaseParserPipe
|
|
@@ -222,7 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
222
209
|
|
|
223
210
|
class SearchBarComponent {
|
|
224
211
|
constructor() {
|
|
225
|
-
this.for = input.required();
|
|
212
|
+
this.for = input.required(...(ngDevMode ? [{ debugName: "for" }] : []));
|
|
226
213
|
this.search = output();
|
|
227
214
|
this.searchForm = new FormGroup({
|
|
228
215
|
search: new FormControl('')
|
|
@@ -235,8 +222,8 @@ class SearchBarComponent {
|
|
|
235
222
|
this.search.emit(searchTerm);
|
|
236
223
|
});
|
|
237
224
|
}
|
|
238
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
225
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
226
|
+
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: `
|
|
240
227
|
<form class="search-bar" [formGroup]="searchForm">
|
|
241
228
|
<mat-icon>search</mat-icon>
|
|
242
229
|
<input class="search-input" type="search" name="field"
|
|
@@ -244,7 +231,7 @@ class SearchBarComponent {
|
|
|
244
231
|
</form>
|
|
245
232
|
`, 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"] }] }); }
|
|
246
233
|
}
|
|
247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
248
235
|
type: Component,
|
|
249
236
|
args: [{ selector: 'lib-search-bar', template: `
|
|
250
237
|
<form class="search-bar" [formGroup]="searchForm">
|
|
@@ -258,25 +245,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
258
245
|
], 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"] }]
|
|
259
246
|
}], ctorParameters: () => [] });
|
|
260
247
|
|
|
261
|
-
const fader = trigger('fadeInOut', [
|
|
262
|
-
transition(':enter', [
|
|
263
|
-
style({ opacity: 0 }),
|
|
264
|
-
animate('200ms', style({ opacity: 1 })),
|
|
265
|
-
]),
|
|
266
|
-
transition(':leave', [
|
|
267
|
-
animate('200ms', style({ opacity: 0 })),
|
|
268
|
-
]),
|
|
269
|
-
]);
|
|
270
|
-
const textFader = trigger('textFader', [
|
|
271
|
-
state('void', style({ opacity: 0 })),
|
|
272
|
-
state('*', style({ opacity: 1 })),
|
|
273
|
-
transition('void => *', [animate('0.3s 0.3s ease-in')]),
|
|
274
|
-
transition('* => void', [animate('0.3s ease-in')])
|
|
275
|
-
]);
|
|
276
|
-
|
|
277
248
|
class TableSortHeaderComponent {
|
|
278
249
|
constructor() {
|
|
279
|
-
this.selected = input.required();
|
|
250
|
+
this.selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
280
251
|
this.sort = output();
|
|
281
252
|
this.sortState = 'none';
|
|
282
253
|
}
|
|
@@ -292,10 +263,10 @@ class TableSortHeaderComponent {
|
|
|
292
263
|
}
|
|
293
264
|
this.sort.emit(this.sortState);
|
|
294
265
|
}
|
|
295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
296
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
266
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableSortHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
267
|
+
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"] }] }); }
|
|
297
268
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
269
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableSortHeaderComponent, decorators: [{
|
|
299
270
|
type: Component,
|
|
300
271
|
args: [{ selector: 'lib-table-sort-header', imports: [
|
|
301
272
|
MatIconModule,
|
|
@@ -304,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
304
275
|
|
|
305
276
|
class TableComponent {
|
|
306
277
|
constructor() {
|
|
307
|
-
this.config = input.required();
|
|
278
|
+
this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
308
279
|
this.action = output();
|
|
309
280
|
this.scrollContainer = viewChild.required('scrollContainer');
|
|
310
281
|
this.selectedRowIndex = -1;
|
|
@@ -344,19 +315,18 @@ class TableComponent {
|
|
|
344
315
|
sortByProp(prop, sortState) {
|
|
345
316
|
this.action.emit({ action: 'sort', prop, sortState });
|
|
346
317
|
}
|
|
347
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
319
|
+
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\r\n <ng-content select=\".upper-part\" />\r\n\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\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 @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] || '-' }}\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 @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] || '-' }}\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"] }] }); }
|
|
349
320
|
}
|
|
350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
351
322
|
type: Component,
|
|
352
|
-
args: [{ selector: 'lib-table',
|
|
353
|
-
WhiteSpaceFillerPipe,
|
|
323
|
+
args: [{ selector: 'lib-table', imports: [
|
|
354
324
|
MatMenuModule,
|
|
355
325
|
MatIconModule,
|
|
356
326
|
MatButtonModule,
|
|
357
327
|
TableSortHeaderComponent,
|
|
358
328
|
DragDropModule
|
|
359
|
-
], 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\"
|
|
329
|
+
], template: "<div class=\"flexer\">\r\n @if (config().title) {\r\n <div class=\"row-heading-labels mb05\">{{ config().title }}</div>\r\n }\r\n\r\n <ng-content select=\".upper-part\" />\r\n\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\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 @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] || '-' }}\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 @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] || '-' }}\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"] }]
|
|
360
330
|
}] });
|
|
361
331
|
|
|
362
332
|
class LoaderService {
|
|
@@ -370,10 +340,10 @@ class LoaderService {
|
|
|
370
340
|
isLoading() {
|
|
371
341
|
return this.loadingSubject.getValue();
|
|
372
342
|
}
|
|
373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
374
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
343
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
344
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoaderService, providedIn: 'root' }); }
|
|
375
345
|
}
|
|
376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: LoaderService, decorators: [{
|
|
377
347
|
type: Injectable,
|
|
378
348
|
args: [{
|
|
379
349
|
providedIn: 'root'
|
|
@@ -384,10 +354,10 @@ class GlobalLoaderComponent {
|
|
|
384
354
|
constructor() {
|
|
385
355
|
this.loaderService = inject(LoaderService);
|
|
386
356
|
}
|
|
387
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
388
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GlobalLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
358
|
+
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" }] }); }
|
|
389
359
|
}
|
|
390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: GlobalLoaderComponent, decorators: [{
|
|
391
361
|
type: Component,
|
|
392
362
|
args: [{ selector: 'lib-global-loader', imports: [
|
|
393
363
|
AsyncPipe,
|
|
@@ -403,10 +373,10 @@ class ErrorService {
|
|
|
403
373
|
sendError(error) {
|
|
404
374
|
this.errorSubject.next(error);
|
|
405
375
|
}
|
|
406
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
407
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
376
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
377
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorService, providedIn: 'root' }); }
|
|
408
378
|
}
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorService, decorators: [{
|
|
410
380
|
type: Injectable,
|
|
411
381
|
args: [{
|
|
412
382
|
providedIn: 'root'
|
|
@@ -517,10 +487,10 @@ class ErrorPopupComponent {
|
|
|
517
487
|
this.error = error;
|
|
518
488
|
this.httpStatusCodes = HTTP_STATUS_CODES;
|
|
519
489
|
}
|
|
520
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
490
|
+
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 }); }
|
|
491
|
+
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"] }] }); }
|
|
522
492
|
}
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorPopupComponent, decorators: [{
|
|
524
494
|
type: Component,
|
|
525
495
|
args: [{ selector: 'lib-error-popup', imports: [
|
|
526
496
|
DefaultDialogComponent,
|
|
@@ -553,10 +523,10 @@ class ErrorHandlerComponent {
|
|
|
553
523
|
ngOnDestroy() {
|
|
554
524
|
this.errSubscriptions.unsubscribe();
|
|
555
525
|
}
|
|
556
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
557
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorHandlerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
527
|
+
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 }] }); }
|
|
558
528
|
}
|
|
559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: ErrorHandlerComponent, decorators: [{
|
|
560
530
|
type: Component,
|
|
561
531
|
args: [{ selector: 'lib-error-handler', imports: [
|
|
562
532
|
MatDialogModule
|
|
@@ -571,5 +541,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
|
|
|
571
541
|
* Generated bundle index. Do not edit.
|
|
572
542
|
*/
|
|
573
543
|
|
|
574
|
-
export { DefaultDialogComponent, ErrorDispalyComponent, ErrorHandlerComponent, ErrorService, FieldsMatchValidatorDirective, GlobalLoaderComponent, LoaderService, PasswordValidatorDirective, PhoneValidationDirective, SearchBarComponent, SnakeCaseParserPipe, TableComponent, TableSortHeaderComponent
|
|
544
|
+
export { DefaultDialogComponent, ErrorDispalyComponent, ErrorHandlerComponent, ErrorService, FieldsMatchValidatorDirective, GlobalLoaderComponent, LoaderService, PasswordValidatorDirective, PhoneValidationDirective, SearchBarComponent, SnakeCaseParserPipe, TableComponent, TableSortHeaderComponent };
|
|
575
545
|
//# sourceMappingURL=ferhaps-easy-ui-lib.mjs.map
|