fx-form-builder-wrapper 2.0.80 → 2.0.82
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/esm2022/lib/components/dropdown-with-other/dropdown-with-other.component.mjs +5 -8
- package/esm2022/lib/components/dropdown-with-search/dropdown-with-search.component.mjs +124 -0
- package/esm2022/lib/components/fx-form-component/fx-form-component.component.mjs +7 -1
- package/esm2022/lib/components/multiselect-dropdown/multiselect-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/multiselect-dropdown-with-childs/multiselect-dropdown-with-childs.component.mjs +150 -0
- package/esm2022/lib/components/multiselect-with-form-fields/customize-dropdown.component.mjs +225 -0
- package/esm2022/lib/components/multiselect-with-form-fields/multiselect-dropdown.component.mjs +166 -0
- package/esm2022/lib/fx-builder-wrapper.component.mjs +13 -1
- package/fesm2022/fx-form-builder-wrapper.mjs +480 -13
- package/fesm2022/fx-form-builder-wrapper.mjs.map +1 -1
- package/lib/components/dropdown-with-search/dropdown-with-search.component.d.ts +28 -0
- package/lib/components/multiselect-dropdown-with-childs/multiselect-dropdown-with-childs.component.d.ts +28 -0
- package/lib/components/multiselect-with-form-fields/customize-dropdown.component.d.ts +59 -0
- package/lib/components/multiselect-with-form-fields/multiselect-dropdown.component.d.ts +51 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
2
|
+
import { inject, Injectable, Component, EventEmitter, Input, Output, ViewChild, HostListener } from '@angular/core';
|
|
3
3
|
import * as i3$2 from '@instantsys-labs/core';
|
|
4
4
|
import { ApiServiceRegistry } from '@instantsys-labs/core';
|
|
5
5
|
import * as i1 from '@instantsys-labs/fx';
|
|
@@ -16,15 +16,16 @@ import { ButtonModule } from 'primeng/button';
|
|
|
16
16
|
import { InputTextModule } from 'primeng/inputtext';
|
|
17
17
|
import * as i5$1 from 'primeng/dialog';
|
|
18
18
|
import { DialogModule } from 'primeng/dialog';
|
|
19
|
+
import * as i4$1 from 'primeng/dropdown';
|
|
19
20
|
import { DropdownModule } from 'primeng/dropdown';
|
|
20
21
|
import * as i2 from 'primeng/api';
|
|
21
22
|
import { MessageService, ConfirmationService } from 'primeng/api';
|
|
22
|
-
import * as
|
|
23
|
+
import * as i7 from 'primeng/multiselect';
|
|
23
24
|
import { MultiSelectModule } from 'primeng/multiselect';
|
|
24
25
|
import { InputNumberModule } from 'primeng/inputnumber';
|
|
25
26
|
import * as i6 from 'primeng/toast';
|
|
26
27
|
import { ToastModule } from 'primeng/toast';
|
|
27
|
-
import * as i7 from 'primeng/confirmdialog';
|
|
28
|
+
import * as i7$1 from 'primeng/confirmdialog';
|
|
28
29
|
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
|
29
30
|
import { v4 } from 'uuid';
|
|
30
31
|
import { FileUploadModule } from 'primeng/fileupload';
|
|
@@ -916,7 +917,7 @@ class DynamicTableComponent extends FxBaseComponent {
|
|
|
916
917
|
this.destroy$.complete();
|
|
917
918
|
}
|
|
918
919
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FxBuilderWrapperService }, { token: i2.MessageService }, { token: i2.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicTableComponent, isStandalone: true, selector: "fx-dynamic-table", inputs: { tableRows: "tableRows", previewType: "previewType", tableConfig: "tableConfig" }, providers: [MessageService, ConfirmationService], usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n <div *ngIf=\"fxData\">\r\n <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n <td *ngFor=\"let column of tableConfig.columns\">\r\n <ng-container [ngSwitch]=\"column.cellType\">\r\n <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n\r\n <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n [(ngModel)]=\"row[column.header]\" /> -->\r\n\r\n <ng-container *ngSwitchCase=\"'input-text'\">\r\n <input [class]=\"column?.className\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n [(ngModel)]=\"row[column.header]\" [required]=\"column?.isRequired\" #model=\"ngModel\" />\r\n\r\n <div *ngIf=\"column?.isRequired && model.invalid && model.touched\" class=\"text-red-500 text-sm mt-1\">\r\n {{ column?.errorMessage }}\r\n </div>\r\n </ng-container>\r\n\r\n\r\n\r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n [placeholder]=\"column?.placeholder\" [(ngModel)]=\"row[column.header]\" />\r\n\r\n <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\" [(ngModel)]=\"row[column.header]\">\r\n\r\n <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\">\r\n {{ option?.optionName }}\r\n </option>\r\n </select>\r\n\r\n <!-- <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <option value=\"\">Select {{column.header}}</option>\r\n <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{option?.name }}\r\n </option>\r\n </select> -->\r\n\r\n <!-- <p-multiSelect [options]=\"smartDropdownOptions[column.header]\" [(ngModel)]=\"row[column.header]\" optionLabel=\"name\" optionValue=\"value\" placeholder=\"Select Cities\" *ngSwitchCase=\"'smart-dropdown'\"/> -->\r\n\r\n <!-- smart-dropdown handling -->\r\n <ng-container *ngSwitchCase=\"'smart-dropdown'\">\r\n\r\n <!-- Regular dropdown if isMultiselect is false or not set -->\r\n <select *ngIf=\"!column?.isMultiselect\" [class]=\"column?.className\" style=\"width: 60%;\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{ option?.name }}\r\n </option>\r\n <option value=\"__other__\">Other</option>\r\n\r\n </select>\r\n <input *ngIf=\"row[column.header] === '__other__'\" type=\"text\" class=\"mt-2 p-inputtext-sm\"\r\n [placeholder]=\"'Enter other ' + column.header\" [(ngModel)]=\"row[column.header + '_other']\" />\r\n\r\n <!-- PrimeNG multiselect if isMultiselect is true -->\r\n <p-multiSelect *ngIf=\"column?.isMultiselect\" [options]=\"smartDropdownOptions[column.header]\"\r\n [(ngModel)]=\"row[column.header]\" [class]=\"column?.className\" optionLabel=\"name\" optionValue=\"value\"\r\n [placeholder]=\"column.placeholder || ('Select ' + column.header)\">\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n\r\n </ng-container>\r\n\r\n\r\n <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n [(ngModel)]=\"row[column.header]\" /> -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <label [class]=\"column?.className\" class=\"inline-flex items-center gap-2\">\r\n <input type=\"checkbox\" [checked]=\"row[column.header] === column.checkedValue\"\r\n (change)=\"onCheckboxChange($event, row, column)\" />\r\n {{ column?.checkBoxLabel || '' }}\r\n </label>\r\n </ng-container>\r\n <p-toast></p-toast>\r\n <p-confirmDialog></p-confirmDialog>\r\n <ng-container *ngSwitchCase=\"'action'\">\r\n <div class=\"flex flex-row gap-6 justify-start items-start\">\r\n <div *ngFor=\"let action of column?.action\" class=\"flex flex-col items-center w-20 cursor-pointer\"\r\n (click)=\"handleAction(row, action,rowIndex)\">\r\n <img [src]=\"action?.actionIconPath\" alt=\"icon\" class=\"w-6 h-6 mb-1\" />\r\n <span class=\"text-xs text-center break-words\">\r\n {{ action?.actionName }}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n\r\n <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n *ngSwitchCase=\"'radio-group'\">\r\n <label *ngFor=\"let option of column.options\">\r\n <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n {{ option?.optionName }}\r\n </label>\r\n </div>\r\n\r\n <!-- <ng-container *ngSwitchCase=\"'file-upload'\">\r\n \r\n\r\n <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"flex gap-2 flex-wrap\">\r\n <div \r\n class=\"relative\" \r\n *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n >\r\n <img \r\n width=\"100\" \r\n [src]=\"image?.result\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n (click)=\"deleteFile(rowIndex, i)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button \r\n (click)=\"uploadFile.click()\" \r\n class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n >\r\n Upload\r\n </button>\r\n </div>\r\n \r\n \r\n </ng-container> -->\r\n\r\n <ng-container *ngSwitchCase=\"'file-upload'\">\r\n <div class=\"flex items-center justify-end relative gap-4 flex-wrap\">\r\n <div class=\"flex gap-2 flex-wrap\">\r\n <div class=\"relative\" *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\">\r\n <img width=\"100\" height=\"80\" [src]=\"image?.result\" alt=\"Uploaded Image\"\r\n class=\"rounded shadow orientation\" />\r\n <a (click)=\"deleteFile(rowIndex, i)\"\r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6837_29683)\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\"\r\n width=\"24\" height=\"24\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n </mask>\r\n <g mask=\"url(#mask0_6837_29683)\">\r\n <path\r\n d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n fill=\"white\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6837_29683\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </div>\r\n </div>\r\n\r\n <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n (change)=\"uploadImage($event, rowIndex)\" />\r\n <div class=\"flex flex-col justify-center items-center cursor-pointer\" (click)=\"uploadFile.click()\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n fill=\"#F3A041\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n fill=\"#F3A041\" />\r\n <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n <path\r\n d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <a type=\"button\" (click)=\"uploadFile.click()\" class=\"text-base cursor-pointer\">\r\n {{ 'Upload' }}\r\n </a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"\r\n [placeholder]=\"column?.placeholder\"></textarea>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <!-- Your main template -->\r\n<p-dialog header=\"Confirmation\"\r\n[(visible)]=\"displayConfirmationDialog\"\r\nmodal=\"true\"\r\n[closable]=\"false\"\r\n[responsive]=\"true\"\r\nstyleClass=\"confirmation-dialog\"\r\n[style]=\"{width: '400px'}\">\r\n\r\n<div class=\"p-d-flex p-ai-center\">\r\n<i class=\"pi pi-exclamation-triangle p-mr-2\" style=\"font-size: 2rem; color: #f39c12\"></i>\r\n<span>Are you sure you want to perform \"<strong>{{ selectedAction?.actionName }}</strong>\"?</span>\r\n</div>\r\n\r\n<ng-template pTemplate=\"footer\">\r\n<button pButton label=\"Yes\" icon=\"pi pi-check\" (click)=\"confirmAction()\" class=\"p-button-text\" autofocus></button>\r\n<button pButton label=\"No\" icon=\"pi pi-times\" (click)=\"cancelAction()\" class=\"p-button-text\"></button>\r\n</ng-template>\r\n</p-dialog>\r\n\r\n </div>\r\n</fx-settings-panel>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:host::ng-deep .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:host::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:host::ng-deep .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:host::ng-deep .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SettingsPanelComponent, selector: "fx-settings-panel", inputs: ["tableData"], outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] });
|
|
920
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicTableComponent, isStandalone: true, selector: "fx-dynamic-table", inputs: { tableRows: "tableRows", previewType: "previewType", tableConfig: "tableConfig" }, providers: [MessageService, ConfirmationService], usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n <div *ngIf=\"fxData\">\r\n <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n <td *ngFor=\"let column of tableConfig.columns\">\r\n <ng-container [ngSwitch]=\"column.cellType\">\r\n <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n\r\n <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n [(ngModel)]=\"row[column.header]\" /> -->\r\n\r\n <ng-container *ngSwitchCase=\"'input-text'\">\r\n <input [class]=\"column?.className\" type=\"text\" [placeholder]=\"column?.placeholder\"\r\n [(ngModel)]=\"row[column.header]\" [required]=\"column?.isRequired\" #model=\"ngModel\" />\r\n\r\n <div *ngIf=\"column?.isRequired && model.invalid && model.touched\" class=\"text-red-500 text-sm mt-1\">\r\n {{ column?.errorMessage }}\r\n </div>\r\n </ng-container>\r\n\r\n\r\n\r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n [placeholder]=\"column?.placeholder\" [(ngModel)]=\"row[column.header]\" />\r\n\r\n <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\" [(ngModel)]=\"row[column.header]\">\r\n\r\n <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\">\r\n {{ option?.optionName }}\r\n </option>\r\n </select>\r\n\r\n <!-- <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <option value=\"\">Select {{column.header}}</option>\r\n <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{option?.name }}\r\n </option>\r\n </select> -->\r\n\r\n <!-- <p-multiSelect [options]=\"smartDropdownOptions[column.header]\" [(ngModel)]=\"row[column.header]\" optionLabel=\"name\" optionValue=\"value\" placeholder=\"Select Cities\" *ngSwitchCase=\"'smart-dropdown'\"/> -->\r\n\r\n <!-- smart-dropdown handling -->\r\n <ng-container *ngSwitchCase=\"'smart-dropdown'\">\r\n\r\n <!-- Regular dropdown if isMultiselect is false or not set -->\r\n <select *ngIf=\"!column?.isMultiselect\" [class]=\"column?.className\" style=\"width: 60%;\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <option *ngIf=\"column.placeholder\" value=\"\">{{ column.placeholder }}</option>\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{ option?.name }}\r\n </option>\r\n <option value=\"__other__\">Other</option>\r\n\r\n </select>\r\n <input *ngIf=\"row[column.header] === '__other__'\" type=\"text\" class=\"mt-2 p-inputtext-sm\"\r\n [placeholder]=\"'Enter other ' + column.header\" [(ngModel)]=\"row[column.header + '_other']\" />\r\n\r\n <!-- PrimeNG multiselect if isMultiselect is true -->\r\n <p-multiSelect *ngIf=\"column?.isMultiselect\" [options]=\"smartDropdownOptions[column.header]\"\r\n [(ngModel)]=\"row[column.header]\" [class]=\"column?.className\" optionLabel=\"name\" optionValue=\"value\"\r\n [placeholder]=\"column.placeholder || ('Select ' + column.header)\">\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n\r\n </ng-container>\r\n\r\n\r\n <!-- <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n [(ngModel)]=\"row[column.header]\" /> -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <label [class]=\"column?.className\" class=\"inline-flex items-center gap-2\">\r\n <input type=\"checkbox\" [checked]=\"row[column.header] === column.checkedValue\"\r\n (change)=\"onCheckboxChange($event, row, column)\" />\r\n {{ column?.checkBoxLabel || '' }}\r\n </label>\r\n </ng-container>\r\n <p-toast></p-toast>\r\n <p-confirmDialog></p-confirmDialog>\r\n <ng-container *ngSwitchCase=\"'action'\">\r\n <div class=\"flex flex-row gap-6 justify-start items-start\">\r\n <div *ngFor=\"let action of column?.action\" class=\"flex flex-col items-center w-20 cursor-pointer\"\r\n (click)=\"handleAction(row, action,rowIndex)\">\r\n <img [src]=\"action?.actionIconPath\" alt=\"icon\" class=\"w-6 h-6 mb-1\" />\r\n <span class=\"text-xs text-center break-words\">\r\n {{ action?.actionName }}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n\r\n <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n\r\n <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n *ngSwitchCase=\"'radio-group'\">\r\n <label *ngFor=\"let option of column.options\">\r\n <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n {{ option?.optionName }}\r\n </label>\r\n </div>\r\n\r\n <!-- <ng-container *ngSwitchCase=\"'file-upload'\">\r\n \r\n\r\n <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"flex gap-2 flex-wrap\">\r\n <div \r\n class=\"relative\" \r\n *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n >\r\n <img \r\n width=\"100\" \r\n [src]=\"image?.result\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n (click)=\"deleteFile(rowIndex, i)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button \r\n (click)=\"uploadFile.click()\" \r\n class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n >\r\n Upload\r\n </button>\r\n </div>\r\n \r\n \r\n </ng-container> -->\r\n\r\n <ng-container *ngSwitchCase=\"'file-upload'\">\r\n <div class=\"flex items-center justify-end relative gap-4 flex-wrap\">\r\n <div class=\"flex gap-2 flex-wrap\">\r\n <div class=\"relative\" *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\">\r\n <img width=\"100\" height=\"80\" [src]=\"image?.result\" alt=\"Uploaded Image\"\r\n class=\"rounded shadow orientation\" />\r\n <a (click)=\"deleteFile(rowIndex, i)\"\r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6837_29683)\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\"\r\n width=\"24\" height=\"24\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n </mask>\r\n <g mask=\"url(#mask0_6837_29683)\">\r\n <path\r\n d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n fill=\"white\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6837_29683\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </a>\r\n </div>\r\n </div>\r\n\r\n <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n (change)=\"uploadImage($event, rowIndex)\" />\r\n <div class=\"flex flex-col justify-center items-center cursor-pointer\" (click)=\"uploadFile.click()\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n fill=\"#F3A041\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n fill=\"#F3A041\" />\r\n <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n <path\r\n d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <a type=\"button\" (click)=\"uploadFile.click()\" class=\"text-base cursor-pointer\">\r\n {{ 'Upload' }}\r\n </a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"\r\n [placeholder]=\"column?.placeholder\"></textarea>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <!-- Your main template -->\r\n<p-dialog header=\"Confirmation\"\r\n[(visible)]=\"displayConfirmationDialog\"\r\nmodal=\"true\"\r\n[closable]=\"false\"\r\n[responsive]=\"true\"\r\nstyleClass=\"confirmation-dialog\"\r\n[style]=\"{width: '400px'}\">\r\n\r\n<div class=\"p-d-flex p-ai-center\">\r\n<i class=\"pi pi-exclamation-triangle p-mr-2\" style=\"font-size: 2rem; color: #f39c12\"></i>\r\n<span>Are you sure you want to perform \"<strong>{{ selectedAction?.actionName }}</strong>\"?</span>\r\n</div>\r\n\r\n<ng-template pTemplate=\"footer\">\r\n<button pButton label=\"Yes\" icon=\"pi pi-check\" (click)=\"confirmAction()\" class=\"p-button-text\" autofocus></button>\r\n<button pButton label=\"No\" icon=\"pi pi-times\" (click)=\"cancelAction()\" class=\"p-button-text\"></button>\r\n</ng-template>\r\n</p-dialog>\r\n\r\n </div>\r\n</fx-settings-panel>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:host::ng-deep .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:host::ng-deep .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:host::ng-deep .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:host::ng-deep .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SettingsPanelComponent, selector: "fx-settings-panel", inputs: ["tableData"], outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i7$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] });
|
|
920
921
|
}
|
|
921
922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
922
923
|
type: Component,
|
|
@@ -2300,8 +2301,6 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2300
2301
|
this.fxApiService = fxApiService;
|
|
2301
2302
|
this.onInit.subscribe(() => {
|
|
2302
2303
|
this._register(this.dropDownForm);
|
|
2303
|
-
console.log('Registered form:', this.dropDownForm);
|
|
2304
|
-
console.log('fxDAta:', this.fxData);
|
|
2305
2304
|
});
|
|
2306
2305
|
}
|
|
2307
2306
|
ngAfterViewInit() {
|
|
@@ -2358,9 +2357,9 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2358
2357
|
else {
|
|
2359
2358
|
otherControl?.disable();
|
|
2360
2359
|
otherControl?.reset();
|
|
2361
|
-
otherControl?.clearValidators();
|
|
2360
|
+
otherControl?.clearValidators();
|
|
2362
2361
|
}
|
|
2363
|
-
otherControl?.updateValueAndValidity();
|
|
2362
|
+
otherControl?.updateValueAndValidity();
|
|
2364
2363
|
otherControl?.markAsTouched();
|
|
2365
2364
|
});
|
|
2366
2365
|
}
|
|
@@ -2372,7 +2371,6 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2372
2371
|
new FxStringSetting({ key: 'other-label', $title: 'Other Label', value: '' }),
|
|
2373
2372
|
new FxStringSetting({ key: 'other-placeholder', $title: 'Other Placeholder', value: '' }),
|
|
2374
2373
|
new FxSelectSetting({ key: 'serviceName', $title: 'Service', value: '' }, [{ option: 'User Service', value: 'user_service' }, { option: 'Patient Service', value: 'patient_service' }, { option: 'Workflow Service', value: 'workflow_service' }]),
|
|
2375
|
-
// new FxSelectSetting({key: 'service', $title: 'Service', value: 'local'}, [{option: 'Local', value: 'local'}, {option: 'QA', value: 'qa'},{option: 'UAT', value: 'uat'},{option: 'Production', value: 'prod'}]),
|
|
2376
2374
|
new FxSelectSetting({ key: 'isRequired', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
|
|
2377
2375
|
new FxStringSetting({ key: 'errorMessage', $title: 'Error Message', value: 'Please fill out the field' }),
|
|
2378
2376
|
new FxStringSetting({ key: 'errorMessageOther', $title: 'Other Error Message', value: 'Other is required' }),
|
|
@@ -2394,11 +2392,11 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2394
2392
|
});
|
|
2395
2393
|
}
|
|
2396
2394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithOtherComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2397
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithOtherComponent, isStandalone: true, selector: "dropdown-with-other", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }}\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }}\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }] });
|
|
2395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithOtherComponent, isStandalone: true, selector: "dropdown-with-other", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }}\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }}\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }] });
|
|
2398
2396
|
}
|
|
2399
2397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithOtherComponent, decorators: [{
|
|
2400
2398
|
type: Component,
|
|
2401
|
-
args: [{ selector: 'dropdown-with-other', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }}\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }}\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"] }]
|
|
2399
|
+
args: [{ selector: 'dropdown-with-other', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }}\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }}\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"] }]
|
|
2402
2400
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2403
2401
|
type: ViewChild,
|
|
2404
2402
|
args: ['fxComponent']
|
|
@@ -2647,16 +2645,473 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2647
2645
|
}
|
|
2648
2646
|
}
|
|
2649
2647
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n
|
|
2648
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2651
2649
|
}
|
|
2652
2650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
|
|
2653
2651
|
type: Component,
|
|
2654
|
-
args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n
|
|
2652
|
+
args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
|
|
2653
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2654
|
+
type: ViewChild,
|
|
2655
|
+
args: ['fxComponent']
|
|
2656
|
+
}] } });
|
|
2657
|
+
|
|
2658
|
+
class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
2659
|
+
cdr;
|
|
2660
|
+
http;
|
|
2661
|
+
fxBuilderWrapperService;
|
|
2662
|
+
fxApiService;
|
|
2663
|
+
fb = inject(FormBuilder);
|
|
2664
|
+
destroy$ = new Subject();
|
|
2665
|
+
formObject = {};
|
|
2666
|
+
multiChildDropdownMap = new Map();
|
|
2667
|
+
fxComponent;
|
|
2668
|
+
options = [];
|
|
2669
|
+
multiChildDropDownForm = this.fb.group({
|
|
2670
|
+
multipleChildSelectedOption: [[]],
|
|
2671
|
+
child1: [''],
|
|
2672
|
+
child2: [''],
|
|
2673
|
+
child1Label: [''],
|
|
2674
|
+
child2Label: [''],
|
|
2675
|
+
});
|
|
2676
|
+
constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
|
|
2677
|
+
super(cdr);
|
|
2678
|
+
this.cdr = cdr;
|
|
2679
|
+
this.http = http;
|
|
2680
|
+
this.fxBuilderWrapperService = fxBuilderWrapperService;
|
|
2681
|
+
this.fxApiService = fxApiService;
|
|
2682
|
+
this.onInit.subscribe(() => {
|
|
2683
|
+
this._register(this.multiChildDropDownForm);
|
|
2684
|
+
});
|
|
2685
|
+
}
|
|
2686
|
+
ngAfterViewInit() {
|
|
2687
|
+
if (!this.setting('multiChildOptionAPIURL')) {
|
|
2688
|
+
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsChildOption')?.options || [];
|
|
2689
|
+
}
|
|
2690
|
+
const child1LabelControl = this.multiChildDropDownForm.get('child1Label');
|
|
2691
|
+
const child2LabelControl = this.multiChildDropDownForm.get('child2Label');
|
|
2692
|
+
child1LabelControl?.setValue(this.setting('child-1-label'));
|
|
2693
|
+
child2LabelControl?.setValue(this.setting('child-2-label'));
|
|
2694
|
+
child1LabelControl?.updateValueAndValidity();
|
|
2695
|
+
child2LabelControl?.updateValueAndValidity();
|
|
2696
|
+
setTimeout(() => {
|
|
2697
|
+
const key = this.fxComponent?.fxData?.name;
|
|
2698
|
+
if (key && this.multiChildDropdownMap.has(key)) {
|
|
2699
|
+
this.multiChildDropDownForm.patchValue(this.multiChildDropdownMap.get(key));
|
|
2700
|
+
}
|
|
2701
|
+
}, 200);
|
|
2702
|
+
setTimeout(() => {
|
|
2703
|
+
const mainControl = this.multiChildDropDownForm.get('multipleChildSelectedOption');
|
|
2704
|
+
const child1Control = this.multiChildDropDownForm.get('child1');
|
|
2705
|
+
const child2Control = this.multiChildDropDownForm.get('child2');
|
|
2706
|
+
if (this.setting('isMultiChildRequired') === 'true') {
|
|
2707
|
+
mainControl?.setValidators([Validators.required]);
|
|
2708
|
+
mainControl?.updateValueAndValidity();
|
|
2709
|
+
}
|
|
2710
|
+
if (this.setting('isChild1Required') === 'true') {
|
|
2711
|
+
child1Control?.setValidators([Validators.required]);
|
|
2712
|
+
child1Control?.updateValueAndValidity();
|
|
2713
|
+
}
|
|
2714
|
+
if (this.setting('isChild2Required') === 'true') {
|
|
2715
|
+
child2Control?.setValidators([Validators.required]);
|
|
2716
|
+
child2Control?.updateValueAndValidity();
|
|
2717
|
+
}
|
|
2718
|
+
}, 1000);
|
|
2719
|
+
}
|
|
2720
|
+
ngOnInit() {
|
|
2721
|
+
this.fxBuilderWrapperService.variables$
|
|
2722
|
+
.pipe(takeUntil(this.destroy$))
|
|
2723
|
+
.subscribe((variables) => {
|
|
2724
|
+
if (!variables)
|
|
2725
|
+
return;
|
|
2726
|
+
// for (const [key, value] of Object.entries(variables) as [string, any][]) {
|
|
2727
|
+
// if (key.includes('dropdown-with-other')) {
|
|
2728
|
+
// this.formObject = value;
|
|
2729
|
+
// }
|
|
2730
|
+
// }
|
|
2731
|
+
for (const [key, value] of Object.entries(variables)) {
|
|
2732
|
+
if (value &&
|
|
2733
|
+
typeof value === 'object' &&
|
|
2734
|
+
'multipleChildSelectedOption' in value) {
|
|
2735
|
+
this.multiChildDropdownMap.set(key, value);
|
|
2736
|
+
}
|
|
2737
|
+
}
|
|
2738
|
+
});
|
|
2739
|
+
const serviceUrl = this.fxApiService.getServiceUrl(this.setting('serviceMultiName'));
|
|
2740
|
+
this.getOptions(serviceUrl, this.setting('multiChildOptionAPIURL'));
|
|
2741
|
+
}
|
|
2742
|
+
settings() {
|
|
2743
|
+
return [
|
|
2744
|
+
new FxOptionSetting({ key: 'itemsChildOption', $title: 'Options', value: [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }] }, [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }]),
|
|
2745
|
+
new FxStringSetting({ key: 'multiChildOptionAPIURL', $title: 'API Url', value: '' }),
|
|
2746
|
+
new FxStringSetting({ key: 'customClassMultiChild', $title: 'Custom Class Name', value: '' }),
|
|
2747
|
+
new FxStringSetting({ key: 'select-label-multi-child', $title: 'Label', value: '' }),
|
|
2748
|
+
new FxStringSetting({ key: 'label-key-child', $title: 'Label Key', value: 'option' }),
|
|
2749
|
+
new FxSelectSetting({ key: 'serviceMultiName', $title: 'Service', value: '' }, [{ option: 'User Service', value: 'user_service' }, { option: 'Patient Service', value: 'patient_service' }, { option: 'Workflow Service', value: 'workflow_service' }]),
|
|
2750
|
+
new FxSelectSetting({ key: 'isMultiChildRequired', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
|
|
2751
|
+
new FxStringSetting({ key: 'multiChildErrorMessage', $title: 'Error Message', value: 'Please select' }),
|
|
2752
|
+
new FxStringSetting({ key: 'placeholderMultiChild', $title: 'Placeholder', value: 'Select' }),
|
|
2753
|
+
new FxStringSetting({ key: 'child-1-label', $title: 'Child 1 Label', value: '' }),
|
|
2754
|
+
new FxStringSetting({ key: 'child-1-placeholder', $title: 'Child 1 Placeholder', value: 'enter here' }),
|
|
2755
|
+
new FxSelectSetting({ key: 'isChild1Required', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
|
|
2756
|
+
new FxStringSetting({ key: 'child1ErrorMessage', $title: 'Error Message', value: 'Please fill out the field' }),
|
|
2757
|
+
new FxStringSetting({ key: 'child-2-label', $title: 'Child 2 Label', value: '' }),
|
|
2758
|
+
new FxStringSetting({ key: 'child-2-placeholder', $title: 'Child 2 Placeholder', value: 'enter here' }),
|
|
2759
|
+
new FxSelectSetting({ key: 'isChild2Required', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
|
|
2760
|
+
new FxStringSetting({ key: 'child2ErrorMessage', $title: 'Error Message', value: 'Please fill out the field' }),
|
|
2761
|
+
];
|
|
2762
|
+
}
|
|
2763
|
+
validations() {
|
|
2764
|
+
return [];
|
|
2765
|
+
}
|
|
2766
|
+
getOptions(serviceUrl, url) {
|
|
2767
|
+
if (url) {
|
|
2768
|
+
const finalUrl = serviceUrl + url;
|
|
2769
|
+
this.http.get(finalUrl).subscribe({
|
|
2770
|
+
next: (response) => {
|
|
2771
|
+
this.options = response?.data;
|
|
2772
|
+
},
|
|
2773
|
+
error: (err) => {
|
|
2774
|
+
console.error('Error fetching options', err);
|
|
2775
|
+
}
|
|
2776
|
+
});
|
|
2777
|
+
}
|
|
2778
|
+
else {
|
|
2779
|
+
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsChildOption')?.options || [];
|
|
2780
|
+
}
|
|
2781
|
+
}
|
|
2782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownWithChildsComponent, isStandalone: true, selector: "lib-multiselect-dropdown-with-childs", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2784
|
+
}
|
|
2785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, decorators: [{
|
|
2786
|
+
type: Component,
|
|
2787
|
+
args: [{ selector: 'lib-multiselect-dropdown-with-childs', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
|
|
2788
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2789
|
+
type: ViewChild,
|
|
2790
|
+
args: ['fxComponent']
|
|
2791
|
+
}] } });
|
|
2792
|
+
|
|
2793
|
+
class DropdownWithSearchComponent extends FxBaseComponent {
|
|
2794
|
+
cdr;
|
|
2795
|
+
http;
|
|
2796
|
+
fxBuilderWrapperService;
|
|
2797
|
+
fxApiService;
|
|
2798
|
+
fb = inject(FormBuilder);
|
|
2799
|
+
destroy$ = new Subject();
|
|
2800
|
+
formObject = {};
|
|
2801
|
+
searchDropdownMap = new Map();
|
|
2802
|
+
fxComponent;
|
|
2803
|
+
options = [];
|
|
2804
|
+
searchDropDownForm = this.fb.group({
|
|
2805
|
+
searchSelectedOption: [''],
|
|
2806
|
+
});
|
|
2807
|
+
constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
|
|
2808
|
+
super(cdr);
|
|
2809
|
+
this.cdr = cdr;
|
|
2810
|
+
this.http = http;
|
|
2811
|
+
this.fxBuilderWrapperService = fxBuilderWrapperService;
|
|
2812
|
+
this.fxApiService = fxApiService;
|
|
2813
|
+
this.onInit.subscribe(() => {
|
|
2814
|
+
this._register(this.searchDropDownForm);
|
|
2815
|
+
});
|
|
2816
|
+
}
|
|
2817
|
+
ngAfterViewInit() {
|
|
2818
|
+
if (!this.setting('searchSelectOptionAPIURL')) {
|
|
2819
|
+
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsSearchOption')?.options || [];
|
|
2820
|
+
}
|
|
2821
|
+
setTimeout(() => {
|
|
2822
|
+
const key = this.fxComponent?.fxData?.name;
|
|
2823
|
+
if (key && this.searchDropdownMap.has(key)) {
|
|
2824
|
+
this.searchDropDownForm.patchValue(this.searchDropdownMap.get(key));
|
|
2825
|
+
}
|
|
2826
|
+
}, 200);
|
|
2827
|
+
setTimeout(() => {
|
|
2828
|
+
const mainControl = this.searchDropDownForm.get('searchSelectedOption');
|
|
2829
|
+
if (this.setting('isSearchRequired') === 'true') {
|
|
2830
|
+
mainControl?.setValidators([Validators.required]);
|
|
2831
|
+
mainControl?.updateValueAndValidity();
|
|
2832
|
+
}
|
|
2833
|
+
}, 100);
|
|
2834
|
+
}
|
|
2835
|
+
ngOnInit() {
|
|
2836
|
+
this.fxBuilderWrapperService.variables$
|
|
2837
|
+
.pipe(takeUntil(this.destroy$))
|
|
2838
|
+
.subscribe((variables) => {
|
|
2839
|
+
if (!variables)
|
|
2840
|
+
return;
|
|
2841
|
+
// for (const [key, value] of Object.entries(variables) as [string, any][]) {
|
|
2842
|
+
// if (key.includes('dropdown-with-other')) {
|
|
2843
|
+
// this.formObject = value;
|
|
2844
|
+
// }
|
|
2845
|
+
// }
|
|
2846
|
+
for (const [key, value] of Object.entries(variables)) {
|
|
2847
|
+
if (value &&
|
|
2848
|
+
typeof value === 'object' &&
|
|
2849
|
+
'searchSelectedOption' in value) {
|
|
2850
|
+
this.searchDropdownMap.set(key, value);
|
|
2851
|
+
}
|
|
2852
|
+
}
|
|
2853
|
+
});
|
|
2854
|
+
const serviceUrl = this.fxApiService.getServiceUrl(this.setting('serviceSearchName'));
|
|
2855
|
+
this.getOptions(serviceUrl, this.setting('searchSelectOptionAPIURL'));
|
|
2856
|
+
}
|
|
2857
|
+
settings() {
|
|
2858
|
+
return [
|
|
2859
|
+
new FxOptionSetting({ key: 'itemsSearchOption', $title: 'Options', value: [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }] }, [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }]),
|
|
2860
|
+
new FxStringSetting({ key: 'searchSelectOptionAPIURL', $title: 'API Url', value: '' }),
|
|
2861
|
+
new FxStringSetting({ key: 'customClassSearch', $title: 'Custom Class Name', value: '' }),
|
|
2862
|
+
new FxStringSetting({ key: 'select-label-search', $title: 'Label', value: '' }),
|
|
2863
|
+
new FxStringSetting({ key: 'label-key-search', $title: 'Label Key', value: 'option' }),
|
|
2864
|
+
new FxStringSetting({ key: 'value-key-search', $title: 'Label Key', value: 'value' }),
|
|
2865
|
+
new FxSelectSetting({ key: 'serviceSearchName', $title: 'Service', value: '' }, [{ option: 'User Service', value: 'user_service' }, { option: 'Patient Service', value: 'patient_service' }, { option: 'Workflow Service', value: 'workflow_service' }]),
|
|
2866
|
+
new FxSelectSetting({ key: 'isSearchRequired', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
|
|
2867
|
+
new FxStringSetting({ key: 'multiErrorSearch', $title: 'Error Message', value: 'Please select' }),
|
|
2868
|
+
new FxStringSetting({ key: 'placeholderSearch', $title: 'Placeholder', value: 'Select' }),
|
|
2869
|
+
];
|
|
2870
|
+
}
|
|
2871
|
+
validations() {
|
|
2872
|
+
return [];
|
|
2873
|
+
}
|
|
2874
|
+
getOptions(serviceUrl, url) {
|
|
2875
|
+
if (url) {
|
|
2876
|
+
const finalUrl = serviceUrl + url;
|
|
2877
|
+
this.http.get(finalUrl).subscribe({
|
|
2878
|
+
next: (response) => {
|
|
2879
|
+
this.options = response?.content || [];
|
|
2880
|
+
},
|
|
2881
|
+
error: (err) => {
|
|
2882
|
+
console.error('Error fetching options', err);
|
|
2883
|
+
}
|
|
2884
|
+
});
|
|
2885
|
+
}
|
|
2886
|
+
else {
|
|
2887
|
+
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsSearchOption')?.options || [];
|
|
2888
|
+
}
|
|
2889
|
+
}
|
|
2890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithSearchComponent, isStandalone: true, selector: "lib-dropdown-with-search", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }}\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper.p-inputwrapper-filled{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }] });
|
|
2892
|
+
}
|
|
2893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithSearchComponent, decorators: [{
|
|
2894
|
+
type: Component,
|
|
2895
|
+
args: [{ selector: 'lib-dropdown-with-search', standalone: true, imports: [DropdownModule, CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, MultiSelectModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }}\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper.p-inputwrapper-filled{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
|
|
2655
2896
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2656
2897
|
type: ViewChild,
|
|
2657
2898
|
args: ['fxComponent']
|
|
2658
2899
|
}] } });
|
|
2659
2900
|
|
|
2901
|
+
class CustomizeDropdownComponent extends FxBaseComponent {
|
|
2902
|
+
cdr;
|
|
2903
|
+
http;
|
|
2904
|
+
fxBuilderWrapperService;
|
|
2905
|
+
fxApiService;
|
|
2906
|
+
fb;
|
|
2907
|
+
eRef;
|
|
2908
|
+
destroy$ = new Subject();
|
|
2909
|
+
form;
|
|
2910
|
+
formObject = {};
|
|
2911
|
+
dropdownOpen = false;
|
|
2912
|
+
formSubmitted = false;
|
|
2913
|
+
findingsOptions = [
|
|
2914
|
+
{
|
|
2915
|
+
label: 'Proclination',
|
|
2916
|
+
value: 'proclination',
|
|
2917
|
+
info: 'Forward inclination of teeth',
|
|
2918
|
+
selected: false,
|
|
2919
|
+
subOptions: [
|
|
2920
|
+
{ label: 'Mild', value: 'mild' },
|
|
2921
|
+
{ label: 'Moderate', value: 'moderate' },
|
|
2922
|
+
{ label: 'Severe', value: 'severe' }
|
|
2923
|
+
]
|
|
2924
|
+
},
|
|
2925
|
+
{
|
|
2926
|
+
label: 'Crowding',
|
|
2927
|
+
value: 'crowding',
|
|
2928
|
+
selected: false,
|
|
2929
|
+
subOptions: [
|
|
2930
|
+
{ label: 'Mild', value: 'mild' },
|
|
2931
|
+
{ label: 'Moderate', value: 'moderate' },
|
|
2932
|
+
{ label: 'Severe', value: 'severe' }
|
|
2933
|
+
]
|
|
2934
|
+
},
|
|
2935
|
+
{
|
|
2936
|
+
label: 'Spacing',
|
|
2937
|
+
value: 'spacing',
|
|
2938
|
+
selected: false,
|
|
2939
|
+
subOptions: [
|
|
2940
|
+
{ label: 'Mild', value: 'mild' },
|
|
2941
|
+
{ label: 'Moderate', value: 'moderate' },
|
|
2942
|
+
{ label: 'Severe', value: 'severe' }
|
|
2943
|
+
]
|
|
2944
|
+
},
|
|
2945
|
+
{
|
|
2946
|
+
label: 'Retroclination',
|
|
2947
|
+
value: 'retroclination',
|
|
2948
|
+
info: 'Backward inclination of teeth',
|
|
2949
|
+
selected: false
|
|
2950
|
+
},
|
|
2951
|
+
{
|
|
2952
|
+
label: 'Rotation',
|
|
2953
|
+
value: 'rotation',
|
|
2954
|
+
selected: false
|
|
2955
|
+
}
|
|
2956
|
+
];
|
|
2957
|
+
onClickOutside(event) {
|
|
2958
|
+
if (this.dropdownOpen && !this.eRef.nativeElement.contains(event.target)) {
|
|
2959
|
+
this.dropdownOpen = false;
|
|
2960
|
+
this.cdr.detectChanges();
|
|
2961
|
+
}
|
|
2962
|
+
}
|
|
2963
|
+
config = {
|
|
2964
|
+
displayMode: 'ellipsis',
|
|
2965
|
+
placeholderLabel: 'Select Finding'
|
|
2966
|
+
};
|
|
2967
|
+
constructor(cdr, http, fxBuilderWrapperService, fxApiService, fb, eRef) {
|
|
2968
|
+
super(cdr);
|
|
2969
|
+
this.cdr = cdr;
|
|
2970
|
+
this.http = http;
|
|
2971
|
+
this.fxBuilderWrapperService = fxBuilderWrapperService;
|
|
2972
|
+
this.fxApiService = fxApiService;
|
|
2973
|
+
this.fb = fb;
|
|
2974
|
+
this.eRef = eRef;
|
|
2975
|
+
this.form = this.fb.group({
|
|
2976
|
+
findings: [[]]
|
|
2977
|
+
});
|
|
2978
|
+
this.onInit.subscribe(() => this._register(this.form));
|
|
2979
|
+
}
|
|
2980
|
+
ngOnInit() {
|
|
2981
|
+
this.fxBuilderWrapperService.variables$
|
|
2982
|
+
.pipe(takeUntil(this.destroy$))
|
|
2983
|
+
.subscribe((variables) => {
|
|
2984
|
+
console.log("Variables");
|
|
2985
|
+
});
|
|
2986
|
+
const serviceUrl = this.fxApiService.getServiceUrl(this.setting('serviceName'));
|
|
2987
|
+
this.getOptions(serviceUrl, this.setting('clinicalNotesURL'));
|
|
2988
|
+
}
|
|
2989
|
+
getOptions(serviceUrl, url) {
|
|
2990
|
+
const finalUrl = serviceUrl + url;
|
|
2991
|
+
this.http.get(finalUrl).subscribe({
|
|
2992
|
+
next: (response) => {
|
|
2993
|
+
// Future API logic here
|
|
2994
|
+
},
|
|
2995
|
+
error: (err) => console.error('Error fetching options', err)
|
|
2996
|
+
});
|
|
2997
|
+
}
|
|
2998
|
+
settings() {
|
|
2999
|
+
return [
|
|
3000
|
+
new FxSelectSetting({ key: 'displayMode', $title: 'Display Mode', value: 'ellipsis' }, [{ option: 'Ellipsis', value: 'ellipsis' }, { option: 'Compact', value: 'compact' }]),
|
|
3001
|
+
new FxStringSetting({ key: 'placeholderLabel', $title: 'Placeholder', value: 'Select Options' }),
|
|
3002
|
+
];
|
|
3003
|
+
}
|
|
3004
|
+
validations() {
|
|
3005
|
+
return [FxValidatorService.required];
|
|
3006
|
+
}
|
|
3007
|
+
/** Dropdown Behavior **/
|
|
3008
|
+
toggleDropdown() {
|
|
3009
|
+
this.dropdownOpen = !this.dropdownOpen;
|
|
3010
|
+
}
|
|
3011
|
+
toggleOption(option, event) {
|
|
3012
|
+
event.stopPropagation();
|
|
3013
|
+
// Toggle checkbox value
|
|
3014
|
+
option.selected = !option.selected;
|
|
3015
|
+
// Reset radios when unchecked
|
|
3016
|
+
if (!option.selected) {
|
|
3017
|
+
option.subSelection = null;
|
|
3018
|
+
option.touched = false;
|
|
3019
|
+
}
|
|
3020
|
+
// ✅ Force UI refresh so radios appear instantly
|
|
3021
|
+
this.cdr.detectChanges();
|
|
3022
|
+
// Update reactive form
|
|
3023
|
+
this.updateFindings();
|
|
3024
|
+
}
|
|
3025
|
+
/** Form & Label Helpers **/
|
|
3026
|
+
get hasSelectedFindings() {
|
|
3027
|
+
return this.findingsOptions.some(f => f.selected);
|
|
3028
|
+
}
|
|
3029
|
+
get selectedFindingsLabel() {
|
|
3030
|
+
const selected = this.findingsOptions
|
|
3031
|
+
.filter(f => {
|
|
3032
|
+
if (f.selected) {
|
|
3033
|
+
// If finding has sub-options → only show if a sub-option is selected
|
|
3034
|
+
if (f.subOptions?.length) {
|
|
3035
|
+
return !!f.subSelection;
|
|
3036
|
+
}
|
|
3037
|
+
// If no sub-options → always show
|
|
3038
|
+
return true;
|
|
3039
|
+
}
|
|
3040
|
+
return false;
|
|
3041
|
+
})
|
|
3042
|
+
.map(f => f.label);
|
|
3043
|
+
if (selected.length === 0)
|
|
3044
|
+
return this.setting('placeholderLabel');
|
|
3045
|
+
// Display mode logic (Compact or Ellipsis)
|
|
3046
|
+
const maxCount = this.setting('displayMode') === 'compact' ? 2 : 3;
|
|
3047
|
+
if (this.setting('displayMode') === 'compact') {
|
|
3048
|
+
return selected.length <= maxCount
|
|
3049
|
+
? selected.join(', ')
|
|
3050
|
+
: `${selected.slice(0, maxCount).join(', ')} +${selected.length - maxCount} more`;
|
|
3051
|
+
}
|
|
3052
|
+
if (this.setting('displayMode') === 'ellipsis') {
|
|
3053
|
+
return selected.length > maxCount
|
|
3054
|
+
? `${selected.slice(0, maxCount).join(', ')}, ...`
|
|
3055
|
+
: selected.join(', ');
|
|
3056
|
+
}
|
|
3057
|
+
return selected.join(', ');
|
|
3058
|
+
}
|
|
3059
|
+
/** Update Findings + Validation **/
|
|
3060
|
+
updateFindings() {
|
|
3061
|
+
const selected = this.findingsOptions
|
|
3062
|
+
.filter(f => {
|
|
3063
|
+
if (f.selected) {
|
|
3064
|
+
// Only include in final form if:
|
|
3065
|
+
// - no subOptions, or
|
|
3066
|
+
// - subOptions with valid subSelection
|
|
3067
|
+
if (f.subOptions?.length) {
|
|
3068
|
+
return !!f.subSelection;
|
|
3069
|
+
}
|
|
3070
|
+
return true;
|
|
3071
|
+
}
|
|
3072
|
+
return false;
|
|
3073
|
+
})
|
|
3074
|
+
.map(f => {
|
|
3075
|
+
const sub = f.subOptions?.find(s => s.value === f.subSelection) || null;
|
|
3076
|
+
return {
|
|
3077
|
+
label: f.label,
|
|
3078
|
+
value: f.value,
|
|
3079
|
+
subSelection: sub ? { label: sub.label, value: sub.value } : null
|
|
3080
|
+
};
|
|
3081
|
+
});
|
|
3082
|
+
// Update reactive form value
|
|
3083
|
+
this.form.patchValue({ findings: selected }, { emitEvent: false });
|
|
3084
|
+
// Validation logic remains same
|
|
3085
|
+
const invalidItems = this.findingsOptions.filter(f => f.selected && f.subOptions && !f.subSelection);
|
|
3086
|
+
this.form.get('findings')?.setErrors(invalidItems.length > 0 ? { missingSubSelection: true } : null);
|
|
3087
|
+
}
|
|
3088
|
+
onSubmit() {
|
|
3089
|
+
this.formSubmitted = true;
|
|
3090
|
+
if (this.form.invalid) {
|
|
3091
|
+
console.warn('⚠️ Please select a sub-option for all selected findings with sub-options.');
|
|
3092
|
+
return;
|
|
3093
|
+
}
|
|
3094
|
+
console.log('✅ Form Value:', this.form.value);
|
|
3095
|
+
}
|
|
3096
|
+
patchExistingValues(data) {
|
|
3097
|
+
this.findingsOptions.forEach(opt => {
|
|
3098
|
+
const match = data.find(x => x.value === opt.value);
|
|
3099
|
+
opt.selected = !!match;
|
|
3100
|
+
opt.subSelection = match?.severity?.value || null;
|
|
3101
|
+
});
|
|
3102
|
+
this.updateFindings();
|
|
3103
|
+
}
|
|
3104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizeDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }, { token: i5.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3105
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomizeDropdownComponent, isStandalone: true, selector: "lib-customize-dropdown", host: { listeners: { "document:click": "onClickOutside($event)" } }, usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"container\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"relative\">\r\n <!-- Header -->\r\n <div #dropdownWrapper class=\"relative w-80\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 rounded-md px-3 py-2 flex justify-between items-center bg-white text-gray-700 hover:border-blue-400\"\r\n (click)=\"toggleDropdown()\"\r\n >\r\n <span *ngIf=\"hasSelectedFindings; else placeholder\">\r\n {{ selectedFindingsLabel }}\r\n </span>\r\n <ng-template #placeholder>\r\n {{ setting('placeholderLabel') }}\r\n </ng-template>\r\n <svg\r\n class=\"w-5 h-5 ml-2 text-gray-500 transform transition-transform duration-200\"\r\n [class.rotate-180]=\"dropdownOpen\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Panel -->\r\n <div\r\n *ngIf=\"dropdownOpen\"\r\n class=\"absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-64 overflow-y-auto z-10\"\r\n >\r\n <div\r\n *ngFor=\"let option of findingsOptions\"\r\n class=\"border-b border-gray-100 last:border-none p-2 hover:bg-gray-50 cursor-pointer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Checkbox + Label -->\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"w-4 h-4 text-blue-500 border-gray-300 rounded cursor-pointer\"\r\n [(ngModel)]=\"option.selected\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n (click)=\"toggleOption(option, $event)\"\r\n />\r\n <label\r\n class=\"text-gray-800 font-medium cursor-pointer select-none\"\r\n (click)=\"toggleOption(option, $event)\"\r\n >\r\n {{ option.label }}\r\n </label>\r\n\r\n <span\r\n *ngIf=\"option.info\"\r\n class=\"ml-auto text-blue-500 text-sm cursor-pointer\"\r\n title=\"{{ option.info }}\"\r\n >\r\n \u24D8\r\n </span>\r\n </div>\r\n\r\n <!-- Radios -->\r\n <div\r\n class=\"flex items-center flex-wrap gap-4 ml-6 mt-2 text-sm\"\r\n *ngIf=\"option.selected && option.subOptions\"\r\n >\r\n <ng-container *ngFor=\"let s of option.subOptions\">\r\n <label\r\n class=\"flex items-center space-x-1 cursor-pointer\"\r\n (click)=\"option.subSelection = s.value; option.touched = true; updateFindings()\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [name]=\"option.value\"\r\n [value]=\"s.value\"\r\n [(ngModel)]=\"option.subSelection\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n class=\"text-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ s.label }}</span>\r\n </label>\r\n </ng-container>\r\n\r\n <!-- Validation Message -->\r\n <div\r\n *ngIf=\"option.selected && option.subOptions && !option.subSelection && (option.touched || formSubmitted)\"\r\n class=\"text-red-500 text-xs mt-1 w-full ml-1\"\r\n >\r\n Please select one option\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>\r\n", styles: [".container{width:300px}.dropdown{position:relative;-webkit-user-select:none;user-select:none}.dropdown-header{border:1px solid #ccc;border-radius:4px;padding:6px 8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.dropdown-panel{position:absolute;width:100%;background:#fff;border:1px solid #ddd;margin-top:4px;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;box-shadow:0 2px 8px #0000001a}.dropdown-item{padding:4px 8px;border-bottom:1px solid #f1f1f1}.dropdown-item:last-child{border-bottom:none}.item-header{display:flex;align-items:center;gap:6px}.label{cursor:pointer;flex-grow:1}.info{margin-left:auto;cursor:help;font-size:12px;color:#666}.sub-options{display:flex;align-items:center;flex-wrap:wrap;padding-left:22px;font-size:13px;margin-top:4px}.error{color:#e63946;font-size:11px;margin-left:22px;margin-top:2px}.arrow{font-size:10px;color:#555}.submit-btn{margin-top:1rem;padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }] });
|
|
3106
|
+
}
|
|
3107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizeDropdownComponent, decorators: [{
|
|
3108
|
+
type: Component,
|
|
3109
|
+
args: [{ selector: 'lib-customize-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"container\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"relative\">\r\n <!-- Header -->\r\n <div #dropdownWrapper class=\"relative w-80\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 rounded-md px-3 py-2 flex justify-between items-center bg-white text-gray-700 hover:border-blue-400\"\r\n (click)=\"toggleDropdown()\"\r\n >\r\n <span *ngIf=\"hasSelectedFindings; else placeholder\">\r\n {{ selectedFindingsLabel }}\r\n </span>\r\n <ng-template #placeholder>\r\n {{ setting('placeholderLabel') }}\r\n </ng-template>\r\n <svg\r\n class=\"w-5 h-5 ml-2 text-gray-500 transform transition-transform duration-200\"\r\n [class.rotate-180]=\"dropdownOpen\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Panel -->\r\n <div\r\n *ngIf=\"dropdownOpen\"\r\n class=\"absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-64 overflow-y-auto z-10\"\r\n >\r\n <div\r\n *ngFor=\"let option of findingsOptions\"\r\n class=\"border-b border-gray-100 last:border-none p-2 hover:bg-gray-50 cursor-pointer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Checkbox + Label -->\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"w-4 h-4 text-blue-500 border-gray-300 rounded cursor-pointer\"\r\n [(ngModel)]=\"option.selected\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n (click)=\"toggleOption(option, $event)\"\r\n />\r\n <label\r\n class=\"text-gray-800 font-medium cursor-pointer select-none\"\r\n (click)=\"toggleOption(option, $event)\"\r\n >\r\n {{ option.label }}\r\n </label>\r\n\r\n <span\r\n *ngIf=\"option.info\"\r\n class=\"ml-auto text-blue-500 text-sm cursor-pointer\"\r\n title=\"{{ option.info }}\"\r\n >\r\n \u24D8\r\n </span>\r\n </div>\r\n\r\n <!-- Radios -->\r\n <div\r\n class=\"flex items-center flex-wrap gap-4 ml-6 mt-2 text-sm\"\r\n *ngIf=\"option.selected && option.subOptions\"\r\n >\r\n <ng-container *ngFor=\"let s of option.subOptions\">\r\n <label\r\n class=\"flex items-center space-x-1 cursor-pointer\"\r\n (click)=\"option.subSelection = s.value; option.touched = true; updateFindings()\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [name]=\"option.value\"\r\n [value]=\"s.value\"\r\n [(ngModel)]=\"option.subSelection\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n class=\"text-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ s.label }}</span>\r\n </label>\r\n </ng-container>\r\n\r\n <!-- Validation Message -->\r\n <div\r\n *ngIf=\"option.selected && option.subOptions && !option.subSelection && (option.touched || formSubmitted)\"\r\n class=\"text-red-500 text-xs mt-1 w-full ml-1\"\r\n >\r\n Please select one option\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>\r\n", styles: [".container{width:300px}.dropdown{position:relative;-webkit-user-select:none;user-select:none}.dropdown-header{border:1px solid #ccc;border-radius:4px;padding:6px 8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.dropdown-panel{position:absolute;width:100%;background:#fff;border:1px solid #ddd;margin-top:4px;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;box-shadow:0 2px 8px #0000001a}.dropdown-item{padding:4px 8px;border-bottom:1px solid #f1f1f1}.dropdown-item:last-child{border-bottom:none}.item-header{display:flex;align-items:center;gap:6px}.label{cursor:pointer;flex-grow:1}.info{margin-left:auto;cursor:help;font-size:12px;color:#666}.sub-options{display:flex;align-items:center;flex-wrap:wrap;padding-left:22px;font-size:13px;margin-top:4px}.error{color:#e63946;font-size:11px;margin-left:22px;margin-top:2px}.arrow{font-size:10px;color:#555}.submit-btn{margin-top:1rem;padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}\n"] }]
|
|
3110
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }, { type: i5.FormBuilder }, { type: i0.ElementRef }], propDecorators: { onClickOutside: [{
|
|
3111
|
+
type: HostListener,
|
|
3112
|
+
args: ['document:click', ['$event']]
|
|
3113
|
+
}] } });
|
|
3114
|
+
|
|
2660
3115
|
class FxBuilderWrapperComponent {
|
|
2661
3116
|
fxWrapperService;
|
|
2662
3117
|
componentBuilder;
|
|
@@ -2703,6 +3158,15 @@ class FxBuilderWrapperComponent {
|
|
|
2703
3158
|
if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown'))) {
|
|
2704
3159
|
this.fxWrapperService.registerCustomComponent('Multiselect Dropdown', 'lib-multiselect-dropdown', MultiselectDropdownComponent);
|
|
2705
3160
|
}
|
|
3161
|
+
if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown-with-childs'))) {
|
|
3162
|
+
this.fxWrapperService.registerCustomComponent('Multiselect Dropdown with Childs', 'lib-multiselect-dropdown-with-childs', MultiselectDropdownWithChildsComponent);
|
|
3163
|
+
}
|
|
3164
|
+
if (!Boolean(this.fxWrapperService.getComponent('lib-dropdown-with-search'))) {
|
|
3165
|
+
this.fxWrapperService.registerCustomComponent('Dropdown with Search', 'lib-dropdown-with-search', DropdownWithSearchComponent);
|
|
3166
|
+
}
|
|
3167
|
+
if (!Boolean(this.fxWrapperService.getComponent('lib-customize-dropdown'))) {
|
|
3168
|
+
this.fxWrapperService.registerCustomComponent('Multiselect with Form', 'lib-customize-dropdown', CustomizeDropdownComponent);
|
|
3169
|
+
}
|
|
2706
3170
|
}
|
|
2707
3171
|
;
|
|
2708
3172
|
getParsedForm() {
|
|
@@ -2788,6 +3252,9 @@ class FxFormWrapperComponent {
|
|
|
2788
3252
|
{ name: 'Smartlist with Other', key: 'dropdown-with-other', component: DropdownWithOtherComponent },
|
|
2789
3253
|
{ name: 'Radio Group with Other', key: 'radio-group-custom', component: RadioGroupComponent },
|
|
2790
3254
|
{ name: 'Multiselect Dropdown', key: 'lib-multiselect-dropdown', component: MultiselectDropdownComponent },
|
|
3255
|
+
{ name: 'Multiselect Dropdown with Childs', key: 'lib-multiselect-dropdown-with-childs', component: MultiselectDropdownWithChildsComponent },
|
|
3256
|
+
{ name: 'Dropdown with Search', key: 'lib-dropdown-with-search', component: DropdownWithSearchComponent },
|
|
3257
|
+
{ name: 'Multiselect with Form ', key: 'lib-customize-dropdown', component: CustomizeDropdownComponent },
|
|
2791
3258
|
];
|
|
2792
3259
|
components.forEach(({ name, key, component }) => {
|
|
2793
3260
|
if (!this.fxWrapperService.getComponent(key)) {
|