osl-base-extended 0.1.6 → 0.1.8
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.
|
@@ -6,7 +6,8 @@ import { MatSnackBar } from '@angular/material/snack-bar';
|
|
|
6
6
|
import { Router } from '@angular/router';
|
|
7
7
|
import * as i1$2 from '@angular/common';
|
|
8
8
|
import { NgTemplateOutlet } from '@angular/common';
|
|
9
|
-
import
|
|
9
|
+
import * as i3 from '@angular/material/button';
|
|
10
|
+
import { MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
10
11
|
import * as i2 from '@angular/material/icon';
|
|
11
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
12
13
|
import { HttpHeaders, HttpParams, HttpClient } from '@angular/common/http';
|
|
@@ -40,11 +41,11 @@ class DialogWrapper {
|
|
|
40
41
|
this.dialogData.data = data.data;
|
|
41
42
|
}
|
|
42
43
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "<div>\n
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: "<div class=\"dialog-container\">\n\n <!-- Header -->\n @if(typeof dialogData.header == 'string') {\n <div class=\"dialog-header\" mat-dialog-title>\n <div class=\"dialog-header-left\">\n <div class=\"dialog-icon-ring\">\n <mat-icon class=\"dialog-icon\">\n {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\n </mat-icon>\n </div>\n <div class=\"dialog-title-group\">\n <span class=\"dialog-mode-label\">\n {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Editing' : '' }}\n </span>\n <span class=\"dialog-heading\">{{ dialogData.header }}</span>\n </div>\n </div>\n <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\n }\n\n <!-- Body -->\n <mat-dialog-content class=\"dialog-content\">\n @if(dialogData.formBody) {\n <div class=\"dialog-body\">\n <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\n </div>\n }\n </mat-dialog-content>\n\n <!-- Footer -->\n @if(dialogData.formFooter) {\n <mat-dialog-actions class=\"dialog-actions\">\n <div class=\"dialog-footer\">\n <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\n </div>\n </mat-dialog-actions>\n }\n\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
|
|
44
45
|
}
|
|
45
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
46
47
|
type: Component,
|
|
47
|
-
args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton], template: "<div>\n
|
|
48
|
+
args: [{ selector: 'dialog-wrapper', imports: [MatDialogModule, MatIconModule, NgTemplateOutlet, MatIconButton], template: "<div class=\"dialog-container\">\n\n <!-- Header -->\n @if(typeof dialogData.header == 'string') {\n <div class=\"dialog-header\" mat-dialog-title>\n <div class=\"dialog-header-left\">\n <div class=\"dialog-icon-ring\">\n <mat-icon class=\"dialog-icon\">\n {{ dialogData.header.startsWith('Add') ? 'add_circle' : dialogData.header.startsWith('Edit') ? 'edit' : 'info' }}\n </mat-icon>\n </div>\n <div class=\"dialog-title-group\">\n <span class=\"dialog-mode-label\">\n {{ dialogData.header.startsWith('Add') ? 'Creating New' : dialogData.header.startsWith('Edit') ? 'Editing' : '' }}\n </span>\n <span class=\"dialog-heading\">{{ dialogData.header }}</span>\n </div>\n </div>\n <button mat-icon-button class=\"dialog-close-btn\" mat-dialog-close>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"dialogData.header; context: { $implicit: dialogData }\"></ng-container>\n }\n\n <!-- Body -->\n <mat-dialog-content class=\"dialog-content\">\n @if(dialogData.formBody) {\n <div class=\"dialog-body\">\n <ng-container *ngTemplateOutlet=\"dialogData.formBody; context: { $implicit: dialogData }\"></ng-container>\n </div>\n }\n </mat-dialog-content>\n\n <!-- Footer -->\n @if(dialogData.formFooter) {\n <mat-dialog-actions class=\"dialog-actions\">\n <div class=\"dialog-footer\">\n <ng-container *ngTemplateOutlet=\"dialogData.formFooter; context: { $implicit: dialogData }\"></ng-container>\n </div>\n </mat-dialog-actions>\n }\n\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;overflow:hidden}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;background:linear-gradient(135deg,#f0f6ff,#e8f0fe);border-bottom:1px solid rgba(37,99,235,.12);gap:12px}.dialog-header:before{display:none}.dialog-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}.dialog-icon-ring{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #2563eb4d;animation:icon-pop .25s cubic-bezier(.34,1.56,.64,1)}.dialog-icon{color:#fff;font-size:24px;width:24px;height:24px}.dialog-title-group{display:flex;flex-direction:column;min-width:0}.dialog-mode-label{font-size:11px;font-weight:500;color:var(--osl-primary, #2563eb);text-transform:uppercase;letter-spacing:.6px;line-height:1.2}.dialog-heading{font-size:18px;font-weight:600;color:#111827;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-close-btn{flex-shrink:0;color:#6b7280;transition:color .15s ease,background .15s ease}.dialog-close-btn:hover{color:#111827;background:#0000000f}.dialog-close-btn .mat-icon{font-size:20px;width:20px;height:20px}.dialog-content{padding:0!important;max-height:65vh;overflow-y:auto}.dialog-content::-webkit-scrollbar{width:5px}.dialog-content::-webkit-scrollbar-track{background:transparent}.dialog-content::-webkit-scrollbar-thumb{background:#2563eb33;border-radius:4px}.dialog-body{padding:20px 24px}.dialog-actions{padding:0!important;min-height:unset!important;border-top:1px solid #e5e7eb;background:#fafafa}.dialog-footer{width:100%;padding:14px 24px}@keyframes icon-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.mat-mdc-dialog-title:before{display:none}\n"] }]
|
|
48
49
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: Dialog, decorators: [{
|
|
49
50
|
type: Inject,
|
|
50
51
|
args: [MAT_DIALOG_DATA]
|
|
@@ -56,6 +57,37 @@ class Dialog {
|
|
|
56
57
|
data;
|
|
57
58
|
}
|
|
58
59
|
|
|
60
|
+
class DeleteConfirmation {
|
|
61
|
+
dialogRef;
|
|
62
|
+
data;
|
|
63
|
+
constructor(dialogRef, data) {
|
|
64
|
+
this.dialogRef = dialogRef;
|
|
65
|
+
this.data = data;
|
|
66
|
+
}
|
|
67
|
+
confirm() {
|
|
68
|
+
this.dialogRef.close(true);
|
|
69
|
+
}
|
|
70
|
+
cancel() {
|
|
71
|
+
this.dialogRef.close(false);
|
|
72
|
+
}
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DeleteConfirmation, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DeleteConfirmation, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "<div class=\"delete-dialog-container\">\n <div class=\"delete-dialog-header\">\n <div class=\"delete-icon-wrapper\">\n <div class=\"delete-icon-ring\">\n <mat-icon class=\"delete-icon\">delete_forever</mat-icon>\n </div>\n </div>\n <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <mat-dialog-content class=\"delete-dialog-content\">\n <h2 class=\"delete-title\">{{ data.title }}</h2>\n <p class=\"delete-message\">{{ data.message }}</p>\n </mat-dialog-content>\n\n <mat-dialog-actions class=\"delete-dialog-actions\">\n <button mat-stroked-button class=\"cancel-btn\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n {{ data.cancelText }}\n </button>\n <button mat-flat-button class=\"confirm-btn\" (click)=\"confirm()\">\n <mat-icon>delete_forever</mat-icon>\n {{ data.confirmText }}\n </button>\n </mat-dialog-actions>\n</div>\n", styles: [".delete-dialog-container{padding:8px 4px}.delete-dialog-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.delete-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.delete-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:pulse-ring 2s ease-in-out infinite}.delete-icon{font-size:36px;width:36px;height:36px;color:var(--osl-danger, #dc2626)}.close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.close-btn:hover{color:var(--osl-black, #000)}.delete-dialog-content{text-align:center;padding:16px 24px 8px!important;max-height:unset!important;overflow:visible!important}.delete-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 10px;line-height:1.3}.delete-message{font-size:14px;color:var(--osl-secondary, #6b7280);margin:0;line-height:1.6}.delete-dialog-actions{display:flex!important;justify-content:center;gap:12px;padding:16px 24px 20px!important}.delete-dialog-actions .cancel-btn{border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .cancel-btn mat-icon{font-size:18px;width:18px;height:18px}.delete-dialog-actions .cancel-btn:hover{border-color:var(--osl-secondary, #6b7280);background:#f9fafb}.delete-dialog-actions .confirm-btn{background:var(--osl-danger, #dc2626);color:var(--osl-danger-text, #ffffff);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .confirm-btn mat-icon{font-size:18px;width:18px;height:18px}.delete-dialog-actions .confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 12px #dc262659}@keyframes pulse-ring{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 8px #dc262600}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DeleteConfirmation, decorators: [{
|
|
77
|
+
type: Component,
|
|
78
|
+
args: [{ selector: 'delete-confirmation', imports: [MatDialogModule, MatIconModule, MatButtonModule], template: "<div class=\"delete-dialog-container\">\n <div class=\"delete-dialog-header\">\n <div class=\"delete-icon-wrapper\">\n <div class=\"delete-icon-ring\">\n <mat-icon class=\"delete-icon\">delete_forever</mat-icon>\n </div>\n </div>\n <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <mat-dialog-content class=\"delete-dialog-content\">\n <h2 class=\"delete-title\">{{ data.title }}</h2>\n <p class=\"delete-message\">{{ data.message }}</p>\n </mat-dialog-content>\n\n <mat-dialog-actions class=\"delete-dialog-actions\">\n <button mat-stroked-button class=\"cancel-btn\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n {{ data.cancelText }}\n </button>\n <button mat-flat-button class=\"confirm-btn\" (click)=\"confirm()\">\n <mat-icon>delete_forever</mat-icon>\n {{ data.confirmText }}\n </button>\n </mat-dialog-actions>\n</div>\n", styles: [".delete-dialog-container{padding:8px 4px}.delete-dialog-header{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 8px 0}.delete-icon-wrapper{display:flex;align-items:center;justify-content:center;flex:1;padding-left:40px}.delete-icon-ring{width:72px;height:72px;border-radius:50%;background:#dc262614;border:2px solid rgba(220,38,38,.2);display:flex;align-items:center;justify-content:center;animation:pulse-ring 2s ease-in-out infinite}.delete-icon{font-size:36px;width:36px;height:36px;color:var(--osl-danger, #dc2626)}.close-btn{color:var(--osl-secondary, #6b7280);flex-shrink:0}.close-btn:hover{color:var(--osl-black, #000)}.delete-dialog-content{text-align:center;padding:16px 24px 8px!important;max-height:unset!important;overflow:visible!important}.delete-title{font-size:20px;font-weight:600;color:var(--osl-black, #111827);margin:0 0 10px;line-height:1.3}.delete-message{font-size:14px;color:var(--osl-secondary, #6b7280);margin:0;line-height:1.6}.delete-dialog-actions{display:flex!important;justify-content:center;gap:12px;padding:16px 24px 20px!important}.delete-dialog-actions .cancel-btn{border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .cancel-btn mat-icon{font-size:18px;width:18px;height:18px}.delete-dialog-actions .cancel-btn:hover{border-color:var(--osl-secondary, #6b7280);background:#f9fafb}.delete-dialog-actions .confirm-btn{background:var(--osl-danger, #dc2626);color:var(--osl-danger-text, #ffffff);border-radius:var(--osl-border-radius, 4px);height:38px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:4px;padding:0 18px;transition:all .2s ease}.delete-dialog-actions .confirm-btn mat-icon{font-size:18px;width:18px;height:18px}.delete-dialog-actions .confirm-btn:hover{background:var(--osl-danger-hover, #b91c1c);box-shadow:0 4px 12px #dc262659}@keyframes pulse-ring{0%,to{box-shadow:0 0 #dc262626}50%{box-shadow:0 0 0 8px #dc262600}}\n"] }]
|
|
79
|
+
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: DeleteConfirmationData, decorators: [{
|
|
80
|
+
type: Inject,
|
|
81
|
+
args: [MAT_DIALOG_DATA]
|
|
82
|
+
}] }] });
|
|
83
|
+
class DeleteConfirmationData {
|
|
84
|
+
title = 'Delete Confirmation';
|
|
85
|
+
message = 'Are you sure you want to delete this item?';
|
|
86
|
+
confirmText = 'Delete';
|
|
87
|
+
cancelText = 'Cancel';
|
|
88
|
+
data;
|
|
89
|
+
}
|
|
90
|
+
|
|
59
91
|
class baseComponent {
|
|
60
92
|
_injector = inject(Injector);
|
|
61
93
|
showSuccess(message) {
|
|
@@ -90,6 +122,14 @@ class baseComponent {
|
|
|
90
122
|
});
|
|
91
123
|
return dialogRef;
|
|
92
124
|
}
|
|
125
|
+
openDeleteDialog(message = 'Are you sure you want to delete this item?', title = 'Delete Confirmation', confirmText = 'Delete', cancelText = 'Cancel', data) {
|
|
126
|
+
const dialogData = { title, message, confirmText, cancelText, data };
|
|
127
|
+
return this._injector.get(MatDialog).open(DeleteConfirmation, {
|
|
128
|
+
width: '380px',
|
|
129
|
+
data: dialogData,
|
|
130
|
+
disableClose: true,
|
|
131
|
+
});
|
|
132
|
+
}
|
|
93
133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: baseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
94
134
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: baseComponent });
|
|
95
135
|
}
|
|
@@ -196,23 +236,123 @@ class Httpbase {
|
|
|
196
236
|
}
|
|
197
237
|
}
|
|
198
238
|
|
|
239
|
+
class DatasourceCacheService {
|
|
240
|
+
cache = new Map();
|
|
241
|
+
pending = new Map();
|
|
242
|
+
buildKey(service, methodName, body) {
|
|
243
|
+
const serviceName = service?.constructor?.name ?? 'unknown';
|
|
244
|
+
return `${serviceName}.${methodName}.${JSON.stringify(body ?? null)}`;
|
|
245
|
+
}
|
|
246
|
+
async load(service, methodName, body) {
|
|
247
|
+
const key = this.buildKey(service, methodName, body);
|
|
248
|
+
if (this.cache.has(key)) {
|
|
249
|
+
return this.cache.get(key);
|
|
250
|
+
}
|
|
251
|
+
if (this.pending.has(key)) {
|
|
252
|
+
return this.pending.get(key);
|
|
253
|
+
}
|
|
254
|
+
const request = (async () => {
|
|
255
|
+
try {
|
|
256
|
+
const response = body !== undefined
|
|
257
|
+
? await service[methodName](body)
|
|
258
|
+
: await service[methodName]();
|
|
259
|
+
const data = Array.isArray(response) ? response : (response?.result ?? []);
|
|
260
|
+
this.cache.set(key, data);
|
|
261
|
+
return data;
|
|
262
|
+
}
|
|
263
|
+
finally {
|
|
264
|
+
this.pending.delete(key);
|
|
265
|
+
}
|
|
266
|
+
})();
|
|
267
|
+
this.pending.set(key, request);
|
|
268
|
+
return request;
|
|
269
|
+
}
|
|
270
|
+
invalidate(service, methodName, body) {
|
|
271
|
+
this.cache.delete(this.buildKey(service, methodName, body));
|
|
272
|
+
}
|
|
273
|
+
invalidateAll() {
|
|
274
|
+
this.cache.clear();
|
|
275
|
+
}
|
|
276
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatasourceCacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
277
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatasourceCacheService, providedIn: 'root' });
|
|
278
|
+
}
|
|
279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatasourceCacheService, decorators: [{
|
|
280
|
+
type: Injectable,
|
|
281
|
+
args: [{ providedIn: 'root' }]
|
|
282
|
+
}] });
|
|
283
|
+
|
|
199
284
|
class Oslinput {
|
|
200
|
-
label =
|
|
285
|
+
label = '';
|
|
201
286
|
required = false;
|
|
202
287
|
disabled = false;
|
|
203
|
-
model =
|
|
288
|
+
model = '';
|
|
289
|
+
type = 'text';
|
|
290
|
+
placeholder = '';
|
|
291
|
+
/** Mask pattern: 0=digit, A=letter, *=alphanumeric, other chars are literals. E.g. '(000) 000-0000' */
|
|
292
|
+
mask = '';
|
|
293
|
+
min = '';
|
|
294
|
+
max = '';
|
|
295
|
+
minLength = null;
|
|
296
|
+
maxLength = null;
|
|
297
|
+
prefixIcon = '';
|
|
298
|
+
suffixIcon = '';
|
|
204
299
|
modelChange = new EventEmitter();
|
|
205
300
|
changeEv = new EventEmitter();
|
|
206
|
-
|
|
207
|
-
|
|
301
|
+
showPassword = false;
|
|
302
|
+
get inputType() {
|
|
303
|
+
if (this.type === 'password')
|
|
304
|
+
return this.showPassword ? 'text' : 'password';
|
|
305
|
+
return this.type;
|
|
306
|
+
}
|
|
307
|
+
get hasWrapper() {
|
|
308
|
+
return !!(this.prefixIcon || this.suffixIcon || this.type === 'password');
|
|
309
|
+
}
|
|
310
|
+
togglePassword() {
|
|
311
|
+
this.showPassword = !this.showPassword;
|
|
312
|
+
}
|
|
313
|
+
onModelChange(value) {
|
|
314
|
+
const processed = this.mask ? this.applyMask(value) : value;
|
|
315
|
+
this.model = processed;
|
|
208
316
|
this.modelChange.emit(this.model);
|
|
209
317
|
}
|
|
318
|
+
onChange() {
|
|
319
|
+
this.changeEv.emit(this.model);
|
|
320
|
+
}
|
|
321
|
+
applyMask(value) {
|
|
322
|
+
if (!this.mask || !value)
|
|
323
|
+
return value;
|
|
324
|
+
const stripped = value.replace(/[^a-zA-Z0-9]/g, '');
|
|
325
|
+
let result = '';
|
|
326
|
+
let si = 0;
|
|
327
|
+
for (let mi = 0; mi < this.mask.length; mi++) {
|
|
328
|
+
if (si >= stripped.length)
|
|
329
|
+
break;
|
|
330
|
+
const mc = this.mask[mi];
|
|
331
|
+
if (mc === '0') {
|
|
332
|
+
if (/\d/.test(stripped[si]))
|
|
333
|
+
result += stripped[si];
|
|
334
|
+
si++;
|
|
335
|
+
}
|
|
336
|
+
else if (mc === 'A') {
|
|
337
|
+
if (/[a-zA-Z]/.test(stripped[si]))
|
|
338
|
+
result += stripped[si];
|
|
339
|
+
si++;
|
|
340
|
+
}
|
|
341
|
+
else if (mc === '*') {
|
|
342
|
+
result += stripped[si++];
|
|
343
|
+
}
|
|
344
|
+
else {
|
|
345
|
+
result += mc;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
return result;
|
|
349
|
+
}
|
|
210
350
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
211
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n <div class=\"input-wrapper\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n @if(prefixIcon) {\n <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n }\n <input\n [type]=\"inputType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"min || null\"\n [attr.max]=\"max || null\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [email]=\"type === 'email'\"\n #myField=\"ngModel\"\n class=\"inner-input\"\n >\n @if(type === 'password') {\n <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n }\n @if(suffixIcon && type !== 'password') {\n <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n }\n </div>\n\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['email']) {\n <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n } @else if(myField.errors?.['min']) {\n <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n } @else if(myField.errors?.['max']) {\n <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n }\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
212
352
|
}
|
|
213
353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, decorators: [{
|
|
214
354
|
type: Component,
|
|
215
|
-
args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
355
|
+
args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n <div class=\"input-wrapper\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n @if(prefixIcon) {\n <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n }\n <input\n [type]=\"inputType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"min || null\"\n [attr.max]=\"max || null\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [email]=\"type === 'email'\"\n #myField=\"ngModel\"\n class=\"inner-input\"\n >\n @if(type === 'password') {\n <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n }\n @if(suffixIcon && type !== 'password') {\n <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n }\n </div>\n\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['email']) {\n <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n } @else if(myField.errors?.['min']) {\n <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n } @else if(myField.errors?.['max']) {\n <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n }\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
216
356
|
}], propDecorators: { label: [{
|
|
217
357
|
type: Input,
|
|
218
358
|
args: ['label']
|
|
@@ -225,6 +365,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
225
365
|
}], model: [{
|
|
226
366
|
type: Input,
|
|
227
367
|
args: ['model']
|
|
368
|
+
}], type: [{
|
|
369
|
+
type: Input,
|
|
370
|
+
args: ['type']
|
|
371
|
+
}], placeholder: [{
|
|
372
|
+
type: Input,
|
|
373
|
+
args: ['placeholder']
|
|
374
|
+
}], mask: [{
|
|
375
|
+
type: Input,
|
|
376
|
+
args: ['mask']
|
|
377
|
+
}], min: [{
|
|
378
|
+
type: Input,
|
|
379
|
+
args: ['min']
|
|
380
|
+
}], max: [{
|
|
381
|
+
type: Input,
|
|
382
|
+
args: ['max']
|
|
383
|
+
}], minLength: [{
|
|
384
|
+
type: Input,
|
|
385
|
+
args: ['minLength']
|
|
386
|
+
}], maxLength: [{
|
|
387
|
+
type: Input,
|
|
388
|
+
args: ['maxLength']
|
|
389
|
+
}], prefixIcon: [{
|
|
390
|
+
type: Input,
|
|
391
|
+
args: ['prefixIcon']
|
|
392
|
+
}], suffixIcon: [{
|
|
393
|
+
type: Input,
|
|
394
|
+
args: ['suffixIcon']
|
|
228
395
|
}], modelChange: [{
|
|
229
396
|
type: Output
|
|
230
397
|
}], changeEv: [{
|
|
@@ -232,29 +399,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
232
399
|
}] } });
|
|
233
400
|
|
|
234
401
|
class Osltextarea {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
rows = "10";
|
|
402
|
+
label = '';
|
|
403
|
+
rows = 3;
|
|
238
404
|
required = false;
|
|
239
405
|
disabled = false;
|
|
240
|
-
model =
|
|
406
|
+
model = '';
|
|
407
|
+
placeholder = '';
|
|
408
|
+
maxLength = null;
|
|
409
|
+
minLength = null;
|
|
410
|
+
characterCounter = false;
|
|
411
|
+
resize = 'none';
|
|
241
412
|
modelChange = new EventEmitter();
|
|
242
413
|
changeEv = new EventEmitter();
|
|
414
|
+
get currentLength() {
|
|
415
|
+
return this.model ? String(this.model).length : 0;
|
|
416
|
+
}
|
|
417
|
+
get showCounter() {
|
|
418
|
+
return this.characterCounter && this.maxLength !== null;
|
|
419
|
+
}
|
|
420
|
+
get counterClass() {
|
|
421
|
+
if (this.maxLength === null)
|
|
422
|
+
return '';
|
|
423
|
+
return this.currentLength >= this.maxLength ? 'counter-limit' : '';
|
|
424
|
+
}
|
|
243
425
|
onModelChange(event) {
|
|
244
426
|
this.model = event;
|
|
245
427
|
this.modelChange.emit(this.model);
|
|
246
428
|
}
|
|
247
|
-
ngAfterViewInit() {
|
|
248
|
-
if (this.rows) {
|
|
249
|
-
this.textareaRows = this.rows;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Osltextarea, isStandalone: false, selector: "osl-textarea", inputs: { label: "label", rows: "rows", required: "required", disabled: "disabled", model: "model" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Osltextarea, isStandalone: false, selector: "osl-textarea", inputs: { label: "label", rows: "rows", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", characterCounter: "characterCounter", resize: "resize" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n <textarea\n [rows]=\"rows\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [style.resize]=\"resize\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n ></textarea>\n <div class=\"textarea-footer\">\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n }\n } @else {\n <span></span>\n }\n @if(showCounter) {\n <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n {{currentLength}}/{{maxLength}}\n </span>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}textarea{width:100%;border-radius:var(--osl-border-radius);outline:none;padding:6px 8px;font-size:var(--osl-text-font-size);border:1px solid var(--osl-border-color);resize:none;font-family:inherit;transition:border-color .5s}textarea:focus{border-color:var(--osl-focus-border-color)}textarea:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}textarea::placeholder{font-size:var(--osl-label-font-size);color:#aaa}textarea.error{border-color:var(--osl-error-color)}.textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hint{color:var(--osl-error-color);font-size:var(--osl-hint-font-size)}.char-counter{font-size:var(--osl-hint-font-size);color:#888;margin-left:auto}.char-counter.counter-limit{color:var(--osl-error-color);font-weight:500}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
|
|
254
431
|
}
|
|
255
432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, decorators: [{
|
|
256
433
|
type: Component,
|
|
257
|
-
args: [{ selector: 'osl-textarea', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
434
|
+
args: [{ selector: 'osl-textarea', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n <textarea\n [rows]=\"rows\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [style.resize]=\"resize\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n ></textarea>\n <div class=\"textarea-footer\">\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n }\n } @else {\n <span></span>\n }\n @if(showCounter) {\n <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n {{currentLength}}/{{maxLength}}\n </span>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}textarea{width:100%;border-radius:var(--osl-border-radius);outline:none;padding:6px 8px;font-size:var(--osl-text-font-size);border:1px solid var(--osl-border-color);resize:none;font-family:inherit;transition:border-color .5s}textarea:focus{border-color:var(--osl-focus-border-color)}textarea:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}textarea::placeholder{font-size:var(--osl-label-font-size);color:#aaa}textarea.error{border-color:var(--osl-error-color)}.textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hint{color:var(--osl-error-color);font-size:var(--osl-hint-font-size)}.char-counter{font-size:var(--osl-hint-font-size);color:#888;margin-left:auto}.char-counter.counter-limit{color:var(--osl-error-color);font-weight:500}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
258
435
|
}], propDecorators: { label: [{
|
|
259
436
|
type: Input,
|
|
260
437
|
args: ['label']
|
|
@@ -270,6 +447,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
270
447
|
}], model: [{
|
|
271
448
|
type: Input,
|
|
272
449
|
args: ['model']
|
|
450
|
+
}], placeholder: [{
|
|
451
|
+
type: Input,
|
|
452
|
+
args: ['placeholder']
|
|
453
|
+
}], maxLength: [{
|
|
454
|
+
type: Input,
|
|
455
|
+
args: ['maxLength']
|
|
456
|
+
}], minLength: [{
|
|
457
|
+
type: Input,
|
|
458
|
+
args: ['minLength']
|
|
459
|
+
}], characterCounter: [{
|
|
460
|
+
type: Input,
|
|
461
|
+
args: ['characterCounter']
|
|
462
|
+
}], resize: [{
|
|
463
|
+
type: Input,
|
|
464
|
+
args: ['resize']
|
|
273
465
|
}], modelChange: [{
|
|
274
466
|
type: Output
|
|
275
467
|
}], changeEv: [{
|
|
@@ -284,6 +476,9 @@ class OslSelect {
|
|
|
284
476
|
datasource = [];
|
|
285
477
|
displayField = '';
|
|
286
478
|
valueField = '';
|
|
479
|
+
placeholder = 'Select...';
|
|
480
|
+
loading = false;
|
|
481
|
+
clearable = false;
|
|
287
482
|
modelChange = new EventEmitter();
|
|
288
483
|
changeEv = new EventEmitter();
|
|
289
484
|
getDisplay(item) {
|
|
@@ -293,15 +488,27 @@ class OslSelect {
|
|
|
293
488
|
return this.valueField ? item[this.valueField] : item;
|
|
294
489
|
}
|
|
295
490
|
onModelChange(event) {
|
|
296
|
-
this.model = event;
|
|
491
|
+
this.model = event === '' ? null : event;
|
|
297
492
|
this.modelChange.emit(this.model);
|
|
298
493
|
}
|
|
494
|
+
onClear(event) {
|
|
495
|
+
event.stopPropagation();
|
|
496
|
+
this.model = null;
|
|
497
|
+
this.modelChange.emit(null);
|
|
498
|
+
this.changeEv.emit(null);
|
|
499
|
+
}
|
|
500
|
+
onChange() {
|
|
501
|
+
this.changeEv.emit(this.model);
|
|
502
|
+
}
|
|
503
|
+
get hasValue() {
|
|
504
|
+
return this.model !== null && this.model !== undefined && this.model !== '';
|
|
505
|
+
}
|
|
299
506
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSelect, isStandalone: false, selector: "osl-select", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
507
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSelect, isStandalone: false, selector: "osl-select", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", clearable: "clearable" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n <div class=\"select-wrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n @if(loading) {\n <span class=\"select-spinner\"></span>\n }\n <select\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled || loading\"\n #myField=\"ngModel\"\n >\n <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n @for(item of datasource; track item) {\n <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n }\n </select>\n @if(clearable && hasValue && !disabled && !loading) {\n <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n </div>\n\n @if(myField.touched && myField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.select-wrapper{position:relative;display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);transition:border-color .5s}.select-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.select-wrapper.error{border-color:var(--osl-error-color)}.select-wrapper.select-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.select-wrapper select{flex:1;height:100%;width:100%;font-size:var(--osl-text-font-size);border:none;outline:none;background:transparent;padding:0 32px 0 8px;cursor:pointer;appearance:none;-webkit-appearance:none}.select-wrapper select:disabled{cursor:not-allowed}.select-arrow{position:absolute;right:6px;font-size:18px;width:18px;height:18px;color:#888;pointer-events:none;-webkit-user-select:none;user-select:none}.select-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;background:none;border:none;padding:0;cursor:pointer;color:#aaa;z-index:1}.select-clear mat-icon{font-size:16px;width:16px;height:16px}.select-clear:hover{color:#333}.select-spinner{position:absolute;left:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:select-spin .7s linear infinite;pointer-events:none}@keyframes select-spin{to{transform:rotate(360deg)}}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
301
508
|
}
|
|
302
509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, decorators: [{
|
|
303
510
|
type: Component,
|
|
304
|
-
args: [{ selector: 'osl-select', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
511
|
+
args: [{ selector: 'osl-select', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n <div class=\"select-wrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n @if(loading) {\n <span class=\"select-spinner\"></span>\n }\n <select\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled || loading\"\n #myField=\"ngModel\"\n >\n <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n @for(item of datasource; track item) {\n <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n }\n </select>\n @if(clearable && hasValue && !disabled && !loading) {\n <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n </div>\n\n @if(myField.touched && myField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.select-wrapper{position:relative;display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);transition:border-color .5s}.select-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.select-wrapper.error{border-color:var(--osl-error-color)}.select-wrapper.select-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.select-wrapper select{flex:1;height:100%;width:100%;font-size:var(--osl-text-font-size);border:none;outline:none;background:transparent;padding:0 32px 0 8px;cursor:pointer;appearance:none;-webkit-appearance:none}.select-wrapper select:disabled{cursor:not-allowed}.select-arrow{position:absolute;right:6px;font-size:18px;width:18px;height:18px;color:#888;pointer-events:none;-webkit-user-select:none;user-select:none}.select-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;background:none;border:none;padding:0;cursor:pointer;color:#aaa;z-index:1}.select-clear mat-icon{font-size:16px;width:16px;height:16px}.select-clear:hover{color:#333}.select-spinner{position:absolute;left:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:select-spin .7s linear infinite;pointer-events:none}@keyframes select-spin{to{transform:rotate(360deg)}}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
305
512
|
}], propDecorators: { label: [{
|
|
306
513
|
type: Input,
|
|
307
514
|
args: ['label']
|
|
@@ -323,6 +530,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
323
530
|
}], valueField: [{
|
|
324
531
|
type: Input,
|
|
325
532
|
args: ['valueField']
|
|
533
|
+
}], placeholder: [{
|
|
534
|
+
type: Input,
|
|
535
|
+
args: ['placeholder']
|
|
536
|
+
}], loading: [{
|
|
537
|
+
type: Input,
|
|
538
|
+
args: ['loading']
|
|
539
|
+
}], clearable: [{
|
|
540
|
+
type: Input,
|
|
541
|
+
args: ['clearable']
|
|
326
542
|
}], modelChange: [{
|
|
327
543
|
type: Output
|
|
328
544
|
}], changeEv: [{
|
|
@@ -337,11 +553,11 @@ class OslRadio {
|
|
|
337
553
|
datasource = [];
|
|
338
554
|
displayField = '';
|
|
339
555
|
valueField = '';
|
|
556
|
+
inline = false;
|
|
340
557
|
modelChange = new EventEmitter();
|
|
341
558
|
changeEv = new EventEmitter();
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
}
|
|
559
|
+
static _idCounter = 0;
|
|
560
|
+
groupName = `osl_radio_${++OslRadio._idCounter}`;
|
|
345
561
|
getDisplay(item) {
|
|
346
562
|
return this.displayField ? item[this.displayField] : item;
|
|
347
563
|
}
|
|
@@ -357,11 +573,11 @@ class OslRadio {
|
|
|
357
573
|
this.changeEv.emit(this.model);
|
|
358
574
|
}
|
|
359
575
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslRadio, isStandalone: false, selector: "osl-radio", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n <div class=\"radio-group\">\n @for(item of datasource; track item){\n <label class=\"radio-item\" [class.disabled]=\"disabled\">\n <input
|
|
576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslRadio, isStandalone: false, selector: "osl-radio", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", inline: "inline" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n <div class=\"radio-group\" [class.radio-inline]=\"inline\">\n @for(item of datasource; track item) {\n <label class=\"radio-item\" [class.disabled]=\"disabled\">\n <input\n type=\"radio\"\n [name]=\"groupName\"\n [checked]=\"isChecked(item)\"\n [disabled]=\"disabled\"\n (change)=\"onSelect(item)\"\n >\n <span>{{getDisplay(item)}}</span>\n </label>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;flex-direction:column;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"] });
|
|
361
577
|
}
|
|
362
578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, decorators: [{
|
|
363
579
|
type: Component,
|
|
364
|
-
args: [{ selector: 'osl-radio', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n <div class=\"radio-group\">\n @for(item of datasource; track item){\n <label class=\"radio-item\" [class.disabled]=\"disabled\">\n <input
|
|
580
|
+
args: [{ selector: 'osl-radio', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n <div class=\"radio-group\" [class.radio-inline]=\"inline\">\n @for(item of datasource; track item) {\n <label class=\"radio-item\" [class.disabled]=\"disabled\">\n <input\n type=\"radio\"\n [name]=\"groupName\"\n [checked]=\"isChecked(item)\"\n [disabled]=\"disabled\"\n (change)=\"onSelect(item)\"\n >\n <span>{{getDisplay(item)}}</span>\n </label>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;flex-direction:column;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
365
581
|
}], propDecorators: { label: [{
|
|
366
582
|
type: Input,
|
|
367
583
|
args: ['label']
|
|
@@ -383,6 +599,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
383
599
|
}], valueField: [{
|
|
384
600
|
type: Input,
|
|
385
601
|
args: ['valueField']
|
|
602
|
+
}], inline: [{
|
|
603
|
+
type: Input,
|
|
604
|
+
args: ['inline']
|
|
386
605
|
}], modelChange: [{
|
|
387
606
|
type: Output
|
|
388
607
|
}], changeEv: [{
|
|
@@ -393,19 +612,29 @@ class OslSlideToggle {
|
|
|
393
612
|
label = '';
|
|
394
613
|
disabled = false;
|
|
395
614
|
model = false;
|
|
615
|
+
labelPosition = 'after';
|
|
616
|
+
trueLabel = '';
|
|
617
|
+
falseLabel = '';
|
|
396
618
|
modelChange = new EventEmitter();
|
|
397
619
|
changeEv = new EventEmitter();
|
|
620
|
+
get stateLabel() {
|
|
621
|
+
if (this.model && this.trueLabel)
|
|
622
|
+
return this.trueLabel;
|
|
623
|
+
if (!this.model && this.falseLabel)
|
|
624
|
+
return this.falseLabel;
|
|
625
|
+
return '';
|
|
626
|
+
}
|
|
398
627
|
onModelChange(event) {
|
|
399
628
|
this.model = event;
|
|
400
629
|
this.modelChange.emit(this.model);
|
|
401
630
|
this.changeEv.emit(this.model);
|
|
402
631
|
}
|
|
403
632
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
633
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSlideToggle, isStandalone: false, selector: "osl-slide-toggle", inputs: { label: "label", disabled: "disabled", model: "model", labelPosition: "labelPosition", trueLabel: "trueLabel", falseLabel: "falseLabel" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if(label) {\n <span class=\"label\">{{label}}</span>\n }\n <div class=\"toggle-row\" [class.reverse]=\"labelPosition === 'before'\">\n <label class=\"toggle\" [class.toggle-disabled]=\"disabled\">\n <input type=\"checkbox\" [ngModel]=\"model\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n <span class=\"slider\"></span>\n </label>\n @if(stateLabel) {\n <span class=\"state-label\" [class.state-on]=\"model\" [class.state-off]=\"!model\">{{stateLabel}}</span>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.toggle-row{display:flex;align-items:center;gap:8px}.toggle-row.reverse{flex-direction:row-reverse;justify-content:flex-end}.toggle{position:relative;display:inline-block;width:46px;height:24px;cursor:pointer;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .slider{position:absolute;inset:0;background-color:var(--osl-border-color);border-radius:24px;transition:.3s}.toggle .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px #0003}.toggle input:checked+.slider{background-color:#333}.toggle input:checked+.slider:before{transform:translate(22px)}.toggle.toggle-disabled{opacity:.6;cursor:not-allowed}.state-label{font-size:var(--osl-label-font-size);-webkit-user-select:none;user-select:none}.state-label.state-on{color:#333;font-weight:500}.state-label.state-off{color:#888}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
405
634
|
}
|
|
406
635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSlideToggle, decorators: [{
|
|
407
636
|
type: Component,
|
|
408
|
-
args: [{ selector: 'osl-slide-toggle', standalone: false, template: "<div class=\"d-flex flex-column\">\n
|
|
637
|
+
args: [{ selector: 'osl-slide-toggle', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label) {\n <span class=\"label\">{{label}}</span>\n }\n <div class=\"toggle-row\" [class.reverse]=\"labelPosition === 'before'\">\n <label class=\"toggle\" [class.toggle-disabled]=\"disabled\">\n <input type=\"checkbox\" [ngModel]=\"model\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\n <span class=\"slider\"></span>\n </label>\n @if(stateLabel) {\n <span class=\"state-label\" [class.state-on]=\"model\" [class.state-off]=\"!model\">{{stateLabel}}</span>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.toggle-row{display:flex;align-items:center;gap:8px}.toggle-row.reverse{flex-direction:row-reverse;justify-content:flex-end}.toggle{position:relative;display:inline-block;width:46px;height:24px;cursor:pointer;flex-shrink:0}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle .slider{position:absolute;inset:0;background-color:var(--osl-border-color);border-radius:24px;transition:.3s}.toggle .slider:before{content:\"\";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px #0003}.toggle input:checked+.slider{background-color:#333}.toggle input:checked+.slider:before{transform:translate(22px)}.toggle.toggle-disabled{opacity:.6;cursor:not-allowed}.state-label{font-size:var(--osl-label-font-size);-webkit-user-select:none;user-select:none}.state-label.state-on{color:#333;font-weight:500}.state-label.state-off{color:#888}\n"] }]
|
|
409
638
|
}], propDecorators: { label: [{
|
|
410
639
|
type: Input,
|
|
411
640
|
args: ['label']
|
|
@@ -415,6 +644,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
415
644
|
}], model: [{
|
|
416
645
|
type: Input,
|
|
417
646
|
args: ['model']
|
|
647
|
+
}], labelPosition: [{
|
|
648
|
+
type: Input,
|
|
649
|
+
args: ['labelPosition']
|
|
650
|
+
}], trueLabel: [{
|
|
651
|
+
type: Input,
|
|
652
|
+
args: ['trueLabel']
|
|
653
|
+
}], falseLabel: [{
|
|
654
|
+
type: Input,
|
|
655
|
+
args: ['falseLabel']
|
|
418
656
|
}], modelChange: [{
|
|
419
657
|
type: Output
|
|
420
658
|
}], changeEv: [{
|
|
@@ -430,6 +668,8 @@ class OslAutocomplete {
|
|
|
430
668
|
datasource = [];
|
|
431
669
|
displayField = '';
|
|
432
670
|
valueField = '';
|
|
671
|
+
placeholder = 'Type to search...';
|
|
672
|
+
loading = false;
|
|
433
673
|
modelChange = new EventEmitter();
|
|
434
674
|
changeEv = new EventEmitter();
|
|
435
675
|
inputValue = '';
|
|
@@ -453,6 +693,9 @@ class OslAutocomplete {
|
|
|
453
693
|
if (found)
|
|
454
694
|
this.inputValue = this.getDisplay(found);
|
|
455
695
|
}
|
|
696
|
+
else {
|
|
697
|
+
this.inputValue = '';
|
|
698
|
+
}
|
|
456
699
|
}
|
|
457
700
|
getDisplay(item) {
|
|
458
701
|
return this.displayField ? item[this.displayField] : String(item);
|
|
@@ -473,12 +716,21 @@ class OslAutocomplete {
|
|
|
473
716
|
}
|
|
474
717
|
}
|
|
475
718
|
onFocus() {
|
|
719
|
+
if (this.loading)
|
|
720
|
+
return;
|
|
476
721
|
this.showDropdown = true;
|
|
477
722
|
this.filteredItems = this.datasource.filter(item => this.getDisplay(item).toLowerCase().includes(this.inputValue.toLowerCase()));
|
|
478
723
|
}
|
|
479
724
|
onBlur() {
|
|
480
725
|
this.touched = true;
|
|
481
726
|
}
|
|
727
|
+
clearValue(event) {
|
|
728
|
+
event.stopPropagation();
|
|
729
|
+
this.inputValue = '';
|
|
730
|
+
this.model = null;
|
|
731
|
+
this.modelChange.emit(null);
|
|
732
|
+
this.changeEv.emit(null);
|
|
733
|
+
}
|
|
482
734
|
selectItem(item) {
|
|
483
735
|
this.inputValue = this.getDisplay(item);
|
|
484
736
|
this.model = this.getValue(item);
|
|
@@ -492,11 +744,11 @@ class OslAutocomplete {
|
|
|
492
744
|
}
|
|
493
745
|
}
|
|
494
746
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\"
|
|
747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n <div class=\"autocomplete-wrapper\" [class.error]=\"isInvalid\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled || loading\"\n [class.error]=\"isInvalid\"\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\n autocomplete=\"off\"\n >\n @if(loading) {\n <span class=\"ac-spinner\"></span>\n } @else if(inputValue && !disabled) {\n <button type=\"button\" class=\"ac-clear\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\n @if(filteredItems.length > 0) {\n @for(item of filteredItems; track item) {\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n }\n } @else {\n <div class=\"no-results\">No results found</div>\n }\n </div>\n }\n </div>\n @if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
496
748
|
}
|
|
497
749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
498
750
|
type: Component,
|
|
499
|
-
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\"
|
|
751
|
+
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n <div class=\"autocomplete-wrapper\" [class.error]=\"isInvalid\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled || loading\"\n [class.error]=\"isInvalid\"\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\n autocomplete=\"off\"\n >\n @if(loading) {\n <span class=\"ac-spinner\"></span>\n } @else if(inputValue && !disabled) {\n <button type=\"button\" class=\"ac-clear\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\n @if(filteredItems.length > 0) {\n @for(item of filteredItems; track item) {\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n }\n } @else {\n <div class=\"no-results\">No results found</div>\n }\n </div>\n }\n </div>\n @if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
500
752
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{
|
|
501
753
|
type: Input,
|
|
502
754
|
args: ['label']
|
|
@@ -518,6 +770,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
518
770
|
}], valueField: [{
|
|
519
771
|
type: Input,
|
|
520
772
|
args: ['valueField']
|
|
773
|
+
}], placeholder: [{
|
|
774
|
+
type: Input,
|
|
775
|
+
args: ['placeholder']
|
|
776
|
+
}], loading: [{
|
|
777
|
+
type: Input,
|
|
778
|
+
args: ['loading']
|
|
521
779
|
}], modelChange: [{
|
|
522
780
|
type: Output
|
|
523
781
|
}], changeEv: [{
|
|
@@ -533,11 +791,20 @@ class OslFileUpload {
|
|
|
533
791
|
disabled = false;
|
|
534
792
|
model = null;
|
|
535
793
|
accept = '';
|
|
794
|
+
multiple = false;
|
|
795
|
+
/** Max file size in bytes. 0 = no limit. */
|
|
796
|
+
maxSize = 0;
|
|
536
797
|
modelChange = new EventEmitter();
|
|
537
798
|
changeEv = new EventEmitter();
|
|
538
799
|
touched = false;
|
|
539
|
-
|
|
540
|
-
|
|
800
|
+
isDragOver = false;
|
|
801
|
+
sizeError = false;
|
|
802
|
+
get fileNames() {
|
|
803
|
+
if (!this.model)
|
|
804
|
+
return '';
|
|
805
|
+
if (Array.isArray(this.model))
|
|
806
|
+
return this.model.map(f => f.name).join(', ');
|
|
807
|
+
return this.model.name;
|
|
541
808
|
}
|
|
542
809
|
get isInvalid() {
|
|
543
810
|
return this.touched && this.required && !this.model;
|
|
@@ -545,22 +812,74 @@ class OslFileUpload {
|
|
|
545
812
|
onFileChange(event) {
|
|
546
813
|
this.touched = true;
|
|
547
814
|
const input = event.target;
|
|
548
|
-
|
|
549
|
-
|
|
815
|
+
this.processFiles(input.files);
|
|
816
|
+
}
|
|
817
|
+
onDragOver(event) {
|
|
818
|
+
event.preventDefault();
|
|
819
|
+
if (!this.disabled)
|
|
820
|
+
this.isDragOver = true;
|
|
821
|
+
}
|
|
822
|
+
onDragLeave() {
|
|
823
|
+
this.isDragOver = false;
|
|
824
|
+
}
|
|
825
|
+
onDrop(event) {
|
|
826
|
+
event.preventDefault();
|
|
827
|
+
this.isDragOver = false;
|
|
828
|
+
if (this.disabled)
|
|
829
|
+
return;
|
|
830
|
+
this.touched = true;
|
|
831
|
+
this.processFiles(event.dataTransfer?.files ?? null);
|
|
832
|
+
}
|
|
833
|
+
processFiles(files) {
|
|
834
|
+
if (!files || files.length === 0)
|
|
835
|
+
return;
|
|
836
|
+
this.sizeError = false;
|
|
837
|
+
if (this.maxSize > 0) {
|
|
838
|
+
for (let i = 0; i < files.length; i++) {
|
|
839
|
+
if (files[i].size > this.maxSize) {
|
|
840
|
+
this.sizeError = true;
|
|
841
|
+
this.model = null;
|
|
842
|
+
this.modelChange.emit(null);
|
|
843
|
+
this.changeEv.emit(null);
|
|
844
|
+
return;
|
|
845
|
+
}
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
if (this.multiple) {
|
|
849
|
+
this.model = Array.from(files);
|
|
850
|
+
}
|
|
851
|
+
else {
|
|
852
|
+
this.model = files[0];
|
|
853
|
+
}
|
|
550
854
|
this.modelChange.emit(this.model);
|
|
551
855
|
this.changeEv.emit(this.model);
|
|
552
856
|
}
|
|
553
857
|
triggerInput(fileInput) {
|
|
554
|
-
if (!this.disabled)
|
|
858
|
+
if (!this.disabled)
|
|
555
859
|
fileInput.click();
|
|
556
|
-
|
|
860
|
+
}
|
|
861
|
+
clearFiles(event) {
|
|
862
|
+
event.stopPropagation();
|
|
863
|
+
this.model = null;
|
|
864
|
+
this.sizeError = false;
|
|
865
|
+
this.modelChange.emit(null);
|
|
866
|
+
this.changeEv.emit(null);
|
|
867
|
+
}
|
|
868
|
+
get maxSizeLabel() {
|
|
869
|
+
if (!this.maxSize)
|
|
870
|
+
return '';
|
|
871
|
+
if (this.maxSize >= 1024 * 1024)
|
|
872
|
+
return `Max ${(this.maxSize / 1024 / 1024).toFixed(1)} MB`;
|
|
873
|
+
if (this.maxSize >= 1024)
|
|
874
|
+
return `Max ${(this.maxSize / 1024).toFixed(0)} KB`;
|
|
875
|
+
return `Max ${this.maxSize} B`;
|
|
557
876
|
}
|
|
558
877
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\"
|
|
878
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFileUpload, isStandalone: false, selector: "osl-file-upload", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", accept: "accept", multiple: "multiple", maxSize: "maxSize" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n <input\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileChange($event)\"\n #fileInput\n class=\"file-input\"\n >\n\n <div\n class=\"drop-zone\"\n [class.error]=\"isInvalid || sizeError\"\n [class.file-disabled]=\"disabled\"\n [class.drag-over]=\"isDragOver\"\n [class.has-file]=\"!!model\"\n (click)=\"triggerInput(fileInput)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n >\n @if(!model) {\n <div class=\"drop-content\">\n <mat-icon class=\"upload-icon\">upload_file</mat-icon>\n <div class=\"drop-text\">\n <span class=\"browse-link\">Browse</span> or drag & drop\n </div>\n @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\n @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\n </div>\n } @else {\n <div class=\"file-list\">\n <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\n <span class=\"file-name\">{{fileNames}}</span>\n <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n </div>\n\n @if(sizeError) {\n <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\n } @else if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
560
879
|
}
|
|
561
880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFileUpload, decorators: [{
|
|
562
881
|
type: Component,
|
|
563
|
-
args: [{ selector: 'osl-file-upload', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\"
|
|
882
|
+
args: [{ selector: 'osl-file-upload', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n\n <input\n type=\"file\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileChange($event)\"\n #fileInput\n class=\"file-input\"\n >\n\n <div\n class=\"drop-zone\"\n [class.error]=\"isInvalid || sizeError\"\n [class.file-disabled]=\"disabled\"\n [class.drag-over]=\"isDragOver\"\n [class.has-file]=\"!!model\"\n (click)=\"triggerInput(fileInput)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave()\"\n (drop)=\"onDrop($event)\"\n >\n @if(!model) {\n <div class=\"drop-content\">\n <mat-icon class=\"upload-icon\">upload_file</mat-icon>\n <div class=\"drop-text\">\n <span class=\"browse-link\">Browse</span> or drag & drop\n </div>\n @if(accept) { <div class=\"drop-meta\">{{accept}}</div> }\n @if(maxSize) { <div class=\"drop-meta\">{{maxSizeLabel}}</div> }\n </div>\n } @else {\n <div class=\"file-list\">\n <mat-icon class=\"file-icon\">insert_drive_file</mat-icon>\n <span class=\"file-name\">{{fileNames}}</span>\n <button type=\"button\" class=\"clear-btn\" (click)=\"clearFiles($event)\" title=\"Remove\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n </div>\n\n @if(sizeError) {\n <mat-hint class=\"hint\">File exceeds the {{maxSizeLabel}} limit.</mat-hint>\n } @else if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.file-input{display:none}.drop-zone{width:100%;min-height:var(--osl-control-height);border-radius:var(--osl-border-radius);border:1.5px dashed var(--osl-border-color);cursor:pointer;transition:border-color .3s,background .3s;display:flex;align-items:center;justify-content:center;padding:8px}.drop-zone:hover:not(.file-disabled){border-color:var(--osl-focus-border-color);background:#00000003}.drop-zone.drag-over{border-color:var(--osl-focus-border-color);background:#00000008}.drop-zone.has-file{border-style:solid;border-color:var(--osl-border-color)}.drop-zone.error{border-color:var(--osl-error-color)}.drop-zone.file-disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5}.drop-content{display:flex;flex-direction:column;align-items:center;gap:4px;color:#888;pointer-events:none}.upload-icon{font-size:28px;width:28px;height:28px;color:#bbb}.drop-text{font-size:var(--osl-label-font-size)}.browse-link{color:var(--osl-focus-border-color);font-weight:500}.drop-meta{font-size:var(--osl-hint-font-size);color:#bbb}.file-list{display:flex;align-items:center;gap:8px;width:100%;pointer-events:none}.file-icon{font-size:20px;width:20px;height:20px;color:#888;flex-shrink:0}.file-name{flex:1;font-size:var(--osl-text-font-size);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-btn{pointer-events:all;display:flex;align-items:center;background:none;border:none;cursor:pointer;color:#aaa;padding:0;flex-shrink:0}.clear-btn mat-icon{font-size:16px;width:16px;height:16px}.clear-btn:hover{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
564
883
|
}], propDecorators: { label: [{
|
|
565
884
|
type: Input,
|
|
566
885
|
args: ['label']
|
|
@@ -576,6 +895,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
576
895
|
}], accept: [{
|
|
577
896
|
type: Input,
|
|
578
897
|
args: ['accept']
|
|
898
|
+
}], multiple: [{
|
|
899
|
+
type: Input,
|
|
900
|
+
args: ['multiple']
|
|
901
|
+
}], maxSize: [{
|
|
902
|
+
type: Input,
|
|
903
|
+
args: ['maxSize']
|
|
579
904
|
}], modelChange: [{
|
|
580
905
|
type: Output
|
|
581
906
|
}], changeEv: [{
|
|
@@ -587,6 +912,10 @@ class OslDatepicker {
|
|
|
587
912
|
required = false;
|
|
588
913
|
disabled = false;
|
|
589
914
|
model = '';
|
|
915
|
+
dateType = 'date';
|
|
916
|
+
placeholder = '';
|
|
917
|
+
minDate = '';
|
|
918
|
+
maxDate = '';
|
|
590
919
|
modelChange = new EventEmitter();
|
|
591
920
|
changeEv = new EventEmitter();
|
|
592
921
|
onModelChange(event) {
|
|
@@ -594,11 +923,11 @@ class OslDatepicker {
|
|
|
594
923
|
this.modelChange.emit(this.model);
|
|
595
924
|
}
|
|
596
925
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
597
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatepicker, isStandalone: false, selector: "osl-datepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
926
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatepicker, isStandalone: false, selector: "osl-datepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", dateType: "dateType", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n <input\n [type]=\"dateType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"minDate || null\"\n [attr.max]=\"maxDate || null\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n >\n @if(myField.touched && myField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
|
|
598
927
|
}
|
|
599
928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, decorators: [{
|
|
600
929
|
type: Component,
|
|
601
|
-
args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\"
|
|
930
|
+
args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n <input\n [type]=\"dateType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"minDate || null\"\n [attr.max]=\"maxDate || null\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n >\n @if(myField.touched && myField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
602
931
|
}], propDecorators: { label: [{
|
|
603
932
|
type: Input,
|
|
604
933
|
args: ['label']
|
|
@@ -611,6 +940,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
611
940
|
}], model: [{
|
|
612
941
|
type: Input,
|
|
613
942
|
args: ['model']
|
|
943
|
+
}], dateType: [{
|
|
944
|
+
type: Input,
|
|
945
|
+
args: ['dateType']
|
|
946
|
+
}], placeholder: [{
|
|
947
|
+
type: Input,
|
|
948
|
+
args: ['placeholder']
|
|
949
|
+
}], minDate: [{
|
|
950
|
+
type: Input,
|
|
951
|
+
args: ['minDate']
|
|
952
|
+
}], maxDate: [{
|
|
953
|
+
type: Input,
|
|
954
|
+
args: ['maxDate']
|
|
614
955
|
}], modelChange: [{
|
|
615
956
|
type: Output
|
|
616
957
|
}], changeEv: [{
|
|
@@ -618,31 +959,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
618
959
|
}] } });
|
|
619
960
|
|
|
620
961
|
class OslCheckbox {
|
|
962
|
+
checkboxEl;
|
|
621
963
|
label = '';
|
|
622
964
|
disabled = false;
|
|
965
|
+
required = false;
|
|
623
966
|
model = false;
|
|
967
|
+
indeterminate = false;
|
|
624
968
|
modelChange = new EventEmitter();
|
|
625
969
|
changeEv = new EventEmitter();
|
|
970
|
+
touched = false;
|
|
971
|
+
get isInvalid() {
|
|
972
|
+
return this.touched && this.required && !this.model;
|
|
973
|
+
}
|
|
974
|
+
ngOnChanges(changes) {
|
|
975
|
+
if (changes['indeterminate'] && this.checkboxEl) {
|
|
976
|
+
this.checkboxEl.nativeElement.indeterminate = this.indeterminate;
|
|
977
|
+
}
|
|
978
|
+
}
|
|
979
|
+
ngAfterViewInit() {
|
|
980
|
+
if (this.checkboxEl) {
|
|
981
|
+
this.checkboxEl.nativeElement.indeterminate = this.indeterminate;
|
|
982
|
+
}
|
|
983
|
+
}
|
|
626
984
|
onModelChange(event) {
|
|
985
|
+
this.touched = true;
|
|
627
986
|
this.model = event;
|
|
628
987
|
this.modelChange.emit(this.model);
|
|
629
988
|
this.changeEv.emit(this.model);
|
|
630
989
|
}
|
|
631
990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
632
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
991
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslCheckbox, isStandalone: false, selector: "osl-checkbox", inputs: { label: "label", disabled: "disabled", required: "required", model: "model", indeterminate: "indeterminate" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, viewQueries: [{ propertyName: "checkboxEl", first: true, predicate: ["checkboxEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <label class=\"checkbox-wrapper\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\n <input\n #checkboxEl\n type=\"checkbox\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n [disabled]=\"disabled\"\n >\n <span class=\"checkbox-label\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </span>\n </label>\n @if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
|
|
633
992
|
}
|
|
634
993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslCheckbox, decorators: [{
|
|
635
994
|
type: Component,
|
|
636
|
-
args: [{ selector: 'osl-checkbox', standalone: false, template: "<div class=\"d-flex flex-column\">\n
|
|
637
|
-
}], propDecorators: {
|
|
995
|
+
args: [{ selector: 'osl-checkbox', standalone: false, template: "<div class=\"d-flex flex-column\">\n <label class=\"checkbox-wrapper\" [class.checkbox-disabled]=\"disabled\" [class.checkbox-invalid]=\"isInvalid\">\n <input\n #checkboxEl\n type=\"checkbox\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n [disabled]=\"disabled\"\n >\n <span class=\"checkbox-label\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </span>\n </label>\n @if(isInvalid) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--osl-label-font-size);width:fit-content}.checkbox-wrapper input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#333;flex-shrink:0}.checkbox-wrapper .checkbox-label{-webkit-user-select:none;user-select:none}.checkbox-wrapper.checkbox-disabled{opacity:.6;cursor:not-allowed}.checkbox-wrapper.checkbox-disabled input[type=checkbox]{cursor:not-allowed}.checkbox-wrapper.checkbox-invalid{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
996
|
+
}], propDecorators: { checkboxEl: [{
|
|
997
|
+
type: ViewChild,
|
|
998
|
+
args: ['checkboxEl']
|
|
999
|
+
}], label: [{
|
|
638
1000
|
type: Input,
|
|
639
1001
|
args: ['label']
|
|
640
1002
|
}], disabled: [{
|
|
641
1003
|
type: Input,
|
|
642
1004
|
args: ['disabled']
|
|
1005
|
+
}], required: [{
|
|
1006
|
+
type: Input,
|
|
1007
|
+
args: ['required']
|
|
643
1008
|
}], model: [{
|
|
644
1009
|
type: Input,
|
|
645
1010
|
args: ['model']
|
|
1011
|
+
}], indeterminate: [{
|
|
1012
|
+
type: Input,
|
|
1013
|
+
args: ['indeterminate']
|
|
646
1014
|
}], modelChange: [{
|
|
647
1015
|
type: Output
|
|
648
1016
|
}], changeEv: [{
|
|
@@ -712,16 +1080,40 @@ class DynamicForm {
|
|
|
712
1080
|
elements = [];
|
|
713
1081
|
model = {};
|
|
714
1082
|
modelChange = new EventEmitter();
|
|
1083
|
+
datasourceCache = inject(DatasourceCacheService);
|
|
1084
|
+
ngOnInit() {
|
|
1085
|
+
this.loadApiDatasources();
|
|
1086
|
+
}
|
|
1087
|
+
ngOnChanges(changes) {
|
|
1088
|
+
if (changes['elements']) {
|
|
1089
|
+
this.loadApiDatasources();
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
loadApiDatasources() {
|
|
1093
|
+
this._loadForList(this.elements);
|
|
1094
|
+
}
|
|
1095
|
+
_loadForList(list) {
|
|
1096
|
+
for (const elem of list) {
|
|
1097
|
+
if (elem.elementType === 'fieldset' && elem.rows?.length) {
|
|
1098
|
+
this._loadForList(elem.rows);
|
|
1099
|
+
}
|
|
1100
|
+
else if (elem.apiService && elem.apiMethod) {
|
|
1101
|
+
this.datasourceCache
|
|
1102
|
+
.load(elem.apiService, elem.apiMethod, elem.apiBody)
|
|
1103
|
+
.then((data) => (elem.datasource = data));
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
715
1107
|
onModelChange(event, key) {
|
|
716
1108
|
this.model[key] = event;
|
|
717
1109
|
this.modelChange.emit(this.model);
|
|
718
1110
|
}
|
|
719
1111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "@if(elements && elements.length > 0){\n <div class=\"row w-100\">\n @for(elem of elements;track elem){\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)){\n <ng-container *ngTemplateOutlet=\"recursiveForm; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #recursiveForm let-elem>\n @if(elem.hideIf? !elem.hideIf(model):true){\n @switch (elem.elementType) {\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [(model)]=\"model[elem.key]\"></osl-input>\n </div>\n }\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea [rows]=\"elem.textareaRows ? elem.textareaRows.toString() : undefined\"\n (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [(model)]=\"model[elem.key]\"></osl-textarea>\n </div>\n }\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [(model)]=\"model[elem.key]\"></osl-select>\n </div>\n }\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [(model)]=\"model[elem.key]\"></osl-radio>\n </div>\n }\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [(model)]=\"model[elem.key]\"></osl-slide-toggle>\n </div>\n }\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [(model)]=\"model[elem.key]\"></osl-autocomplete>\n </div>\n }\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [(model)]=\"model[elem.key]\"></osl-file-upload>\n </div>\n }\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [(model)]=\"model[elem.key]\"></osl-datepicker>\n </div>\n }\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [(model)]=\"model[elem.key]\"></osl-checkbox>\n </div>\n }\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button (clickEv)=\"elem.change($event)\" [loading]=\"elem.loadingIf? elem.loadingIf(model):false\" [variant]=\"'secondary'\" [label]=\"elem.label\"></osl-button>\n </div>\n }\n }\n}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "model"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
|
|
1112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n <div class=\"row w-100\">\n @for(elem of elements; track elem) {\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #formField let-elem>\n @if(elem.hideIf ? !elem.hideIf(model) : true) {\n @switch (elem.elementType) {\n\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [type]=\"elem.inputType || 'text'\"\n [placeholder]=\"elem.placeholder || ''\"\n [mask]=\"elem.mask || ''\"\n [min]=\"elem.min ?? ''\"\n [max]=\"elem.max ?? ''\"\n [minLength]=\"elem.minLength ?? null\"\n [maxLength]=\"elem.maxLength ?? null\"\n [prefixIcon]=\"elem.prefixIcon || ''\"\n [suffixIcon]=\"elem.suffixIcon || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-input>\n </div>\n }\n\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [rows]=\"elem.textareaRows || 3\"\n [placeholder]=\"elem.placeholder || ''\"\n [maxLength]=\"elem.maxLength ?? null\"\n [minLength]=\"elem.minLength ?? null\"\n [characterCounter]=\"!!elem.characterCounter\"\n [resize]=\"elem.resize || 'none'\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-textarea>\n </div>\n }\n\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n [clearable]=\"!!elem.clearable\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-select>\n </div>\n }\n\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [inline]=\"!!elem.inline\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-radio>\n </div>\n }\n\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [labelPosition]=\"elem.labelPosition || 'after'\"\n [trueLabel]=\"elem.trueLabel || ''\"\n [falseLabel]=\"elem.falseLabel || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-slide-toggle>\n </div>\n }\n\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-autocomplete>\n </div>\n }\n\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [multiple]=\"!!elem.multiple\"\n [maxSize]=\"elem.maxFileSize || 0\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-file-upload>\n </div>\n }\n\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [dateType]=\"elem.dateType || 'date'\"\n [placeholder]=\"elem.placeholder || ''\"\n [minDate]=\"elem.minDate || ''\"\n [maxDate]=\"elem.maxDate || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-datepicker>\n </div>\n }\n\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [indeterminate]=\"!!elem.indeterminate\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-checkbox>\n </div>\n }\n\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button\n [label]=\"elem.label\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n variant=\"secondary\"\n (clickEv)=\"elem.change ? elem.change(model) : null\"\n ></osl-button>\n </div>\n }\n\n @case (\"fieldset\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <fieldset class=\"osl-fieldset\">\n @if(elem.label) {\n <legend class=\"osl-fieldset-legend\">\n <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n </legend>\n }\n <div class=\"row w-100 osl-fieldset-body\">\n @for(innerElem of elem.rows; track innerElem) {\n @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n }\n }\n </div>\n </fieldset>\n </div>\n }\n\n @case (\"templateRef\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n\n \n </div>\n }\n\n }\n }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
|
|
721
1113
|
}
|
|
722
1114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, decorators: [{
|
|
723
1115
|
type: Component,
|
|
724
|
-
args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0){\n <div class=\"row w-100\">\n @for(elem of elements;track elem){\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)){\n <ng-container *ngTemplateOutlet=\"recursiveForm; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #recursiveForm let-elem>\n @if(elem.hideIf? !elem.hideIf(model):true){\n @switch (elem.elementType) {\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [(model)]=\"model[elem.key]\"></osl-input>\n </div>\n }\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea [rows]=\"elem.textareaRows ? elem.textareaRows.toString() : undefined\"\n (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [(model)]=\"model[elem.key]\"></osl-textarea>\n </div>\n }\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [(model)]=\"model[elem.key]\"></osl-select>\n </div>\n }\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [(model)]=\"model[elem.key]\"></osl-radio>\n </div>\n }\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [(model)]=\"model[elem.key]\"></osl-slide-toggle>\n </div>\n }\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [(model)]=\"model[elem.key]\"></osl-autocomplete>\n </div>\n }\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [(model)]=\"model[elem.key]\"></osl-file-upload>\n </div>\n }\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [(model)]=\"model[elem.key]\"></osl-datepicker>\n </div>\n }\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox (changeEv)=\"elem.change ? elem.change(model) : null\" [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [(model)]=\"model[elem.key]\"></osl-checkbox>\n </div>\n }\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button (clickEv)=\"elem.change($event)\" [loading]=\"elem.loadingIf? elem.loadingIf(model):false\" [variant]=\"'secondary'\" [label]=\"elem.label\"></osl-button>\n </div>\n }\n }\n}\n</ng-template>\n" }]
|
|
1116
|
+
args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n <div class=\"row w-100\">\n @for(elem of elements; track elem) {\n @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n }\n }\n </div>\n}\n\n<ng-template #formField let-elem>\n @if(elem.hideIf ? !elem.hideIf(model) : true) {\n @switch (elem.elementType) {\n\n @case (\"textbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-input\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [type]=\"elem.inputType || 'text'\"\n [placeholder]=\"elem.placeholder || ''\"\n [mask]=\"elem.mask || ''\"\n [min]=\"elem.min ?? ''\"\n [max]=\"elem.max ?? ''\"\n [minLength]=\"elem.minLength ?? null\"\n [maxLength]=\"elem.maxLength ?? null\"\n [prefixIcon]=\"elem.prefixIcon || ''\"\n [suffixIcon]=\"elem.suffixIcon || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-input>\n </div>\n }\n\n @case (\"textarea\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-textarea\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [rows]=\"elem.textareaRows || 3\"\n [placeholder]=\"elem.placeholder || ''\"\n [maxLength]=\"elem.maxLength ?? null\"\n [minLength]=\"elem.minLength ?? null\"\n [characterCounter]=\"!!elem.characterCounter\"\n [resize]=\"elem.resize || 'none'\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-textarea>\n </div>\n }\n\n @case (\"select\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-select\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n [clearable]=\"!!elem.clearable\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-select>\n </div>\n }\n\n @case (\"radio\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-radio\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [inline]=\"!!elem.inline\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-radio>\n </div>\n }\n\n @case (\"slide-toggle\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-slide-toggle\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [labelPosition]=\"elem.labelPosition || 'after'\"\n [trueLabel]=\"elem.trueLabel || ''\"\n [falseLabel]=\"elem.falseLabel || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-slide-toggle>\n </div>\n }\n\n @case (\"autocomplete\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-autocomplete\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [datasource]=\"elem.datasource || []\"\n [displayField]=\"elem.displayField || ''\"\n [valueField]=\"elem.valueField || ''\"\n [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-autocomplete>\n </div>\n }\n\n @case (\"file-uploader\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-file-upload\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [accept]=\"elem.accept || ''\"\n [multiple]=\"!!elem.multiple\"\n [maxSize]=\"elem.maxFileSize || 0\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-file-upload>\n </div>\n }\n\n @case (\"datepicker\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-datepicker\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [dateType]=\"elem.dateType || 'date'\"\n [placeholder]=\"elem.placeholder || ''\"\n [minDate]=\"elem.minDate || ''\"\n [maxDate]=\"elem.maxDate || ''\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-datepicker>\n </div>\n }\n\n @case (\"checkbox\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-checkbox\n [label]=\"elem.label\"\n [disabled]=\"elem.disabledIf ? elem.disabledIf() : !!elem.disabled\"\n [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n [indeterminate]=\"!!elem.indeterminate\"\n (changeEv)=\"elem.change ? elem.change(model) : null\"\n [(model)]=\"model[elem.key]\"\n ></osl-checkbox>\n </div>\n }\n\n @case (\"button\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-2'\">\n <osl-button\n [label]=\"elem.label\"\n [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n variant=\"secondary\"\n (clickEv)=\"elem.change ? elem.change(model) : null\"\n ></osl-button>\n </div>\n }\n\n @case (\"fieldset\") {\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <fieldset class=\"osl-fieldset\">\n @if(elem.label) {\n <legend class=\"osl-fieldset-legend\">\n <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n </legend>\n }\n <div class=\"row w-100 osl-fieldset-body\">\n @for(innerElem of elem.rows; track innerElem) {\n @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n }\n }\n </div>\n </fieldset>\n </div>\n }\n\n @case (\"templateRef\"){\n <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n\n \n </div>\n }\n\n }\n }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
|
|
725
1117
|
}], propDecorators: { elements: [{
|
|
726
1118
|
type: Input,
|
|
727
1119
|
args: ['elements']
|
|
@@ -926,6 +1318,7 @@ class OslSetup {
|
|
|
926
1318
|
dialogWidth = "50vw";
|
|
927
1319
|
/** Dynamic form elements — when provided, enables Add/Edit dialog and action column. */
|
|
928
1320
|
formElements = [];
|
|
1321
|
+
onAddEditFn;
|
|
929
1322
|
// ── Outputs ───────────────────────────────────────────────────
|
|
930
1323
|
onSearch = new EventEmitter();
|
|
931
1324
|
onAdd = new EventEmitter();
|
|
@@ -952,16 +1345,37 @@ class OslSetup {
|
|
|
952
1345
|
this.dialogMode = 'add';
|
|
953
1346
|
this.dialogModel = {};
|
|
954
1347
|
this.onAdd.emit();
|
|
1348
|
+
if (this.onAddEditFn) {
|
|
1349
|
+
this.onAddEditFn();
|
|
1350
|
+
return;
|
|
1351
|
+
}
|
|
955
1352
|
this._openDialog();
|
|
956
1353
|
}
|
|
957
1354
|
openEditDialog(row) {
|
|
958
1355
|
this.dialogMode = 'edit';
|
|
959
1356
|
this.dialogModel = { ...row };
|
|
960
1357
|
this.onEdit.emit(row);
|
|
1358
|
+
if (this.onAddEditFn) {
|
|
1359
|
+
this.onAddEditFn(row);
|
|
1360
|
+
return;
|
|
1361
|
+
}
|
|
961
1362
|
this._openDialog();
|
|
962
1363
|
}
|
|
963
1364
|
onDeleteClick(row) {
|
|
964
|
-
|
|
1365
|
+
const dialogData = {
|
|
1366
|
+
title: 'Delete ' + this.title,
|
|
1367
|
+
message: `Are you sure you want to delete this ${this.title.toLowerCase()}? This action cannot be undone.`,
|
|
1368
|
+
confirmText: 'Delete',
|
|
1369
|
+
cancelText: 'Cancel',
|
|
1370
|
+
};
|
|
1371
|
+
this._injector.get(MatDialog).open(DeleteConfirmation, {
|
|
1372
|
+
width: '380px',
|
|
1373
|
+
data: dialogData,
|
|
1374
|
+
disableClose: true,
|
|
1375
|
+
}).afterClosed().subscribe((confirmed) => {
|
|
1376
|
+
if (confirmed)
|
|
1377
|
+
this.onDelete.emit(row);
|
|
1378
|
+
});
|
|
965
1379
|
}
|
|
966
1380
|
cancelDialog() {
|
|
967
1381
|
this._dialogRef?.close();
|
|
@@ -984,11 +1398,11 @@ class OslSetup {
|
|
|
984
1398
|
});
|
|
985
1399
|
}
|
|
986
1400
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSetup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslSetup, isStandalone: false, selector: "osl-setup", inputs: { title: "title", columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", tableHeight: "tableHeight", totalRecords: "totalRecords", loading: "loading", dialogWidth: "dialogWidth", formElements: "formElements" }, outputs: { onSearch: "onSearch", onAdd: "onAdd", onSave: "onSave", onEdit: "onEdit", onDelete: "onDelete", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "formBodyTpl", first: true, predicate: ["formBodyTpl"], descendants: true }, { propertyName: "formFooterTpl", first: true, predicate: ["formFooterTpl"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\n\n <!-- Header -->\n <div class=\"osl-setup-header\">\n <h5 class=\"mb-0\">{{ title }}</h5>\n <div class=\"d-flex align-items-center gap-2\">\n <osl-searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n <osl-button\n variant=\"secondary\"\n size=\"sm\"\n [label]=\"'Add ' + title\"\n (clickEv)=\"openAddDialog()\"\n ></osl-button>\n </div>\n </div>\n\n <!-- Grid -->\n <div class=\"osl-setup-body my-2\">\n <osl-grid\n [columns]=\"columnsWithActions\"\n [datasource]=\"datasource\"\n [isPaginated]=\"isPaginated\"\n [pageSize]=\"pageSize\"\n [autoMode]=\"autoMode\"\n [tableHeight]=\"tableHeight\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (editClick)=\"openEditDialog($event)\"\n (deleteClick)=\"onDeleteClick($event)\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\n (sortChange)=\"sortChange.emit($event)\"\n />\n </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n <osl-dynamic-form\n [elements]=\"formElements\"\n [(model)]=\"dialogModel\"\n ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n <div class=\"osl-setup-dialog-footer\">\n <
|
|
1401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslSetup, isStandalone: false, selector: "osl-setup", inputs: { title: "title", columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", autoMode: "autoMode", tableHeight: "tableHeight", totalRecords: "totalRecords", loading: "loading", dialogWidth: "dialogWidth", formElements: "formElements", onAddEditFn: "onAddEditFn" }, outputs: { onSearch: "onSearch", onAdd: "onAdd", onSave: "onSave", onEdit: "onEdit", onDelete: "onDelete", pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "formBodyTpl", first: true, predicate: ["formBodyTpl"], descendants: true }, { propertyName: "formFooterTpl", first: true, predicate: ["formFooterTpl"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\n\n <!-- Header -->\n <div class=\"osl-setup-header\">\n <h5 class=\"mb-0\">{{ title }}</h5>\n <div class=\"d-flex align-items-center gap-2\">\n <osl-searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n <osl-button\n variant=\"secondary\"\n size=\"sm\"\n [label]=\"'Add ' + title\"\n (clickEv)=\"openAddDialog()\"\n ></osl-button>\n </div>\n </div>\n\n <!-- Grid -->\n <div class=\"osl-setup-body my-2\">\n <osl-grid\n [columns]=\"columnsWithActions\"\n [datasource]=\"datasource\"\n [isPaginated]=\"isPaginated\"\n [pageSize]=\"pageSize\"\n [autoMode]=\"autoMode\"\n [tableHeight]=\"tableHeight\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (editClick)=\"openEditDialog($event)\"\n (deleteClick)=\"onDeleteClick($event)\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\n (sortChange)=\"sortChange.emit($event)\"\n />\n </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n <osl-dynamic-form\n [elements]=\"formElements\"\n [(model)]=\"dialogModel\"\n ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n <div class=\"osl-setup-dialog-footer\">\n <button mat-stroked-button class=\"dialog-cancel-btn\" (click)=\"cancelDialog()\">\n <mat-icon>close</mat-icon>\n Cancel\n </button>\n <button mat-flat-button class=\"dialog-save-btn\" (click)=\"saveDialog()\">\n <mat-icon>{{ dialogMode === 'add' ? 'add_circle' : 'save' }}</mat-icon>\n {{ dialogMode === 'add' ? 'Add ' + title : 'Save Changes' }}\n </button>\n </div>\n</ng-template>\n", styles: [".osl-setup-header{display:flex;align-items:center;justify-content:space-between}.osl-setup-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.dialog-cancel-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);padding:0 16px;transition:all .2s ease}.dialog-cancel-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-cancel-btn:hover{border-color:#9ca3af;background:#f9fafb;color:#374151}.dialog-save-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);color:#fff;border-radius:var(--osl-border-radius, 4px);padding:0 18px;transition:all .2s ease;box-shadow:0 2px 8px #2563eb40}.dialog-save-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-save-btn:hover{background:linear-gradient(135deg,var(--osl-primary-hover, #1d4ed8),#2563eb);box-shadow:0 4px 14px #2563eb66;transform:translateY(-1px)}.dialog-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb40}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: DynamicForm, selector: "osl-dynamic-form", inputs: ["elements", "model"], outputs: ["modelChange"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }, { kind: "component", type: OslSearchbar, selector: "osl-searchbar", inputs: ["label"], outputs: ["onSearch"] }, { kind: "component", type: OslGrid, selector: "osl-grid", inputs: ["columns", "datasource", "isPaginated", "pageSize", "autoMode", "totalRecords", "tableHeight", "loading"], outputs: ["datasourceChange", "pageChange", "pageSizeChange", "sortChange", "editClick", "deleteClick"] }] });
|
|
988
1402
|
}
|
|
989
1403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSetup, decorators: [{
|
|
990
1404
|
type: Component,
|
|
991
|
-
args: [{ selector: 'osl-setup', standalone: false, template: "<div class=\"p-2\">\n\n <!-- Header -->\n <div class=\"osl-setup-header\">\n <h5 class=\"mb-0\">{{ title }}</h5>\n <div class=\"d-flex align-items-center gap-2\">\n <osl-searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n <osl-button\n variant=\"secondary\"\n size=\"sm\"\n [label]=\"'Add ' + title\"\n (clickEv)=\"openAddDialog()\"\n ></osl-button>\n </div>\n </div>\n\n <!-- Grid -->\n <div class=\"osl-setup-body my-2\">\n <osl-grid\n [columns]=\"columnsWithActions\"\n [datasource]=\"datasource\"\n [isPaginated]=\"isPaginated\"\n [pageSize]=\"pageSize\"\n [autoMode]=\"autoMode\"\n [tableHeight]=\"tableHeight\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (editClick)=\"openEditDialog($event)\"\n (deleteClick)=\"onDeleteClick($event)\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\n (sortChange)=\"sortChange.emit($event)\"\n />\n </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n <osl-dynamic-form\n [elements]=\"formElements\"\n [(model)]=\"dialogModel\"\n ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n <div class=\"osl-setup-dialog-footer\">\n <
|
|
1405
|
+
args: [{ selector: 'osl-setup', standalone: false, template: "<div class=\"p-2\">\n\n <!-- Header -->\n <div class=\"osl-setup-header\">\n <h5 class=\"mb-0\">{{ title }}</h5>\n <div class=\"d-flex align-items-center gap-2\">\n <osl-searchbar class=\"mx-2\" (onSearch)=\"onSearch.emit($event)\"></osl-searchbar>\n <osl-button\n variant=\"secondary\"\n size=\"sm\"\n [label]=\"'Add ' + title\"\n (clickEv)=\"openAddDialog()\"\n ></osl-button>\n </div>\n </div>\n\n <!-- Grid -->\n <div class=\"osl-setup-body my-2\">\n <osl-grid\n [columns]=\"columnsWithActions\"\n [datasource]=\"datasource\"\n [isPaginated]=\"isPaginated\"\n [pageSize]=\"pageSize\"\n [autoMode]=\"autoMode\"\n [tableHeight]=\"tableHeight\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n (editClick)=\"openEditDialog($event)\"\n (deleteClick)=\"onDeleteClick($event)\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\n (sortChange)=\"sortChange.emit($event)\"\n />\n </div>\n\n</div>\n\n<!-- Dialog: Form Body -->\n<ng-template #formBodyTpl>\n <osl-dynamic-form\n [elements]=\"formElements\"\n [(model)]=\"dialogModel\"\n ></osl-dynamic-form>\n</ng-template>\n\n<!-- Dialog: Form Footer -->\n<ng-template #formFooterTpl>\n <div class=\"osl-setup-dialog-footer\">\n <button mat-stroked-button class=\"dialog-cancel-btn\" (click)=\"cancelDialog()\">\n <mat-icon>close</mat-icon>\n Cancel\n </button>\n <button mat-flat-button class=\"dialog-save-btn\" (click)=\"saveDialog()\">\n <mat-icon>{{ dialogMode === 'add' ? 'add_circle' : 'save' }}</mat-icon>\n {{ dialogMode === 'add' ? 'Add ' + title : 'Save Changes' }}\n </button>\n </div>\n</ng-template>\n", styles: [".osl-setup-header{display:flex;align-items:center;justify-content:space-between}.osl-setup-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%}.dialog-cancel-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;border-color:var(--osl-border-color, #d1d5db);color:var(--osl-secondary, #6b7280);border-radius:var(--osl-border-radius, 4px);padding:0 16px;transition:all .2s ease}.dialog-cancel-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-cancel-btn:hover{border-color:#9ca3af;background:#f9fafb;color:#374151}.dialog-save-btn{display:flex;align-items:center;gap:6px;height:38px;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--osl-primary, #2563eb),#3b82f6);color:#fff;border-radius:var(--osl-border-radius, 4px);padding:0 18px;transition:all .2s ease;box-shadow:0 2px 8px #2563eb40}.dialog-save-btn mat-icon{font-size:17px;width:17px;height:17px}.dialog-save-btn:hover{background:linear-gradient(135deg,var(--osl-primary-hover, #1d4ed8),#2563eb);box-shadow:0 4px 14px #2563eb66;transform:translateY(-1px)}.dialog-save-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb40}\n"] }]
|
|
992
1406
|
}], propDecorators: { formBodyTpl: [{
|
|
993
1407
|
type: ViewChild,
|
|
994
1408
|
args: ['formBodyTpl']
|
|
@@ -1028,6 +1442,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1028
1442
|
}], formElements: [{
|
|
1029
1443
|
type: Input,
|
|
1030
1444
|
args: ['formElements']
|
|
1445
|
+
}], onAddEditFn: [{
|
|
1446
|
+
type: Input,
|
|
1447
|
+
args: ['onAddEditFn']
|
|
1031
1448
|
}], onSearch: [{
|
|
1032
1449
|
type: Output
|
|
1033
1450
|
}], onAdd: [{
|
|
@@ -1046,6 +1463,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1046
1463
|
type: Output
|
|
1047
1464
|
}] } });
|
|
1048
1465
|
|
|
1466
|
+
class OslFormGrid {
|
|
1467
|
+
columns = [];
|
|
1468
|
+
datasource = [];
|
|
1469
|
+
datasourceChange = new EventEmitter();
|
|
1470
|
+
isPaginated = false;
|
|
1471
|
+
pageSize = 10;
|
|
1472
|
+
canAdd = true;
|
|
1473
|
+
canDelete = true;
|
|
1474
|
+
loading = false;
|
|
1475
|
+
tableHeight = '350px';
|
|
1476
|
+
rowAdd = new EventEmitter();
|
|
1477
|
+
rowDelete = new EventEmitter();
|
|
1478
|
+
get hasActions() {
|
|
1479
|
+
return this.canAdd || this.canDelete;
|
|
1480
|
+
}
|
|
1481
|
+
currentPage = 1;
|
|
1482
|
+
pageSizeOptions = [5, 10, 25, 50];
|
|
1483
|
+
get _total() {
|
|
1484
|
+
return this.datasource.length;
|
|
1485
|
+
}
|
|
1486
|
+
get totalPages() {
|
|
1487
|
+
return Math.ceil(this._total / this.pageSize) || 1;
|
|
1488
|
+
}
|
|
1489
|
+
get pagedData() {
|
|
1490
|
+
if (!this.isPaginated)
|
|
1491
|
+
return this.datasource;
|
|
1492
|
+
const start = (this.currentPage - 1) * this.pageSize;
|
|
1493
|
+
return this.datasource.slice(start, start + this.pageSize);
|
|
1494
|
+
}
|
|
1495
|
+
get startRecord() {
|
|
1496
|
+
return this._total === 0 ? 0 : (this.currentPage - 1) * this.pageSize + 1;
|
|
1497
|
+
}
|
|
1498
|
+
get endRecord() {
|
|
1499
|
+
return Math.min(this.currentPage * this.pageSize, this._total);
|
|
1500
|
+
}
|
|
1501
|
+
get pageNumbers() {
|
|
1502
|
+
const total = this.totalPages;
|
|
1503
|
+
if (total <= 7)
|
|
1504
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
1505
|
+
const pages = [1];
|
|
1506
|
+
if (this.currentPage > 3)
|
|
1507
|
+
pages.push(-1);
|
|
1508
|
+
for (let i = Math.max(2, this.currentPage - 1); i <= Math.min(total - 1, this.currentPage + 1); i++) {
|
|
1509
|
+
pages.push(i);
|
|
1510
|
+
}
|
|
1511
|
+
if (this.currentPage < total - 2)
|
|
1512
|
+
pages.push(-1);
|
|
1513
|
+
pages.push(total);
|
|
1514
|
+
return pages;
|
|
1515
|
+
}
|
|
1516
|
+
get skeletonRows() {
|
|
1517
|
+
return Array.from({ length: Math.min(this.pageSize, 6) });
|
|
1518
|
+
}
|
|
1519
|
+
// ngOnChanges(changes: SimpleChanges): void {
|
|
1520
|
+
// if (changes['datasource']) {
|
|
1521
|
+
// this.currentPage = 1;
|
|
1522
|
+
// }
|
|
1523
|
+
// }
|
|
1524
|
+
addRow() {
|
|
1525
|
+
const newRow = {};
|
|
1526
|
+
this.columns.forEach(col => (newRow[col.key] = null));
|
|
1527
|
+
this.datasource = [...this.datasource, newRow];
|
|
1528
|
+
this.datasourceChange.emit(this.datasource);
|
|
1529
|
+
this.rowAdd.emit(newRow);
|
|
1530
|
+
if (this.isPaginated) {
|
|
1531
|
+
// this.currentPage = this.totalPages;
|
|
1532
|
+
this.goToPage(this.totalPages);
|
|
1533
|
+
}
|
|
1534
|
+
}
|
|
1535
|
+
deleteRow(pagedIndex) {
|
|
1536
|
+
const actualIndex = this.isPaginated
|
|
1537
|
+
? (this.currentPage - 1) * this.pageSize + pagedIndex
|
|
1538
|
+
: pagedIndex;
|
|
1539
|
+
const row = this.datasource[actualIndex];
|
|
1540
|
+
this.datasource = this.datasource.filter((_, i) => i !== actualIndex);
|
|
1541
|
+
this.datasourceChange.emit(this.datasource);
|
|
1542
|
+
this.rowDelete.emit({ row, index: actualIndex });
|
|
1543
|
+
if (this.currentPage > this.totalPages) {
|
|
1544
|
+
this.currentPage = this.totalPages;
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
onCellChange(row, col, value) {
|
|
1548
|
+
row[col.key] = value;
|
|
1549
|
+
this.datasourceChange.emit(this.datasource);
|
|
1550
|
+
if (col.formElem?.change)
|
|
1551
|
+
col.formElem.change(row);
|
|
1552
|
+
}
|
|
1553
|
+
goToPage(page) {
|
|
1554
|
+
if (page < 1 || page > this.totalPages)
|
|
1555
|
+
return;
|
|
1556
|
+
this.currentPage = page;
|
|
1557
|
+
// this.cd.markForCheck()
|
|
1558
|
+
}
|
|
1559
|
+
onPageSizeChange(size) {
|
|
1560
|
+
this.pageSize = Number(size);
|
|
1561
|
+
this.currentPage = 1;
|
|
1562
|
+
}
|
|
1563
|
+
isDisabled(elem) {
|
|
1564
|
+
return elem.disabledIf ? elem.disabledIf() : !!elem.disabled;
|
|
1565
|
+
}
|
|
1566
|
+
isLoading(row, elem) {
|
|
1567
|
+
return elem.loadingIf ? elem.loadingIf(row) : false;
|
|
1568
|
+
}
|
|
1569
|
+
colRequired(col) {
|
|
1570
|
+
return !!col.formElem?.required || !!col.formElem?.requiredIf;
|
|
1571
|
+
}
|
|
1572
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1573
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslFormGrid, isStandalone: false, selector: "osl-form-grid", inputs: { columns: "columns", datasource: "datasource", isPaginated: "isPaginated", pageSize: "pageSize", canAdd: "canAdd", canDelete: "canDelete", loading: "loading", tableHeight: "tableHeight" }, outputs: { datasourceChange: "datasourceChange", rowAdd: "rowAdd", rowDelete: "rowDelete" }, ngImport: i0, template: "<div class=\"osl-fg-wrapper\">\n\n <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\n <table class=\"osl-fg-table\">\n\n <thead class=\"osl-fg-thead\">\n <tr>\n <!-- Actions column: + add button in header -->\n @if (hasActions) {\n <th class=\"osl-fg-th osl-fg-th--actions\">\n @if (canAdd) {\n <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </th>\n }\n @for (col of columns; track col.key) {\n <th class=\"osl-fg-th\" [style.width]=\"col.width\">\n {{ col.displayName }}\n @if (colRequired(col)) {\n <span class=\"osl-fg-th-required\">*</span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n\n @if (loading) {\n @for (sk of skeletonRows; track $index) {\n <tr class=\"osl-fg-row osl-fg-row--skeleton\">\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\n </td>\n }\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\n }\n </tr>\n }\n\n } @else if (pagedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\n <div class=\"osl-fg-empty-inner\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\n </svg>\n <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\n </div>\n </td>\n </tr>\n\n } @else {\n @for (row of pagedData; track $index; let i = $index) {\n <tr class=\"osl-fg-row\">\n\n <!-- Delete button first -->\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n @if (canDelete) {\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n <!-- <button class=\"osl-fg-delete-btn\" (click)=\"deleteRow(i)\" title=\"Delete row\">\n <mat-icon>delete_outline</mat-icon>\n </button> -->\n }\n </td>\n }\n\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\" [style.width]=\"col.width\">\n @if (col.formElem) {\n <div class=\"osl-fg-cell-form\">\n @switch (col.formElem.elementType) {\n\n @case ('textbox') {\n <osl-input\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [type]=\"col.formElem.inputType || 'text'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [mask]=\"col.formElem.mask || ''\"\n [min]=\"col.formElem.min ?? ''\"\n [max]=\"col.formElem.max ?? ''\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [prefixIcon]=\"col.formElem.prefixIcon || ''\"\n [suffixIcon]=\"col.formElem.suffixIcon || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-input>\n }\n\n @case ('textarea') {\n <osl-textarea\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [rows]=\"col.formElem.textareaRows || 3\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [characterCounter]=\"!!col.formElem.characterCounter\"\n [resize]=\"col.formElem.resize || 'none'\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-textarea>\n }\n\n @case ('select') {\n <osl-select\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [clearable]=\"!!col.formElem.clearable\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-select>\n }\n\n @case ('autocomplete') {\n <osl-autocomplete\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-autocomplete>\n }\n\n @case ('radio') {\n <osl-radio\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [inline]=\"!!col.formElem.inline\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-radio>\n }\n\n @case ('checkbox') {\n <osl-checkbox\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [indeterminate]=\"!!col.formElem.indeterminate\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-checkbox>\n }\n\n @case ('slide-toggle') {\n <osl-slide-toggle\n [label]=\"''\"\n [disabled]=\"isDisabled(col.formElem)\"\n [labelPosition]=\"col.formElem.labelPosition || 'after'\"\n [trueLabel]=\"col.formElem.trueLabel || ''\"\n [falseLabel]=\"col.formElem.falseLabel || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-slide-toggle>\n }\n\n @case ('datepicker') {\n <osl-datepicker\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [dateType]=\"col.formElem.dateType || 'date'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [minDate]=\"col.formElem.minDate || ''\"\n [maxDate]=\"col.formElem.maxDate || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-datepicker>\n }\n\n @case ('file-uploader') {\n <osl-file-upload\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [accept]=\"col.formElem.accept || ''\"\n [multiple]=\"!!col.formElem.multiple\"\n [maxSize]=\"col.formElem.maxFileSize || 0\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-file-upload>\n }\n\n }\n </div>\n } @else {\n <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\n }\n </td>\n }\n\n </tr>\n }\n }\n\n </tbody>\n </table>\n </div>\n\n @if (isPaginated) {\n <div class=\"osl-fg-pagination\">\n\n <span class=\"osl-fg-pagination__info\">\n @if (loading) {\n Loading...\n } @else if (_total > 0) {\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\n } @else {\n No rows\n }\n </span>\n\n <div class=\"osl-fg-pagination__controls\">\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\n\n @for (page of pageNumbers; track $index) {\n @if (page === -1) {\n <span class=\"osl-fg-page-ellipsis\">\u2026</span>\n } @else {\n <button\n class=\"osl-fg-page-btn osl-fg-page-btn--num\"\n [class.osl-fg-page-btn--active]=\"page === currentPage\"\n [disabled]=\"loading\"\n (click)=\"goToPage(page)\">\n {{ page }}\n </button>\n }\n }\n\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\n </div>\n\n <div class=\"osl-fg-pagination__size\">\n <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n @for (opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n\n </div>\n }\n\n</div>\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate"], outputs: ["modelChange", "changeEv"] }] });
|
|
1574
|
+
}
|
|
1575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslFormGrid, decorators: [{
|
|
1576
|
+
type: Component,
|
|
1577
|
+
args: [{ selector: 'osl-form-grid', standalone: false, template: "<div class=\"osl-fg-wrapper\">\n\n <div class=\"osl-fg-table-container\" [style.height]=\"tableHeight\">\n <table class=\"osl-fg-table\">\n\n <thead class=\"osl-fg-thead\">\n <tr>\n <!-- Actions column: + add button in header -->\n @if (hasActions) {\n <th class=\"osl-fg-th osl-fg-th--actions\">\n @if (canAdd) {\n <button class=\"osl-grid-icon-btn\" (click)=\"addRow()\" [disabled]=\"loading\" title=\"Add row\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </th>\n }\n @for (col of columns; track col.key) {\n <th class=\"osl-fg-th\" [style.width]=\"col.width\">\n {{ col.displayName }}\n @if (colRequired(col)) {\n <span class=\"osl-fg-th-required\">*</span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <tbody>\n\n @if (loading) {\n @for (sk of skeletonRows; track $index) {\n <tr class=\"osl-fg-row osl-fg-row--skeleton\">\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n <div class=\"osl-fg-skeleton osl-fg-skeleton--sm\"></div>\n </td>\n }\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\"><div class=\"osl-fg-skeleton\"></div></td>\n }\n </tr>\n }\n\n } @else if (pagedData.length === 0) {\n <tr>\n <td [attr.colspan]=\"columns.length + (hasActions ? 1 : 0)\" class=\"osl-fg-empty\">\n <div class=\"osl-fg-empty-inner\">\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\n <line x1=\"9\" y1=\"9\" x2=\"9\" y2=\"21\"/>\n </svg>\n <p>No rows yet.{{ canAdd ? ' Use + to get started.' : '' }}</p>\n </div>\n </td>\n </tr>\n\n } @else {\n @for (row of pagedData; track $index; let i = $index) {\n <tr class=\"osl-fg-row\">\n\n <!-- Delete button first -->\n @if (hasActions) {\n <td class=\"osl-fg-td osl-fg-td--actions\">\n @if (canDelete) {\n <button class=\"osl-grid-icon-btn osl-grid-icon-btn--danger\" (click)=\"deleteRow(i)\" title=\"Delete\">\n <mat-icon>delete_outline</mat-icon>\n </button>\n <!-- <button class=\"osl-fg-delete-btn\" (click)=\"deleteRow(i)\" title=\"Delete row\">\n <mat-icon>delete_outline</mat-icon>\n </button> -->\n }\n </td>\n }\n\n @for (col of columns; track col.key) {\n <td class=\"osl-fg-td\" [style.width]=\"col.width\">\n @if (col.formElem) {\n <div class=\"osl-fg-cell-form\">\n @switch (col.formElem.elementType) {\n\n @case ('textbox') {\n <osl-input\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [type]=\"col.formElem.inputType || 'text'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [mask]=\"col.formElem.mask || ''\"\n [min]=\"col.formElem.min ?? ''\"\n [max]=\"col.formElem.max ?? ''\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [prefixIcon]=\"col.formElem.prefixIcon || ''\"\n [suffixIcon]=\"col.formElem.suffixIcon || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-input>\n }\n\n @case ('textarea') {\n <osl-textarea\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [rows]=\"col.formElem.textareaRows || 3\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [maxLength]=\"col.formElem.maxLength ?? null\"\n [minLength]=\"col.formElem.minLength ?? null\"\n [characterCounter]=\"!!col.formElem.characterCounter\"\n [resize]=\"col.formElem.resize || 'none'\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-textarea>\n }\n\n @case ('select') {\n <osl-select\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.selectPlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [clearable]=\"!!col.formElem.clearable\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-select>\n }\n\n @case ('autocomplete') {\n <osl-autocomplete\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [placeholder]=\"col.formElem.autocompletePlaceholder || col.displayName\"\n [loading]=\"isLoading(row, col.formElem)\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-autocomplete>\n }\n\n @case ('radio') {\n <osl-radio\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [datasource]=\"col.formElem.datasource || []\"\n [displayField]=\"col.formElem.displayField || ''\"\n [valueField]=\"col.formElem.valueField || ''\"\n [inline]=\"!!col.formElem.inline\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-radio>\n }\n\n @case ('checkbox') {\n <osl-checkbox\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [indeterminate]=\"!!col.formElem.indeterminate\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-checkbox>\n }\n\n @case ('slide-toggle') {\n <osl-slide-toggle\n [label]=\"''\"\n [disabled]=\"isDisabled(col.formElem)\"\n [labelPosition]=\"col.formElem.labelPosition || 'after'\"\n [trueLabel]=\"col.formElem.trueLabel || ''\"\n [falseLabel]=\"col.formElem.falseLabel || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-slide-toggle>\n }\n\n @case ('datepicker') {\n <osl-datepicker\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [dateType]=\"col.formElem.dateType || 'date'\"\n [placeholder]=\"col.formElem.placeholder || col.displayName\"\n [minDate]=\"col.formElem.minDate || ''\"\n [maxDate]=\"col.formElem.maxDate || ''\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-datepicker>\n }\n\n @case ('file-uploader') {\n <osl-file-upload\n [label]=\"''\"\n [required]=\"false\"\n [disabled]=\"isDisabled(col.formElem)\"\n [accept]=\"col.formElem.accept || ''\"\n [multiple]=\"!!col.formElem.multiple\"\n [maxSize]=\"col.formElem.maxFileSize || 0\"\n [model]=\"row[col.key]\"\n (modelChange)=\"onCellChange(row, col, $event)\"\n (changeEv)=\"col.formElem.change ? col.formElem.change(row) : null\">\n </osl-file-upload>\n }\n\n }\n </div>\n } @else {\n <span class=\"osl-fg-cell-text\">{{ row[col.key] ?? '--' }}</span>\n }\n </td>\n }\n\n </tr>\n }\n }\n\n </tbody>\n </table>\n </div>\n\n @if (isPaginated) {\n <div class=\"osl-fg-pagination\">\n\n <span class=\"osl-fg-pagination__info\">\n @if (loading) {\n Loading...\n } @else if (_total > 0) {\n {{ startRecord }}\u2013{{ endRecord }} of {{ _total }} rows\n } @else {\n No rows\n }\n </span>\n\n <div class=\"osl-fg-pagination__controls\">\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(1)\" [disabled]=\"currentPage === 1 || loading\">\u00AB</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage - 1)\" [disabled]=\"currentPage === 1 || loading\">\u2039 Prev</button>\n\n @for (page of pageNumbers; track $index) {\n @if (page === -1) {\n <span class=\"osl-fg-page-ellipsis\">\u2026</span>\n } @else {\n <button\n class=\"osl-fg-page-btn osl-fg-page-btn--num\"\n [class.osl-fg-page-btn--active]=\"page === currentPage\"\n [disabled]=\"loading\"\n (click)=\"goToPage(page)\">\n {{ page }}\n </button>\n }\n }\n\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(currentPage + 1)\" [disabled]=\"currentPage === totalPages || loading\">Next \u203A</button>\n <button class=\"osl-fg-page-btn osl-fg-page-btn--nav\" (click)=\"goToPage(totalPages)\" [disabled]=\"currentPage === totalPages || loading\">\u00BB</button>\n </div>\n\n <div class=\"osl-fg-pagination__size\">\n <select class=\"osl-fg-page-size\" [ngModel]=\"pageSize\" (ngModelChange)=\"onPageSizeChange($event)\" [disabled]=\"loading\">\n @for (opt of pageSizeOptions; track opt) {\n <option [value]=\"opt\">{{ opt }} per page</option>\n }\n </select>\n </div>\n\n </div>\n }\n\n</div>\n", styles: [".osl-fg-wrapper{display:flex;flex-direction:column;width:100%;font-size:var(--osl-text-font-size);font-family:inherit;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 8px);overflow:hidden;background:#fff}.osl-fg-table-container{overflow-x:auto;overflow-y:auto;min-height:120px}.osl-fg-table{width:100%;border-collapse:collapse;table-layout:auto}.osl-fg-thead{position:sticky;top:0;z-index:2}.osl-fg-th{background:#f3f4f6;color:#4b5563;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;border-bottom:2px solid var(--osl-border-color, #e5e7eb);border-right:1px solid var(--osl-border-color, #e5e7eb);white-space:nowrap;vertical-align:middle}.osl-fg-th:last-child{border-right:none}.osl-fg-th--actions{width:44px;min-width:44px;text-align:center;padding:6px}.osl-fg-th-required{color:#ef4444;margin-left:2px;font-size:14px;line-height:1;vertical-align:middle}.osl-fg-row{border-bottom:1px solid #f0f0f0;transition:background .1s}.osl-fg-row:nth-child(odd){background:#f8fafc}.osl-fg-row:nth-child(2n){background:#fff}.osl-fg-row:hover{background:#eef2ff!important}.osl-fg-row:last-child{border-bottom:none}.osl-fg-row--skeleton{pointer-events:none}.osl-fg-td{padding:4px 10px;vertical-align:middle;border-right:1px solid #f0f0f0}.osl-fg-td:last-child{border-right:none}.osl-fg-td--actions{width:44px;min-width:44px;text-align:center;padding:4px 6px}.osl-fg-cell-form{min-width:100px}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.osl-fg-cell-form ::ng-deep .mat-mdc-form-field,.osl-fg-cell-form ::ng-deep mat-form-field{width:100%}.osl-fg-cell-form ::ng-deep .mat-mdc-text-field-wrapper{padding-top:0}.osl-fg-cell-text{color:#111827;font-size:var(--osl-text-font-size)}.osl-fg-add-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:6px;background:var(--osl-primary, #6366f1);color:#fff;cursor:pointer;padding:0;box-shadow:0 1px 4px #6366f159;transition:background .15s,box-shadow .15s,transform .1s}.osl-fg-add-btn mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.osl-fg-add-btn:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);box-shadow:0 2px 8px #6366f173;transform:scale(1.05)}.osl-fg-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.osl-fg-delete-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid transparent;border-radius:6px;background:transparent;color:#d1d5db;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s}.osl-fg-delete-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-fg-delete-btn:hover{border-color:#fca5a5;color:#ef4444;background:#fef2f2}.osl-fg-empty{padding:40px 16px;text-align:center}.osl-fg-empty-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9ca3af}.osl-fg-empty-inner svg{opacity:.4}.osl-fg-empty-inner p{margin:0;font-size:13px}@keyframes osl-fg-pulse{0%,to{opacity:1}50%{opacity:.4}}.osl-fg-skeleton{height:36px;border-radius:6px;background:#e5e7eb;animation:osl-fg-pulse 1.4s ease-in-out infinite}.osl-fg-skeleton--sm{height:28px;width:28px;border-radius:4px;margin:0 auto}.osl-fg-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--osl-border-color, #e5e7eb);background:#f9fafb;flex-shrink:0;flex-wrap:wrap}.osl-fg-pagination__info{font-size:12px;color:#6b7280;white-space:nowrap;min-width:120px}.osl-fg-pagination__controls{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.osl-fg-pagination__size{display:flex;align-items:center;justify-content:flex-end;min-width:120px}.osl-fg-page-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 10px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}.osl-fg-page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.osl-fg-page-btn:disabled{opacity:.35;cursor:not-allowed}.osl-fg-page-btn--nav{font-size:12px;color:#6b7280}.osl-fg-page-btn--num{min-width:30px;padding:0;font-size:13px}.osl-fg-page-btn--active{background:var(--osl-primary, #6366f1);border-color:var(--osl-primary, #6366f1);color:#fff;font-weight:600}.osl-fg-page-btn--active:hover:not(:disabled){background:var(--osl-primary-hover, #4f46e5);border-color:var(--osl-primary-hover, #4f46e5)}.osl-fg-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;color:#9ca3af;font-size:13px;pointer-events:none}.osl-fg-page-size{height:30px;padding:0 8px;border:1px solid var(--osl-border-color, #e5e7eb);border-radius:var(--osl-border-radius, 6px);background:#fff;color:#374151;font-size:12px;font-family:inherit;cursor:pointer;outline:none}.osl-fg-page-size:focus{border-color:var(--osl-primary, #6366f1)}.osl-fg-page-size:disabled{opacity:.4;cursor:not-allowed}.osl-grid-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--osl-border-color);border-radius:var(--osl-border-radius);background:transparent;color:#6b7280;cursor:pointer;padding:0;transition:border-color .15s,color .15s,background .15s;margin:0 2px}.osl-grid-icon-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.osl-grid-icon-btn:hover{border-color:var(--osl-primary);color:var(--osl-primary);background:#6366f10f}.osl-grid-icon-btn--danger:hover{border-color:#ef4444;color:#ef4444;background:#ef44440f}\n"] }]
|
|
1578
|
+
}], propDecorators: { columns: [{
|
|
1579
|
+
type: Input,
|
|
1580
|
+
args: ['columns']
|
|
1581
|
+
}], datasource: [{
|
|
1582
|
+
type: Input,
|
|
1583
|
+
args: ['datasource']
|
|
1584
|
+
}], datasourceChange: [{
|
|
1585
|
+
type: Output
|
|
1586
|
+
}], isPaginated: [{
|
|
1587
|
+
type: Input,
|
|
1588
|
+
args: ['isPaginated']
|
|
1589
|
+
}], pageSize: [{
|
|
1590
|
+
type: Input,
|
|
1591
|
+
args: ['pageSize']
|
|
1592
|
+
}], canAdd: [{
|
|
1593
|
+
type: Input,
|
|
1594
|
+
args: ['canAdd']
|
|
1595
|
+
}], canDelete: [{
|
|
1596
|
+
type: Input,
|
|
1597
|
+
args: ['canDelete']
|
|
1598
|
+
}], loading: [{
|
|
1599
|
+
type: Input,
|
|
1600
|
+
args: ['loading']
|
|
1601
|
+
}], tableHeight: [{
|
|
1602
|
+
type: Input,
|
|
1603
|
+
args: ['tableHeight']
|
|
1604
|
+
}], rowAdd: [{
|
|
1605
|
+
type: Output
|
|
1606
|
+
}], rowDelete: [{
|
|
1607
|
+
type: Output
|
|
1608
|
+
}] } });
|
|
1609
|
+
|
|
1049
1610
|
class FormStructureModule {
|
|
1050
1611
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1051
1612
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, declarations: [DynamicForm,
|
|
@@ -1061,20 +1622,23 @@ class FormStructureModule {
|
|
|
1061
1622
|
OslButton,
|
|
1062
1623
|
OslSetup,
|
|
1063
1624
|
OslSearchbar,
|
|
1064
|
-
OslGrid
|
|
1625
|
+
OslGrid,
|
|
1626
|
+
OslFormGrid], imports: [NgTemplateOutlet,
|
|
1065
1627
|
FormsModule,
|
|
1066
1628
|
ReactiveFormsModule,
|
|
1067
1629
|
MatFormFieldModule,
|
|
1068
1630
|
MatInputModule,
|
|
1069
1631
|
MatHint,
|
|
1070
1632
|
MatIconModule,
|
|
1071
|
-
MatDialogModule
|
|
1633
|
+
MatDialogModule,
|
|
1634
|
+
MatButtonModule], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid] });
|
|
1072
1635
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, imports: [FormsModule,
|
|
1073
1636
|
ReactiveFormsModule,
|
|
1074
1637
|
MatFormFieldModule,
|
|
1075
1638
|
MatInputModule,
|
|
1076
1639
|
MatIconModule,
|
|
1077
|
-
MatDialogModule
|
|
1640
|
+
MatDialogModule,
|
|
1641
|
+
MatButtonModule] });
|
|
1078
1642
|
}
|
|
1079
1643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, decorators: [{
|
|
1080
1644
|
type: NgModule,
|
|
@@ -1094,6 +1658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1094
1658
|
OslSetup,
|
|
1095
1659
|
OslSearchbar,
|
|
1096
1660
|
OslGrid,
|
|
1661
|
+
OslFormGrid,
|
|
1097
1662
|
],
|
|
1098
1663
|
imports: [
|
|
1099
1664
|
NgTemplateOutlet,
|
|
@@ -1104,8 +1669,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1104
1669
|
MatHint,
|
|
1105
1670
|
MatIconModule,
|
|
1106
1671
|
MatDialogModule,
|
|
1672
|
+
MatButtonModule,
|
|
1107
1673
|
],
|
|
1108
|
-
exports: [DynamicForm, OslSetup, OslGrid],
|
|
1674
|
+
exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid],
|
|
1109
1675
|
}]
|
|
1110
1676
|
}] });
|
|
1111
1677
|
|
|
@@ -1117,5 +1683,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1117
1683
|
* Generated bundle index. Do not edit.
|
|
1118
1684
|
*/
|
|
1119
1685
|
|
|
1120
|
-
export { Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslBaseExtended, OslGrid, OslSetup, baseComponent };
|
|
1686
|
+
export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslBaseExtended, OslFormGrid, OslGrid, OslSetup, baseComponent };
|
|
1121
1687
|
//# sourceMappingURL=osl-base-extended.mjs.map
|