keevo-components 1.8.396 → 1.8.397

package/esm2022/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.mjs

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, input, Input, Output, signal, viewChild } from '@angular/core';
+import { Component, computed, EventEmitter, HostListener, input, Input, Output, signal, viewChild } from '@angular/core';
 import { BaseComponentDropDown } from '../../../api/base-components/base-component-dropdown';
 import { ComponentProviders } from '../../../api/helpers/component-providers';
 import * as i0 from "@angular/core";
@@ -19,25 +19,26 @@ export class KvDropdownComponent extends BaseComponentDropDown {
         this.filterPlaceholder = '';
         this.placeholder = ' ';
         this.virtualScroll = false;
-        this.appendTo = input();
+        this.appendTo = input('body');
+        this.windowSize = signal(window.innerWidth);
         this.onLazyLoad = new EventEmitter();
         this.pDropDown = viewChild('pdropdown');
-        this.pDropDownWidth = signal('');
-    }
-    setDropdownWitdh() {
-        const el = this.pDropDown().el.nativeElement;
-        const dimensions = el.getBoundingClientRect();
-        this.pDropDownWidth.set(`${dimensions.width}` + 'px');
+        // pDropDownWidth = signal<string>('');
+        this.pDropDownWidth = computed(() => {
+            const windowSize = this.windowSize(); //Apenas para forçar a atualizaçaõ do valor
+            const el = this.pDropDown().el.nativeElement;
+            const dimensions = el.getBoundingClientRect();
+            return `${dimensions.width}` + 'px';
+        });
     }
     ngOnInit() {
         super.ngOnInit();
         if (this.dropDowValue)
             this.value = this.dropDowValue;
         this.capitalizeOptions(this.options);
-        this.setDropdownWitdh();
     }
     onWindowResize() {
-        this.setDropdownWitdh();
+        this.windowSize.set(window.innerWidth);
     }
     onInputLazyLoad(event) {
         this.onLazyLoad.emit(event);
@@ -68,4 +69,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2Vldm8tY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMva3YtaW5wdXRzL2t2LWRyb3Bkb3duL2t2LWRyb3Bkb3duLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1kcm9wZG93bi9rdi1kcm9wZG93bi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUNMLEtBQUssRUFFTCxNQUFNLEVBQ04sTUFBTSxFQUVOLFNBQVMsRUFDVixNQUFNLGVBQWUsQ0FBQztBQUl2QixPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQztBQUM3RixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQzs7Ozs7Ozs7Ozs7OztBQVk5RSxNQUFNLE9BQU8sbUJBQW9CLFNBQVEscUJBQXFCO0lBQzVELFlBQ0UsZ0JBQWtDLEVBQ2xDLGFBQTRCO1FBQzVCLEtBQUssQ0FBQyxnQkFBZ0IsRUFBRSxhQUFhLENBQUMsQ0FBQztRQUdoQyxzQkFBaUIsR0FBVyxFQUFFLENBQUM7UUFDdEIsZ0JBQVcsR0FBVyxHQUFHLENBQUM7UUFLbkMsa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFHeEMsYUFBUSxHQUFRLEtBQUssRUFBTyxDQUFDO1FBRW5CLGVBQVUsR0FBc0IsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU3RCxjQUFTLEdBQUcsU0FBUyxDQUFNLFdBQVcsQ0FBQyxDQUFDO1FBRXhDLG1CQUFjLEdBQUcsTUFBTSxDQUFTLEVBQUUsQ0FBQyxDQUFDO0lBakJwQyxDQUFDO0lBbUJELGdCQUFnQjtRQUNkLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxFQUFFLENBQUMsYUFBNEIsQ0FBQztRQUM1RCxNQUFNLFVBQVUsR0FBRyxFQUFFLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUM5QyxJQUFJLENBQUMsY0FBYyxDQUFDLEdBQUcsQ0FBQyxHQUFHLFVBQVUsQ0FBQyxLQUFLLEVBQUUsR0FBQyxJQUFJLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRVEsUUFBUTtRQUNmLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixJQUFJLElBQUksQ0FBQyxZQUFZO1lBQUUsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1FBRXRELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUdNLGNBQWM7UUFDbkIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUdELGVBQWUsQ0FBQyxLQUFVO1FBQ3hCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7OEdBOUNVLG1CQUFtQjtrR0FBbkIsbUJBQW1CLGswQ0FGbkIsa0JBQWtCLENBQUMsbUJBQW1CLENBQUMseUtDM0JwRCx1cEZBbUZBOzsyRkR0RGEsbUJBQW1CO2tCQVQvQixTQUFTOytCQUNFLGFBQWEsYUFNWixrQkFBa0IscUJBQXFCO2lIQVN6QyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ1ksV0FBVztzQkFBNUIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csb0JBQW9CO3NCQUE1QixLQUFLO2dCQUVHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0cscUJBQXFCO3NCQUE3QixLQUFLO2dCQUlJLFVBQVU7c0JBQW5CLE1BQU07Z0JBcUJBLGNBQWM7c0JBRHBCLFlBQVk7dUJBQUMsZUFBZSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgY29tcHV0ZWQsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIEhvc3RMaXN0ZW5lcixcclxuICBpbnB1dCxcclxuICBJbnB1dCxcclxuICBPbkluaXQsXHJcbiAgT3V0cHV0LFxyXG4gIHNpZ25hbCxcclxuICBUZW1wbGF0ZVJlZixcclxuICB2aWV3Q2hpbGRcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IERpYWxvZ1NlcnZpY2UgfSBmcm9tICdwcmltZW5nL2R5bmFtaWNkaWFsb2cnO1xyXG5cclxuaW1wb3J0IHsgQmFzZUNvbXBvbmVudERyb3BEb3duIH0gZnJvbSAnLi4vLi4vLi4vYXBpL2Jhc2UtY29tcG9uZW50cy9iYXNlLWNvbXBvbmVudC1kcm9wZG93bic7XHJcbmltcG9ydCB7IENvbXBvbmVudFByb3ZpZGVycyB9IGZyb20gJy4uLy4uLy4uL2FwaS9oZWxwZXJzL2NvbXBvbmVudC1wcm92aWRlcnMnO1xyXG5pbXBvcnQgeyBDb21wb25lbnRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vYXBpL3NlcnZpY2VzL2NvbXBvbmVudC5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAna3YtZHJvcGRvd24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9rdi1kcm9wZG93bi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbXHJcbiAgICAnLi9rdi1kcm9wZG93bi5jb21wb25lbnQuc2NzcycsXHJcbiAgICAnLi4vLi4va2Vldm8tY29tcG9uZW50cy1zdHlsZXMuc2NzcydcclxuICBdLFxyXG4gIHByb3ZpZGVyczogQ29tcG9uZW50UHJvdmlkZXJzKEt2RHJvcGRvd25Db21wb25lbnQpLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgS3ZEcm9wZG93bkNvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnREcm9wRG93biBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBjb21wb25lbnRTZXJ2aWNlOiBDb21wb25lbnRTZXJ2aWNlLFxyXG4gICAgZGlhbG9nU2VydmljZTogRGlhbG9nU2VydmljZSkge1xyXG4gICAgc3VwZXIoY29tcG9uZW50U2VydmljZSwgZGlhbG9nU2VydmljZSk7XHJcbiAgfVxyXG5cclxuICBASW5wdXQoKSBmaWx0ZXJQbGFjZWhvbGRlcjogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgb3ZlcnJpZGUgcGxhY2Vob2xkZXI6IHN0cmluZyA9ICcgJztcclxuICBASW5wdXQoKSBkcm9wRG93VmFsdWUhOiBhbnk7XHJcbiAgQElucHV0KCkgaXRlbVRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55PjtcclxuICBASW5wdXQoKSBzZWxlY3RlZEl0ZW1UZW1wbGF0ZSE6IFRlbXBsYXRlUmVmPGFueT47XHJcblxyXG4gIEBJbnB1dCgpIHZpcnR1YWxTY3JvbGw6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSB2aXJ0dWFsU2Nyb2xsSXRlbVNpemUhOiBudW1iZXI7XHJcblxyXG4gIGFwcGVuZFRvOiBhbnkgPSBpbnB1dDxhbnk+KCk7XHJcblxyXG4gIEBPdXRwdXQoKSBvbkxhenlMb2FkOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgcERyb3BEb3duID0gdmlld0NoaWxkPGFueT4oJ3Bkcm9wZG93bicpO1xyXG5cclxuICBwRHJvcERvd25XaWR0aCA9IHNpZ25hbDxzdHJpbmc+KCcnKTtcclxuXHJcbiAgc2V0RHJvcGRvd25XaXRkaCgpOiB2b2lkIHtcclxuICAgIGNvbnN0IGVsID0gdGhpcy5wRHJvcERvd24oKS5lbC5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50O1xyXG4gICAgY29uc3QgZGltZW5zaW9ucyA9IGVsLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgdGhpcy5wRHJvcERvd25XaWR0aC5zZXQoYCR7ZGltZW5zaW9ucy53aWR0aH1gKydweCcpO1xyXG4gIH1cclxuXHJcbiAgb3ZlcnJpZGUgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xyXG4gICAgaWYgKHRoaXMuZHJvcERvd1ZhbHVlKSB0aGlzLnZhbHVlID0gdGhpcy5kcm9wRG93VmFsdWU7XHJcblxyXG4gICAgdGhpcy5jYXBpdGFsaXplT3B0aW9ucyh0aGlzLm9wdGlvbnMpO1xyXG4gICAgdGhpcy5zZXREcm9wZG93bldpdGRoKCk7XHJcbiAgfVxyXG5cclxuICBASG9zdExpc3RlbmVyKCd3aW5kb3c6cmVzaXplJywgWyckZXZlbnQnXSlcclxuICBwdWJsaWMgb25XaW5kb3dSZXNpemUoKSB7XHJcbiAgICB0aGlzLnNldERyb3Bkb3duV2l0ZGgoKTtcclxuICB9XHJcblxyXG5cclxuICBvbklucHV0TGF6eUxvYWQoZXZlbnQ6IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5vbkxhenlMb2FkLmVtaXQoZXZlbnQpO1xyXG4gIH1cclxufVxyXG4iLCI8c3Bhbj5cclxuICA8a3YtbGFiZWxcclxuICAgIFtjb21wb25lbnRJZF09XCJjb21wb25lbnRJZFwiXHJcbiAgICBbbGFiZWxdPVwibGFiZWwgJiYgbGFiZWwgKyAoc2hvd0FzdGVyaXNrID8gJyonIDogJycpXCJcclxuICAvPlxyXG5cclxuICA8cC1kcm9wZG93blxyXG4gICAgI3Bkcm9wZG93blxyXG4gICAgW2FwcGVuZFRvXT1cImFwcGVuZFRvKClcIlxyXG4gICAgc2Nyb2xsSGVpZ2h0PVwiMjUwcHhcIlxyXG4gICAgc3R5bGVDbGFzcz1cImlucHV0c1wiXHJcbiAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcclxuICAgIFtjbGFzc109XCJiYXNlSW5wdXRDbGFzc1wiXHJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgW2VtcHR5TWVzc2FnZV09XCJlbXB0eU1lc3NhZ2UoKVwiXHJcbiAgICBbZmlsdGVyXT1cImZpbHRlclwiXHJcbiAgICBbZ3JvdXBdPVwiZ3JvdXBcIlxyXG4gICAgW2lucHV0SWRdPVwiY29tcG9uZW50SWRcIlxyXG4gICAgW2xhenldPVwibGF6eVwiXHJcbiAgICBbbG9hZGluZ109XCJsb2FkaW5nXCJcclxuICAgIFtvcHRpb25EaXNhYmxlZF09XCJvcHRpb25EaXNhYmxlZFwiXHJcbiAgICBbb3B0aW9uR3JvdXBDaGlsZHJlbl09XCJvcHRpb25Hcm91cENoaWxkcmVuXCJcclxuICAgIFtvcHRpb25Hcm91cExhYmVsXT1cIm9wdGlvbkdyb3VwTGFiZWxcIlxyXG4gICAgW29wdGlvbkxhYmVsXT1cIm9wdGlvbkxhYmVsXCJcclxuICAgIFtvcHRpb25zXT1cImZpbHRlcmVkT3B0aW9uc1wiXHJcbiAgICBbb3B0aW9uVmFsdWVdPVwib3B0aW9uVmFsdWVcIlxyXG4gICAgW3BhbmVsU3R5bGVdPVwieyB3aWR0aDogcERyb3BEb3duV2lkdGgoKSB9XCJcclxuICAgIFtzaG93Q2xlYXJdPVwic2hvd0NsZWFyXCIgICAgXHJcbiAgICBbZmlsdGVyUGxhY2Vob2xkZXJdPVwiZmlsdGVyUGxhY2Vob2xkZXJcIlxyXG4gICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcclxuICAgIChvbkJsdXIpPVwib25JbnB1dEJsdXIoJGV2ZW50KVwiXHJcbiAgICAob25DaGFuZ2UpPVwib25JbnB1dENoYW5nZSgkZXZlbnQpXCJcclxuICAgIChvbkNsaWNrKT1cIm9uSW5wdXRDbGljaygkZXZlbnQpXCJcclxuICAgIChvbkZpbHRlcik9XCJvbklucHV0RmlsdGVyKCRldmVudClcIlxyXG4gICAgKG9uTGF6eUxvYWQpPVwib25JbnB1dExhenlMb2FkKCRldmVudClcIlxyXG4gICAgW3ZpcnR1YWxTY3JvbGxdPVwidmlydHVhbFNjcm9sbFwiXHJcbiAgICBbdmlydHVhbFNjcm9sbEl0ZW1TaXplXT1cInZpcnR1YWxTY3JvbGxJdGVtU2l6ZVwiICAgIFxyXG4gID5cclxuICAgIDxuZy10ZW1wbGF0ZSAqbmdJZj1cInNob3dBZGRCdXR0b25cIiBwVGVtcGxhdGU9XCJmb290ZXJcIj5cclxuICAgICAgPHAtZGl2aWRlcj48L3AtZGl2aWRlcj5cclxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC13cmFwIGNhcmQtY29udGFpbmVyIHAtMVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGp1c3RpZnktY29udGVudC1jZW50ZXJcIj5cclxuICAgICAgICAgIDxidXR0b25cclxuICAgICAgICAgICAgcEJ1dHRvblxyXG4gICAgICAgICAgICBsYWJlbD1cIkluY2x1aXJcIlxyXG4gICAgICAgICAgICBwVG9vbHRpcD1cIkNsaXF1ZSBhcXVpIHBhcmEgaW5jbHVpciB1bSBub3ZvIHJlZ2lzdHJvXCJcclxuICAgICAgICAgICAgdG9vbHRpcFBvc2l0aW9uPVwiYm90dG9tXCJcclxuICAgICAgICAgICAgaWNvbj1cInBpIHBpLXBsdXNcIlxyXG4gICAgICAgICAgICBjbGFzcz1cInAtYnV0dG9uLXJvdW5kZWQgcC1idXR0b24tc3VjY2VzcyBtci0yXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cImFkZENsaWNrKCRldmVudClcIlxyXG4gICAgICAgICAgPjwvYnV0dG9uPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvbmctdGVtcGxhdGU+XHJcblxyXG4gICAgPCEtLSA6OiAtLT5cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgbGV0LWl0ZW0gcFRlbXBsYXRlPVwiaXRlbVwiICpuZ0lmPVwiaXRlbVRlbXBsYXRlXCI+XHJcbiAgICAgIDxuZy1jb250YWluZXJcclxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJpdGVtVGVtcGxhdGVcIlxyXG4gICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogaXRlbSB9XCJcclxuICAgICAgPlxyXG4gICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvbmctdGVtcGxhdGU+XHJcblxyXG4gICAgPG5nLXRlbXBsYXRlXHJcbiAgICAgIGxldC1zZWxlY3RlZEl0ZW1cclxuICAgICAgcFRlbXBsYXRlPVwic2VsZWN0ZWRJdGVtXCJcclxuICAgICAgKm5nSWY9XCJzZWxlY3RlZEl0ZW1UZW1wbGF0ZVwiXHJcbiAgICA+XHJcbiAgICAgIDxuZy1jb250YWluZXJcclxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJzZWxlY3RlZEl0ZW1UZW1wbGF0ZVwiXHJcbiAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiBzZWxlY3RlZEl0ZW0gfVwiXHJcbiAgICAgID5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDwhLS0gOjogLS0+XHJcbiAgPC9wLWRyb3Bkb3duPlxyXG5cclxuICA8a3YtZXJyb3IgW2hhc0Vycm9yXT1cImhhc0NvbnRyb2xFcnJvcigpXCI+e3sgZXJyb01lc3NhZ2UoKSB9fTwva3YtZXJyb3I+XHJcbjwvc3Bhbj5cclxuPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2Vldm8tY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMva3YtaW5wdXRzL2t2LWRyb3Bkb3duL2t2LWRyb3Bkb3duLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1kcm9wZG93bi9rdi1kcm9wZG93bi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFFBQVEsRUFDUixZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxLQUFLLEVBRUwsTUFBTSxFQUNOLE1BQU0sRUFFTixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFJdkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sc0RBQXNELENBQUM7QUFDN0YsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMENBQTBDLENBQUM7Ozs7Ozs7Ozs7Ozs7QUFZOUUsTUFBTSxPQUFPLG1CQUFvQixTQUFRLHFCQUFxQjtJQUM1RCxZQUNFLGdCQUFrQyxFQUNsQyxhQUE0QjtRQUM1QixLQUFLLENBQUMsZ0JBQWdCLEVBQUUsYUFBYSxDQUFDLENBQUM7UUFHaEMsc0JBQWlCLEdBQVcsRUFBRSxDQUFDO1FBQ3RCLGdCQUFXLEdBQVcsR0FBRyxDQUFDO1FBS25DLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBR3hDLGFBQVEsR0FBUSxLQUFLLENBQU0sTUFBTSxDQUFDLENBQUM7UUFFbkMsZUFBVSxHQUFHLE1BQU0sQ0FBUyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFckMsZUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTdELGNBQVMsR0FBRyxTQUFTLENBQU0sV0FBVyxDQUFDLENBQUM7UUFFeEMsdUNBQXVDO1FBQ3ZDLG1CQUFjLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUM3QixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQywyQ0FBMkM7WUFFakYsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxhQUE0QixDQUFDO1lBQzVELE1BQU0sVUFBVSxHQUFHLEVBQUUsQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1lBQzlDLE9BQU0sR0FBRyxVQUFVLENBQUMsS0FBSyxFQUFFLEdBQUMsSUFBSSxDQUFDO1FBQ25DLENBQUMsQ0FBQyxDQUFDO0lBMUJILENBQUM7SUE2QlEsUUFBUTtRQUNmLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixJQUFJLElBQUksQ0FBQyxZQUFZO1lBQUUsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDO1FBRXRELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUdNLGNBQWM7UUFDbkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFHRCxlQUFlLENBQUMsS0FBVTtRQUN4QixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDOzhHQWpEVSxtQkFBbUI7a0dBQW5CLG1CQUFtQixrMENBRm5CLGtCQUFrQixDQUFDLG1CQUFtQixDQUFDLHlLQzNCcEQsdXBGQW1GQTs7MkZEdERhLG1CQUFtQjtrQkFUL0IsU0FBUzsrQkFDRSxhQUFhLGFBTVosa0JBQWtCLHFCQUFxQjtpSEFTekMsaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNZLFdBQVc7c0JBQTVCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLG9CQUFvQjtzQkFBNUIsS0FBSztnQkFFRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLHFCQUFxQjtzQkFBN0IsS0FBSztnQkFNSSxVQUFVO3NCQUFuQixNQUFNO2dCQXNCQSxjQUFjO3NCQURwQixZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIGNvbXB1dGVkLFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBIb3N0TGlzdGVuZXIsXHJcbiAgaW5wdXQsXHJcbiAgSW5wdXQsXHJcbiAgT25Jbml0LFxyXG4gIE91dHB1dCxcclxuICBzaWduYWwsXHJcbiAgVGVtcGxhdGVSZWYsXHJcbiAgdmlld0NoaWxkXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBEaWFsb2dTZXJ2aWNlIH0gZnJvbSAncHJpbWVuZy9keW5hbWljZGlhbG9nJztcclxuXHJcbmltcG9ydCB7IEJhc2VDb21wb25lbnREcm9wRG93biB9IGZyb20gJy4uLy4uLy4uL2FwaS9iYXNlLWNvbXBvbmVudHMvYmFzZS1jb21wb25lbnQtZHJvcGRvd24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnRQcm92aWRlcnMgfSBmcm9tICcuLi8uLi8uLi9hcGkvaGVscGVycy9jb21wb25lbnQtcHJvdmlkZXJzJztcclxuaW1wb3J0IHsgQ29tcG9uZW50U2VydmljZSB9IGZyb20gJy4uLy4uLy4uL2FwaS9zZXJ2aWNlcy9jb21wb25lbnQuc2VydmljZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2t2LWRyb3Bkb3duJyxcclxuICB0ZW1wbGF0ZVVybDogJy4va3YtZHJvcGRvd24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogW1xyXG4gICAgJy4va3YtZHJvcGRvd24uY29tcG9uZW50LnNjc3MnLFxyXG4gICAgJy4uLy4uL2tlZXZvLWNvbXBvbmVudHMtc3R5bGVzLnNjc3MnXHJcbiAgXSxcclxuICBwcm92aWRlcnM6IENvbXBvbmVudFByb3ZpZGVycyhLdkRyb3Bkb3duQ29tcG9uZW50KSxcclxufSlcclxuZXhwb3J0IGNsYXNzIEt2RHJvcGRvd25Db21wb25lbnQgZXh0ZW5kcyBCYXNlQ29tcG9uZW50RHJvcERvd24gaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgY29tcG9uZW50U2VydmljZTogQ29tcG9uZW50U2VydmljZSxcclxuICAgIGRpYWxvZ1NlcnZpY2U6IERpYWxvZ1NlcnZpY2UpIHtcclxuICAgIHN1cGVyKGNvbXBvbmVudFNlcnZpY2UsIGRpYWxvZ1NlcnZpY2UpO1xyXG4gIH1cclxuXHJcbiAgQElucHV0KCkgZmlsdGVyUGxhY2Vob2xkZXI6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIG92ZXJyaWRlIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnICc7XHJcbiAgQElucHV0KCkgZHJvcERvd1ZhbHVlITogYW55O1xyXG4gIEBJbnB1dCgpIGl0ZW1UZW1wbGF0ZSE6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgQElucHV0KCkgc2VsZWN0ZWRJdGVtVGVtcGxhdGUhOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICBASW5wdXQoKSB2aXJ0dWFsU2Nyb2xsOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgdmlydHVhbFNjcm9sbEl0ZW1TaXplITogbnVtYmVyO1xyXG5cclxuICBhcHBlbmRUbzogYW55ID0gaW5wdXQ8YW55PignYm9keScpO1xyXG5cclxuICB3aW5kb3dTaXplID0gc2lnbmFsPG51bWJlcj4od2luZG93LmlubmVyV2lkdGgpO1xyXG5cclxuICBAT3V0cHV0KCkgb25MYXp5TG9hZDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIHBEcm9wRG93biA9IHZpZXdDaGlsZDxhbnk+KCdwZHJvcGRvd24nKTtcclxuXHJcbiAgLy8gcERyb3BEb3duV2lkdGggPSBzaWduYWw8c3RyaW5nPignJyk7XHJcbiAgcERyb3BEb3duV2lkdGggPSBjb21wdXRlZCgoKSA9PiB7XHJcbiAgICBjb25zdCB3aW5kb3dTaXplID0gdGhpcy53aW5kb3dTaXplKCk7IC8vQXBlbmFzIHBhcmEgZm9yw6dhciBhIGF0dWFsaXphw6dhw7UgZG8gdmFsb3JcclxuXHJcbiAgICBjb25zdCBlbCA9IHRoaXMucERyb3BEb3duKCkuZWwubmF0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudDtcclxuICAgIGNvbnN0IGRpbWVuc2lvbnMgPSBlbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgIHJldHVybmAke2RpbWVuc2lvbnMud2lkdGh9YCsncHgnO1xyXG4gIH0pO1xyXG5cclxuXHJcbiAgb3ZlcnJpZGUgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xyXG4gICAgaWYgKHRoaXMuZHJvcERvd1ZhbHVlKSB0aGlzLnZhbHVlID0gdGhpcy5kcm9wRG93VmFsdWU7XHJcblxyXG4gICAgdGhpcy5jYXBpdGFsaXplT3B0aW9ucyh0aGlzLm9wdGlvbnMpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScsIFsnJGV2ZW50J10pXHJcbiAgcHVibGljIG9uV2luZG93UmVzaXplKCkge1xyXG4gICAgdGhpcy53aW5kb3dTaXplLnNldCh3aW5kb3cuaW5uZXJXaWR0aCk7XHJcbiAgfVxyXG5cclxuXHJcbiAgb25JbnB1dExhenlMb2FkKGV2ZW50OiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25MYXp5TG9hZC5lbWl0KGV2ZW50KTtcclxuICB9XHJcbn1cclxuIiwiPHNwYW4+XHJcbiAgPGt2LWxhYmVsXHJcbiAgICBbY29tcG9uZW50SWRdPVwiY29tcG9uZW50SWRcIlxyXG4gICAgW2xhYmVsXT1cImxhYmVsICYmIGxhYmVsICsgKHNob3dBc3RlcmlzayA/ICcqJyA6ICcnKVwiXHJcbiAgLz5cclxuXHJcbiAgPHAtZHJvcGRvd25cclxuICAgICNwZHJvcGRvd25cclxuICAgIFthcHBlbmRUb109XCJhcHBlbmRUbygpXCJcclxuICAgIHNjcm9sbEhlaWdodD1cIjI1MHB4XCJcclxuICAgIHN0eWxlQ2xhc3M9XCJpbnB1dHNcIlxyXG4gICAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiXHJcbiAgICBbY2xhc3NdPVwiYmFzZUlucHV0Q2xhc3NcIlxyXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgIFtlbXB0eU1lc3NhZ2VdPVwiZW1wdHlNZXNzYWdlKClcIlxyXG4gICAgW2ZpbHRlcl09XCJmaWx0ZXJcIlxyXG4gICAgW2dyb3VwXT1cImdyb3VwXCJcclxuICAgIFtpbnB1dElkXT1cImNvbXBvbmVudElkXCJcclxuICAgIFtsYXp5XT1cImxhenlcIlxyXG4gICAgW2xvYWRpbmddPVwibG9hZGluZ1wiXHJcbiAgICBbb3B0aW9uRGlzYWJsZWRdPVwib3B0aW9uRGlzYWJsZWRcIlxyXG4gICAgW29wdGlvbkdyb3VwQ2hpbGRyZW5dPVwib3B0aW9uR3JvdXBDaGlsZHJlblwiXHJcbiAgICBbb3B0aW9uR3JvdXBMYWJlbF09XCJvcHRpb25Hcm91cExhYmVsXCJcclxuICAgIFtvcHRpb25MYWJlbF09XCJvcHRpb25MYWJlbFwiXHJcbiAgICBbb3B0aW9uc109XCJmaWx0ZXJlZE9wdGlvbnNcIlxyXG4gICAgW29wdGlvblZhbHVlXT1cIm9wdGlvblZhbHVlXCJcclxuICAgIFtwYW5lbFN0eWxlXT1cInsgd2lkdGg6IHBEcm9wRG93bldpZHRoKCkgfVwiXHJcbiAgICBbc2hvd0NsZWFyXT1cInNob3dDbGVhclwiICAgIFxyXG4gICAgW2ZpbHRlclBsYWNlaG9sZGVyXT1cImZpbHRlclBsYWNlaG9sZGVyXCJcclxuICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXHJcbiAgICAob25CbHVyKT1cIm9uSW5wdXRCbHVyKCRldmVudClcIlxyXG4gICAgKG9uQ2hhbmdlKT1cIm9uSW5wdXRDaGFuZ2UoJGV2ZW50KVwiXHJcbiAgICAob25DbGljayk9XCJvbklucHV0Q2xpY2soJGV2ZW50KVwiXHJcbiAgICAob25GaWx0ZXIpPVwib25JbnB1dEZpbHRlcigkZXZlbnQpXCJcclxuICAgIChvbkxhenlMb2FkKT1cIm9uSW5wdXRMYXp5TG9hZCgkZXZlbnQpXCJcclxuICAgIFt2aXJ0dWFsU2Nyb2xsXT1cInZpcnR1YWxTY3JvbGxcIlxyXG4gICAgW3ZpcnR1YWxTY3JvbGxJdGVtU2l6ZV09XCJ2aXJ0dWFsU2Nyb2xsSXRlbVNpemVcIiAgICBcclxuICA+XHJcbiAgICA8bmctdGVtcGxhdGUgKm5nSWY9XCJzaG93QWRkQnV0dG9uXCIgcFRlbXBsYXRlPVwiZm9vdGVyXCI+XHJcbiAgICAgIDxwLWRpdmlkZXI+PC9wLWRpdmlkZXI+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtd3JhcCBjYXJkLWNvbnRhaW5lciBwLTFcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyXCI+XHJcbiAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgIHBCdXR0b25cclxuICAgICAgICAgICAgbGFiZWw9XCJJbmNsdWlyXCJcclxuICAgICAgICAgICAgcFRvb2x0aXA9XCJDbGlxdWUgYXF1aSBwYXJhIGluY2x1aXIgdW0gbm92byByZWdpc3Ryb1wiXHJcbiAgICAgICAgICAgIHRvb2x0aXBQb3NpdGlvbj1cImJvdHRvbVwiXHJcbiAgICAgICAgICAgIGljb249XCJwaSBwaS1wbHVzXCJcclxuICAgICAgICAgICAgY2xhc3M9XCJwLWJ1dHRvbi1yb3VuZGVkIHAtYnV0dG9uLXN1Y2Nlc3MgbXItMlwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJhZGRDbGljaygkZXZlbnQpXCJcclxuICAgICAgICAgID48L2J1dHRvbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDwhLS0gOjogLS0+XHJcblxyXG4gICAgPG5nLXRlbXBsYXRlIGxldC1pdGVtIHBUZW1wbGF0ZT1cIml0ZW1cIiAqbmdJZj1cIml0ZW1UZW1wbGF0ZVwiPlxyXG4gICAgICA8bmctY29udGFpbmVyXHJcbiAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwiaXRlbVRlbXBsYXRlXCJcclxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyAkaW1wbGljaXQ6IGl0ZW0gfVwiXHJcbiAgICAgID5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZVxyXG4gICAgICBsZXQtc2VsZWN0ZWRJdGVtXHJcbiAgICAgIHBUZW1wbGF0ZT1cInNlbGVjdGVkSXRlbVwiXHJcbiAgICAgICpuZ0lmPVwic2VsZWN0ZWRJdGVtVGVtcGxhdGVcIlxyXG4gICAgPlxyXG4gICAgICA8bmctY29udGFpbmVyXHJcbiAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwic2VsZWN0ZWRJdGVtVGVtcGxhdGVcIlxyXG4gICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogc2VsZWN0ZWRJdGVtIH1cIlxyXG4gICAgICA+XHJcbiAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuXHJcbiAgICA8IS0tIDo6IC0tPlxyXG4gIDwvcC1kcm9wZG93bj5cclxuXHJcbiAgPGt2LWVycm9yIFtoYXNFcnJvcl09XCJoYXNDb250cm9sRXJyb3IoKVwiPnt7IGVycm9NZXNzYWdlKCkgfX08L2t2LWVycm9yPlxyXG48L3NwYW4+XHJcbjxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuIl19

package/esm2022/lib/components/kv-inputs/kv-multi-select/kv-multi-select.component.mjs

@@ -26,13 +26,14 @@ export class KvMultiSelectComponent extends BaseComponentMultiSelect {
         super(componentService);
         this.group = false;
         this.maxSelectedLabels = 3;
+        this.appendTo = 'body';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvMultiSelectComponent, deps: [{ token: i1.ComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvMultiSelectComponent, selector: "kv-multi-select", inputs: { group: "group", itemTemplate: "itemTemplate", maxSelectedLabels: "maxSelectedLabels", optionInactive: "optionInactive" }, providers: ComponentProviders(KvMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: i5.KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvMultiSelectComponent, selector: "kv-multi-select", inputs: { group: "group", itemTemplate: "itemTemplate", maxSelectedLabels: "maxSelectedLabels", optionInactive: "optionInactive", appendTo: "appendTo" }, providers: ComponentProviders(KvMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n    [appendTo]=\"appendTo\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: i5.KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-multi-select', providers: ComponentProviders(KvMultiSelectComponent), template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
+            args: [{ selector: 'kv-multi-select', providers: ComponentProviders(KvMultiSelectComponent), template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n    [appendTo]=\"appendTo\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.ComponentService }], propDecorators: { group: [{
                 type: Input
             }], itemTemplate: [{
@@ -41,5 +42,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Input
             }], optionInactive: [{
                 type: Input
+            }], appendTo: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1tdWx0aS1zZWxlY3Qva3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1tdWx0aS1zZWxlY3Qva3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUVOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDBEQUEwRCxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDOzs7Ozs7Ozs7QUFZOUUsTUFBTSxPQUFPLHNCQUF1QixTQUFRLHdCQUF3QjtJQVN6RCxRQUFRO1FBQ2YsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckMsSUFBSSxJQUFJLENBQUMsY0FBYyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ2hDLElBQUksQ0FBQyxlQUFlLEdBQUcsVUFBVSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsT0FBZSxFQUFFLEtBQWEsRUFBRSxFQUFFO2dCQUNsRCxNQUFNLENBQUMsY0FBYyxDQUFDLE9BQU8sRUFBRSxVQUFVLEVBQUU7b0JBQ3pDLEtBQUssRUFBRSxJQUFJO2lCQUNaLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUVILENBQUM7SUFFRCxZQUFZLGdCQUFrQztRQUM1QyxLQUFLLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQXZCakIsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUV2QixzQkFBaUIsR0FBVyxDQUFDLENBQUM7SUFzQnZDLENBQUM7OEdBMUJVLHNCQUFzQjtrR0FBdEIsc0JBQXNCLDhLQUZ0QixrQkFBa0IsQ0FBQyxzQkFBc0IsQ0FBQyxpRENqQnZELDZzQ0E0Q0E7OzJGRHpCYSxzQkFBc0I7a0JBVGxDLFNBQVM7K0JBQ0UsaUJBQWlCLGFBTWhCLGtCQUFrQix3QkFBd0I7cUZBSTVDLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgSW5wdXQsXHJcbiAgVGVtcGxhdGVSZWZcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IEJhc2VDb21wb25lbnRNdWx0aVNlbGVjdCB9IGZyb20gJy4uLy4uLy4uL2FwaS9iYXNlLWNvbXBvbmVudHMvYmFzZS1jb21wb25lbnQtbXVsdGktc2VsZWN0JztcclxuaW1wb3J0IHsgQ29tcG9uZW50UHJvdmlkZXJzIH0gZnJvbSAnLi4vLi4vLi4vYXBpL2hlbHBlcnMvY29tcG9uZW50LXByb3ZpZGVycyc7XHJcbmltcG9ydCB7IENvbXBvbmVudFNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9hcGkvc2VydmljZXMvY29tcG9uZW50LnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdrdi1tdWx0aS1zZWxlY3QnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9rdi1tdWx0aS1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogW1xyXG4gICAgJy4va3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5zY3NzJyxcclxuICAgICcuLi8uLi9rZWV2by1jb21wb25lbnRzLXN0eWxlcy5zY3NzJ1xyXG4gIF0sXHJcbiAgcHJvdmlkZXJzOiBDb21wb25lbnRQcm92aWRlcnMoS3ZNdWx0aVNlbGVjdENvbXBvbmVudCksXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBLdk11bHRpU2VsZWN0Q29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudE11bHRpU2VsZWN0IHtcclxuXHJcbiAgQElucHV0KCkgZ3JvdXA6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBpdGVtVGVtcGxhdGUhOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG4gIEBJbnB1dCgpIG1heFNlbGVjdGVkTGFiZWxzOiBudW1iZXIgPSAzO1xyXG4gIEBJbnB1dCgpIG9wdGlvbkluYWN0aXZlITogYm9vbGVhbjtcclxuXHJcbiAgaW5hY3RpdmVPcHRpb25zITogc3RyaW5nO1xyXG5cclxuICBvdmVycmlkZSBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgICB0aGlzLmNhcGl0YWxpemVPcHRpb25zKHRoaXMub3B0aW9ucyk7XHJcbiAgICBcclxuICAgIGlmICh0aGlzLm9wdGlvbkluYWN0aXZlID09IHRydWUpIHtcclxuICAgICAgdGhpcy5pbmFjdGl2ZU9wdGlvbnMgPSAnaW5hY3RpdmUnO1xyXG4gICAgICB0aGlzLm9wdGlvbnMubWFwKChlbGVtZW50OiBPYmplY3QsIGluZGV4OiBudW1iZXIpID0+IHtcclxuICAgICAgICBPYmplY3QuZGVmaW5lUHJvcGVydHkoZWxlbWVudCwgJ2luYWN0aXZlJywge1xyXG4gICAgICAgICAgdmFsdWU6IHRydWUsXHJcbiAgICAgICAgfSk7XHJcbiAgICAgIH0pO1xyXG4gICAgfVxyXG4gICAgXHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihjb21wb25lbnRTZXJ2aWNlOiBDb21wb25lbnRTZXJ2aWNlKSB7XHJcbiAgICBzdXBlcihjb21wb25lbnRTZXJ2aWNlKTtcclxuICB9XHJcbn0iLCI8c3BhbiBbbmdDbGFzc109XCJ7J2Rpc2FibGUnOiAgb3B0aW9uSW5hY3RpdmUgPT09IHRydWV9XCI+XHJcbiAgPGt2LWxhYmVsXHJcbiAgICBbY29tcG9uZW50SWRdPVwiY29tcG9uZW50SWRcIlxyXG4gICAgW2xhYmVsXT1cImxhYmVsICYmIChsYWJlbCArIChzaG93QXN0ZXJpc2sgPyAnKicgOiAnJykpXCJcclxuICAvPlxyXG5cclxuICA8cC1tdWx0aVNlbGVjdFxyXG4gICAgZGlzcGxheT1cImNoaXBcIlxyXG4gICAgaW5wdXRJZD1cIm11bHRpc2VsZWN0XCJcclxuICAgIHN0eWxlQ2xhc3M9XCJpbnB1dHNcIlxyXG4gICAgW2NsYXNzXT1cImJhc2VJbnB1dENsYXNzXCJcclxuICAgIFtncm91cF09XCJncm91cFwiXHJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxyXG4gICAgW29wdGlvbnNdPVwib3B0aW9uc1wiXHJcbiAgICBbb3B0aW9uRGlzYWJsZWRdPVwiIGluYWN0aXZlT3B0aW9uc1wiXHJcbiAgICBbb3B0aW9uTGFiZWxdPVwib3B0aW9uTGFiZWxcIlxyXG4gICAgW29wdGlvblZhbHVlXT1cIm9wdGlvblZhbHVlXCJcclxuICAgIFtmaWx0ZXJdPVwiZmlsdGVyXCJcclxuICAgIFtzaG93Q2xlYXJdPVwic2hvd0NsZWFyXCJcclxuICAgIFsobmdNb2RlbCldPVwidmFsdWVcIlxyXG4gICAgKG9uQ2hhbmdlKT1cInNlbGVjdGlvbkNoYW5nZSgkZXZlbnQpXCJcclxuICAgIChvblBhbmVsSGlkZSk9XCJwYW5lbEhpZGUoJGV2ZW50KVwiXHJcbiAgICBbbWF4U2VsZWN0ZWRMYWJlbHNdPVwibWF4U2VsZWN0ZWRMYWJlbHNcIlxyXG4gICAgICA+XHJcblxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZVxyXG4gICAgICBsZXQtaXRlbVxyXG4gICAgICBwVGVtcGxhdGU9XCJpdGVtXCJcclxuICAgICAgKm5nSWY9XCJpdGVtVGVtcGxhdGVcIlxyXG4gICAgPlxyXG4gICAgICA8bmctY29udGFpbmVyXHJcbiAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwiaXRlbVRlbXBsYXRlXCJcclxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyAkaW1wbGljaXQ6IGl0ZW0gfVwiXHJcbiAgICAgID5cclxuXHJcbiAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuXHJcblxyXG4gIDwvcC1tdWx0aVNlbGVjdD5cclxuICA8a3YtZXJyb3IgW2hhc0Vycm9yXT1cImhhc0NvbnRyb2xFcnJvcigpXCI+e3sgZXJyb01lc3NhZ2UoKSB9fTwva3YtZXJyb3I+XHJcbjwvc3Bhbj5cclxuPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1tdWx0aS1zZWxlY3Qva3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tlZXZvLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL2t2LWlucHV0cy9rdi1tdWx0aS1zZWxlY3Qva3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUVOLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDBEQUEwRCxDQUFDO0FBQ3BHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDBDQUEwQyxDQUFDOzs7Ozs7Ozs7QUFZOUUsTUFBTSxPQUFPLHNCQUF1QixTQUFRLHdCQUF3QjtJQVd6RCxRQUFRO1FBQ2YsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFckMsSUFBSSxJQUFJLENBQUMsY0FBYyxJQUFJLElBQUksRUFBRSxDQUFDO1lBQ2hDLElBQUksQ0FBQyxlQUFlLEdBQUcsVUFBVSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsT0FBZSxFQUFFLEtBQWEsRUFBRSxFQUFFO2dCQUNsRCxNQUFNLENBQUMsY0FBYyxDQUFDLE9BQU8sRUFBRSxVQUFVLEVBQUU7b0JBQ3pDLEtBQUssRUFBRSxJQUFJO2lCQUNaLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUVILENBQUM7SUFFRCxZQUFZLGdCQUFrQztRQUM1QyxLQUFLLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQXpCakIsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUV2QixzQkFBaUIsR0FBVyxDQUFDLENBQUM7UUFFOUIsYUFBUSxHQUFXLE1BQU0sQ0FBQztJQXNCbkMsQ0FBQzs4R0E1QlUsc0JBQXNCO2tHQUF0QixzQkFBc0Isb01BRnRCLGtCQUFrQixDQUFDLHNCQUFzQixDQUFDLGlEQ2pCdkQsNHVDQTZDQTs7MkZEMUJhLHNCQUFzQjtrQkFUbEMsU0FBUzsrQkFDRSxpQkFBaUIsYUFNaEIsa0JBQWtCLHdCQUF3QjtxRkFJNUMsS0FBSztzQkFBYixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIElucHV0LFxyXG4gIFRlbXBsYXRlUmVmXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBCYXNlQ29tcG9uZW50TXVsdGlTZWxlY3QgfSBmcm9tICcuLi8uLi8uLi9hcGkvYmFzZS1jb21wb25lbnRzL2Jhc2UtY29tcG9uZW50LW11bHRpLXNlbGVjdCc7XHJcbmltcG9ydCB7IENvbXBvbmVudFByb3ZpZGVycyB9IGZyb20gJy4uLy4uLy4uL2FwaS9oZWxwZXJzL2NvbXBvbmVudC1wcm92aWRlcnMnO1xyXG5pbXBvcnQgeyBDb21wb25lbnRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vYXBpL3NlcnZpY2VzL2NvbXBvbmVudC5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAna3YtbXVsdGktc2VsZWN0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4va3YtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFtcclxuICAgICcuL2t2LW11bHRpLXNlbGVjdC5jb21wb25lbnQuc2NzcycsXHJcbiAgICAnLi4vLi4va2Vldm8tY29tcG9uZW50cy1zdHlsZXMuc2NzcydcclxuICBdLFxyXG4gIHByb3ZpZGVyczogQ29tcG9uZW50UHJvdmlkZXJzKEt2TXVsdGlTZWxlY3RDb21wb25lbnQpLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgS3ZNdWx0aVNlbGVjdENvbXBvbmVudCBleHRlbmRzIEJhc2VDb21wb25lbnRNdWx0aVNlbGVjdCB7XHJcblxyXG4gIEBJbnB1dCgpIGdyb3VwOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgaXRlbVRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55PjtcclxuICBASW5wdXQoKSBtYXhTZWxlY3RlZExhYmVsczogbnVtYmVyID0gMztcclxuICBASW5wdXQoKSBvcHRpb25JbmFjdGl2ZSE6IGJvb2xlYW47XHJcbiAgQElucHV0KCkgYXBwZW5kVG86IHN0cmluZyA9ICdib2R5JztcclxuXHJcblxyXG4gIGluYWN0aXZlT3B0aW9ucyE6IHN0cmluZztcclxuXHJcbiAgb3ZlcnJpZGUgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xyXG4gICAgdGhpcy5jYXBpdGFsaXplT3B0aW9ucyh0aGlzLm9wdGlvbnMpO1xyXG4gICAgXHJcbiAgICBpZiAodGhpcy5vcHRpb25JbmFjdGl2ZSA9PSB0cnVlKSB7XHJcbiAgICAgIHRoaXMuaW5hY3RpdmVPcHRpb25zID0gJ2luYWN0aXZlJztcclxuICAgICAgdGhpcy5vcHRpb25zLm1hcCgoZWxlbWVudDogT2JqZWN0LCBpbmRleDogbnVtYmVyKSA9PiB7XHJcbiAgICAgICAgT2JqZWN0LmRlZmluZVByb3BlcnR5KGVsZW1lbnQsICdpbmFjdGl2ZScsIHtcclxuICAgICAgICAgIHZhbHVlOiB0cnVlLFxyXG4gICAgICAgIH0pO1xyXG4gICAgICB9KTtcclxuICAgIH1cclxuICAgIFxyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IoY29tcG9uZW50U2VydmljZTogQ29tcG9uZW50U2VydmljZSkge1xyXG4gICAgc3VwZXIoY29tcG9uZW50U2VydmljZSk7XHJcbiAgfVxyXG59IiwiPHNwYW4gW25nQ2xhc3NdPVwieydkaXNhYmxlJzogIG9wdGlvbkluYWN0aXZlID09PSB0cnVlfVwiPlxyXG4gIDxrdi1sYWJlbFxyXG4gICAgW2NvbXBvbmVudElkXT1cImNvbXBvbmVudElkXCJcclxuICAgIFtsYWJlbF09XCJsYWJlbCAmJiAobGFiZWwgKyAoc2hvd0FzdGVyaXNrID8gJyonIDogJycpKVwiXHJcbiAgLz5cclxuXHJcbiAgPHAtbXVsdGlTZWxlY3RcclxuICAgIGRpc3BsYXk9XCJjaGlwXCJcclxuICAgIGlucHV0SWQ9XCJtdWx0aXNlbGVjdFwiXHJcbiAgICBzdHlsZUNsYXNzPVwiaW5wdXRzXCJcclxuICAgIFtjbGFzc109XCJiYXNlSW5wdXRDbGFzc1wiXHJcbiAgICBbZ3JvdXBdPVwiZ3JvdXBcIlxyXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgIFtvcHRpb25zXT1cIm9wdGlvbnNcIlxyXG4gICAgW29wdGlvbkRpc2FibGVkXT1cIiBpbmFjdGl2ZU9wdGlvbnNcIlxyXG4gICAgW29wdGlvbkxhYmVsXT1cIm9wdGlvbkxhYmVsXCJcclxuICAgIFtvcHRpb25WYWx1ZV09XCJvcHRpb25WYWx1ZVwiXHJcbiAgICBbZmlsdGVyXT1cImZpbHRlclwiXHJcbiAgICBbc2hvd0NsZWFyXT1cInNob3dDbGVhclwiXHJcbiAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcclxuICAgIChvbkNoYW5nZSk9XCJzZWxlY3Rpb25DaGFuZ2UoJGV2ZW50KVwiXHJcbiAgICAob25QYW5lbEhpZGUpPVwicGFuZWxIaWRlKCRldmVudClcIlxyXG4gICAgW21heFNlbGVjdGVkTGFiZWxzXT1cIm1heFNlbGVjdGVkTGFiZWxzXCJcclxuICAgIFthcHBlbmRUb109XCJhcHBlbmRUb1wiXHJcbiAgICAgID5cclxuXHJcblxyXG4gICAgPG5nLXRlbXBsYXRlXHJcbiAgICAgIGxldC1pdGVtXHJcbiAgICAgIHBUZW1wbGF0ZT1cIml0ZW1cIlxyXG4gICAgICAqbmdJZj1cIml0ZW1UZW1wbGF0ZVwiXHJcbiAgICA+XHJcbiAgICAgIDxuZy1jb250YWluZXJcclxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCJpdGVtVGVtcGxhdGVcIlxyXG4gICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogaXRlbSB9XCJcclxuICAgICAgPlxyXG5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuXHJcbiAgPC9wLW11bHRpU2VsZWN0PlxyXG4gIDxrdi1lcnJvciBbaGFzRXJyb3JdPVwiaGFzQ29udHJvbEVycm9yKClcIj57eyBlcnJvTWVzc2FnZSgpIH19PC9rdi1lcnJvcj5cclxuPC9zcGFuPlxyXG48bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiJdfQ==

package/fesm2022/keevo-components.mjs

@@ -2600,25 +2600,26 @@ class KvDropdownComponent extends BaseComponentDropDown {
         this.filterPlaceholder = '';
         this.placeholder = ' ';
         this.virtualScroll = false;
-        this.appendTo = input();
+        this.appendTo = input('body');
+        this.windowSize = signal(window.innerWidth);
         this.onLazyLoad = new EventEmitter();
         this.pDropDown = viewChild('pdropdown');
-        this.pDropDownWidth = signal('');
-    }
-    setDropdownWitdh() {
-        const el = this.pDropDown().el.nativeElement;
-        const dimensions = el.getBoundingClientRect();
-        this.pDropDownWidth.set(`${dimensions.width}` + 'px');
+        // pDropDownWidth = signal<string>('');
+        this.pDropDownWidth = computed(() => {
+            const windowSize = this.windowSize(); //Apenas para forçar a atualizaçaõ do valor
+            const el = this.pDropDown().el.nativeElement;
+            const dimensions = el.getBoundingClientRect();
+            return `${dimensions.width}` + 'px';
+        });
     }
     ngOnInit() {
         super.ngOnInit();
         if (this.dropDowValue)
             this.value = this.dropDowValue;
         this.capitalizeOptions(this.options);
-        this.setDropdownWitdh();
     }
     onWindowResize() {
-        this.setDropdownWitdh();
+        this.windowSize.set(window.innerWidth);
     }
     onInputLazyLoad(event) {
         this.onLazyLoad.emit(event);
@@ -5457,13 +5458,14 @@ class KvMultiSelectComponent extends BaseComponentMultiSelect {
         super(componentService);
         this.group = false;
         this.maxSelectedLabels = 3;
+        this.appendTo = 'body';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvMultiSelectComponent, deps: [{ token: ComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvMultiSelectComponent, selector: "kv-multi-select", inputs: { group: "group", itemTemplate: "itemTemplate", maxSelectedLabels: "maxSelectedLabels", optionInactive: "optionInactive" }, providers: ComponentProviders(KvMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: KvMultiSelectComponent, selector: "kv-multi-select", inputs: { group: "group", itemTemplate: "itemTemplate", maxSelectedLabels: "maxSelectedLabels", optionInactive: "optionInactive", appendTo: "appendTo" }, providers: ComponentProviders(KvMultiSelectComponent), usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n    [appendTo]=\"appendTo\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KvErrorComponent, selector: "kv-error", inputs: ["formControl", "hasError"] }, { kind: "component", type: KvLabelComponent, selector: "kv-label", inputs: ["componentId", "label"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i7$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-multi-select', providers: ComponentProviders(KvMultiSelectComponent), template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
+            args: [{ selector: 'kv-multi-select', providers: ComponentProviders(KvMultiSelectComponent), template: "<span [ngClass]=\"{'disable':  optionInactive === true}\">\r\n  <kv-label\r\n    [componentId]=\"componentId\"\r\n    [label]=\"label && (label + (showAsterisk ? '*' : ''))\"\r\n  />\r\n\r\n  <p-multiSelect\r\n    display=\"chip\"\r\n    inputId=\"multiselect\"\r\n    styleClass=\"inputs\"\r\n    [class]=\"baseInputClass\"\r\n    [group]=\"group\"\r\n    [disabled]=\"disabled\"\r\n    [options]=\"options\"\r\n    [optionDisabled]=\" inactiveOptions\"\r\n    [optionLabel]=\"optionLabel\"\r\n    [optionValue]=\"optionValue\"\r\n    [filter]=\"filter\"\r\n    [showClear]=\"showClear\"\r\n    [(ngModel)]=\"value\"\r\n    (onChange)=\"selectionChange($event)\"\r\n    (onPanelHide)=\"panelHide($event)\"\r\n    [maxSelectedLabels]=\"maxSelectedLabels\"\r\n    [appendTo]=\"appendTo\"\r\n      >\r\n\r\n\r\n    <ng-template\r\n      let-item\r\n      pTemplate=\"item\"\r\n      *ngIf=\"itemTemplate\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"itemTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n      >\r\n\r\n      </ng-container>\r\n    </ng-template>\r\n\r\n\r\n  </p-multiSelect>\r\n  <kv-error [hasError]=\"hasControlError()\">{{ erroMessage() }}</kv-error>\r\n</span>\r\n<ng-content></ng-content>\r\n", styles: [":host ::ng-deep .disable .p-multiselect.p-multiselect-chip .p-multiselect-token .p-icon-wrapper{display:none!important}::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token{padding:.1rem .4rem}::ng-deep .p-multiselect-label{padding:.3rem;display:flex}::ng-deep .p-multiselect-item{font-size:.875rem;padding:.5rem;text-overflow:ellipsis;width:100%}::ng-deep .p-multiselect{width:100%}::ng-deep p-multiselect p-overlay .p-overlay{max-width:100%}::ng-deep .p-multiselect-items-wrapper .p-multiselect-items{padding:.75rem}::ng-deep .p-multiselect-filter{height:1.875rem}::ng-deep .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message{padding:.75rem;font-size:.875rem}::ng-deep .p-multiselect-panel .p-multiselect-header{padding:.5rem}\n", "@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\";::ng-deep :root{--kv-primary-color: 41, 185, 45;--kv-secondary-color: 0, 37, 66;--kv-tertiary-color: 165, 165, 165}.material-symbols-outlined{font-family:Material Symbols Outlined!important}*{font-family:Inter var,Inter,sans-serif!important}::ng-deep .p-accordion,::ng-deep .p-accordion-header,::ng-deep .p-accordion-content,::ng-deep .p-badge,::ng-deep .p-overlay-badge,::ng-deep .p-breadcrumb,::ng-deep .p-breadcrumb-item,::ng-deep .p-breadcrumb-link,::ng-deep .p-button,::ng-deep .p-calendar,::ng-deep .p-card,::ng-deep .p-card-title,::ng-deep .p-card-subtitle,::ng-deep .p-card-content,::ng-deep .p-checkbox,::ng-deep .p-chip,::ng-deep .p-confirm-dialog,::ng-deep .p-confirm-dialog-message,::ng-deep .p-contextmenu,::ng-deep .p-contextmenu-item,::ng-deep .p-dataview,::ng-deep .p-dataview-content,::ng-deep .p-dialog,::ng-deep .p-dialog-title,::ng-deep .p-dialog-content,::ng-deep .p-dropdown,::ng-deep .p-dropdown-label,::ng-deep .p-dropdown-item,::ng-deep .p-dynamic-dialog,::ng-deep .p-dynamic-dialog-title,::ng-deep .p-dynamic-dialog-content,::ng-deep .p-editor,::ng-deep .p-fieldset,::ng-deep .p-fieldset-legend,::ng-deep .p-fieldset-content,::ng-deep .p-fileupload,::ng-deep .p-inputmask,::ng-deep .p-inputnumber,::ng-deep .p-inputtextarea,::ng-deep .p-inputtext,::ng-deep .p-menu,::ng-deep .p-menuitem,::ng-deep .p-menuitem-text,::ng-deep .p-message,::ng-deep .p-messages,::ng-deep .p-multiselect,::ng-deep .p-multiselect-label,::ng-deep .p-multiselect-item,::ng-deep .p-panelmenu,::ng-deep .p-panelmenu-header,::ng-deep .p-panelmenu-content,::ng-deep .p-panel,::ng-deep .p-panel-header,::ng-deep .p-panel-content,::ng-deep .p-password,::ng-deep .p-picklist,::ng-deep .p-progressbar,::ng-deep .p-radiobutton,::ng-deep .p-rating,::ng-deep .p-sidebar,::ng-deep .p-splitbutton,::ng-deep .p-steps,::ng-deep .p-step,::ng-deep .p-table,::ng-deep .p-datatable,::ng-deep .p-tabview,::ng-deep .p-tabpanel,::ng-deep .p-tag,::ng-deep .p-toast,::ng-deep .p-toolbar,::ng-deep .p-tooltip,::ng-deep .p-tree,::ng-deep .p-treetable,::ng-deep .p-selectbutton,::ng-deep .p-stepper,::ng-deep .p-inputgroup,::ng-deep .p-inputgroup-addon,::ng-deep .p-text{font-family:Inter var,Inter,sans-serif!important}:host ::ng-deep .inputs{height:1.875rem}:host ::ng-deep .inputs,.p-inputtext,.p-inputtextarea{font-size:.875rem}::ng-deep .p-dialog .p-dialog-header{color:#fff!important;background:#002542!important;display:flex!important;flex-wrap:wrap;word-wrap:break-word}::ng-deep .p-dialog .p-dialog-content{padding-top:1rem}::ng-deep .p-dialog{min-width:320px}::ng-deep .p-dialog-content{overflow-x:hidden}::ng-deep .p-dialog-content::-webkit-scrollbar{width:8px}::ng-deep .p-dialog-content::-webkit-scrollbar:hover{background-color:#dededebf}::ng-deep .p-dialog-content::-webkit-scrollbar-thumb{border-radius:4px;background-color:transparent}::ng-deep .p-dialog-content:hover::-webkit-scrollbar-thumb{border-left:2px solid white;background-color:#00000080}::ng-deep .p-dialog-content::-webkit-scrollbar-track{border-left:2px solid white;background-color:#dededebf}::ng-deep .p-dialog-footer{display:flex;justify-content:flex-end;padding:10px;gap:10px}::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{display:none}::ng-deep .p-tooltip{font-size:.825rem!important}\n"] }]
         }], ctorParameters: () => [{ type: ComponentService }], propDecorators: { group: [{
                 type: Input
             }], itemTemplate: [{
@@ -5472,6 +5474,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 type: Input
             }], optionInactive: [{
                 type: Input
+            }], appendTo: [{
+                type: Input
             }] } });
 
 class KvRadioGroupComponent extends BaseComponentInput {