@pongrass/utils 1.1.9-v20 → 1.1.11-v20

package/fesm2022/pongrass-utils.mjs

@@ -2237,6 +2237,12 @@ class MultiFormComponent {
             if (validations.pattern) {
                 validators.push(Validators.pattern(validations.pattern));
             }
+            if (validations.min) {
+                validators.push(Validators.min(validations.min));
+            }
+            if (validations.max) {
+                validators.push(Validators.max(validations.max));
+            }
         }
         return validators;
     }
@@ -2317,9 +2323,11 @@ class MultiFormComponent {
     }
     handleSearch(field, keyword) {
         const fieldConfig = field.config;
-        this.jsonrpcService.postJsonRpcRequest(fieldConfig.method, { keyword }).subscribe((response) => {
-            field.options = response?.result || [];
-        });
+        if (fieldConfig) {
+            this.jsonrpcService.postJsonRpcRequest(fieldConfig.method, { keyword }).subscribe((response) => {
+                field.options = response?.result || [];
+            });
+        }
     }
     setDefaultAdvanceDate(currentDate, defaultAdvance) {
         if (defaultAdvance === 'weekly') {
@@ -2395,11 +2403,11 @@ class MultiFormComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], showUnsavedFlags: [{
@@ -2475,7 +2483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         FormCheckInputDirective,
                         EditionListGroupedComponent,
                         MultiSelectStylerDirective,
-                        TimePickerModule
+                        TimePickerModule,
                     ],
                     exports: [MultiFormComponent, DateTimePickerComponent]
                 }]
@@ -2704,7 +2712,7 @@ class TableGridComponent {
                 const initialState = this.tableGridState.map(item => ({
                     colId: item.key,
                     hide: item.visible === null || item.visible === undefined ? false : !item.visible,
-                    width: item.width || this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth || 100,
+                    width: item.width || this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth,
                     sort: item.sort || null
                 }));
                 this.gridAPI.api.applyColumnState({
@@ -2718,7 +2726,7 @@ class TableGridComponent {
                     this.tableGridState.push({
                         key: columnState.colId,
                         visible: columnState.hide ? !columnState.hide : true,
-                        width: columnState.width || this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth || 100,
+                        width: columnState.width,
                         sort: columnState.sort
                     });
                 });
@@ -2853,7 +2861,7 @@ class TableGridComponent {
                     }
                     this.tableConfiguration.initialState.forEach((col) => {
                         col.visible = col.visible === null || col.visible === undefined ? true : col.visible;
-                        col.width = col.width || this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth || 100;
+                        col.width = col.width;
                         col.sort = null;
                         this.tableGridState.push(col);
                         this.columnsListselectionForm.controls[col.key].setValue(true);
@@ -2863,7 +2871,7 @@ class TableGridComponent {
                             state: this.tableGridState.map(item => ({
                                 colId: item.key,
                                 hide: item.visible === null || item.visible === undefined ? false : !item.visible,
-                                width: item.width || this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth || 100,
+                                width: item.width,
                                 sort: item.sort || null,
                                 flex: 1
                             })),
@@ -2929,7 +2937,7 @@ class TableGridComponent {
             const columnState = this.tableGridState.map(item => ({
                 colId: item.key,
                 hide: true,
-                width: this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth || 100,
+                width: item?.width || this.configurationService.allConfigValues()?.tableGridConfig?.defaultMinWidth || 100,
                 sort: item.sort || null,
                 flex: 1
             }));