@corp-products/ui-components 3.4.3 → 3.4.5
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.
|
@@ -3,7 +3,7 @@ import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, in
|
|
|
3
3
|
import * as i1 from 'primeng/button';
|
|
4
4
|
import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
6
|
-
import { CommonModule, NgClass, NgTemplateOutlet, NgIf, JsonPipe, NgStyle, SlicePipe, Location, NgComponentOutlet } from '@angular/common';
|
|
6
|
+
import { CommonModule, NgClass, NgTemplateOutlet, NgIf, JsonPipe, NgStyle, formatDate, SlicePipe, Location, NgComponentOutlet } from '@angular/common';
|
|
7
7
|
import * as i2 from 'primeng/tabs';
|
|
8
8
|
import { TabsModule } from 'primeng/tabs';
|
|
9
9
|
import * as i1$2 from '@ngx-translate/core';
|
|
@@ -618,7 +618,7 @@ class InputComponent extends BaseInputComponent {
|
|
|
618
618
|
this.control.reset();
|
|
619
619
|
}
|
|
620
620
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
621
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", canClear: "canClear", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", iconClass: "iconClass", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n <!-- @else if (!hideOptionalLabel) {\r\n <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n } -->\r\n </label>\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @case ('withIcon') {\r\n <p-iconfield class=\"filter-input\">\r\n <p-inputicon [class]=\"iconClass\"
|
|
621
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: InputComponent, isStandalone: true, selector: "stc-input", inputs: { type: "type", contentType: "contentType", size: "size", prefix: "prefix", rows: "rows", cols: "cols", autoResize: "autoResize", basicInput: "basicInput", noStyle: "noStyle", canClear: "canClear", hideOptionalLabel: "hideOptionalLabel", inputDirection: "inputDirection", variant: "variant", defaultColor: "defaultColor", iconClass: "iconClass", iconPosition: "iconPosition" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n <!-- @else if (!hideOptionalLabel) {\r\n <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n } -->\r\n </label>\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @case ('withIcon') {\r\n <p-iconfield class=\"filter-input\">\r\n <p-inputicon>\r\n <i [class]=\"iconClass\"></i>\r\n </p-inputicon>\r\n <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n @if (canClear && control.value) {\r\n <p-inputIcon (click)=\"clearInput()\">\r\n <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n </p-inputIcon>\r\n }\r\n\r\n </p-iconfield>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
622
622
|
}
|
|
623
623
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputComponent, decorators: [{
|
|
624
624
|
type: Component,
|
|
@@ -633,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
633
633
|
FloatLabelModule,
|
|
634
634
|
InputIcon,
|
|
635
635
|
IconField,
|
|
636
|
-
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n <!-- @else if (!hideOptionalLabel) {\r\n <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n } -->\r\n </label>\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @case ('withIcon') {\r\n <p-iconfield class=\"filter-input\">\r\n <p-inputicon [class]=\"iconClass\"
|
|
636
|
+
], template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n\r\n <!-- input text align will be handled according to lang when implemented -->\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n @if (label) {\r\n <div class=\"flex items-center justify-between gap-2\">\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n <!-- @else if (!hideOptionalLabel) {\r\n <span span class=\"optional-label\">{{'forms.config.optional' | translate}}</span>\r\n } -->\r\n </label>\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n <textarea [name]=\"name\" [id]=\"inputId\" [formControl]=\"control\" [placeholder]=\"placeholder\" [readonly]=\"readonly\"\r\n [disabled]=\"disabled\" pTextarea [rows]=\"rows\" [cols]=\"cols\" [autoResize]=\"autoResize\" [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \"\r\n [ngClass]=\"{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}\">\r\n </textarea>\r\n }\r\n @case ('withIcon') {\r\n <p-iconfield class=\"filter-input\">\r\n <p-inputicon>\r\n <i [class]=\"iconClass\"></i>\r\n </p-inputicon>\r\n <input pInputText [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder\" [formControl]=\"control\" [readonly]=\"readonly\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n @if (canClear && control.value) {\r\n <p-inputIcon (click)=\"clearInput()\">\r\n <i class=\"pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600\"></i>\r\n </p-inputIcon>\r\n }\r\n\r\n </p-iconfield>\r\n }\r\n @default {\r\n <p-floatlabel [variant]=\"variant\">\r\n <!-- <input pInputText id=\"value2\" [(ngModel)]=\"value2\" [invalid]=\"!value2\" autocomplete=\"off\" /> -->\r\n <input [id]=\"inputId\" [type]=\"'text-float-label'\" [formControl]=\"control\" [readonly]=\"readonly\" [pSize]=\"size\"\r\n [class]=\"\r\n 'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'\r\n \" [disabled]=\"disabled\" [name]=\"name\" pInputText [ngStyle]=\"{'direction': inputDirection || 'inherit'}\"\r\n class=\"w-full\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}\" />\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (prefix) {\r\n <span class=\"absolute top-[40px] font-bold text-[16px] left-[25px]\">\r\n {{ prefix }}\r\n </span>\r\n }\r\n\r\n\r\n }\r\n }\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: ["textarea{@apply h-auto min-h-[50px] overflow-auto;}textarea,.p-select,input{border-radius:0;border-color:#dfe0e6}textarea:enabled:hover,.p-select:enabled:hover,input:enabled:hover{border-color:#dfe0e6}textarea:not(.p-disabled).p-focus,textarea:not(.p-disabled).p-focus:hover,textarea:focus,.p-select:not(.p-disabled).p-focus,.p-select:not(.p-disabled).p-focus:hover,.p-select:focus,input:not(.p-disabled).p-focus,input:not(.p-disabled).p-focus:hover,input:focus{outline:#DFE0E6;border-color:#dfe0e6}.p-floatlabel:has(input:focus) label,.p-floatlabel:has(input:-webkit-autofill) label,.p-floatlabel:has(textarea:focus) label,.p-floatlabel:has(.p-inputwrapper-focus) label{color:#687078}.p-inputtext:enabled:focus{border-color:#dfe0e6}.text-required{color:red}.p-error{color:#dc2626}.optional-label{@apply text-[10px] text-gray-400;margin-inline-start:4px}\n"] }]
|
|
637
637
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
638
638
|
type: Input
|
|
639
639
|
}], contentType: [{
|
|
@@ -1255,10 +1255,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1255
1255
|
type: Output
|
|
1256
1256
|
}] } });
|
|
1257
1257
|
|
|
1258
|
+
var DateFormats;
|
|
1259
|
+
(function (DateFormats) {
|
|
1260
|
+
DateFormats["DATE_ONLY"] = "yyyy-MM-dd";
|
|
1261
|
+
DateFormats["DATE_UTC"] = "yyyy-MM-dd'T'HH:mm:ss'Z'";
|
|
1262
|
+
DateFormats["DATE_TIME_FULL"] = "dd MMMM yyyy - hh:mm a";
|
|
1263
|
+
DateFormats["DATE_TIME_SEMI"] = "yyyy/MM/dd - hh:mm a";
|
|
1264
|
+
DateFormats["DATE"] = "dd MMMM yyyy";
|
|
1265
|
+
DateFormats["DATE_TWO"] = "yyyy/MM/dd";
|
|
1266
|
+
DateFormats["DAY_ONLY"] = "cccc";
|
|
1267
|
+
DateFormats["TIME_ONLY"] = "hh:mm";
|
|
1268
|
+
DateFormats["AM_PM"] = "a";
|
|
1269
|
+
DateFormats["TIME"] = "hh:mm a";
|
|
1270
|
+
DateFormats["YEAR"] = "yyyy";
|
|
1271
|
+
DateFormats["MONTH"] = "MM";
|
|
1272
|
+
DateFormats["DAY"] = "dd";
|
|
1273
|
+
})(DateFormats || (DateFormats = {}));
|
|
1274
|
+
var TimeFormats;
|
|
1275
|
+
(function (TimeFormats) {
|
|
1276
|
+
TimeFormats["HOURS12Format"] = "hh";
|
|
1277
|
+
TimeFormats["HOURS24Format"] = "HH";
|
|
1278
|
+
TimeFormats["MINUTES"] = "mm";
|
|
1279
|
+
TimeFormats["SECONDS"] = "ss";
|
|
1280
|
+
})(TimeFormats || (TimeFormats = {}));
|
|
1281
|
+
|
|
1258
1282
|
class DualCalendarComponent {
|
|
1259
1283
|
selectedDate = '';
|
|
1260
1284
|
control = new FormControl({ value: null, disabled: false }, []);
|
|
1261
1285
|
label = '';
|
|
1286
|
+
withTime = true;
|
|
1262
1287
|
mode = 'gregorian';
|
|
1263
1288
|
gregorianModel;
|
|
1264
1289
|
hijriModel;
|
|
@@ -1267,6 +1292,20 @@ class DualCalendarComponent {
|
|
|
1267
1292
|
isCalendarOpen = false;
|
|
1268
1293
|
calendarContainer;
|
|
1269
1294
|
hijriCal = new NgbCalendarIslamicUmalqura();
|
|
1295
|
+
set gregorianInput(value) {
|
|
1296
|
+
if (!value)
|
|
1297
|
+
return;
|
|
1298
|
+
const jsDate = new Date(value);
|
|
1299
|
+
if (isNaN(jsDate.getTime()))
|
|
1300
|
+
return;
|
|
1301
|
+
const ngbDate = {
|
|
1302
|
+
year: jsDate.getFullYear(),
|
|
1303
|
+
month: jsDate.getMonth() + 1,
|
|
1304
|
+
day: jsDate.getDate()
|
|
1305
|
+
};
|
|
1306
|
+
// 🔥 Reuse existing logic
|
|
1307
|
+
this.onSelectGregorian(ngbDate);
|
|
1308
|
+
}
|
|
1270
1309
|
constructor() { }
|
|
1271
1310
|
onDocumentClick(event) {
|
|
1272
1311
|
if (!this.calendarContainer)
|
|
@@ -1286,7 +1325,7 @@ class DualCalendarComponent {
|
|
|
1286
1325
|
// fromGregorian expects NgbDate or JS Date (depending on version)
|
|
1287
1326
|
const hijri = this.hijriCal.fromGregorian(jsDate);
|
|
1288
1327
|
const isoUTC = jsDate.toISOString();
|
|
1289
|
-
this.gregorianUTC.emit(isoUTC);
|
|
1328
|
+
this.gregorianUTC.emit(this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en'));
|
|
1290
1329
|
this.hijriModel = {
|
|
1291
1330
|
year: hijri.year,
|
|
1292
1331
|
month: hijri.month,
|
|
@@ -1300,12 +1339,13 @@ class DualCalendarComponent {
|
|
|
1300
1339
|
const ngbDate = this.structToNgbDate(date);
|
|
1301
1340
|
const greg = this.hijriCal.toGregorian(ngbDate);
|
|
1302
1341
|
const isoUTC = greg.toISOString();
|
|
1303
|
-
this.gregorianUTC.emit(isoUTC);
|
|
1304
1342
|
this.gregorianModel = {
|
|
1305
1343
|
year: greg.getFullYear(),
|
|
1306
1344
|
month: greg.getMonth() + 1,
|
|
1307
1345
|
day: greg.getDate()
|
|
1308
1346
|
};
|
|
1347
|
+
const jsDate = new Date(this.gregorianModel.year, this.gregorianModel.month - 1, this.gregorianModel.day);
|
|
1348
|
+
this.gregorianUTC.emit(this.withTime ? isoUTC : formatDate(jsDate, DateFormats.DATE_ONLY, 'en'));
|
|
1309
1349
|
this.selectedDate = this.formatHijri(ngbDate);
|
|
1310
1350
|
this.isCalendarOpen = false;
|
|
1311
1351
|
}
|
|
@@ -1323,9 +1363,9 @@ class DualCalendarComponent {
|
|
|
1323
1363
|
return `${gregorianDay} ${gregorianMonth} ${gregorianYear} - ${hijriDay} ${hijriMonth} ${hijriYear}`;
|
|
1324
1364
|
}
|
|
1325
1365
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1326
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label" }, outputs: { gregorianUTC: "gregorianUTC" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1366
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", withTime: "withTime", gregorianInput: "gregorianInput" }, outputs: { gregorianUTC: "gregorianUTC" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1327
1367
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
1328
|
-
], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\"
|
|
1368
|
+
], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], ngImport: i0, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg)}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:6px;transform:rotate(180deg)}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
1329
1369
|
trigger('slideDown', [
|
|
1330
1370
|
state('closed', style({
|
|
1331
1371
|
height: '0px',
|
|
@@ -1370,19 +1410,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1370
1410
|
FloatLabelModule,
|
|
1371
1411
|
HijriCalendarComponent,
|
|
1372
1412
|
DatePickerSwitcherComponent,
|
|
1413
|
+
TranslatePipe,
|
|
1373
1414
|
GregorianCalendarComponent
|
|
1374
1415
|
], providers: [
|
|
1375
1416
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
1376
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\"
|
|
1417
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content \" #calendarContainer>\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n\r\n <!-- calender.html -->\r\n <div dir=\"rtl\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isCalendarOpen ? 'open' : 'closed'\" >\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg)}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:6px;transform:rotate(180deg)}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;border-radius:8px}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.calendar-wrapper{position:absolute;top:100%;left:0;z-index:50;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d;border:0!important}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:38px!important;height:44px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
|
|
1377
1418
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
1378
1419
|
type: Input
|
|
1379
1420
|
}], label: [{
|
|
1380
1421
|
type: Input
|
|
1422
|
+
}], withTime: [{
|
|
1423
|
+
type: Input
|
|
1381
1424
|
}], gregorianUTC: [{
|
|
1382
1425
|
type: Output
|
|
1383
1426
|
}], calendarContainer: [{
|
|
1384
1427
|
type: ViewChild,
|
|
1385
1428
|
args: ['calendarContainer']
|
|
1429
|
+
}], gregorianInput: [{
|
|
1430
|
+
type: Input
|
|
1386
1431
|
}], onDocumentClick: [{
|
|
1387
1432
|
type: HostListener,
|
|
1388
1433
|
args: ['document:click', ['$event']]
|
|
@@ -1407,7 +1452,7 @@ class DynamicFormComponent {
|
|
|
1407
1452
|
this.inputsNames = Object.keys(this.inputsMap || {});
|
|
1408
1453
|
}
|
|
1409
1454
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <span class=\"text-xs text-gray-700\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n </span>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label"], outputs: ["gregorianUTC"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
1455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DynamicFormComponent, isStandalone: true, selector: "app-dynamic-form", inputs: { dynamicFormData: "dynamicFormData" }, outputs: { selectButtonChange: "selectButtonChange", selectChange: "selectChange", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"grid grid-cols-12 gap-x-2\">\r\n @for (inputName of inputsNames; track $index) {\r\n <div [ngClass]=\"inputsMap[inputName].rowSize\">\r\n @switch (inputsMap[inputName].fieldType) {\r\n @case (fieldType.HIJRI_DATE_PICKER) {\r\n <app-dual-calendar [control]=\"getFormControl(inputName, formGroup)\" ></app-dual-calendar>\r\n }\r\n\r\n @case (fieldType.DATE_PICKER) {\r\n <stc-date-picker [minDate]=\"inputsMap[inputName]?.dateRange?.min\" [maxDate]=\"inputsMap[inputName]?.dateRange?.max\"\r\n [id]=\"inputsMap[inputName].inputId\" [control]=\"getFormControl(inputName, formGroup)\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [showIcon]=\"inputsMap[inputName].showIcon !== false\" [isTimeOnly]=\"inputsMap[inputName].isTimeOnly || false\" />\r\n }\r\n @case (fieldType.SELECT_BUTTON) {\r\n <stc-select-button [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\"\r\n [options]=\"inputsMap[inputName].selectButtonOptions || []\"\r\n (onChange)=\"selectButtonChange.emit({ name: inputName, value: $event })\" />\r\n }\r\n @case (fieldType.INPUT) {\r\n <stc-input [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\" [name]=\"inputName\"\r\n [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [type]=\"inputsMap[inputName].inputType || 'text'\"\r\n [contentType]=\"inputsMap[inputName].contentType || 'text'\" [rows]=\"inputsMap[inputName].rows || 2\"\r\n [cols]=\"inputsMap[inputName].cols || 20\" [autoResize]=\"inputsMap[inputName].autoResize ?? false\"\r\n [prefix]=\"inputsMap[inputName].prefix || ''\" [size]=\"inputsMap[inputName].size || 'small'\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\">\r\n @if(inputsMap[inputName].maxLength){\r\n <span class=\"text-xs text-gray-700\">\r\n {{ (getFormControl(inputName, formGroup).value?.length || 0) }}\r\n <span> / {{ inputsMap[inputName].maxLength}}</span>\r\n </span>\r\n }\r\n </stc-input>\r\n }\r\n @case (fieldType.SELECT) {\r\n <stc-select [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [options]=\"inputsMap[inputName].selectOptions || []\"\r\n [optionLabel]=\"inputsMap[inputName].optionLabel || 'label'\" [filter]=\"inputsMap[inputName].filter || false\"\r\n [multiple]=\"inputsMap[inputName].multiple || false\" [showClear]=\"inputsMap[inputName].showClear || false\"\r\n [checkmark]=\"inputsMap[inputName].checkmark ?? true\" [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"/>\r\n }\r\n @case (fieldType.SWITCH) {\r\n <stc-switch [label]=\"inputsMap[inputName].label\" [key]=\"inputName\"\r\n [checked]=\"getFormControl(inputName, formGroup).value\"\r\n (onChange)=\"getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })\" />\r\n }\r\n @case (fieldType.AUTO_COMPLETE) {\r\n <stc-auto-complete [control]=\"getFormControl(inputName, formGroup)\" [id]=\"inputsMap[inputName].inputId\"\r\n [name]=\"inputName\" [label]=\"inputsMap[inputName].label\" [placeholder]=\"inputsMap[inputName].placeholder || ''\"\r\n [hint]=\"inputsMap[inputName].hint\"\r\n [readonly]=\"inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false\"\r\n [disabled]=\"inputsMap[inputName].disabled || false\" [items]=\"inputsMap[inputName].autoCompleteItems || []\"\r\n [minLengthToSearch]=\"inputsMap[inputName].minLengthToSearch || 2\" [delay]=\"inputsMap[inputName].delay || 300\"\r\n (onSearch)=\"autoCompleteSearch.emit({ name: inputName, query: $event })\"\r\n (selectOption)=\"autoCompleteSelect.emit({ name: inputName, event: $event })\"\r\n [variant]=\"inputsMap[inputName].variant || 'over'\" />\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col-span-12\">\r\n <small class=\"p-error text-red-700\">\r\n @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;\r\n track error) {\r\n {{ error }}\r\n }\r\n </small>\r\n </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DatePickerComponent, selector: "stc-date-picker", inputs: ["showIcon", "showClear", "basicInput", "isTimeOnly", "minDate", "maxDate", "hourFormat", "selectionMode", "variant"], outputs: ["onAfterClearDate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: SelectButtonComponent, selector: "stc-select-button", inputs: ["options", "title"], outputs: ["onChange"] }, { kind: "component", type: DualCalendarComponent, selector: "app-dual-calendar", inputs: ["control", "label", "withTime", "gregorianInput"], outputs: ["gregorianUTC"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "size", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }] });
|
|
1411
1456
|
}
|
|
1412
1457
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
1413
1458
|
type: Component,
|