@pongrass/utils 1.1.2-v20 → 1.1.4-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 +16 -4
- package/fesm2022/pongrass-utils.mjs.map +1 -1
- package/index.d.ts +4 -1
- package/package.json +1 -1
|
@@ -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 === false ? false : 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 === false ? false : 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: [{
|
|
@@ -1670,6 +1670,7 @@ class TableGridComponent {
|
|
|
1670
1670
|
initialPageNumber;
|
|
1671
1671
|
tableGridReady;
|
|
1672
1672
|
tableRowSelection;
|
|
1673
|
+
tableRowSelectionChanged;
|
|
1673
1674
|
tableRowClicked;
|
|
1674
1675
|
columnStateEvent;
|
|
1675
1676
|
pageChange;
|
|
@@ -1723,6 +1724,7 @@ class TableGridComponent {
|
|
|
1723
1724
|
constructor() {
|
|
1724
1725
|
this.tableGridReady = new EventEmitter();
|
|
1725
1726
|
this.tableRowSelection = new EventEmitter();
|
|
1727
|
+
this.tableRowSelectionChanged = new EventEmitter();
|
|
1726
1728
|
this.tableRowClicked = new EventEmitter();
|
|
1727
1729
|
this.columnStateEvent = new EventEmitter();
|
|
1728
1730
|
this.pageChange = new EventEmitter();
|
|
@@ -1776,6 +1778,14 @@ class TableGridComponent {
|
|
|
1776
1778
|
onRowClicked(event) {
|
|
1777
1779
|
this.tableRowClicked.emit({ event: event, row: event.data });
|
|
1778
1780
|
}
|
|
1781
|
+
/** Send on checkbox selection event event to parent component when row selection is changed */
|
|
1782
|
+
onRowSelectionChanged(event) {
|
|
1783
|
+
if (this.gridAPI) {
|
|
1784
|
+
const selectedNodes = this.gridAPI.api.getSelectedNodes();
|
|
1785
|
+
const selectedData = selectedNodes.map(node => node.data);
|
|
1786
|
+
this.tableRowSelectionChanged.emit(selectedData);
|
|
1787
|
+
}
|
|
1788
|
+
}
|
|
1779
1789
|
/** Create column state on initialization of table grid */
|
|
1780
1790
|
createColumnState() {
|
|
1781
1791
|
if (this.gridAPI) {
|
|
@@ -2047,11 +2057,11 @@ class TableGridComponent {
|
|
|
2047
2057
|
this.subscribeUntil$.complete();
|
|
2048
2058
|
}
|
|
2049
2059
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-md-flex\">\n <div class=\"table-list-wrapper flex-fill\">\n <!-- style=\"width: 100%; height: 567px\" -->\n <ag-grid-angular\n style=\"width: 100%\"\n [rowData]=\"tableConfiguration.rows\"\n [columnDefs]=\"tableConfiguration.columnDefs\"\n [defaultColDef]=\"tableConfiguration.defaultColDef\"\n [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n [pagination]=\"tableConfiguration.pagination.enabled\"\n [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n (gridReady)=\"onGridReady($event)\"\n (rowSelected)=\"onRowSelected($event)\"\n (rowClicked)=\"onRowClicked($event)\"\n (columnResized)=\"onColumnResized($event)\"\n (columnMoved)=\"onColumnMoved($event)\"\n (sortChanged)=\"onSortChanged($event)\"\n (paginationChanged)=\"onPaginationChanged($event)\"\n (firstDataRendered)=\"onFirstDataRendered($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (cellValueChanged)=\"onCellValueChanged($event)\"\n [masterDetail]=\"tableConfiguration.masterDetail\"\n [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n [enableCellTextSelection]=\"true\"\n [gridOptions]=\"gridOptions\"\n [ensureDomOrder]=\"true\"\n [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n </div>\n\n @if (columnToolVisible && columnsListselectionForm) {\n <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n <span\n class=\"cursor-pointer text-primary\"\n tooltipPlacement=\"top\"\n cTooltip=\"Column Preference\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n </span>\n\n <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n </span>\n </div>\n </div>\n\n <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n <c-offcanvas-header>\n <h5 cOffcanvasTitle>Table Column Preference</h5>\n <button\n cButtonClose\n size=\"sm\"\n class=\"text-reset ms-auto\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n aria-label=\"Close\"></button>\n </c-offcanvas-header>\n <c-offcanvas-body>\n <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n @for (item of this.tableGridState; track $index) {\n <div class=\"checkbox-item px-1\">\n <c-form-check>\n <input\n (change)=\"getCheckboxStatus($event, item.key)\"\n [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n cFormCheckInput\n [id]=\"'cb_' + item.key\"\n type=\"checkbox\"\n [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n {{ item?.headerName || item?.label }}</label\n >\n </c-form-check>\n </div>\n }\n </div>\n <div class=\"align d-flex gap-3 justify-content-end\">\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreferenceV2()\">\n Clear\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreference()\">\n Reset\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"updatetablePreference()\">\n Update\n </button>\n </div>\n </c-offcanvas-body>\n </c-offcanvas>\n }\n </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: i1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i1.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i1.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i1.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i1.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i1.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
|
|
2060
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowSelectionChanged: "tableRowSelectionChanged", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-md-flex\">\n <div class=\"table-list-wrapper flex-fill\">\n <!-- style=\"width: 100%; height: 567px\" -->\n <ag-grid-angular\n style=\"width: 100%\"\n [rowData]=\"tableConfiguration.rows\"\n [columnDefs]=\"tableConfiguration.columnDefs\"\n [defaultColDef]=\"tableConfiguration.defaultColDef\"\n [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n [pagination]=\"tableConfiguration.pagination.enabled\"\n [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n (gridReady)=\"onGridReady($event)\"\n (rowSelected)=\"onRowSelected($event)\"\n (rowClicked)=\"onRowClicked($event)\"\n (columnResized)=\"onColumnResized($event)\"\n (columnMoved)=\"onColumnMoved($event)\"\n (sortChanged)=\"onSortChanged($event)\"\n (paginationChanged)=\"onPaginationChanged($event)\"\n (firstDataRendered)=\"onFirstDataRendered($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (cellValueChanged)=\"onCellValueChanged($event)\"\n (selectionChanged)=\"onRowSelectionChanged($event)\" \n [masterDetail]=\"tableConfiguration.masterDetail\"\n [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n [enableCellTextSelection]=\"true\"\n [gridOptions]=\"gridOptions\"\n [ensureDomOrder]=\"true\"\n [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n </div>\n\n @if (columnToolVisible && columnsListselectionForm) {\n <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n <span\n class=\"cursor-pointer text-primary\"\n tooltipPlacement=\"top\"\n cTooltip=\"Column Preference\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n </span>\n\n <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n </span>\n </div>\n </div>\n\n <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n <c-offcanvas-header>\n <h5 cOffcanvasTitle>Table Column Preference</h5>\n <button\n cButtonClose\n size=\"sm\"\n class=\"text-reset ms-auto\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n aria-label=\"Close\"></button>\n </c-offcanvas-header>\n <c-offcanvas-body>\n <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n @for (item of this.tableGridState; track $index) {\n <div class=\"checkbox-item px-1\">\n <c-form-check>\n <input\n (change)=\"getCheckboxStatus($event, item.key)\"\n [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n cFormCheckInput\n [id]=\"'cb_' + item.key\"\n type=\"checkbox\"\n [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n {{ item?.headerName || item?.label }}</label\n >\n </c-form-check>\n </div>\n }\n </div>\n <div class=\"align d-flex gap-3 justify-content-end\">\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreferenceV2()\">\n Clear\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreference()\">\n Reset\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"updatetablePreference()\">\n Update\n </button>\n </div>\n </c-offcanvas-body>\n </c-offcanvas>\n }\n </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: i1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i1.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i1.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i1.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i1.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i1.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
|
|
2051
2061
|
}
|
|
2052
2062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, decorators: [{
|
|
2053
2063
|
type: Component,
|
|
2054
|
-
args: [{ selector: 'prg-ws-table-grid', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-md-flex\">\n <div class=\"table-list-wrapper flex-fill\">\n <!-- style=\"width: 100%; height: 567px\" -->\n <ag-grid-angular\n style=\"width: 100%\"\n [rowData]=\"tableConfiguration.rows\"\n [columnDefs]=\"tableConfiguration.columnDefs\"\n [defaultColDef]=\"tableConfiguration.defaultColDef\"\n [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n [pagination]=\"tableConfiguration.pagination.enabled\"\n [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n (gridReady)=\"onGridReady($event)\"\n (rowSelected)=\"onRowSelected($event)\"\n (rowClicked)=\"onRowClicked($event)\"\n (columnResized)=\"onColumnResized($event)\"\n (columnMoved)=\"onColumnMoved($event)\"\n (sortChanged)=\"onSortChanged($event)\"\n (paginationChanged)=\"onPaginationChanged($event)\"\n (firstDataRendered)=\"onFirstDataRendered($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (cellValueChanged)=\"onCellValueChanged($event)\"\n [masterDetail]=\"tableConfiguration.masterDetail\"\n [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n [enableCellTextSelection]=\"true\"\n [gridOptions]=\"gridOptions\"\n [ensureDomOrder]=\"true\"\n [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n </div>\n\n @if (columnToolVisible && columnsListselectionForm) {\n <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n <span\n class=\"cursor-pointer text-primary\"\n tooltipPlacement=\"top\"\n cTooltip=\"Column Preference\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n </span>\n\n <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n </span>\n </div>\n </div>\n\n <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n <c-offcanvas-header>\n <h5 cOffcanvasTitle>Table Column Preference</h5>\n <button\n cButtonClose\n size=\"sm\"\n class=\"text-reset ms-auto\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n aria-label=\"Close\"></button>\n </c-offcanvas-header>\n <c-offcanvas-body>\n <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n @for (item of this.tableGridState; track $index) {\n <div class=\"checkbox-item px-1\">\n <c-form-check>\n <input\n (change)=\"getCheckboxStatus($event, item.key)\"\n [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n cFormCheckInput\n [id]=\"'cb_' + item.key\"\n type=\"checkbox\"\n [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n {{ item?.headerName || item?.label }}</label\n >\n </c-form-check>\n </div>\n }\n </div>\n <div class=\"align d-flex gap-3 justify-content-end\">\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreferenceV2()\">\n Clear\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreference()\">\n Reset\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"updatetablePreference()\">\n Update\n </button>\n </div>\n </c-offcanvas-body>\n </c-offcanvas>\n }\n </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
2064
|
+
args: [{ selector: 'prg-ws-table-grid', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-md-flex\">\n <div class=\"table-list-wrapper flex-fill\">\n <!-- style=\"width: 100%; height: 567px\" -->\n <ag-grid-angular\n style=\"width: 100%\"\n [rowData]=\"tableConfiguration.rows\"\n [columnDefs]=\"tableConfiguration.columnDefs\"\n [defaultColDef]=\"tableConfiguration.defaultColDef\"\n [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n [pagination]=\"tableConfiguration.pagination.enabled\"\n [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n (gridReady)=\"onGridReady($event)\"\n (rowSelected)=\"onRowSelected($event)\"\n (rowClicked)=\"onRowClicked($event)\"\n (columnResized)=\"onColumnResized($event)\"\n (columnMoved)=\"onColumnMoved($event)\"\n (sortChanged)=\"onSortChanged($event)\"\n (paginationChanged)=\"onPaginationChanged($event)\"\n (firstDataRendered)=\"onFirstDataRendered($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (cellValueChanged)=\"onCellValueChanged($event)\"\n (selectionChanged)=\"onRowSelectionChanged($event)\" \n [masterDetail]=\"tableConfiguration.masterDetail\"\n [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n [enableCellTextSelection]=\"true\"\n [gridOptions]=\"gridOptions\"\n [ensureDomOrder]=\"true\"\n [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n </div>\n\n @if (columnToolVisible && columnsListselectionForm) {\n <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n <span\n class=\"cursor-pointer text-primary\"\n tooltipPlacement=\"top\"\n cTooltip=\"Column Preference\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n </span>\n\n <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n </span>\n </div>\n </div>\n\n <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n <c-offcanvas-header>\n <h5 cOffcanvasTitle>Table Column Preference</h5>\n <button\n cButtonClose\n size=\"sm\"\n class=\"text-reset ms-auto\"\n [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n aria-label=\"Close\"></button>\n </c-offcanvas-header>\n <c-offcanvas-body>\n <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n @for (item of this.tableGridState; track $index) {\n <div class=\"checkbox-item px-1\">\n <c-form-check>\n <input\n (change)=\"getCheckboxStatus($event, item.key)\"\n [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n cFormCheckInput\n [id]=\"'cb_' + item.key\"\n type=\"checkbox\"\n [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n {{ item?.headerName || item?.label }}</label\n >\n </c-form-check>\n </div>\n }\n </div>\n <div class=\"align d-flex gap-3 justify-content-end\">\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreferenceV2()\">\n Clear\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"resetTablePreference()\">\n Reset\n </button>\n <button\n cButton\n [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n color=\"primary\"\n class=\"px-2 mt-auto\"\n variant=\"outline\"\n (click)=\"updatetablePreference()\">\n Update\n </button>\n </div>\n </c-offcanvas-body>\n </c-offcanvas>\n }\n </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
2055
2065
|
}], ctorParameters: () => [], propDecorators: { tableConfiguration: [{
|
|
2056
2066
|
type: Input
|
|
2057
2067
|
}], columnToolVisible: [{
|
|
@@ -2062,6 +2072,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
2062
2072
|
type: Output
|
|
2063
2073
|
}], tableRowSelection: [{
|
|
2064
2074
|
type: Output
|
|
2075
|
+
}], tableRowSelectionChanged: [{
|
|
2076
|
+
type: Output
|
|
2065
2077
|
}], tableRowClicked: [{
|
|
2066
2078
|
type: Output
|
|
2067
2079
|
}], columnStateEvent: [{
|