@pongrass/utils 1.1.10-v20 → 1.1.11-v20
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.
|
@@ -2237,6 +2237,12 @@ class MultiFormComponent {
|
|
|
2237
2237
|
if (validations.pattern) {
|
|
2238
2238
|
validators.push(Validators.pattern(validations.pattern));
|
|
2239
2239
|
}
|
|
2240
|
+
if (validations.min) {
|
|
2241
|
+
validators.push(Validators.min(validations.min));
|
|
2242
|
+
}
|
|
2243
|
+
if (validations.max) {
|
|
2244
|
+
validators.push(Validators.max(validations.max));
|
|
2245
|
+
}
|
|
2240
2246
|
}
|
|
2241
2247
|
return validators;
|
|
2242
2248
|
}
|
|
@@ -2397,11 +2403,11 @@ class MultiFormComponent {
|
|
|
2397
2403
|
return null;
|
|
2398
2404
|
}
|
|
2399
2405
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "prg-ws-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n @for (row of config?.rows; track $index; let isLast = $last) {\r\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n @for (field of row; track $index) {\r\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n @if (multiForm.controls[field.controlName]) {\r\n <!-- Label -->\r\n @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n <label\r\n [wsShowTooltipIfTruncated]=\"field.label\"\r\n cLabel\r\n class=\"mb-1 label-multiform single-line-label\"\r\n [for]=\"field.controlName\"\r\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n [ngStyle]=\"field.styles?.label\"\r\n >{{ field.label }}\r\n @if (field?.validations?.required || false) {\r\n <strong class=\"text-danger\">*</strong>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- Text, Email, Number Inputs -->\r\n @if (\r\n field.type === FormFieldType.Text ||\r\n field.type === FormFieldType.Email ||\r\n field.type === FormFieldType.Number ||\r\n field.type === FormFieldType.Password ||\r\n field.type === FormFieldType.Url ||\r\n field.type === FormFieldType.Tel\r\n ) {\r\n <div class=\"position-relative w-100\">\r\n <input\r\n [type]=\"field.type\"\r\n cFormControl\r\n [formControlName]=\"field.controlName\"\r\n [id]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n 'no-label-margin': !field.label\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n\r\n @if (field.actionButton) {\r\n <button\r\n type=\"button\"\r\n [cTooltip]=\"field.actionButton?.tooltip\"\r\n tooltipPlacement=\"top\"\r\n cButton\r\n color=\"primary\"\r\n variant=\"outline\"\r\n aria-label=\"action\"\r\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n (click)=\"onClickFieldAction($event, field)\">\r\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n </button>\r\n }\r\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n @if (multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Select Inputs -->\r\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n <ng-container>\r\n <c-multi-select\r\n [multiple]=\"field?.multiple || false\"\r\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n [clearSearchOnSelect]=\"true\"\r\n [selectionType]=\"field?.selectionType || 'tags'\"\r\n [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Select'\"\r\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n [options]=\"colorCodes$\"\r\n [optionsMaxHeight]=\"400\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (searchValueChange)=\"handleSearch(field, $event)\"\r\n (valueChange)=\"onValueChange($event, field.controlName)\"\r\n [ngStyle]=\"field.styles?.field\">\r\n @if (field.type === inputType?.colorSelect) {\r\n @for (option of colorCodes$; track $index) {\r\n <c-multi-select-option [value]=\"option?.label\">\r\n <label class=\"d-flex gap-2\">\r\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n {{ option.label }}\r\n </label>\r\n </c-multi-select-option>\r\n }\r\n } @else {\r\n @for (option of field.options; track $index) {\r\n <c-multi-select-option [value]=\"option?.value\">\r\n {{ option.label }}\r\n </c-multi-select-option>\r\n }\r\n }\r\n </c-multi-select>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- Date input -->\r\n @else if (field.type === FormFieldType.Date) {\r\n <ng-container>\r\n <input\r\n type=\"text\"\r\n [placeholder]=\"field?.label || 'Select Date'\"\r\n class=\"form-control\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n [formControlName]=\"field.controlName\"\r\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n [bsConfig]=\"{\r\n containerClass: 'pongrass-red-datepicker',\r\n showWeekNumbers: false,\r\n adaptivePosition: true,\r\n useUtc: false\r\n }\"\r\n bsDatepicker\r\n [ngStyle]=\"field.styles?.field\" />\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n @else if (field.type === FormFieldType.NewDate) {\r\n <ng-container>\r\n <c-date-picker\r\n [formControlName]=\"field.controlName\"\r\n [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n inputReadOnly=\"true\"\r\n [showAdjacentDays]=\"false\"\r\n locale=\"en-US\">\r\n </c-date-picker>\r\n </ng-container>\r\n }\r\n\r\n <!-- Date Time input -->\r\n @else if (field.type === FormFieldType.Datetime) {\r\n <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n }\r\n\r\n <!-- Textarea -->\r\n @else if (field.type === FormFieldType.Textarea) {\r\n <ng-container>\r\n <textarea\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n [rows]=\"field?.textareaRows || 4\"\r\n [columns]=\"field?.textareaColumns || 4\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [formControlName]=\"field.controlName\"\r\n [ngStyle]=\"field.styles?.field\"></textarea>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n <!-- Checkbox -->\r\n @else if (field.type === FormFieldType.Checkbox) {\r\n <div class=\"no-label-margin\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n </div>\r\n }\r\n\r\n @else if (field.type === FormFieldType.Switch) {\r\n <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n </c-form-check>\r\n }\r\n <!-- Decimal input -->\r\n @else if (field.type === FormFieldType.Float) {\r\n <ng-container>\r\n <input\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n type=\"number\"\r\n class=\"me-2\"\r\n [formControlName]=\"field.controlName\"\r\n [wsDecimalInput]=\"field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\"\r\n [wsAcceptStringInput]=\"false\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Edition) {\r\n <ng-container>\r\n <prg-ws-edition-list-grouped\r\n (selectedEditionsChange)=\"onEditionChange($event)\"\r\n [multiple]=\"field?.multiple === false ? false : true\"\r\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n </prg-ws-edition-list-grouped>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Timepicker) {\r\n <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (field?.type === FormFieldType.Separator) {\r\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n }\r\n @if (field?.type === FormFieldType.FormHeader) {\r\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n }\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[wsCircularFocus]", inputs: ["formId", "formGroup"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i1.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i1$1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: i1.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput", "wsAcceptStringInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: EditionListGroupedComponent, selector: "prg-ws-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[wsMultiSelectStyler]", inputs: ["wsMultiSelectStyler", "options"] }, { kind: "component", type: i1.TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker" }] });
|
|
2406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "prg-ws-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n @for (row of config?.rows; track $index; let isLast = $last) {\r\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n @for (field of row; track $index) {\r\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n @if (multiForm.controls[field.controlName]) {\r\n <!-- Label -->\r\n @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n <label\r\n [wsShowTooltipIfTruncated]=\"field.label\"\r\n cLabel\r\n class=\"mb-1 label-multiform single-line-label\"\r\n [for]=\"field.controlName\"\r\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n [ngStyle]=\"field.styles?.label\"\r\n >{{ field.label }}\r\n @if (field?.validations?.required || false) {\r\n <strong class=\"text-danger\">*</strong>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- Text, Email, Number Inputs -->\r\n @if (\r\n field.type === FormFieldType.Text ||\r\n field.type === FormFieldType.Email ||\r\n field.type === FormFieldType.Number ||\r\n field.type === FormFieldType.Password ||\r\n field.type === FormFieldType.Url ||\r\n field.type === FormFieldType.Tel\r\n ) {\r\n <div class=\"position-relative w-100\">\r\n <input\r\n [type]=\"field.type\"\r\n cFormControl\r\n [formControlName]=\"field.controlName\"\r\n [id]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n 'no-label-margin': !field.label\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n\r\n @if (field.actionButton) {\r\n <button\r\n type=\"button\"\r\n [cTooltip]=\"field.actionButton?.tooltip\"\r\n tooltipPlacement=\"top\"\r\n cButton\r\n color=\"primary\"\r\n variant=\"outline\"\r\n aria-label=\"action\"\r\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n (click)=\"onClickFieldAction($event, field)\">\r\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n </button>\r\n }\r\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n @if (multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['min']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">Minimum value {{ field?.validations?.min }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['max']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">Maximum value {{ field?.validations?.max }} is allowed</small>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Select Inputs -->\r\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n <ng-container>\r\n <c-multi-select\r\n [multiple]=\"field?.multiple || false\"\r\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n [clearSearchOnSelect]=\"true\"\r\n [selectionType]=\"field?.selectionType || 'tags'\"\r\n [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Select'\"\r\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n [options]=\"colorCodes$\"\r\n [optionsMaxHeight]=\"400\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (searchValueChange)=\"handleSearch(field, $event)\"\r\n (valueChange)=\"onValueChange($event, field.controlName)\"\r\n [ngStyle]=\"field.styles?.field\">\r\n @if (field.type === inputType?.colorSelect) {\r\n @for (option of colorCodes$; track $index) {\r\n <c-multi-select-option [value]=\"option?.label\">\r\n <label class=\"d-flex gap-2\">\r\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n {{ option.label }}\r\n </label>\r\n </c-multi-select-option>\r\n }\r\n } @else {\r\n @for (option of field.options; track $index) {\r\n <c-multi-select-option [value]=\"option?.value\">\r\n {{ option.label }}\r\n </c-multi-select-option>\r\n }\r\n }\r\n </c-multi-select>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- Date input -->\r\n @else if (field.type === FormFieldType.Date) {\r\n <ng-container>\r\n <input\r\n type=\"text\"\r\n [placeholder]=\"field?.label || 'Select Date'\"\r\n class=\"form-control\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n [formControlName]=\"field.controlName\"\r\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n [bsConfig]=\"{\r\n containerClass: 'pongrass-red-datepicker',\r\n showWeekNumbers: false,\r\n adaptivePosition: true,\r\n useUtc: false\r\n }\"\r\n bsDatepicker\r\n [ngStyle]=\"field.styles?.field\"\r\n [minDate]=\"field?.validations?.minDate || ''\"\r\n [maxDate]=\"field?.validations?.maxDate || ''\">\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n\r\n } @else if (field.type === FormFieldType.NewDate) {\r\n <ng-container>\r\n <c-date-picker\r\n [formControlName]=\"field.controlName\"\r\n [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n inputReadOnly=\"true\"\r\n [showAdjacentDays]=\"false\"\r\n locale=\"en-US\">\r\n </c-date-picker>\r\n </ng-container>\r\n }\r\n\r\n <!-- Date Time input -->\r\n @else if (field.type === FormFieldType.Datetime) {\r\n <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n }\r\n\r\n <!-- Textarea -->\r\n @else if (field.type === FormFieldType.Textarea) {\r\n <ng-container>\r\n <textarea\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n [rows]=\"field?.textareaRows || 4\"\r\n [columns]=\"field?.textareaColumns || 4\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [formControlName]=\"field.controlName\"\r\n [ngStyle]=\"field.styles?.field\"></textarea>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n <!-- Checkbox -->\r\n @else if (field.type === FormFieldType.Checkbox) {\r\n <div class=\"no-label-margin\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n </div>\r\n\r\n } @else if (field.type === FormFieldType.Switch) {\r\n <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n </c-form-check>\r\n }\r\n <!-- Decimal input -->\r\n @else if (field.type === FormFieldType.Float) {\r\n <ng-container>\r\n <input\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n type=\"number\"\r\n class=\"me-2\"\r\n [formControlName]=\"field.controlName\"\r\n [wsDecimalInput]=\"\r\n field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\r\n \"\r\n [wsAcceptStringInput]=\"false\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Edition) {\r\n <ng-container>\r\n <prg-ws-edition-list-grouped\r\n (selectedEditionsChange)=\"onEditionChange($event)\"\r\n [multiple]=\"field?.multiple === false ? false : true\"\r\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n </prg-ws-edition-list-grouped>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Timepicker) {\r\n <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (field?.type === FormFieldType.Separator) {\r\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n }\r\n @if (field?.type === FormFieldType.FormHeader) {\r\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n }\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[wsCircularFocus]", inputs: ["formId", "formGroup"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i1.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i1$1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: i1.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput", "wsAcceptStringInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: EditionListGroupedComponent, selector: "prg-ws-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[wsMultiSelectStyler]", inputs: ["wsMultiSelectStyler", "options"] }, { kind: "component", type: i1.TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker" }] });
|
|
2401
2407
|
}
|
|
2402
2408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
|
|
2403
2409
|
type: Component,
|
|
2404
|
-
args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n @for (row of config?.rows; track $index; let isLast = $last) {\r\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n @for (field of row; track $index) {\r\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n @if (multiForm.controls[field.controlName]) {\r\n <!-- Label -->\r\n @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n <label\r\n [wsShowTooltipIfTruncated]=\"field.label\"\r\n cLabel\r\n class=\"mb-1 label-multiform single-line-label\"\r\n [for]=\"field.controlName\"\r\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n [ngStyle]=\"field.styles?.label\"\r\n >{{ field.label }}\r\n @if (field?.validations?.required || false) {\r\n <strong class=\"text-danger\">*</strong>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- Text, Email, Number Inputs -->\r\n @if (\r\n field.type === FormFieldType.Text ||\r\n field.type === FormFieldType.Email ||\r\n field.type === FormFieldType.Number ||\r\n field.type === FormFieldType.Password ||\r\n field.type === FormFieldType.Url ||\r\n field.type === FormFieldType.Tel\r\n ) {\r\n <div class=\"position-relative w-100\">\r\n <input\r\n [type]=\"field.type\"\r\n cFormControl\r\n [formControlName]=\"field.controlName\"\r\n [id]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n 'no-label-margin': !field.label\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n\r\n @if (field.actionButton) {\r\n <button\r\n type=\"button\"\r\n [cTooltip]=\"field.actionButton?.tooltip\"\r\n tooltipPlacement=\"top\"\r\n cButton\r\n color=\"primary\"\r\n variant=\"outline\"\r\n aria-label=\"action\"\r\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n (click)=\"onClickFieldAction($event, field)\">\r\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n </button>\r\n }\r\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n @if (multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Select Inputs -->\r\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n <ng-container>\r\n <c-multi-select\r\n [multiple]=\"field?.multiple || false\"\r\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n [clearSearchOnSelect]=\"true\"\r\n [selectionType]=\"field?.selectionType || 'tags'\"\r\n [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Select'\"\r\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n [options]=\"colorCodes$\"\r\n [optionsMaxHeight]=\"400\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (searchValueChange)=\"handleSearch(field, $event)\"\r\n (valueChange)=\"onValueChange($event, field.controlName)\"\r\n [ngStyle]=\"field.styles?.field\">\r\n @if (field.type === inputType?.colorSelect) {\r\n @for (option of colorCodes$; track $index) {\r\n <c-multi-select-option [value]=\"option?.label\">\r\n <label class=\"d-flex gap-2\">\r\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n {{ option.label }}\r\n </label>\r\n </c-multi-select-option>\r\n }\r\n } @else {\r\n @for (option of field.options; track $index) {\r\n <c-multi-select-option [value]=\"option?.value\">\r\n {{ option.label }}\r\n </c-multi-select-option>\r\n }\r\n }\r\n </c-multi-select>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- Date input -->\r\n @else if (field.type === FormFieldType.Date) {\r\n <ng-container>\r\n <input\r\n type=\"text\"\r\n [placeholder]=\"field?.label || 'Select Date'\"\r\n class=\"form-control\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n [formControlName]=\"field.controlName\"\r\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n [bsConfig]=\"{\r\n containerClass: 'pongrass-red-datepicker',\r\n showWeekNumbers: false,\r\n adaptivePosition: true,\r\n useUtc: false\r\n }\"\r\n bsDatepicker\r\n [ngStyle]=\"field.styles?.field\" />\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n @else if (field.type === FormFieldType.NewDate) {\r\n <ng-container>\r\n <c-date-picker\r\n [formControlName]=\"field.controlName\"\r\n [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n inputReadOnly=\"true\"\r\n [showAdjacentDays]=\"false\"\r\n locale=\"en-US\">\r\n </c-date-picker>\r\n </ng-container>\r\n }\r\n\r\n <!-- Date Time input -->\r\n @else if (field.type === FormFieldType.Datetime) {\r\n <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n }\r\n\r\n <!-- Textarea -->\r\n @else if (field.type === FormFieldType.Textarea) {\r\n <ng-container>\r\n <textarea\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n [rows]=\"field?.textareaRows || 4\"\r\n [columns]=\"field?.textareaColumns || 4\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [formControlName]=\"field.controlName\"\r\n [ngStyle]=\"field.styles?.field\"></textarea>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n <!-- Checkbox -->\r\n @else if (field.type === FormFieldType.Checkbox) {\r\n <div class=\"no-label-margin\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n </div>\r\n }\r\n\r\n @else if (field.type === FormFieldType.Switch) {\r\n <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n </c-form-check>\r\n }\r\n <!-- Decimal input -->\r\n @else if (field.type === FormFieldType.Float) {\r\n <ng-container>\r\n <input\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n type=\"number\"\r\n class=\"me-2\"\r\n [formControlName]=\"field.controlName\"\r\n [wsDecimalInput]=\"field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\"\r\n [wsAcceptStringInput]=\"false\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Edition) {\r\n <ng-container>\r\n <prg-ws-edition-list-grouped\r\n (selectedEditionsChange)=\"onEditionChange($event)\"\r\n [multiple]=\"field?.multiple === false ? false : true\"\r\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n </prg-ws-edition-list-grouped>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Timepicker) {\r\n <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (field?.type === FormFieldType.Separator) {\r\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n }\r\n @if (field?.type === FormFieldType.FormHeader) {\r\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n }\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"] }]
|
|
2410
|
+
args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n @for (row of config?.rows; track $index; let isLast = $last) {\r\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n @for (field of row; track $index) {\r\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n @if (multiForm.controls[field.controlName]) {\r\n <!-- Label -->\r\n @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n <label\r\n [wsShowTooltipIfTruncated]=\"field.label\"\r\n cLabel\r\n class=\"mb-1 label-multiform single-line-label\"\r\n [for]=\"field.controlName\"\r\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n [ngStyle]=\"field.styles?.label\"\r\n >{{ field.label }}\r\n @if (field?.validations?.required || false) {\r\n <strong class=\"text-danger\">*</strong>\r\n }\r\n </label>\r\n }\r\n\r\n <!-- Text, Email, Number Inputs -->\r\n @if (\r\n field.type === FormFieldType.Text ||\r\n field.type === FormFieldType.Email ||\r\n field.type === FormFieldType.Number ||\r\n field.type === FormFieldType.Password ||\r\n field.type === FormFieldType.Url ||\r\n field.type === FormFieldType.Tel\r\n ) {\r\n <div class=\"position-relative w-100\">\r\n <input\r\n [type]=\"field.type\"\r\n cFormControl\r\n [formControlName]=\"field.controlName\"\r\n [id]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n 'no-label-margin': !field.label\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n\r\n @if (field.actionButton) {\r\n <button\r\n type=\"button\"\r\n [cTooltip]=\"field.actionButton?.tooltip\"\r\n tooltipPlacement=\"top\"\r\n cButton\r\n color=\"primary\"\r\n variant=\"outline\"\r\n aria-label=\"action\"\r\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n (click)=\"onClickFieldAction($event, field)\">\r\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n </button>\r\n }\r\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n @if (multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['min']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">Minimum value {{ field?.validations?.min }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['max']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">Maximum value {{ field?.validations?.max }} is allowed</small>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Select Inputs -->\r\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n <ng-container>\r\n <c-multi-select\r\n [multiple]=\"field?.multiple || false\"\r\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n [clearSearchOnSelect]=\"true\"\r\n [selectionType]=\"field?.selectionType || 'tags'\"\r\n [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Select'\"\r\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n [options]=\"colorCodes$\"\r\n [optionsMaxHeight]=\"400\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (searchValueChange)=\"handleSearch(field, $event)\"\r\n (valueChange)=\"onValueChange($event, field.controlName)\"\r\n [ngStyle]=\"field.styles?.field\">\r\n @if (field.type === inputType?.colorSelect) {\r\n @for (option of colorCodes$; track $index) {\r\n <c-multi-select-option [value]=\"option?.label\">\r\n <label class=\"d-flex gap-2\">\r\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n {{ option.label }}\r\n </label>\r\n </c-multi-select-option>\r\n }\r\n } @else {\r\n @for (option of field.options; track $index) {\r\n <c-multi-select-option [value]=\"option?.value\">\r\n {{ option.label }}\r\n </c-multi-select-option>\r\n }\r\n }\r\n </c-multi-select>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n\r\n <!-- Date input -->\r\n @else if (field.type === FormFieldType.Date) {\r\n <ng-container>\r\n <input\r\n type=\"text\"\r\n [placeholder]=\"field?.label || 'Select Date'\"\r\n class=\"form-control\"\r\n [ngClass]=\"{\r\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n [formControlName]=\"field.controlName\"\r\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n [bsConfig]=\"{\r\n containerClass: 'pongrass-red-datepicker',\r\n showWeekNumbers: false,\r\n adaptivePosition: true,\r\n useUtc: false\r\n }\"\r\n bsDatepicker\r\n [ngStyle]=\"field.styles?.field\"\r\n [minDate]=\"field?.validations?.minDate || ''\"\r\n [maxDate]=\"field?.validations?.maxDate || ''\">\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n\r\n } @else if (field.type === FormFieldType.NewDate) {\r\n <ng-container>\r\n <c-date-picker\r\n [formControlName]=\"field.controlName\"\r\n [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n inputReadOnly=\"true\"\r\n [showAdjacentDays]=\"false\"\r\n locale=\"en-US\">\r\n </c-date-picker>\r\n </ng-container>\r\n }\r\n\r\n <!-- Date Time input -->\r\n @else if (field.type === FormFieldType.Datetime) {\r\n <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n }\r\n\r\n <!-- Textarea -->\r\n @else if (field.type === FormFieldType.Textarea) {\r\n <ng-container>\r\n <textarea\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n [rows]=\"field?.textareaRows || 4\"\r\n [columns]=\"field?.textareaColumns || 4\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [formControlName]=\"field.controlName\"\r\n [ngStyle]=\"field.styles?.field\"></textarea>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n }\r\n <!-- Checkbox -->\r\n @else if (field.type === FormFieldType.Checkbox) {\r\n <div class=\"no-label-margin\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n </div>\r\n\r\n } @else if (field.type === FormFieldType.Switch) {\r\n <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n </c-form-check>\r\n }\r\n <!-- Decimal input -->\r\n @else if (field.type === FormFieldType.Float) {\r\n <ng-container>\r\n <input\r\n cFormControl\r\n [id]=\"field.controlName\"\r\n type=\"number\"\r\n class=\"me-2\"\r\n [formControlName]=\"field.controlName\"\r\n [wsDecimalInput]=\"\r\n field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\r\n \"\r\n [wsAcceptStringInput]=\"false\"\r\n [placeholder]=\"field.placeholder || ''\"\r\n [ngClass]=\"{\r\n 'form-invalid border-danger border border-2':\r\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n }\"\r\n [min]=\"field.validations?.min\"\r\n [max]=\"field.validations?.max\"\r\n [ngStyle]=\"field.styles?.field\" />\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Minimum length {{ field?.validations?.minLength }} characters is required\r\n </small>\r\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">\r\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n </small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Edition) {\r\n <ng-container>\r\n <prg-ws-edition-list-grouped\r\n (selectedEditionsChange)=\"onEditionChange($event)\"\r\n [multiple]=\"field?.multiple === false ? false : true\"\r\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n </prg-ws-edition-list-grouped>\r\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n }\r\n }\r\n </ng-container>\r\n } @else if (field.type === FormFieldType.Timepicker) {\r\n <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (field?.type === FormFieldType.Separator) {\r\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n }\r\n @if (field?.type === FormFieldType.FormHeader) {\r\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n }\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"] }]
|
|
2405
2411
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
2406
2412
|
type: Input
|
|
2407
2413
|
}], showUnsavedFlags: [{
|