@pongrass/utils 1.1.5-v20 → 1.1.6-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.
- package/fesm2022/pongrass-utils.mjs +24 -12
- package/fesm2022/pongrass-utils.mjs.map +1 -1
- package/index.d.ts +5 -3
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ import { CommonModule, NgClass } from '@angular/common';
|
|
|
5
5
|
import * as i3 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NgControl, NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import * as i4 from '@coreui/angular-pro';
|
|
8
|
-
import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, AutocompleteModule, FormCheckInputDirective, OffcanvasModule, SpinnerModule, FormPasswordDirective, AlertModule } from '@coreui/angular-pro';
|
|
8
|
+
import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, AutocompleteModule, FormCheckInputDirective, TimePickerModule, OffcanvasModule, SpinnerModule, FormPasswordDirective, AlertModule } from '@coreui/angular-pro';
|
|
9
9
|
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
|
10
10
|
import { BehaviorSubject, map, lastValueFrom, Subject } from 'rxjs';
|
|
11
11
|
import * as i5 from '@coreui/icons-angular';
|
|
@@ -738,6 +738,7 @@ var FormFieldType;
|
|
|
738
738
|
FormFieldType["Password"] = "password";
|
|
739
739
|
FormFieldType["Url"] = "url";
|
|
740
740
|
FormFieldType["Tel"] = "tel";
|
|
741
|
+
FormFieldType["Timepicker"] = "time";
|
|
741
742
|
})(FormFieldType || (FormFieldType = {}));
|
|
742
743
|
|
|
743
744
|
const ColorsCodes = [
|
|
@@ -1314,6 +1315,14 @@ function generateTimeOptions() {
|
|
|
1314
1315
|
}
|
|
1315
1316
|
return times;
|
|
1316
1317
|
}
|
|
1318
|
+
// Output: '"20:33:00"'
|
|
1319
|
+
function getTimeValueFromDateTime(isoString) {
|
|
1320
|
+
const d = new Date(isoString); // "2025-12-16T20:33:00.000Z"
|
|
1321
|
+
const h = d.getHours().toString().padStart(2, '0');
|
|
1322
|
+
const m = d.getMinutes().toString().padStart(2, '0');
|
|
1323
|
+
const s = d.getSeconds().toString().padStart(2, '0');
|
|
1324
|
+
return `${h}:${m}:${s}`;
|
|
1325
|
+
}
|
|
1317
1326
|
|
|
1318
1327
|
class DateTimePickerComponent {
|
|
1319
1328
|
date = null;
|
|
@@ -1331,7 +1340,7 @@ class DateTimePickerComponent {
|
|
|
1331
1340
|
}
|
|
1332
1341
|
const inputDate = value instanceof Date ? value : new Date(value);
|
|
1333
1342
|
// ********** FIX FOR COREUI DATE PICKER (LOCAL TIME REPRESENTATION) **********
|
|
1334
|
-
// Get Y, M, D from the UTC value to ensure the correct day is selected,
|
|
1343
|
+
// Get Y, M, D from the UTC value to ensure the correct day is selected,
|
|
1335
1344
|
// then create a new Date object for the start of that day in the LOCAL time zone.
|
|
1336
1345
|
const year = inputDate.getUTCFullYear();
|
|
1337
1346
|
const month = inputDate.getUTCMonth();
|
|
@@ -1377,7 +1386,7 @@ class DateTimePickerComponent {
|
|
|
1377
1386
|
}
|
|
1378
1387
|
const [h, m] = this.timeValue.split(',').map(Number);
|
|
1379
1388
|
// Create a new Date object based on the selected date (which is a local midnight)
|
|
1380
|
-
// The key here is to use the UTC setters to apply the time portion
|
|
1389
|
+
// The key here is to use the UTC setters to apply the time portion
|
|
1381
1390
|
// so the final output is a UTC timestamp as expected by the parent form.
|
|
1382
1391
|
const combined = new Date(this.date);
|
|
1383
1392
|
combined.setUTCHours(h, m, 0, 0);
|
|
@@ -1385,13 +1394,13 @@ class DateTimePickerComponent {
|
|
|
1385
1394
|
this.onTouched();
|
|
1386
1395
|
}
|
|
1387
1396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: DateTimePickerComponent, isStandalone: false, selector: "app-date-time-picker", providers: [
|
|
1389
1398
|
{
|
|
1390
1399
|
provide: NG_VALUE_ACCESSOR,
|
|
1391
1400
|
useExisting: forwardRef(() => DateTimePickerComponent),
|
|
1392
1401
|
multi: true
|
|
1393
1402
|
}
|
|
1394
|
-
], ngImport: i0, template: "<div class=\"row g-3 align-items-end\">\r\n
|
|
1403
|
+
], ngImport: i0, template: "<div class=\"row g-3 align-items-end\">\r\n <div class=\"col-12 col-md-6\">\r\n <c-date-picker\r\n [date]=\"date\"\r\n [disabled]=\"disabled\"\r\n (valueChange)=\"onDateChange($event)\"\r\n inputReadOnly=\"true\"\r\n [showAdjacentDays]=\"false\"\r\n [value]=\"date\"\r\n [calendarDate]=\"date\"\r\n locale=\"en-US\">\r\n </c-date-picker>\r\n </div>\r\n\r\n <div class=\"col-12 col-md-6\">\r\n <select cSelect class=\"form-select\" [value]=\"timeValue\" [disabled]=\"disabled\" (change)=\"onTimeChange($any($event.target).value)\">\r\n @if (!date) {\r\n <option value=\"\">Select time</option>\r\n }\r\n @for (time of timeDropdwons; track time.value) {\r\n <option [value]=\"time.value\">\r\n {{ time.label }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: i4.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }] });
|
|
1395
1404
|
}
|
|
1396
1405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
1397
1406
|
type: Component,
|
|
@@ -1401,7 +1410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1401
1410
|
useExisting: forwardRef(() => DateTimePickerComponent),
|
|
1402
1411
|
multi: true
|
|
1403
1412
|
}
|
|
1404
|
-
], template: "<div class=\"row g-3 align-items-end\">\r\n
|
|
1413
|
+
], template: "<div class=\"row g-3 align-items-end\">\r\n <div class=\"col-12 col-md-6\">\r\n <c-date-picker\r\n [date]=\"date\"\r\n [disabled]=\"disabled\"\r\n (valueChange)=\"onDateChange($event)\"\r\n inputReadOnly=\"true\"\r\n [showAdjacentDays]=\"false\"\r\n [value]=\"date\"\r\n [calendarDate]=\"date\"\r\n locale=\"en-US\">\r\n </c-date-picker>\r\n </div>\r\n\r\n <div class=\"col-12 col-md-6\">\r\n <select cSelect class=\"form-select\" [value]=\"timeValue\" [disabled]=\"disabled\" (change)=\"onTimeChange($any($event.target).value)\">\r\n @if (!date) {\r\n <option value=\"\">Select time</option>\r\n }\r\n @for (time of timeDropdwons; track time.value) {\r\n <option [value]=\"time.value\">\r\n {{ time.label }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n</div>\r\n" }]
|
|
1405
1414
|
}] });
|
|
1406
1415
|
|
|
1407
1416
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
@@ -1684,11 +1693,11 @@ class MultiFormComponent {
|
|
|
1684
1693
|
return null;
|
|
1685
1694
|
}
|
|
1686
1695
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1687
|
-
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 || false\"\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 (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 <!-- Autosuggest Inputs -->\r\n @else if (field.type === FormFieldType.Autosuggest) {\r\n <ng-container>\r\n <input\r\n cAutocomplete\r\n [options]=\"field.options\"\r\n [searchNoResultsLabel]=\"'No results found'\"\r\n cleaner highlightOptionsOnSearch indicator\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n (inputChange)=\"handleSearch(field, $event)\"\r\n [search]=\"{ external: true, global: true }\"\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 <!-- Date 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 || 2\"\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 }\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: i4.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: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i4.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i4.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: i4.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i4.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: "directive", type: i4.AutocompleteDirective, selector: "input[cAutocomplete]", inputs: ["popperOptionsInput", "allowOnlyDefinedOptions", "cleaner", "clearSearchOnSelect", "delay", "disabled", "highlightOptionsOnSearch", "id", "indicator", "itemSize", "loading", "options", "optionsMaxHeight", "optionTemplate", "optionGroupTemplate", "placeholder", "readOnly", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "showHints", "sizing", "valid", "value", "virtualScroller", "visible", "visibleItems"], outputs: ["inputChange", "optionChange", "valueChange", "visibleChange"], exportAs: ["cAutocomplete"] }, { 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: DateTimePickerComponent, selector: "app-date-time-picker" }] });
|
|
1696
|
+
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 || false\"\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 (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 <!-- Autosuggest Inputs -->\r\n @else if (field.type === FormFieldType.Autosuggest) {\r\n <ng-container>\r\n <input\r\n cAutocomplete\r\n [options]=\"field.options\"\r\n [searchNoResultsLabel]=\"'No results found'\"\r\n cleaner\r\n highlightOptionsOnSearch\r\n indicator\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n (inputChange)=\"handleSearch(field, $event)\"\r\n [search]=\"{ external: true, global: true }\" />\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 <!-- Date 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]=\"field.validations?.precision || 2\"\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: i4.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: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i4.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i4.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: i4.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i4.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: "directive", type: i4.AutocompleteDirective, selector: "input[cAutocomplete]", inputs: ["popperOptionsInput", "allowOnlyDefinedOptions", "cleaner", "clearSearchOnSelect", "delay", "disabled", "highlightOptionsOnSearch", "id", "indicator", "itemSize", "loading", "options", "optionsMaxHeight", "optionTemplate", "optionGroupTemplate", "placeholder", "readOnly", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "showHints", "sizing", "valid", "value", "virtualScroller", "visible", "visibleItems"], outputs: ["inputChange", "optionChange", "valueChange", "visibleChange"], exportAs: ["cAutocomplete"] }, { 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: i4.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" }] });
|
|
1688
1697
|
}
|
|
1689
1698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
|
|
1690
1699
|
type: Component,
|
|
1691
|
-
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 || false\"\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 (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 <!-- Autosuggest Inputs -->\r\n @else if (field.type === FormFieldType.Autosuggest) {\r\n <ng-container>\r\n <input\r\n cAutocomplete\r\n [options]=\"field.options\"\r\n [searchNoResultsLabel]=\"'No results found'\"\r\n cleaner highlightOptionsOnSearch indicator\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n (inputChange)=\"handleSearch(field, $event)\"\r\n [search]=\"{ external: true, global: true }\"\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 <!-- Date 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 || 2\"\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 }\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"] }]
|
|
1700
|
+
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 || false\"\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 (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 <!-- Autosuggest Inputs -->\r\n @else if (field.type === FormFieldType.Autosuggest) {\r\n <ng-container>\r\n <input\r\n cAutocomplete\r\n [options]=\"field.options\"\r\n [searchNoResultsLabel]=\"'No results found'\"\r\n cleaner\r\n highlightOptionsOnSearch\r\n indicator\r\n [formControlName]=\"field.controlName\"\r\n [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n (inputChange)=\"handleSearch(field, $event)\"\r\n [search]=\"{ external: true, global: true }\" />\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 <!-- Date 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]=\"field.validations?.precision || 2\"\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"] }]
|
|
1692
1701
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
1693
1702
|
type: Input
|
|
1694
1703
|
}], showUnsavedFlags: [{
|
|
@@ -1724,7 +1733,8 @@ class MultiFormModule {
|
|
|
1724
1733
|
AutocompleteModule,
|
|
1725
1734
|
FormCheckInputDirective,
|
|
1726
1735
|
EditionListGroupedComponent,
|
|
1727
|
-
MultiSelectStylerDirective
|
|
1736
|
+
MultiSelectStylerDirective,
|
|
1737
|
+
TimePickerModule], exports: [MultiFormComponent, DateTimePickerComponent] });
|
|
1728
1738
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, imports: [CommonModule,
|
|
1729
1739
|
ReactiveFormsModule,
|
|
1730
1740
|
MultiSelectModule,
|
|
@@ -1737,7 +1747,8 @@ class MultiFormModule {
|
|
|
1737
1747
|
ButtonModule,
|
|
1738
1748
|
BsDatepickerModule,
|
|
1739
1749
|
AutocompleteModule,
|
|
1740
|
-
EditionListGroupedComponent
|
|
1750
|
+
EditionListGroupedComponent,
|
|
1751
|
+
TimePickerModule] });
|
|
1741
1752
|
}
|
|
1742
1753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, decorators: [{
|
|
1743
1754
|
type: NgModule,
|
|
@@ -1761,7 +1772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
1761
1772
|
AutocompleteModule,
|
|
1762
1773
|
FormCheckInputDirective,
|
|
1763
1774
|
EditionListGroupedComponent,
|
|
1764
|
-
MultiSelectStylerDirective
|
|
1775
|
+
MultiSelectStylerDirective,
|
|
1776
|
+
TimePickerModule
|
|
1765
1777
|
],
|
|
1766
1778
|
exports: [MultiFormComponent, DateTimePickerComponent]
|
|
1767
1779
|
}]
|
|
@@ -2773,5 +2785,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
2773
2785
|
* Generated bundle index. Do not edit.
|
|
2774
2786
|
*/
|
|
2775
2787
|
|
|
2776
|
-
export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DateTimePickerComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ILOGIN_ACTION, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, JsonrpcServiceLib, LoginComponent, LoginModule, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, generateTimeOptions, regionalDateFormat };
|
|
2788
|
+
export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DateTimePickerComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ILOGIN_ACTION, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, JsonrpcServiceLib, LoginComponent, LoginModule, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, generateTimeOptions, getTimeValueFromDateTime, regionalDateFormat };
|
|
2777
2789
|
//# sourceMappingURL=pongrass-utils.mjs.map
|