@pongrass/utils 1.1.2-v20 → 1.1.3-v20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1495,11 +1495,11 @@ class MultiFormComponent {
|
|
|
1495
1495
|
return null;
|
|
1496
1496
|
}
|
|
1497
1497
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1498
|
-
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>\n @for (row of config?.rows; track $index; let isLast = $last) {\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n @for (field of row; track $index) {\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n @if (multiForm.controls[field.controlName]) {\n <!-- Label -->\n @if (field.label && field.type !== FormFieldType.Checkbox) {\n <label\n [wsShowTooltipIfTruncated]=\"field.label\"\n cLabel\n class=\"mb-1 label-multiform single-line-label\"\n [for]=\"field.controlName\"\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n [ngStyle]=\"field.styles?.label\"\n >{{ field.label }}\n @if (field?.validations?.required || false) {\n <strong class=\"text-danger\">*</strong>\n }\n </label>\n }\n\n <!-- Text, Email, Number Inputs -->\n @if (\n field.type === FormFieldType.Text ||\n field.type === FormFieldType.Email ||\n field.type === FormFieldType.Number ||\n field.type === FormFieldType.Password ||\n field.type === FormFieldType.Url ||\n field.type === FormFieldType.Tel\n ) {\n <div class=\"position-relative w-100\">\n <input\n [type]=\"field.type\"\n cFormControl\n [formControlName]=\"field.controlName\"\n [id]=\"field.controlName\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n 'no-label-margin': !field.label\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n\n @if (field.actionButton) {\n <button\n type=\"button\"\n [cTooltip]=\"field.actionButton?.tooltip\"\n tooltipPlacement=\"top\"\n cButton\n color=\"primary\"\n variant=\"outline\"\n aria-label=\"action\"\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n (click)=\"onClickFieldAction($event, field)\">\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n </button>\n }\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n @if (multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n }\n </div>\n }\n\n <!-- Select Inputs -->\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n <ng-container>\n <c-multi-select\n [multiple]=\"field?.multiple || false\"\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n [clearSearchOnSelect]=\"true\"\n [selectionType]=\"field?.selectionType || 'tags'\"\n [cleaner]=\"field?.allowCleaner || true\"\n [formControlName]=\"field.controlName\"\n [placeholder]=\"field.placeholder || 'Select'\"\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n [options]=\"colorCodes$\"\n [optionsMaxHeight]=\"400\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (valueChange)=\"onValueChange($event, field.controlName)\"\n [ngStyle]=\"field.styles?.field\">\n @if (field.type === inputType?.colorSelect) {\n @for (option of colorCodes$; track $index) {\n <c-multi-select-option [value]=\"option?.label\">\n <label class=\"d-flex gap-2\">\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n {{ option.label }}\n </label>\n </c-multi-select-option>\n }\n } @else {\n @for (option of field.options; track $index) {\n <c-multi-select-option [value]=\"option?.value\">\n {{ option.label }}\n </c-multi-select-option>\n }\n }\n </c-multi-select>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n\n <!-- Date input -->\n @else if (field.type === FormFieldType.Date) {\n <ng-container>\n <input\n type=\"text\"\n [placeholder]=\"field?.label || 'Select Date'\"\n class=\"form-control\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n [formControlName]=\"field.controlName\"\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n [bsConfig]=\"{\n containerClass: 'pongrass-red-datepicker',\n showWeekNumbers: false,\n adaptivePosition: true,\n useUtc: false\n }\"\n bsDatepicker\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n <!-- Textarea -->\n @else if (field.type === FormFieldType.Textarea) {\n <ng-container>\n <textarea\n cFormControl\n [id]=\"field.controlName\"\n [rows]=\"field?.textareaRows || 4\"\n [columns]=\"field?.textareaColumns || 4\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [formControlName]=\"field.controlName\"\n [ngStyle]=\"field.styles?.field\"></textarea>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n }\n <!-- Checkbox -->\n @else if (field.type === FormFieldType.Checkbox) {\n <div class=\"no-label-margin\">\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n </div>\n }\n <!-- Decimal input -->\n @else if (field.type === FormFieldType.Float) {\n <ng-container>\n <input\n cFormControl\n [id]=\"field.controlName\"\n type=\"number\"\n class=\"me-2\"\n [formControlName]=\"field.controlName\"\n [wsDecimalInput]=\"field.validations?.precision || 2\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n } @else if (field.type === FormFieldType.Edition) {\n <ng-container>\n <prg-ws-edition-list-grouped\n (selectedEditionsChange)=\"onEditionChange($event)\"\n [multiple]=\"field?.multiple || true\"\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n </prg-ws-edition-list-grouped>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n }\n </div>\n }\n\n @if (field?.type === FormFieldType.Separator) {\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n }\n @if (field?.type === FormFieldType.FormHeader) {\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n }\n }\n </div>\n }\n</form>\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}\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: "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: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput"] }, { 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"] }] });
|
|
1498
|
+
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>\n @for (row of config?.rows; track $index; let isLast = $last) {\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n @for (field of row; track $index) {\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n @if (multiForm.controls[field.controlName]) {\n <!-- Label -->\n @if (field.label && field.type !== FormFieldType.Checkbox) {\n <label\n [wsShowTooltipIfTruncated]=\"field.label\"\n cLabel\n class=\"mb-1 label-multiform single-line-label\"\n [for]=\"field.controlName\"\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n [ngStyle]=\"field.styles?.label\"\n >{{ field.label }}\n @if (field?.validations?.required || false) {\n <strong class=\"text-danger\">*</strong>\n }\n </label>\n }\n\n <!-- Text, Email, Number Inputs -->\n @if (\n field.type === FormFieldType.Text ||\n field.type === FormFieldType.Email ||\n field.type === FormFieldType.Number ||\n field.type === FormFieldType.Password ||\n field.type === FormFieldType.Url ||\n field.type === FormFieldType.Tel\n ) {\n <div class=\"position-relative w-100\">\n <input\n [type]=\"field.type\"\n cFormControl\n [formControlName]=\"field.controlName\"\n [id]=\"field.controlName\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n 'no-label-margin': !field.label\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n\n @if (field.actionButton) {\n <button\n type=\"button\"\n [cTooltip]=\"field.actionButton?.tooltip\"\n tooltipPlacement=\"top\"\n cButton\n color=\"primary\"\n variant=\"outline\"\n aria-label=\"action\"\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n (click)=\"onClickFieldAction($event, field)\">\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n </button>\n }\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n @if (multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n }\n </div>\n }\n\n <!-- Select Inputs -->\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n <ng-container>\n <c-multi-select\n [multiple]=\"field?.multiple || false\"\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n [clearSearchOnSelect]=\"true\"\n [selectionType]=\"field?.selectionType || 'tags'\"\n [cleaner]=\"field?.allowCleaner || true\"\n [formControlName]=\"field.controlName\"\n [placeholder]=\"field.placeholder || 'Select'\"\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n [options]=\"colorCodes$\"\n [optionsMaxHeight]=\"400\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (valueChange)=\"onValueChange($event, field.controlName)\"\n [ngStyle]=\"field.styles?.field\">\n @if (field.type === inputType?.colorSelect) {\n @for (option of colorCodes$; track $index) {\n <c-multi-select-option [value]=\"option?.label\">\n <label class=\"d-flex gap-2\">\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n {{ option.label }}\n </label>\n </c-multi-select-option>\n }\n } @else {\n @for (option of field.options; track $index) {\n <c-multi-select-option [value]=\"option?.value\">\n {{ option.label }}\n </c-multi-select-option>\n }\n }\n </c-multi-select>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n\n <!-- Date input -->\n @else if (field.type === FormFieldType.Date) {\n <ng-container>\n <input\n type=\"text\"\n [placeholder]=\"field?.label || 'Select Date'\"\n class=\"form-control\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n [formControlName]=\"field.controlName\"\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n [bsConfig]=\"{\n containerClass: 'pongrass-red-datepicker',\n showWeekNumbers: false,\n adaptivePosition: true,\n useUtc: false\n }\"\n bsDatepicker\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n <!-- Textarea -->\n @else if (field.type === FormFieldType.Textarea) {\n <ng-container>\n <textarea\n cFormControl\n [id]=\"field.controlName\"\n [rows]=\"field?.textareaRows || 4\"\n [columns]=\"field?.textareaColumns || 4\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [formControlName]=\"field.controlName\"\n [ngStyle]=\"field.styles?.field\"></textarea>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n }\n <!-- Checkbox -->\n @else if (field.type === FormFieldType.Checkbox) {\n <div class=\"no-label-margin\">\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n </div>\n }\n <!-- Decimal input -->\n @else if (field.type === FormFieldType.Float) {\n <ng-container>\n <input\n cFormControl\n [id]=\"field.controlName\"\n type=\"number\"\n class=\"me-2\"\n [formControlName]=\"field.controlName\"\n [wsDecimalInput]=\"field.validations?.precision || 2\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n } @else if (field.type === FormFieldType.Edition) {\n <ng-container>\n <prg-ws-edition-list-grouped\n (selectedEditionsChange)=\"onEditionChange($event)\"\n [multiple]=\"field?.multiple === false ? false : true\"\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n </prg-ws-edition-list-grouped>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n }\n </div>\n }\n\n @if (field?.type === FormFieldType.Separator) {\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n }\n @if (field?.type === FormFieldType.FormHeader) {\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n }\n }\n </div>\n }\n</form>\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: "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: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput"] }, { 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"] }] });
|
|
1499
1499
|
}
|
|
1500
1500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
|
|
1501
1501
|
type: Component,
|
|
1502
|
-
args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\n @for (row of config?.rows; track $index; let isLast = $last) {\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n @for (field of row; track $index) {\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n @if (multiForm.controls[field.controlName]) {\n <!-- Label -->\n @if (field.label && field.type !== FormFieldType.Checkbox) {\n <label\n [wsShowTooltipIfTruncated]=\"field.label\"\n cLabel\n class=\"mb-1 label-multiform single-line-label\"\n [for]=\"field.controlName\"\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n [ngStyle]=\"field.styles?.label\"\n >{{ field.label }}\n @if (field?.validations?.required || false) {\n <strong class=\"text-danger\">*</strong>\n }\n </label>\n }\n\n <!-- Text, Email, Number Inputs -->\n @if (\n field.type === FormFieldType.Text ||\n field.type === FormFieldType.Email ||\n field.type === FormFieldType.Number ||\n field.type === FormFieldType.Password ||\n field.type === FormFieldType.Url ||\n field.type === FormFieldType.Tel\n ) {\n <div class=\"position-relative w-100\">\n <input\n [type]=\"field.type\"\n cFormControl\n [formControlName]=\"field.controlName\"\n [id]=\"field.controlName\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n 'no-label-margin': !field.label\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n\n @if (field.actionButton) {\n <button\n type=\"button\"\n [cTooltip]=\"field.actionButton?.tooltip\"\n tooltipPlacement=\"top\"\n cButton\n color=\"primary\"\n variant=\"outline\"\n aria-label=\"action\"\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n (click)=\"onClickFieldAction($event, field)\">\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n </button>\n }\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n @if (multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n }\n </div>\n }\n\n <!-- Select Inputs -->\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n <ng-container>\n <c-multi-select\n [multiple]=\"field?.multiple || false\"\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n [clearSearchOnSelect]=\"true\"\n [selectionType]=\"field?.selectionType || 'tags'\"\n [cleaner]=\"field?.allowCleaner || true\"\n [formControlName]=\"field.controlName\"\n [placeholder]=\"field.placeholder || 'Select'\"\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n [options]=\"colorCodes$\"\n [optionsMaxHeight]=\"400\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (valueChange)=\"onValueChange($event, field.controlName)\"\n [ngStyle]=\"field.styles?.field\">\n @if (field.type === inputType?.colorSelect) {\n @for (option of colorCodes$; track $index) {\n <c-multi-select-option [value]=\"option?.label\">\n <label class=\"d-flex gap-2\">\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n {{ option.label }}\n </label>\n </c-multi-select-option>\n }\n } @else {\n @for (option of field.options; track $index) {\n <c-multi-select-option [value]=\"option?.value\">\n {{ option.label }}\n </c-multi-select-option>\n }\n }\n </c-multi-select>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n\n <!-- Date input -->\n @else if (field.type === FormFieldType.Date) {\n <ng-container>\n <input\n type=\"text\"\n [placeholder]=\"field?.label || 'Select Date'\"\n class=\"form-control\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n [formControlName]=\"field.controlName\"\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n [bsConfig]=\"{\n containerClass: 'pongrass-red-datepicker',\n showWeekNumbers: false,\n adaptivePosition: true,\n useUtc: false\n }\"\n bsDatepicker\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n <!-- Textarea -->\n @else if (field.type === FormFieldType.Textarea) {\n <ng-container>\n <textarea\n cFormControl\n [id]=\"field.controlName\"\n [rows]=\"field?.textareaRows || 4\"\n [columns]=\"field?.textareaColumns || 4\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [formControlName]=\"field.controlName\"\n [ngStyle]=\"field.styles?.field\"></textarea>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n }\n <!-- Checkbox -->\n @else if (field.type === FormFieldType.Checkbox) {\n <div class=\"no-label-margin\">\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n </div>\n }\n <!-- Decimal input -->\n @else if (field.type === FormFieldType.Float) {\n <ng-container>\n <input\n cFormControl\n [id]=\"field.controlName\"\n type=\"number\"\n class=\"me-2\"\n [formControlName]=\"field.controlName\"\n [wsDecimalInput]=\"field.validations?.precision || 2\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n } @else if (field.type === FormFieldType.Edition) {\n <ng-container>\n <prg-ws-edition-list-grouped\n (selectedEditionsChange)=\"onEditionChange($event)\"\n [multiple]=\"field?.multiple || true\"\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n </prg-ws-edition-list-grouped>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n }\n </div>\n }\n\n @if (field?.type === FormFieldType.Separator) {\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n }\n @if (field?.type === FormFieldType.FormHeader) {\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n }\n }\n </div>\n }\n</form>\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}\n"] }]
|
|
1502
|
+
args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\n @for (row of config?.rows; track $index; let isLast = $last) {\n <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n @for (field of row; track $index) {\n @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n @if (multiForm.controls[field.controlName]) {\n <!-- Label -->\n @if (field.label && field.type !== FormFieldType.Checkbox) {\n <label\n [wsShowTooltipIfTruncated]=\"field.label\"\n cLabel\n class=\"mb-1 label-multiform single-line-label\"\n [for]=\"field.controlName\"\n [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n [ngStyle]=\"field.styles?.label\"\n >{{ field.label }}\n @if (field?.validations?.required || false) {\n <strong class=\"text-danger\">*</strong>\n }\n </label>\n }\n\n <!-- Text, Email, Number Inputs -->\n @if (\n field.type === FormFieldType.Text ||\n field.type === FormFieldType.Email ||\n field.type === FormFieldType.Number ||\n field.type === FormFieldType.Password ||\n field.type === FormFieldType.Url ||\n field.type === FormFieldType.Tel\n ) {\n <div class=\"position-relative w-100\">\n <input\n [type]=\"field.type\"\n cFormControl\n [formControlName]=\"field.controlName\"\n [id]=\"field.controlName\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n 'no-label-margin': !field.label\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n\n @if (field.actionButton) {\n <button\n type=\"button\"\n [cTooltip]=\"field.actionButton?.tooltip\"\n tooltipPlacement=\"top\"\n cButton\n color=\"primary\"\n variant=\"outline\"\n aria-label=\"action\"\n class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n (click)=\"onClickFieldAction($event, field)\">\n <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n </button>\n }\n @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n @if (multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n }\n </div>\n }\n\n <!-- Select Inputs -->\n @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n <ng-container>\n <c-multi-select\n [multiple]=\"field?.multiple || false\"\n [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n [clearSearchOnSelect]=\"true\"\n [selectionType]=\"field?.selectionType || 'tags'\"\n [cleaner]=\"field?.allowCleaner || true\"\n [formControlName]=\"field.controlName\"\n [placeholder]=\"field.placeholder || 'Select'\"\n [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n [options]=\"colorCodes$\"\n [optionsMaxHeight]=\"400\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (valueChange)=\"onValueChange($event, field.controlName)\"\n [ngStyle]=\"field.styles?.field\">\n @if (field.type === inputType?.colorSelect) {\n @for (option of colorCodes$; track $index) {\n <c-multi-select-option [value]=\"option?.label\">\n <label class=\"d-flex gap-2\">\n <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n {{ option.label }}\n </label>\n </c-multi-select-option>\n }\n } @else {\n @for (option of field.options; track $index) {\n <c-multi-select-option [value]=\"option?.value\">\n {{ option.label }}\n </c-multi-select-option>\n }\n }\n </c-multi-select>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n\n <!-- Date input -->\n @else if (field.type === FormFieldType.Date) {\n <ng-container>\n <input\n type=\"text\"\n [placeholder]=\"field?.label || 'Select Date'\"\n class=\"form-control\"\n [ngClass]=\"{\n 'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n [formControlName]=\"field.controlName\"\n [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n [bsConfig]=\"{\n containerClass: 'pongrass-red-datepicker',\n showWeekNumbers: false,\n adaptivePosition: true,\n useUtc: false\n }\"\n bsDatepicker\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n <!-- Textarea -->\n @else if (field.type === FormFieldType.Textarea) {\n <ng-container>\n <textarea\n cFormControl\n [id]=\"field.controlName\"\n [rows]=\"field?.textareaRows || 4\"\n [columns]=\"field?.textareaColumns || 4\"\n [placeholder]=\"field.placeholder || ''\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [formControlName]=\"field.controlName\"\n [ngStyle]=\"field.styles?.field\"></textarea>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n }\n <!-- Checkbox -->\n @else if (field.type === FormFieldType.Checkbox) {\n <div class=\"no-label-margin\">\n <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n </div>\n }\n <!-- Decimal input -->\n @else if (field.type === FormFieldType.Float) {\n <ng-container>\n <input\n cFormControl\n [id]=\"field.controlName\"\n type=\"number\"\n class=\"me-2\"\n [formControlName]=\"field.controlName\"\n [wsDecimalInput]=\"field.validations?.precision || 2\"\n [ngClass]=\"{\n 'form-invalid border-danger border border-2':\n (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n }\"\n [min]=\"field.validations?.min\"\n [max]=\"field.validations?.max\"\n [ngStyle]=\"field.styles?.field\" />\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Minimum length {{ field?.validations?.minLength }} characters is required\n </small>\n } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n <small class=\"text-danger fst-italic form-invalid-label\">\n Maximum length {{ field?.validations?.maxLength }} characters is allowed\n </small>\n }\n }\n </ng-container>\n } @else if (field.type === FormFieldType.Edition) {\n <ng-container>\n <prg-ws-edition-list-grouped\n (selectedEditionsChange)=\"onEditionChange($event)\"\n [multiple]=\"field?.multiple === false ? false : true\"\n [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n </prg-ws-edition-list-grouped>\n @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n }\n }\n </ng-container>\n }\n }\n </div>\n }\n\n @if (field?.type === FormFieldType.Separator) {\n <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n }\n @if (field?.type === FormFieldType.FormHeader) {\n <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n }\n }\n </div>\n }\n</form>\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"] }]
|
|
1503
1503
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
1504
1504
|
type: Input
|
|
1505
1505
|
}], showUnsavedFlags: [{
|