@n-isi-platform/design-system 1.0.40 → 1.0.42

package/fesm2022/n-isi-platform-design-system.mjs

@@ -447,9 +447,6 @@ class FileUploadComponent {
     onDelete = new EventEmitter();
     onDownload = new EventEmitter();
     valid = new EventEmitter();
-    isCameraVisible = false;
-    openCamera() { this.isCameraVisible = true; }
-    closeCamera() { this.isCameraVisible = false; }
     // File upload
     fileList = [];
     totalSize = 0;
@@ -537,20 +534,6 @@ class FileUploadComponent {
         }
         this.totalSizePercent = this.totalSize / 10;
     }
-    onPhotoCaptured(base64) {
-        // Pretvorba PICK
-        const arr = base64.split(',');
-        const mime = arr[0].match(/:(.*?);/)[1];
-        const bstr = atob(arr[1]);
-        let n = bstr.length;
-        const u8arr = new Uint8Array(n);
-        while (n--)
-            u8arr[n] = bstr.charCodeAt(n);
-        const file = new File([u8arr], `photo_${Date.now()}.jpg`, { type: mime });
-        this.fileList = [...this.fileList, file];
-        this.onSaveFile.emit(this.fileList);
-        this.closeCamera();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadComponent, deps: [{ token: i1$3.PrimeNG }, { token: SharedMessageService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { postavkaPregledaId: "postavkaPregledaId", uploadedFiles: "uploadedFiles", maxFileSize: "maxFileSize", totalMaxFileSize: "totalMaxFileSize", disabled: "disabled", acceptFiles: "acceptFiles", multiple: "multiple", extraInfo: "extraInfo" }, outputs: { onSaveFile: "onSaveFile", onDelete: "onDelete", onDownload: "onDownload", valid: "valid" }, ngImport: i0, template: "    <p-fileupload\r\n      class=\"pt-3\"\r\n      name=\"priloge[]\"\r\n      invalidFileSizeMessageSummary=\"{{\r\n        'components.fileUpload.invalidFileSizeMessageSummary' | translate\r\n      }}\"\r\n      invalidFileSizeMessageDetail=\"{{\r\n        'components.fileUpload.invalidFileSizeMessageDetail' | translate\r\n      }}\"\r\n      invalidFileTypeMessageDetail=\"{{'components.fileUpload.invalidFileTypeMessageDetail' | translate}}\"\r\n      invalidFileTypeMessageSummary=\"{{ 'components.fileUpload.invalidFileTypeMessageSummary' | translate}}\"\r\n      [multiple]=\"multiple\"\r\n      (onRemove)=\"remove($event)\"\r\n      [accept]=\"acceptFiles\"\r\n      [maxFileSize]=\"maxFileSize\"\r\n      (onSelect)=\"onSelectedFiles($event)\">\r\n      <ng-template\r\n        #header\r\n        let-priloge\r\n        let-chooseCallback=\"chooseCallback\"\r\n        let-clearCallback=\"clearCallback\">\r\n        <div class=\"flex gap-2\">\r\n          <lib-button\r\n            [disabled]=\"disabled\"\r\n            (click)=\"choose($event, chooseCallback)\"\r\n            label=\"{{ 'components.fileUpload.izberi' | translate }}\"\r\n            [hasIcon]=\"true\"\r\n            [icon]=\"'pi pi-file'\"\r\n            [color]=\"ButtonColor.primary\" />\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #content let-priloge let-removeFileCallback=\"removeFileCallback\">\r\n        <div class=\"flex flex-col gap-8 pt-4\">\r\n          <div class=\"w-full\" *ngIf=\"uploadedFiles.length > 0\">\r\n            <div class=\"flex flex-column gap-4\">\r\n              <div\r\n                *ngFor=\"let priloga of uploadedFiles; let i = index\"\r\n                class=\"flex flex-col justify-content-between items-center gap-2 px-3\">\r\n                <div class=\"flex flex-col\">\r\n                  <div>\r\n                    <i class=\"pi pi-file\"></i>\r\n                  </div>\r\n                  <span class=\"pl-3 text-ellipsis max-w-60 whitespace-nowrap overflow-hidden\">\r\n                    {{ getDisplayName(priloga) }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex align-items-center\">\r\n                  <div *ngIf=\"!isTempFile(priloga)\">\r\n                    <p-badge value=\"Zaklju\u010Den\" badgeSize=\"small\" severity=\"success\" />\r\n                    <p-button\r\n                      (click)=\"downloadFile(priloga)\"\r\n                      severity=\"primary\"\r\n                      icon=\"pi pi-download\"\r\n                      aria-label=\"Prenesi\"\r\n                      [rounded]=\"true\"\r\n                      [text]=\"true\" />\r\n                  </div>\r\n                  <p-button\r\n                    [disabled]=\"disabled\"\r\n                    (click)=\"isTempFile(priloga) ? removeFileCallback() : delete(priloga)\"\r\n                    severity=\"danger\"\r\n                    icon=\"pi pi-times\"\r\n                    [rounded]=\"true\"\r\n                    [text]=\"true\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #priloga></ng-template>\r\n      <ng-template #empty>\r\n        <div\r\n          *ngIf=\"uploadedFiles.length === 0\"\r\n          class=\"flex align-center justify-around\"\r\n          [style.width]=\"'100%'\">\r\n          <span class=\"pi pi-cloud-upload mr-3\"></span>\r\n          <p>{{ 'components.fileUpload.povlecitveInSpustiteDatotekeZaNalaganje' | translate }}</p>\r\n          <p *ngIf=\"extraInfo\">{{ extraInfo | translate }}</p>\r\n        </div>\r\n        <div *ngIf=\"acceptFiles\" class=\"flex align-center justify-around\">\r\n          <div class=\"placeholder\"></div>\r\n          <p>{{ ('components.fileUpload.dovoljeneDatoteke' | translate) + acceptFiles }}</p>\r\n        </div>\r\n      </ng-template>\r\n    </p-fileupload>\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MenubarModule }, { kind: "ngmodule", type: ChipModule }] });
 }
@@ -598,9 +581,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class CameraUploadComponent {
     video;
-    filesCaptured = new EventEmitter(); // za dejanski upload v parent
-    captureSuccess = new EventEmitter(); // za toast / obvestilo v parent
+    filesCaptured = new EventEmitter();
+    captureSuccess = new EventEmitter();
     pendingFiles = [];
+    stream;
+    videoReady = false;
+    uiMessage = null;
+    uiMessageTimer;
     async ngAfterViewInit() {
         try {
             const devices = await navigator.mediaDevices.enumerateDevices();
@@ -613,23 +600,40 @@ class CameraUploadComponent {
             else {
                 constraints = { video: true };
             }
-            const stream = await navigator.mediaDevices.getUserMedia(constraints);
-            this.video.nativeElement.srcObject = stream;
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            this.video.nativeElement.srcObject = this.stream;
+            await this.ensureVideoReady();
         }
         catch (err) {
             console.warn('Zunanja kamera ni na voljo. Uporabljam privzeto.', err);
-            const fallbackStream = await navigator.mediaDevices.getUserMedia({ video: true });
-            this.video.nativeElement.srcObject = fallbackStream;
+            try {
+                this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                this.video.nativeElement.srcObject = this.stream;
+                await this.ensureVideoReady();
+            }
+            catch (fallbackErr) {
+                console.warn('Kamera ni na voljo.', fallbackErr);
+                this.showUiMessage('Kamera ni na voljo. Preveri dovoljenja in poskusi ponovno.');
+            }
         }
     }
     ngOnDestroy() {
-        const stream = this.video?.nativeElement?.srcObject;
-        stream?.getTracks().forEach(t => t.stop());
+        this.stream?.getTracks().forEach(t => t.stop());
+        if (this.uiMessageTimer)
+            clearTimeout(this.uiMessageTimer);
     }
-    capture() {
+    async capture() {
         const videoEl = this.video.nativeElement;
+        if (!this.videoReady || !videoEl.videoWidth || !videoEl.videoHeight) {
+            await this.ensureVideoReady(2000);
+        }
         if (!videoEl.videoWidth || !videoEl.videoHeight) {
-            console.warn('Video še ni inicializiran, ni mogoče zajeti slike.');
+            console.warn('Video še ni inicializiran, ni mogoče zajeti slike.', {
+                readyState: videoEl.readyState,
+                videoWidth: videoEl.videoWidth,
+                videoHeight: videoEl.videoHeight,
+            });
+            this.showUiMessage('Video še ni pripravljen. Počakaj 1-2 sekundi in znova klikni Naredi posnetek.');
             return;
         }
         const canvas = document.createElement('canvas');
@@ -638,6 +642,7 @@ class CameraUploadComponent {
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             console.warn('Canvas context je null.');
+            this.showUiMessage('Napaka pri zajemu slike. Poskusi ponovno.');
             return;
         }
         ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
@@ -660,12 +665,46 @@ class CameraUploadComponent {
         this.filesCaptured.emit(this.pendingFiles);
         this.pendingFiles = [];
     }
+    async ensureVideoReady(timeoutMs = 3000) {
+        const videoEl = this.video?.nativeElement;
+        if (!videoEl)
+            return;
+        if (videoEl.readyState >= 2 && videoEl.videoWidth > 0 && videoEl.videoHeight > 0) {
+            this.videoReady = true;
+            return;
+        }
+        await videoEl.play().catch(() => undefined);
+        await new Promise(resolve => {
+            let resolved = false;
+            const finish = () => {
+                if (resolved)
+                    return;
+                resolved = true;
+                videoEl.removeEventListener('loadedmetadata', onReady);
+                videoEl.removeEventListener('canplay', onReady);
+                resolve();
+            };
+            const onReady = () => finish();
+            videoEl.addEventListener('loadedmetadata', onReady, { once: true });
+            videoEl.addEventListener('canplay', onReady, { once: true });
+            setTimeout(finish, timeoutMs);
+        });
+        this.videoReady = videoEl.readyState >= 2 && videoEl.videoWidth > 0 && videoEl.videoHeight > 0;
+    }
+    showUiMessage(message) {
+        this.uiMessage = message;
+        if (this.uiMessageTimer)
+            clearTimeout(this.uiMessageTimer);
+        this.uiMessageTimer = setTimeout(() => {
+            this.uiMessage = null;
+        }, 3500);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CameraUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CameraUploadComponent, isStandalone: true, selector: "app-camera-upload", outputs: { filesCaptured: "filesCaptured", captureSuccess: "captureSuccess" }, viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"camera-upload\">\r\n  <video #video autoplay playsinline></video>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      pButton\r\n      type=\"button\"\r\n      (click)=\"capture()\"\r\n      label=\"{{ 'Naredi posnetek' }}\">\r\n    </button>\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: ["@charset \"UTF-8\";.camera-upload{display:flex;flex-direction:column;gap:1rem}.camera-upload video{width:100%;max-height:70vh;object-fit:cover;border-radius:4px}.camera-upload .actions{width:100%}.camera-upload .actions button{width:100%;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CameraUploadComponent, isStandalone: true, selector: "app-camera-upload", outputs: { filesCaptured: "filesCaptured", captureSuccess: "captureSuccess" }, viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"camera-upload\">\r\n  <div *ngIf=\"uiMessage\" class=\"capture-toast\" role=\"status\" aria-live=\"polite\">\r\n    {{ uiMessage }}\r\n  </div>\r\n\r\n  <video #video autoplay playsinline></video>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      pButton\r\n      type=\"button\"\r\n      (click)=\"capture()\"\r\n      label=\"{{ 'Naredi posnetek' }}\">\r\n    </button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".camera-upload{display:flex;flex-direction:column;gap:1rem}.capture-toast{width:100%;padding:.75rem 1rem;border-radius:6px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03;font-size:.95rem}.camera-upload video{width:100%;max-height:70vh;object-fit:cover;border-radius:4px}.camera-upload .actions{width:100%}.camera-upload .actions button{width:100%;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CameraUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-camera-upload', standalone: true, imports: [TranslatePipe, ButtonModule], template: "<div class=\"camera-upload\">\r\n  <video #video autoplay playsinline></video>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      pButton\r\n      type=\"button\"\r\n      (click)=\"capture()\"\r\n      label=\"{{ 'Naredi posnetek' }}\">\r\n    </button>\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: ["@charset \"UTF-8\";.camera-upload{display:flex;flex-direction:column;gap:1rem}.camera-upload video{width:100%;max-height:70vh;object-fit:cover;border-radius:4px}.camera-upload .actions{width:100%}.camera-upload .actions button{width:100%;justify-content:center}\n"] }]
+            args: [{ selector: 'app-camera-upload', standalone: true, imports: [TranslatePipe, ButtonModule], template: "<div class=\"camera-upload\">\r\n  <div *ngIf=\"uiMessage\" class=\"capture-toast\" role=\"status\" aria-live=\"polite\">\r\n    {{ uiMessage }}\r\n  </div>\r\n\r\n  <video #video autoplay playsinline></video>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      pButton\r\n      type=\"button\"\r\n      (click)=\"capture()\"\r\n      label=\"{{ 'Naredi posnetek' }}\">\r\n    </button>\r\n\r\n  </div>\r\n</div>\r\n", styles: [".camera-upload{display:flex;flex-direction:column;gap:1rem}.capture-toast{width:100%;padding:.75rem 1rem;border-radius:6px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03;font-size:.95rem}.camera-upload video{width:100%;max-height:70vh;object-fit:cover;border-radius:4px}.camera-upload .actions{width:100%}.camera-upload .actions button{width:100%;justify-content:center}\n"] }]
         }], propDecorators: { video: [{
                 type: ViewChild,
                 args: ['video']
@@ -1097,6 +1136,7 @@ class AutocompleteComponent {
     nestedGroup = false;
     isLoading = false;
     emptyMessage;
+    virtualScroll = false;
     ariaFilterLabel;
     getValueEvent = new EventEmitter();
     filteredOptions;
@@ -1189,7 +1229,7 @@ class AutocompleteComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AutocompleteComponent, isStandalone: true, selector: "lib-autocomplete[group][controlName][name]", inputs: { name: "name", isMultiselect: "isMultiselect", selectedItemLabel: "selectedItemLabel", group: "group", controlName: "controlName", label: "label", optionList: "optionList", optionLabel: "optionLabel", optionalValue: "optionalValue", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", appendTo: "appendTo", filterBy: "filterBy", showClear: "showClear", forceSelection: "forceSelection", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", nestedGroup: "nestedGroup", isLoading: "isLoading", emptyMessage: "emptyMessage", ariaFilterLabel: "ariaFilterLabel" }, outputs: { getValueEvent: "getValueEvent" }, ngImport: i0, template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n  <div class=\"flex\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"\r\n    ></lib-tooltip>\r\n  </div>\r\n    <p-autoComplete *ngIf=\"!isMultiselect\"\r\n      [inputId]=\"name\"\r\n      [dropdown]=\"true\"\r\n      [forceSelection]=\"forceSelection\"\r\n      [suggestions]=\"filteredOptions\"\r\n      (completeMethod)=\"completeMethod($event)\"\r\n      [appendTo]=\"appendTo\"\r\n      [optionLabel]=\"filterBy\"\r\n      [formControlName]=\"controlName\"\r\n      [placeholder]='placeholder'\r\n    >\r\n      <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n        <div class=\"flex align-items-center\">\r\n          <span>{{ nestedGroup.label }}</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- custom template for button - dropdownicon | aria support -->\r\n      <ng-template pTemplate=\"dropdownicon\">\r\n            <span class=\"p-button-icon pi pi-chevron-down\"\r\n                  id=\"dropdownLabel\"\r\n                  [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n      </ng-template>\r\n    </p-autoComplete>\r\n\r\n  <p-multiSelect\r\n    *ngIf=\"isMultiselect\"\r\n    [inputId]=\"name\"\r\n    (onChange)='getSelectedValue($event)'\r\n    [options]=\"optionList\"\r\n    [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n    [formControlName]=\"controlName\"\r\n    [group]=\"nestedGroup\"\r\n    [filter]='filter'\r\n    [filterBy]='filterBy'\r\n    [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n    [placeholder]=\"placeholder\"\r\n    [showClear]=\"group.get(controlName)!.value && showClear\"\r\n    [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyAutocompleteMessage\"\r\n    [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n    [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n    [attr.aria-required]=\"isRequired\"\r\n  >\r\n    <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n      <div class=\"flex align-items-center\">\r\n        <span>{{ nestedGroup.label }}</span>\r\n      </div>\r\n    </ng-template>\r\n  </p-multiSelect>\r\n  <lib-error\r\n    *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name+'Error'\"\r\n  ></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AutocompleteComponent, isStandalone: true, selector: "lib-autocomplete[group][controlName][name]", inputs: { name: "name", isMultiselect: "isMultiselect", selectedItemLabel: "selectedItemLabel", group: "group", controlName: "controlName", label: "label", optionList: "optionList", optionLabel: "optionLabel", optionalValue: "optionalValue", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", appendTo: "appendTo", filterBy: "filterBy", showClear: "showClear", forceSelection: "forceSelection", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", nestedGroup: "nestedGroup", isLoading: "isLoading", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", ariaFilterLabel: "ariaFilterLabel" }, outputs: { getValueEvent: "getValueEvent" }, ngImport: i0, template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n  <div class=\"flex\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"\r\n    ></lib-tooltip>\r\n  </div>\r\n    <p-autoComplete *ngIf=\"!isMultiselect\"\r\n      [inputId]=\"name\"\r\n      [dropdown]=\"true\"\r\n      [forceSelection]=\"forceSelection\"\r\n      [virtualScroll]=\"virtualScroll\"\r\n      [virtualScrollItemSize]=\"38\"\r\n      [suggestions]=\"filteredOptions\"\r\n      (completeMethod)=\"completeMethod($event)\"\r\n      [appendTo]=\"appendTo\"\r\n      [optionLabel]=\"filterBy\"\r\n      [formControlName]=\"controlName\"\r\n      [placeholder]='placeholder'\r\n    >\r\n      <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n        <div class=\"flex align-items-center\">\r\n          <span>{{ nestedGroup.label }}</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- custom template for button - dropdownicon | aria support -->\r\n      <ng-template pTemplate=\"dropdownicon\">\r\n            <span class=\"p-button-icon pi pi-chevron-down\"\r\n                  id=\"dropdownLabel\"\r\n                  [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n      </ng-template>\r\n    </p-autoComplete>\r\n\r\n  <p-multiSelect\r\n    *ngIf=\"isMultiselect\"\r\n    [inputId]=\"name\"\r\n    (onChange)='getSelectedValue($event)'\r\n    [options]=\"optionList\"\r\n    [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n    [formControlName]=\"controlName\"\r\n    [group]=\"nestedGroup\"\r\n    [filter]='filter'\r\n    [filterBy]='filterBy'\r\n    [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n    [placeholder]=\"placeholder\"\r\n    [showClear]=\"group.get(controlName)!.value && showClear\"\r\n    [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyAutocompleteMessage\"\r\n    [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n    [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n    [attr.aria-required]=\"isRequired\"\r\n  >\r\n    <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n      <div class=\"flex align-items-center\">\r\n        <span>{{ nestedGroup.label }}</span>\r\n      </div>\r\n    </ng-template>\r\n  </p-multiSelect>\r\n  <lib-error\r\n    *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name+'Error'\"\r\n  ></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "variant", "fluid"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -1203,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         MultiSelect,
                         NgClass,
                         ErrorComponent,
-                    ], template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n  <div class=\"flex\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"\r\n    ></lib-tooltip>\r\n  </div>\r\n    <p-autoComplete *ngIf=\"!isMultiselect\"\r\n      [inputId]=\"name\"\r\n      [dropdown]=\"true\"\r\n      [forceSelection]=\"forceSelection\"\r\n      [suggestions]=\"filteredOptions\"\r\n      (completeMethod)=\"completeMethod($event)\"\r\n      [appendTo]=\"appendTo\"\r\n      [optionLabel]=\"filterBy\"\r\n      [formControlName]=\"controlName\"\r\n      [placeholder]='placeholder'\r\n    >\r\n      <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n        <div class=\"flex align-items-center\">\r\n          <span>{{ nestedGroup.label }}</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- custom template for button - dropdownicon | aria support -->\r\n      <ng-template pTemplate=\"dropdownicon\">\r\n            <span class=\"p-button-icon pi pi-chevron-down\"\r\n                  id=\"dropdownLabel\"\r\n                  [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n      </ng-template>\r\n    </p-autoComplete>\r\n\r\n  <p-multiSelect\r\n    *ngIf=\"isMultiselect\"\r\n    [inputId]=\"name\"\r\n    (onChange)='getSelectedValue($event)'\r\n    [options]=\"optionList\"\r\n    [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n    [formControlName]=\"controlName\"\r\n    [group]=\"nestedGroup\"\r\n    [filter]='filter'\r\n    [filterBy]='filterBy'\r\n    [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n    [placeholder]=\"placeholder\"\r\n    [showClear]=\"group.get(controlName)!.value && showClear\"\r\n    [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyAutocompleteMessage\"\r\n    [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n    [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n    [attr.aria-required]=\"isRequired\"\r\n  >\r\n    <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n      <div class=\"flex align-items-center\">\r\n        <span>{{ nestedGroup.label }}</span>\r\n      </div>\r\n    </ng-template>\r\n  </p-multiSelect>\r\n  <lib-error\r\n    *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name+'Error'\"\r\n  ></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}\n"] }]
+                    ], template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n  <div class=\"flex\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"\r\n    ></lib-tooltip>\r\n  </div>\r\n    <p-autoComplete *ngIf=\"!isMultiselect\"\r\n      [inputId]=\"name\"\r\n      [dropdown]=\"true\"\r\n      [forceSelection]=\"forceSelection\"\r\n      [virtualScroll]=\"virtualScroll\"\r\n      [virtualScrollItemSize]=\"38\"\r\n      [suggestions]=\"filteredOptions\"\r\n      (completeMethod)=\"completeMethod($event)\"\r\n      [appendTo]=\"appendTo\"\r\n      [optionLabel]=\"filterBy\"\r\n      [formControlName]=\"controlName\"\r\n      [placeholder]='placeholder'\r\n    >\r\n      <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n        <div class=\"flex align-items-center\">\r\n          <span>{{ nestedGroup.label }}</span>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <!-- custom template for button - dropdownicon | aria support -->\r\n      <ng-template pTemplate=\"dropdownicon\">\r\n            <span class=\"p-button-icon pi pi-chevron-down\"\r\n                  id=\"dropdownLabel\"\r\n                  [attr.aria-label]=\"ariaFilterLabel\"></span>\r\n      </ng-template>\r\n    </p-autoComplete>\r\n\r\n  <p-multiSelect\r\n    *ngIf=\"isMultiselect\"\r\n    [inputId]=\"name\"\r\n    (onChange)='getSelectedValue($event)'\r\n    [options]=\"optionList\"\r\n    [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n    [formControlName]=\"controlName\"\r\n    [group]=\"nestedGroup\"\r\n    [filter]='filter'\r\n    [filterBy]='filterBy'\r\n    [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n    [placeholder]=\"placeholder\"\r\n    [showClear]=\"group.get(controlName)!.value && showClear\"\r\n    [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyAutocompleteMessage\"\r\n    [emptyFilterMessage]=\"emptyFilterAutocompleteMessage\"\r\n    [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n    [attr.aria-required]=\"isRequired\"\r\n  >\r\n    <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n      <div class=\"flex align-items-center\">\r\n        <span>{{ nestedGroup.label }}</span>\r\n      </div>\r\n    </ng-template>\r\n  </p-multiSelect>\r\n  <lib-error\r\n    *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name+'Error'\"\r\n  ></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-autocomplete{width:100%;border:1.75px solid #3E7C94!important;border:0;border-radius:10px}:host ::ng-deep .p-autocomplete::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-autocomplete:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-autocomplete:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-autocomplete button{background-color:#3e7c94}:host ::ng-deep .p-autocomplete button:hover{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-autocomplete .p-autocomplete-item.p-ripple{white-space:normal}:host ::ng-deep .p-autocomplete:hover{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete:not(.p-disabled).p-focus{border:0;box-shadow:0 0 1px 1px #ffa142}:host ::ng-deep .p-autocomplete .p-autocomplete-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-autocomplete .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group:hover{cursor:default}:host ::ng-deep .p-autocomplete .p-button{width:3.5rem;border-radius:0 8px 8px 0}:host ::ng-deep .p-autocomplete .p-inputtext{border-radius:8px 0 0 8px}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { name: [{
                 type: Input
             }], isMultiselect: [{
@@ -1250,6 +1290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], emptyMessage: [{
                 type: Input
+            }], virtualScroll: [{
+                type: Input
             }], ariaFilterLabel: [{
                 type: Input
             }], getValueEvent: [{
@@ -3672,9 +3714,6 @@ class TreeSelectComponent {
     constructor(translateService) {
         this.translateService = translateService;
     }
-    ngOnChanges(changes) {
-        console.log("option list:: ", this.optionList);
-    }
     getSelectedValue(event) {
         this.getValueEvent.emit(event);
     }
@@ -3696,7 +3735,7 @@ class TreeSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeSelectComponent, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TreeSelectComponent, isStandalone: true, selector: "lib-tree-select[group][controlName][name]", inputs: { name: "name", group: "group", controlName: "controlName", label: "label", optionList: "optionList", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", isMultiselect: "isMultiselect", showClear: "showClear", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", isLoading: "isLoading", appendTo: "appendTo", isLabelVisible: "isLabelVisible", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll" }, outputs: { getValueEvent: "getValueEvent", getUnselectedValueEvent: "getUnselectedValueEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n  <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"></lib-tooltip>\r\n  </div>\r\n  <p-treeselect\r\n    [ngClass]=\"{\r\n      'ng-dirty':\r\n        (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n        formStatus!.isSubmitTriggered ||\r\n        formStatus!.isNestedFormSubmit!\r\n    }\"\r\n    [inputId]=\"name\"\r\n    [appendTo]=\"appendTo\"\r\n    (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n    (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n    [options]=\"optionList\"\r\n    [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControlName]=\"controlName\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [virtualScrollItemSize]=\"38\"\r\n    [filter]=\"filter\"\r\n    [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"\r\n      group.get(controlName)!.errors &&\r\n      (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n    \"\r\n    [attr.aria-required]=\"isRequired\"\r\n    [showClear]=\"group.get(controlName)?.value && showClear\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyDropdownMessage\"\r\n    containerStyleClass=\"w-full\"\r\n    [showClear]=\"false\"\r\n>\r\n  </p-treeselect>\r\n\r\n  <lib-error\r\n    *ngIf=\"\r\n      (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n      formStatus!.isSubmitTriggered ||\r\n      formStatus!.isNestedFormSubmit!\r\n    \"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name + 'Error'\"></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}::ng-deep li.node-disabled .p-tree-node-label{opacity:.4;color:#999}::ng-deep li.node-disabled .p-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i3$2.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "fluid", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "size", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TreeSelectComponent, isStandalone: true, selector: "lib-tree-select[group][controlName][name]", inputs: { name: "name", group: "group", controlName: "controlName", label: "label", optionList: "optionList", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", isMultiselect: "isMultiselect", showClear: "showClear", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", isLoading: "isLoading", appendTo: "appendTo", isLabelVisible: "isLabelVisible", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll" }, outputs: { getValueEvent: "getValueEvent", getUnselectedValueEvent: "getUnselectedValueEvent" }, ngImport: i0, template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n  <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"></lib-tooltip>\r\n  </div>\r\n  <p-treeselect\r\n    [ngClass]=\"{\r\n      'ng-dirty':\r\n        (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n        formStatus!.isSubmitTriggered ||\r\n        formStatus!.isNestedFormSubmit!\r\n    }\"\r\n    [inputId]=\"name\"\r\n    [appendTo]=\"appendTo\"\r\n    (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n    (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n    [options]=\"optionList\"\r\n    [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControlName]=\"controlName\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [virtualScrollItemSize]=\"38\"\r\n    [filter]=\"filter\"\r\n    [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"\r\n      group.get(controlName)!.errors &&\r\n      (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n    \"\r\n    [attr.aria-required]=\"isRequired\"\r\n    [showClear]=\"group.get(controlName)?.value && showClear\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyDropdownMessage\"\r\n    containerStyleClass=\"w-full\"\r\n>\r\n  </p-treeselect>\r\n\r\n  <lib-error\r\n    *ngIf=\"\r\n      (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n      formStatus!.isSubmitTriggered ||\r\n      formStatus!.isNestedFormSubmit!\r\n    \"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name + 'Error'\"></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}::ng-deep li.node-disabled .p-tree-node-label{opacity:.4;color:#999}::ng-deep li.node-disabled .p-checkbox{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "ngmodule", type: TreeSelectModule }, { kind: "component", type: i3$2.TreeSelect, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: ["inputId", "scrollHeight", "disabled", "metaKeySelection", "variant", "display", "selectionMode", "tabindex", "ariaLabel", "ariaLabelledBy", "placeholder", "panelClass", "panelStyle", "fluid", "panelStyleClass", "containerStyle", "containerStyleClass", "labelStyle", "labelStyleClass", "overlayOptions", "emptyMessage", "appendTo", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "propagateSelectionDown", "propagateSelectionUp", "showClear", "resetFilterOnHide", "virtualScroll", "virtualScrollItemSize", "size", "virtualScrollOptions", "autofocus", "options", "showTransitionOptions", "hideTransitionOptions", "loading"], outputs: ["onNodeExpand", "onNodeCollapse", "onShow", "onHide", "onClear", "onFilter", "onFocus", "onBlur", "onNodeUnselect", "onNodeSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TreeSelectComponent, decorators: [{
             type: Component,
@@ -3708,7 +3747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         TreeSelectModule,
                         NgClass,
                         ErrorComponent,
-                    ], template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n  <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"></lib-tooltip>\r\n  </div>\r\n  <p-treeselect\r\n    [ngClass]=\"{\r\n      'ng-dirty':\r\n        (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n        formStatus!.isSubmitTriggered ||\r\n        formStatus!.isNestedFormSubmit!\r\n    }\"\r\n    [inputId]=\"name\"\r\n    [appendTo]=\"appendTo\"\r\n    (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n    (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n    [options]=\"optionList\"\r\n    [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControlName]=\"controlName\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [virtualScrollItemSize]=\"38\"\r\n    [filter]=\"filter\"\r\n    [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"\r\n      group.get(controlName)!.errors &&\r\n      (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n    \"\r\n    [attr.aria-required]=\"isRequired\"\r\n    [showClear]=\"group.get(controlName)?.value && showClear\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyDropdownMessage\"\r\n    containerStyleClass=\"w-full\"\r\n    [showClear]=\"false\"\r\n>\r\n  </p-treeselect>\r\n\r\n  <lib-error\r\n    *ngIf=\"\r\n      (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n      formStatus!.isSubmitTriggered ||\r\n      formStatus!.isNestedFormSubmit!\r\n    \"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name + 'Error'\"></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}::ng-deep li.node-disabled .p-tree-node-label{opacity:.4;color:#999}::ng-deep li.node-disabled .p-checkbox{pointer-events:none}\n"] }]
+                    ], template: "<div class=\"flex flex-column gap-1\" [formGroup]=\"group\">\r\n  <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n    <label [for]=\"name\" class=\"mr-2\">\r\n      {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n    </label>\r\n    <lib-tooltip\r\n      *ngIf=\"_isTooltipVisible\"\r\n      [position]=\"tooltipPosition\"\r\n      [text]=\"tooltipText!\"></lib-tooltip>\r\n  </div>\r\n  <p-treeselect\r\n    [ngClass]=\"{\r\n      'ng-dirty':\r\n        (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n        formStatus!.isSubmitTriggered ||\r\n        formStatus!.isNestedFormSubmit!\r\n    }\"\r\n    [inputId]=\"name\"\r\n    [appendTo]=\"appendTo\"\r\n    (onNodeSelect)=\"getSelectedValue($event.node)\"\r\n    (onNodeUnselect)=\"getUnselectedValue($event.node)\"\r\n    [options]=\"optionList\"\r\n    [selectionMode]=\"isMultiselect ? 'multiple' : 'single'\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControlName]=\"controlName\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [virtualScrollItemSize]=\"38\"\r\n    [filter]=\"filter\"\r\n    [virtualScrollOptions]=\"{ scrollHeight: '250px' }\"\r\n    [attr.aria-describedby]=\"name + 'Error'\"\r\n    [attr.aria-invalid]=\"\r\n      group.get(controlName)!.errors &&\r\n      (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)\r\n    \"\r\n    [attr.aria-required]=\"isRequired\"\r\n    [showClear]=\"group.get(controlName)?.value && showClear\"\r\n    [attr.aria-label]=\"accessibilityText\"\r\n    (onClear)=\"onClear()\"\r\n    [emptyMessage]=\"emptyDropdownMessage\"\r\n    containerStyleClass=\"w-full\"\r\n>\r\n  </p-treeselect>\r\n\r\n  <lib-error\r\n    *ngIf=\"\r\n      (group.get(controlName)!.errors && group.get(controlName)!.touched) ||\r\n      formStatus!.isSubmitTriggered ||\r\n      formStatus!.isNestedFormSubmit!\r\n    \"\r\n    [hasError]=\"group.get(controlName)!.errors\"\r\n    [isDirty]=\"group.get(controlName)!.pristine\"\r\n    [isTouched]=\"group.get(controlName)!.touched\"\r\n    [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n    [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n    [errorId]=\"name + 'Error'\"></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}::ng-deep li.node-disabled .p-tree-node-label{opacity:.4;color:#999}::ng-deep li.node-disabled .p-checkbox{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.TranslateService }], propDecorators: { name: [{
                 type: Input
             }], group: [{