@corp-products/ui-components 4.2.6 → 4.2.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.
|
@@ -49,7 +49,7 @@ import * as i1$5 from 'primeng/toggleswitch';
|
|
|
49
49
|
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
50
50
|
import * as i1$6 from '@ng-bootstrap/ng-bootstrap';
|
|
51
51
|
import { NgbDatepickerI18n, NgbCalendarIslamicUmalqura, NgbDatepickerModule, NgbCalendar, NgbCalendarGregorian, NgbDate } from '@ng-bootstrap/ng-bootstrap';
|
|
52
|
-
import { trigger, state,
|
|
52
|
+
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
53
53
|
import '@angular/localize/init';
|
|
54
54
|
import * as i2$4 from 'primeng/accordion';
|
|
55
55
|
import { AccordionModule } from 'primeng/accordion';
|
|
@@ -837,6 +837,7 @@ function numbersOnlyValidator(control) {
|
|
|
837
837
|
return isNumbersOnly ? null : { numbersOnly: true };
|
|
838
838
|
}
|
|
839
839
|
|
|
840
|
+
const WHITESPACE_REGEX = /\s/;
|
|
840
841
|
function maxRepeatedCharsValidator(maxRepeats = 3) {
|
|
841
842
|
return (control) => {
|
|
842
843
|
const value = control.value;
|
|
@@ -844,8 +845,12 @@ function maxRepeatedCharsValidator(maxRepeats = 3) {
|
|
|
844
845
|
return null;
|
|
845
846
|
const str = value.toString();
|
|
846
847
|
let count = 1;
|
|
847
|
-
|
|
848
|
-
|
|
848
|
+
let prevChar = null;
|
|
849
|
+
for (const char of str) {
|
|
850
|
+
if (WHITESPACE_REGEX.test(char)) {
|
|
851
|
+
continue;
|
|
852
|
+
}
|
|
853
|
+
if (prevChar !== null && char === prevChar) {
|
|
849
854
|
count++;
|
|
850
855
|
if (count > maxRepeats) {
|
|
851
856
|
return { maxRepeatedChars: { maxRepeats } };
|
|
@@ -854,6 +859,7 @@ function maxRepeatedCharsValidator(maxRepeats = 3) {
|
|
|
854
859
|
else {
|
|
855
860
|
count = 1;
|
|
856
861
|
}
|
|
862
|
+
prevChar = char;
|
|
857
863
|
}
|
|
858
864
|
return null;
|
|
859
865
|
};
|
|
@@ -1128,6 +1134,8 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
1128
1134
|
isTimeOnly = false;
|
|
1129
1135
|
minDate;
|
|
1130
1136
|
maxDate;
|
|
1137
|
+
disabledDates = [];
|
|
1138
|
+
disabledDays = []; // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
|
|
1131
1139
|
hourFormat = '12';
|
|
1132
1140
|
appendTo = 'body';
|
|
1133
1141
|
nowTime = new Date();
|
|
@@ -1176,7 +1184,7 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
1176
1184
|
this.control.setValue(formattedDate, { emitEvent: true });
|
|
1177
1185
|
}
|
|
1178
1186
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", appendTo: "appendTo", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder ? placeholder : undefined\"\r\n [showIcon]=\"showIcon\" [class]=\"'w-full'\" [appendTo]=\"appendTo\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\" [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\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 (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: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1187
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", hourFormat: "hourFormat", appendTo: "appendTo", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder ? placeholder : undefined\"\r\n [showIcon]=\"showIcon\" [class]=\"'w-full'\" [appendTo]=\"appendTo\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\" [maxDate]=\"maxDate\" [disabledDates]=\"disabledDates\" [disabledDays]=\"disabledDays\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\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 (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: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1180
1188
|
}
|
|
1181
1189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1182
1190
|
type: Component,
|
|
@@ -1188,7 +1196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1188
1196
|
DatePickerModule,
|
|
1189
1197
|
ValidationErrorsPipe,
|
|
1190
1198
|
FloatLabelModule,
|
|
1191
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder ? placeholder : undefined\"\r\n [showIcon]=\"showIcon\" [class]=\"'w-full'\" [appendTo]=\"appendTo\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\" [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\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 (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: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
|
|
1199
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder ? placeholder : undefined\"\r\n [showIcon]=\"showIcon\" [class]=\"'w-full'\" [appendTo]=\"appendTo\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\" [maxDate]=\"maxDate\" [disabledDates]=\"disabledDates\" [disabledDays]=\"disabledDays\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\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 (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: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
|
|
1192
1200
|
}], ctorParameters: () => [], propDecorators: { showIcon: [{
|
|
1193
1201
|
type: Input
|
|
1194
1202
|
}], showClear: [{
|
|
@@ -1201,6 +1209,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1201
1209
|
type: Input
|
|
1202
1210
|
}], maxDate: [{
|
|
1203
1211
|
type: Input
|
|
1212
|
+
}], disabledDates: [{
|
|
1213
|
+
type: Input
|
|
1214
|
+
}], disabledDays: [{
|
|
1215
|
+
type: Input
|
|
1204
1216
|
}], hourFormat: [{
|
|
1205
1217
|
type: Input
|
|
1206
1218
|
}], appendTo: [{
|
|
@@ -2233,7 +2245,7 @@ class DynamicFormComponent {
|
|
|
2233
2245
|
this.fileDeleted.emit(file);
|
|
2234
2246
|
}
|
|
2235
2247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2236
|
-
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", selectClicked: "selectClicked", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"dynamic-form__content\">\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 [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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 <ng-template #optionTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-3\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #selectedTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-2\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n </div>\r\n }\r\n </ng-template>\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]?.translatable\r\n ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n : (inputsMap[inputName]?.optionLabel || 'label')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n (click)=\"selectClicked.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.CHECKBOX) {\r\n <div class=\"flex items-center gap-2 my-3\">\r\n <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n }\r\n @case(fieldType.UPLOAD_FILE) {\r\n <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n [allowPreview]=\"true\" [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\"\r\n [control]=\"getFormControl(inputName, formGroup)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n\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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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", "appendTo", "selectionMode", "variant", "withoutTime"], 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", "name", "withTime", "isDatePickerShow", "currentLang", "isShown", "appedToBody"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "maxLength", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: FileManagementComponent, selector: "app-file-management", inputs: ["existingFiles", "acceptedTypes", "maxFileSize", "maxConcurrentUploads", "showTable", "showDropZone", "allowPreview", "permissonKey", "allowedActions"], outputs: ["filesUploaded", "fileDeleted", "filePreview", "fileDownload", "uploadError", "newFilesChange"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "appendTo", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change", "clicked"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant", "allowedDomains"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: LocalizedLabelPipe, name: "localizedLabel" }] });
|
|
2248
|
+
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", selectClicked: "selectClicked", switchChange: "switchChange", autoCompleteSearch: "autoCompleteSearch", autoCompleteSelect: "autoCompleteSelect", popUpFilesUploaded: "popUpFilesUploaded", fileDeleted: "fileDeleted" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"dynamic-form__content\">\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 [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n [disabledDays]=\"inputsMap[inputName].disabledDays || []\"\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 [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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 <ng-template #optionTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-3\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #selectedTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-2\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n </div>\r\n }\r\n </ng-template>\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]?.translatable\r\n ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n : (inputsMap[inputName]?.optionLabel || 'label')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n (click)=\"selectClicked.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.CHECKBOX) {\r\n <div class=\"flex items-center gap-2 my-3\">\r\n <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n }\r\n @case(fieldType.UPLOAD_FILE) {\r\n <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n [allowPreview]=\"true\" [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\"\r\n [control]=\"getFormControl(inputName, formGroup)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n\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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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", "disabledDates", "disabledDays", "hourFormat", "appendTo", "selectionMode", "variant", "withoutTime"], 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", "name", "withTime", "isDatePickerShow", "currentLang", "isShown", "appedToBody"], outputs: ["gregorianUTC", "onClose"] }, { kind: "component", type: InputComponent, selector: "stc-input", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "maxLength", "autoResize", "basicInput", "noStyle", "canClear", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "iconClass", "iconPosition"] }, { kind: "component", type: FileManagementComponent, selector: "app-file-management", inputs: ["existingFiles", "acceptedTypes", "maxFileSize", "maxConcurrentUploads", "showTable", "showDropZone", "allowPreview", "permissonKey", "allowedActions"], outputs: ["filesUploaded", "fileDeleted", "filePreview", "fileDownload", "uploadError", "newFilesChange"] }, { kind: "component", type: SelectComponent, selector: "stc-select", inputs: ["selectedItemTemplate", "optionTemplate", "options", "optionLabel", "optionValue", "emptyMessage", "checkmark", "showClear", "editable", "filter", "multiple", "filterBy", "selectAllLabel", "dataKey", "size", "appendTo", "selectedItemsLabel", "basicInput", "variant", "defaultColor"], outputs: ["change", "clicked"] }, { kind: "component", type: AutoCompleteComponent, selector: "stc-auto-complete", inputs: ["selectedItemTemplate", "items", "minLengthToSearch", "delay", "basicInput", "typeAhead", "variant", "allowedDomains"], outputs: ["onSearch", "selectOption"] }, { kind: "component", type: SwitchComponent, selector: "stc-switch", inputs: ["label", "key", "checked"], outputs: ["onChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }, { kind: "pipe", type: LocalizedLabelPipe, name: "localizedLabel" }] });
|
|
2237
2249
|
}
|
|
2238
2250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
2239
2251
|
type: Component,
|
|
@@ -2252,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2252
2264
|
SwitchComponent,
|
|
2253
2265
|
LocalizedLabelPipe,
|
|
2254
2266
|
CheckboxModule,
|
|
2255
|
-
], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"dynamic-form__content\">\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 [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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 <ng-template #optionTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-3\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #selectedTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-2\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n </div>\r\n }\r\n </ng-template>\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]?.translatable\r\n ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n : (inputsMap[inputName]?.optionLabel || 'label')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n (click)=\"selectClicked.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.CHECKBOX) {\r\n <div class=\"flex items-center gap-2 my-3\">\r\n <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n }\r\n @case(fieldType.UPLOAD_FILE) {\r\n <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n [allowPreview]=\"true\" [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\"\r\n [control]=\"getFormControl(inputName, formGroup)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n\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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
|
|
2267
|
+
], template: "<form [formGroup]=\"formGroup\" class=\"dynamic-form\">\r\n <div class=\"dynamic-form__content\">\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 [disabledDates]=\"inputsMap[inputName].disabledDates || []\"\r\n [disabledDays]=\"inputsMap[inputName].disabledDays || []\"\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 [withoutTime]=\"inputsMap[inputName].withoutTime || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || true\" />\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'\" [maxLength]=\"inputsMap[inputName].maxLength || null\">\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 <ng-template #optionTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-3\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-8 h-8 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"font-medium truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n @if (inputsMap[inputName].optionTemplate!.subTextKey &&\r\n item[inputsMap[inputName].optionTemplate!.subTextKey!]) {\r\n <span class=\"text-sm text-gray-500 truncate\">{{ item[inputsMap[inputName].optionTemplate!.subTextKey!]\r\n }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #selectedTpl let-item>\r\n @if (inputsMap[inputName].optionTemplate) {\r\n <div class=\"flex items-center gap-2\">\r\n @if (inputsMap[inputName].optionTemplate!.imageKey && item[inputsMap[inputName].optionTemplate!.imageKey!]) {\r\n <img [src]=\"item[inputsMap[inputName].optionTemplate!.imageKey!]\"\r\n [alt]=\"item[inputsMap[inputName].optionTemplate!.mainTextKey]\"\r\n class=\"w-6 h-6 rounded-full object-cover flex-shrink-0\" />\r\n }\r\n <span class=\"truncate\">{{ item[inputsMap[inputName].optionTemplate!.mainTextKey] }}</span>\r\n </div>\r\n }\r\n </ng-template>\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]?.translatable\r\n ? ((inputsMap[inputName]?.optionLabel || 'label') | localizedLabel)\r\n : (inputsMap[inputName]?.optionLabel || 'label')\" [optionValue]=\"inputsMap[inputName]?.optionValue || ''\"\r\n [filter]=\"inputsMap[inputName].filter || false\" [multiple]=\"inputsMap[inputName].multiple || false\"\r\n [showClear]=\"inputsMap[inputName].showClear || false\" [checkmark]=\"inputsMap[inputName].checkmark ?? true\"\r\n [filterBy]=\"inputsMap[inputName].filterBy || ''\"\r\n [selectedItemsLabel]=\"inputsMap[inputName].selectedItemsLabel || ''\"\r\n [size]=\"inputsMap[inputName].size || 'small'\" [variant]=\"inputsMap[inputName].variant || 'over'\"\r\n [optionTemplate]=\"inputsMap[inputName].optionTemplate ? optionTpl : null\"\r\n [selectedItemTemplate]=\"inputsMap[inputName].optionTemplate ? selectedTpl : null\"\r\n (change)=\"selectChange.emit({ name: inputName, event: $event })\"\r\n (click)=\"selectClicked.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.CHECKBOX) {\r\n <div class=\"flex items-center gap-2 my-3\">\r\n <p-checkbox [inputId]=\"inputsMap[inputName].inputId || inputName\" [binary]=\"true\"\r\n [formControl]=\"getFormControl(inputName, formGroup)\" [disabled]=\"inputsMap[inputName].disabled || false\" />\r\n <label [for]=\"inputsMap[inputName].inputId || inputName\">{{ inputsMap[inputName].label }}</label>\r\n </div>\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'\" [allowedDomains]=\"inputsMap[inputName]?.allowedDomains\" />\r\n }\r\n @case(fieldType.UPLOAD_FILE) {\r\n <app-file-management #fileManager #groupFileManager [maxFileSize]=\"262144000\" [maxConcurrentUploads]=\"1\"\r\n [allowPreview]=\"true\" [acceptedTypes]=\"getAcceptedTypes()\" (filesUploaded)=\"onFilesUploaded($event)\"\r\n [control]=\"getFormControl(inputName, formGroup)\" (fileDeleted)=\"onFileDeleted($event)\" />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n\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>", styles: [".dynamic-form__content>div{margin-bottom:15px}\n"] }]
|
|
2256
2268
|
}], propDecorators: { dynamicFormData: [{
|
|
2257
2269
|
type: Input,
|
|
2258
2270
|
args: [{ required: true }]
|