ng-jvx-multiselect 19.0.36 → 19.0.38

package/_index.scss

@@ -1 +1 @@
-@forward './src/lib/ng-jvx-multiselect.component';
+@forward './src/lib/ng-jvx-multiselect.component';

package/fesm2022/ng-jvx-multiselect.mjs

@@ -22,11 +22,11 @@ class NgJvxOptionComponent {
         this.isSelected = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgJvxOptionComponent, isStandalone: true, selector: "ng-jvx-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOnOption: "clickOnOption" }, ngImport: i0, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\n(click)=\"clickOnOption.emit()\">\n  <div class=\"option-content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"list-option-background\"></div>\n</div>\n", styles: ["ng-jvx-option .option-content{min-height:48px}ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgJvxOptionComponent, isStandalone: true, selector: "ng-jvx-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickOnOption: "clickOnOption" }, ngImport: i0, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\r\n(click)=\"clickOnOption.emit()\">\r\n  <div class=\"option-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"list-option-background\"></div>\r\n</div>\r\n", styles: ["ng-jvx-option .option-content{min-height:48px}ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\n(click)=\"clickOnOption.emit()\">\n  <div class=\"option-content\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"list-option-background\"></div>\n</div>\n", styles: ["ng-jvx-option .option-content{min-height:48px}ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"] }]
+            args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<div class=\"option ng-jvx-option\" [class.ng-jvx-single-selected-option]=\" isSelected()\" #listOption\r\n(click)=\"clickOnOption.emit()\">\r\n  <div class=\"option-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div class=\"list-option-background\"></div>\r\n</div>\r\n", styles: ["ng-jvx-option .option-content{min-height:48px}ng-jvx-option .ng-jvx-option{padding:0;height:auto;min-height:48px;cursor:pointer;position:relative}ng-jvx-option .ng-jvx-option.ng-jvx-single-selected-option .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background-color:var(--jvx-multiselect-primary);background-opacity:.3}\n"] }]
         }], ctorParameters: () => [], propDecorators: { clickOnOption: [{
                 type: Output
             }] } });
@@ -294,15 +294,15 @@ class NgJvxMultisectChipComponent {
         e.stopPropagation();
         e.preventDefault();
         if (this.container && !this.container.disabled) {
-            this.container.deselect(this.value);
+            this.container.deselect(this.value());
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultisectChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgJvxMultisectChipComponent, isStandalone: true, selector: "ng-jvx-multiselect-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\n  <ng-content></ng-content>\n</span>\n    <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\n      d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\n\n</div>\n", styles: ["ng-jvx-multiselect-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}ng-jvx-multiselect-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}ng-jvx-multiselect-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}ng-jvx-multiselect-chip>div.disabled{background-color:#c2c3c4;color:currentColor}ng-jvx-multiselect-chip>div.disabled .chip-text{pointer-events:none}ng-jvx-multiselect-chip>div.disabled .remove-button{color:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgJvxMultisectChipComponent, isStandalone: true, selector: "ng-jvx-multiselect-chip", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\r\n  <ng-content></ng-content>\r\n</span>\r\n    <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\r\n      d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\r\n\r\n</div>\r\n", styles: ["ng-jvx-multiselect-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}ng-jvx-multiselect-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}ng-jvx-multiselect-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}ng-jvx-multiselect-chip>div.disabled{background-color:#c2c3c4;color:currentColor}ng-jvx-multiselect-chip>div.disabled .chip-text{pointer-events:none}ng-jvx-multiselect-chip>div.disabled .remove-button{color:currentColor}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultisectChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-jvx-multiselect-chip', encapsulation: ViewEncapsulation.None, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\n  <ng-content></ng-content>\n</span>\n    <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\n      d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\n\n</div>\n", styles: ["ng-jvx-multiselect-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}ng-jvx-multiselect-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}ng-jvx-multiselect-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}ng-jvx-multiselect-chip>div.disabled{background-color:#c2c3c4;color:currentColor}ng-jvx-multiselect-chip>div.disabled .chip-text{pointer-events:none}ng-jvx-multiselect-chip>div.disabled .remove-button{color:currentColor}\n"] }]
+            args: [{ selector: 'ng-jvx-multiselect-chip', encapsulation: ViewEncapsulation.None, template: "<div [class.disabled]=\"disabled()\"><span class=\"chip-text\">\r\n  <ng-content></ng-content>\r\n</span>\r\n    <svg class=\"remove-button\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\" (click)=\"clickOnRemove($event)\"><path\r\n      d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path></svg>\r\n\r\n</div>\r\n", styles: ["ng-jvx-multiselect-chip>div{padding:0 .2rem;height:1.8rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;width:auto;background-color:var(--jvx-multiselect-primary);color:var(--jvx-multiselect-on-primary);display:flex;align-items:center}ng-jvx-multiselect-chip>div .chip-text{flex:1 1 100%;padding-inline:.5rem}ng-jvx-multiselect-chip>div .remove-button{cursor:pointer;color:var(--jvx-multiselect-on-primary)}ng-jvx-multiselect-chip>div.disabled{background-color:#c2c3c4;color:currentColor}ng-jvx-multiselect-chip>div.disabled .chip-text{pointer-events:none}ng-jvx-multiselect-chip>div.disabled .remove-button{color:currentColor}\n"] }]
         }] });
 
 class PanelComponent {
@@ -355,7 +355,7 @@ class PanelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: PanelComponent, isStandalone: true, selector: "lib-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose", onClosed: "onClosed", onOpened: "onOpened" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #menuTemplate cdkConnectedOverlay\n             (backdropClick)=\"close()\"\n             [cdkConnectedOverlayPositions]=\"[\n             {\n             originX: 'start',\n             originY: yPosition() === 'below'? 'center': 'top',\n             overlayX: 'start',\n             overlayY: yPosition() === 'below'? 'top': 'bottom'\n             }\n             ]\"\n             [cdkConnectedOverlayOrigin]=\"trigger\"\n             [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\n             [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\n             [cdkConnectedOverlayHasBackdrop]=\"true\"\n             [cdkConnectedOverlayDisableClose]=\"false\"\n             [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\n             [cdkConnectedOverlayOpen]=\"isOpen()\">\n  <div [@animation]=\"isOpen()\">\n    <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\n         (click)=\"clickOnMenu()\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:flex;flex-direction:column;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: PanelComponent, isStandalone: true, selector: "lib-panel", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: false, isRequired: false, transformFunction: null }, yPosition: { classPropertyName: "yPosition", publicName: "yPosition", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose", onClosed: "onClosed", onOpened: "onOpened" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #menuTemplate cdkConnectedOverlay\r\n             (backdropClick)=\"close()\"\r\n             [cdkConnectedOverlayPositions]=\"[\r\n             {\r\n             originX: 'start',\r\n             originY: yPosition() === 'below'? 'center': 'top',\r\n             overlayX: 'start',\r\n             overlayY: yPosition() === 'below'? 'top': 'bottom'\r\n             }\r\n             ]\"\r\n             [cdkConnectedOverlayOrigin]=\"trigger\"\r\n             [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\r\n             [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n             [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n             [cdkConnectedOverlayDisableClose]=\"false\"\r\n             [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\r\n             [cdkConnectedOverlayOpen]=\"isOpen()\">\r\n  <div [@animation]=\"isOpen()\">\r\n    <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\r\n         (click)=\"clickOnMenu()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:flex;flex-direction:column;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], animations: [
             trigger('animation', [
                 transition(':enter', [
                     query('.ng-jvx-panel.below-panel', [
@@ -471,7 +471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                                 ], { optional: true })
                             ])
                         ]),
-                    ], template: "<ng-template #menuTemplate cdkConnectedOverlay\n             (backdropClick)=\"close()\"\n             [cdkConnectedOverlayPositions]=\"[\n             {\n             originX: 'start',\n             originY: yPosition() === 'below'? 'center': 'top',\n             overlayX: 'start',\n             overlayY: yPosition() === 'below'? 'top': 'bottom'\n             }\n             ]\"\n             [cdkConnectedOverlayOrigin]=\"trigger\"\n             [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\n             [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\n             [cdkConnectedOverlayHasBackdrop]=\"true\"\n             [cdkConnectedOverlayDisableClose]=\"false\"\n             [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\n             [cdkConnectedOverlayOpen]=\"isOpen()\">\n  <div [@animation]=\"isOpen()\">\n    <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\n         (click)=\"clickOnMenu()\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:flex;flex-direction:column;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"] }]
+                    ], template: "<ng-template #menuTemplate cdkConnectedOverlay\r\n             (backdropClick)=\"close()\"\r\n             [cdkConnectedOverlayPositions]=\"[\r\n             {\r\n             originX: 'start',\r\n             originY: yPosition() === 'below'? 'center': 'top',\r\n             overlayX: 'start',\r\n             overlayY: yPosition() === 'below'? 'top': 'bottom'\r\n             }\r\n             ]\"\r\n             [cdkConnectedOverlayOrigin]=\"trigger\"\r\n             [cdkConnectedOverlayPanelClass]=\"'ng-jvx-multiselect-panel'\"\r\n             [cdkConnectedOverlayDisposeOnNavigation]=\"true\"\r\n             [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n             [cdkConnectedOverlayDisableClose]=\"false\"\r\n             [cdkConnectedOverlayBackdropClass]=\"'ng-jvx-panel-overlay'\"\r\n             [cdkConnectedOverlayOpen]=\"isOpen()\">\r\n  <div [@animation]=\"isOpen()\">\r\n    <div class=\"ng-jvx-panel\" [class]=\"yPosition()+'-panel'\" [class.opening]=\"isOpen()\" [class.closing]=\"!isOpen()\"\r\n         (click)=\"clickOnMenu()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.ng-jvx-panel{display:flex;flex-direction:column;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;background:var(--jvx-multiselect-panel-bg)}.ng-jvx-panel-overlay{background-opacity:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuTemplate: [{
                 type: ViewChild,
                 args: ['menuTemplate', { static: true }]
@@ -1112,7 +1112,7 @@ class NgJvxMultiselectComponent {
         //   useExisting: forwardRef(() => NgJvxMultiselectComponent),
         //   multi: true,
         // }
-        ], queries: [{ propertyName: "optionsTemplate", first: true, predicate: NgJvxOptionsTemplateDirective, descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: NgJvxSelectionTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: NgJvxGroupHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "jvxMultiselect", first: true, predicate: ["jvxMultiselect"], descendants: true, isSignal: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true, isSignal: true }, { propertyName: "menuFooter", first: true, predicate: ["menuFooter"], descendants: true, isSignal: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true, isSignal: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: MenuTriggerDirective, descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], ngImport: i0, template: "\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\n  <!-- START MENU -->\n  <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\n       #trigger\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\n  >\n    <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\n               [yPosition]=\"yPosition()\">\n      @if (closeButton) {\n        <div class=\"closeMenuButton\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\n            <path\n              d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\n          </svg>\n        </div>\n      }\n      <div style=\"display: flex; flex-direction: column\"\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\n      <div class=\"menu-list-container\"\n           [style.flex]=\"'1 1 0'\"\n           #menuLIstContainer\n           >\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\n                 [ngJvxFocus]=\"isOpen()\"\n                 (input)=\"onSearchValueChange($event)\"/>\n        </div>\n        <div\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + 'px': 'auto'}\">\n          <ng-scrollbar style=\"width: 100%\"\n                        smoothScroll\n                        [visibility]=\"'hover'\"\n                        [appearance]=\"'compact'\"\n                        [sensorDisabled]=\"isLoading()\"\n                        [autoHeightDisabled]=\"false\" #scrollbar>\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\n              <div #selection\n                   *ngIf=\"showList\"\n                   [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\n                   ngDefaultControl\n                   formControlName=\"selectionValue\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!!groupBy\">\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\n                      [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\n\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\n                                   [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n                      <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n                        <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n                                      [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n                      </div>\n                    </ng-jvx-option>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\n                                 [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n                    <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n                      <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n                                    [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n                    </div>\n                  </ng-jvx-option>\n                </ng-container>\n              </div>\n            </div>\n          </ng-scrollbar>\n        </div>\n\n      </div>\n      <div class=\"menu-footer\" #menuFooter>\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\n      </div>\n      </div>\n    </lib-panel>\n  </div>\n  <!-- END MENU -->\n  <!-- START INPUT -->\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\n       (click)=\"clickOnMenuTrigger($event)\"\n       #valueContainer>\n    @if (value.length === 0) {\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\n        <ng-content select=\"[placeholder]\"></ng-content>\n      </div>\n    }\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\n\n    </div>\n\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\n      </div>\n    </div>\n    @if (clearable && value.length > 0) {\n      <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n          <path\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\n        </svg>\n      </div>\n    }\n    <div class=\"ng-jvx-multiselect-arrow\">\n      @if (!isLoading()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n          <path\n            d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\n        </svg>\n      } @else {\n        <div class=\"lds-ring\">\n          <div></div>\n          <div></div>\n          <div></div>\n          <div></div>\n        </div>\n      }\n    </div>\n  </div>\n  <!-- END INPUT -->\n</div>\n<ng-template #defaultTemplate let-option>\n  <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\n    <div style=\"max-width: 100%;\n  padding-inline: .3rem;\n     white-space: nowrap;\n     overflow: hidden;\n     text-overflow: ellipsis;\">{{ option[itemText] }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultSelectionTemplate let-value>\n  {{ value[itemText] }}\n</ng-template>\n\n<ng-template #defaultMultiSelectionTemplate let-value>\n  <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\n    @for (val of value; track val[itemValue]) {\n      <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\n        {{ val[itemText] }}\n      </ng-jvx-multiselect-chip>\n    }\n  </div>\n</ng-template>\n<ng-template #defaultGroupHeaderTemplate let-opt>\n  <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\n</ng-template>\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{flex:1 1 0;max-height:300px;display:flex;flex-direction:column}.menu-footer{overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgJvxMultisectChipComponent, selector: "ng-jvx-multiselect-chip", inputs: ["value", "disabled"], outputs: ["removed"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PanelComponent, selector: "lib-panel", inputs: ["trigger", "yPosition", "multi"], outputs: ["onClose", "onClosed", "onOpened"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lib-menu-trigger-for], [libMenuTriggerFor]", inputs: ["libMenuTriggerFor"], outputs: ["closed", "onMenuOpen", "menuOpened", "onMenuClose", "menuClosed"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value", "disabled", "isSelected"], outputs: ["clickOnOption"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionsTemplate", first: true, predicate: NgJvxOptionsTemplateDirective, descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: NgJvxSelectionTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: NgJvxGroupHeaderDirective, descendants: true }], viewQueries: [{ propertyName: "jvxMultiselect", first: true, predicate: ["jvxMultiselect"], descendants: true, isSignal: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true, isSignal: true }, { propertyName: "menuFooter", first: true, predicate: ["menuFooter"], descendants: true, isSignal: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true, isSignal: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: MenuTriggerDirective, descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], ngImport: i0, template: "\r\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       #trigger\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n  >\r\n    <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\r\n               [yPosition]=\"yPosition()\">\r\n      @if (closeButton) {\r\n        <div class=\"closeMenuButton\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\r\n            <path\r\n              d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n          </svg>\r\n        </div>\r\n      }\r\n      <div style=\"display: flex; flex-direction: column\"\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\r\n      <div class=\"menu-list-container\"\r\n           [style.flex]=\"'1 1 0'\"\r\n           #menuLIstContainer\r\n           >\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen()\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div\r\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading()\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <div #selection\r\n                   *ngIf=\"showList\"\r\n                   [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\r\n                   ngDefaultControl\r\n                   formControlName=\"selectionValue\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"!!groupBy\">\r\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\r\n                                   [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\r\n                        <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                      [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                      </div>\r\n                    </ng-jvx-option>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\r\n                                 [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n                    <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                    </div>\r\n                  </ng-jvx-option>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\" #menuFooter>\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n      </div>\r\n    </lib-panel>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n    @if (value.length === 0) {\r\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n        <ng-content select=\"[placeholder]\"></ng-content>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n      </div>\r\n    </div>\r\n    @if (clearable && value.length > 0) {\r\n      <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      @if (!isLoading()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\r\n        </svg>\r\n      } @else {\r\n        <div class=\"lds-ring\">\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\r\n    <div style=\"max-width: 100%;\r\n  padding-inline: .3rem;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\r\n    @for (val of value; track val[itemValue]) {\r\n      <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\r\n        {{ val[itemText] }}\r\n      </ng-jvx-multiselect-chip>\r\n    }\r\n  </div>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n  <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{flex:1 1 0;max-height:300px;display:flex;flex-direction:column}.menu-footer{overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgJvxMultisectChipComponent, selector: "ng-jvx-multiselect-chip", inputs: ["value", "disabled"], outputs: ["removed"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "component", type: PanelComponent, selector: "lib-panel", inputs: ["trigger", "yPosition", "multi"], outputs: ["onClose", "onClosed", "onOpened"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[lib-menu-trigger-for], [libMenuTriggerFor]", inputs: ["libMenuTriggerFor"], outputs: ["closed", "onMenuOpen", "menuOpened", "onMenuClose", "menuClosed"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value", "disabled", "isSelected"], outputs: ["clickOnOption"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
             type: Component,
@@ -1132,7 +1132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         NgJvxOptionComponent,
                         NgJvxFocusDirective,
                         FormsModule
-                    ], standalone: true, template: "\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\n  <!-- START MENU -->\n  <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\n       #trigger\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\n  >\n    <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\n               [yPosition]=\"yPosition()\">\n      @if (closeButton) {\n        <div class=\"closeMenuButton\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\n            <path\n              d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\n          </svg>\n        </div>\n      }\n      <div style=\"display: flex; flex-direction: column\"\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\n      <div class=\"menu-list-container\"\n           [style.flex]=\"'1 1 0'\"\n           #menuLIstContainer\n           >\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\n                 [ngJvxFocus]=\"isOpen()\"\n                 (input)=\"onSearchValueChange($event)\"/>\n        </div>\n        <div\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + 'px': 'auto'}\">\n          <ng-scrollbar style=\"width: 100%\"\n                        smoothScroll\n                        [visibility]=\"'hover'\"\n                        [appearance]=\"'compact'\"\n                        [sensorDisabled]=\"isLoading()\"\n                        [autoHeightDisabled]=\"false\" #scrollbar>\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\n              <div #selection\n                   *ngIf=\"showList\"\n                   [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\n                   ngDefaultControl\n                   formControlName=\"selectionValue\">\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!!groupBy\">\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\n                      [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\n\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\n                                   [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n                      <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n                        <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n                                      [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n                      </div>\n                    </ng-jvx-option>\n                  </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\n                                 [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\n                    <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\n                      <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\n                                    [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\n                    </div>\n                  </ng-jvx-option>\n                </ng-container>\n              </div>\n            </div>\n          </ng-scrollbar>\n        </div>\n\n      </div>\n      <div class=\"menu-footer\" #menuFooter>\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\n      </div>\n      </div>\n    </lib-panel>\n  </div>\n  <!-- END MENU -->\n  <!-- START INPUT -->\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\n       (click)=\"clickOnMenuTrigger($event)\"\n       #valueContainer>\n    @if (value.length === 0) {\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\n        <ng-content select=\"[placeholder]\"></ng-content>\n      </div>\n    }\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\n\n    </div>\n\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\n      </div>\n    </div>\n    @if (clearable && value.length > 0) {\n      <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n          <path\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\n        </svg>\n      </div>\n    }\n    <div class=\"ng-jvx-multiselect-arrow\">\n      @if (!isLoading()) {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\n          <path\n            d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\n        </svg>\n      } @else {\n        <div class=\"lds-ring\">\n          <div></div>\n          <div></div>\n          <div></div>\n          <div></div>\n        </div>\n      }\n    </div>\n  </div>\n  <!-- END INPUT -->\n</div>\n<ng-template #defaultTemplate let-option>\n  <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\n    <div style=\"max-width: 100%;\n  padding-inline: .3rem;\n     white-space: nowrap;\n     overflow: hidden;\n     text-overflow: ellipsis;\">{{ option[itemText] }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultSelectionTemplate let-value>\n  {{ value[itemText] }}\n</ng-template>\n\n<ng-template #defaultMultiSelectionTemplate let-value>\n  <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\n    @for (val of value; track val[itemValue]) {\n      <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\n        {{ val[itemText] }}\n      </ng-jvx-multiselect-chip>\n    }\n  </div>\n</ng-template>\n<ng-template #defaultGroupHeaderTemplate let-opt>\n  <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\n</ng-template>\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{flex:1 1 0;max-height:300px;display:flex;flex-direction:column}.menu-footer{overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"] }]
+                    ], standalone: true, template: "\r\n<div class=\"ng-jvx-multiselect\" [class.disabled]=\"disabled\" [class.has-errors]=\"hasErrors\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [libMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       #trigger\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n  >\r\n    <lib-panel #menuRef [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [multi]=\"multi\" [formGroup]=\"form\"\r\n               [yPosition]=\"yPosition()\">\r\n      @if (closeButton) {\r\n        <div class=\"closeMenuButton\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 256 256\">\r\n            <path\r\n              d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n          </svg>\r\n        </div>\r\n      }\r\n      <div style=\"display: flex; flex-direction: column\"\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize().width, 'min-width.px': 112, 'max-height': '300px', 'height': listContainerSize().height}\">\r\n      <div class=\"menu-list-container\"\r\n           [style.flex]=\"'1 1 0'\"\r\n           #menuLIstContainer\r\n           >\r\n        <div class=\"search-input-container\" *ngIf=\"!!searchInput\" (click)=\"onSearchInputClick($event)\">\r\n          <input type=\"text\" [placeholder]=\"searchLabel\" [ngModel]=\"searchValue\" [ngModelOptions]=\"{standalone: true}\"\r\n                 [ngJvxFocus]=\"isOpen()\"\r\n                 (input)=\"onSearchValueChange($event)\"/>\r\n        </div>\r\n        <div\r\n          [ngStyle]=\"{height: searchInput && selectionContainer.clientHeight > 220 || selectionContainer.clientHeight > 300? 300 - (searchInput? 40 : 0) - menuFooter.offsetHeight + 'px': 'auto'}\">\r\n          <ng-scrollbar style=\"width: 100%\"\r\n                        smoothScroll\r\n                        [visibility]=\"'hover'\"\r\n                        [appearance]=\"'compact'\"\r\n                        [sensorDisabled]=\"isLoading()\"\r\n                        [autoHeightDisabled]=\"false\" #scrollbar>\r\n            <div #selectionContainer (click)=\"onCLickOnMenu($event)\">\r\n              <div #selection\r\n                   *ngIf=\"showList\"\r\n                   [ngStyle]=\"{'padding': 0, 'width': listContainerSize().width, 'min-width.px': 112}\"\r\n                   ngDefaultControl\r\n                   formControlName=\"selectionValue\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngIf=\"!!groupBy\">\r\n                  <ng-container *ngFor=\"let opt of orderedOptions\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"groupHeaderTemplate? groupHeaderTemplate.template: defaultGroupHeaderTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: opt}\"></ng-container>\r\n\r\n                    <ng-jvx-option *ngFor=\"let option of opt.options\" [value]=\"option[itemValue]\"\r\n                                   [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\r\n                        <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                      [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                      </div>\r\n                    </ng-jvx-option>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!groupBy || ( typeof groupBy === 'string' && groupBy.length === 0)\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\"\r\n                                 [isSelected]=\"isOptionSelected(option)\" (click)=\"clickOnOption(option)\">\r\n                    <div class=\"ng-jvx-option-wrapper\" style=\"min-height:48px\">\r\n                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <ng-container [ngTemplateOutlet]=\"optionsTemplate? optionsTemplate.template : defaultTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>\r\n                    </div>\r\n                  </ng-jvx-option>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\" #menuFooter>\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n      </div>\r\n    </lib-panel>\r\n  </div>\r\n  <!-- END MENU -->\r\n  <!-- START INPUT -->\r\n  <div [ngClass]=\"{'ng-jvx-multiselect-value-container': true, 'is-open': isOpen()}\"\r\n       (click)=\"clickOnMenuTrigger($event)\"\r\n       #valueContainer>\r\n    @if (value.length === 0) {\r\n      <div class=\"ng-jvx-multiselect__placeholder\" #placeholderContainer>\r\n        <ng-content select=\"[placeholder]\"></ng-content>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-value multi-value-container\" *ngIf=\"multi\" #multiContainer>\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\r\n    </div>\r\n\r\n    <div class=\"ng-jvx-multiselect-value single-value-container\" *ngIf=\"!multi\">\r\n      <div *ngFor=\"let val of value\" style=\"width: 100%;\">\r\n        <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultSelectionTemplate\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: val}\"></ng-container>\r\n      </div>\r\n    </div>\r\n    @if (clearable && value.length > 0) {\r\n      <div class=\"ng-jvx-multiselect__remove-button\" (click)=\"clear($event)\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"></path>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      @if (!isLoading()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"#000000\" viewBox=\"0 0 256 256\">\r\n          <path\r\n            d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"></path>\r\n        </svg>\r\n      } @else {\r\n        <div class=\"lds-ring\">\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n          <div></div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"min-height: 48px; height: 100%; display: flex; align-items: center\">\r\n    <div style=\"max-width: 100%;\r\n  padding-inline: .3rem;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectionTemplate let-value>\r\n  {{ value[itemText] }}\r\n</ng-template>\r\n\r\n<ng-template #defaultMultiSelectionTemplate let-value>\r\n  <div style=\"display: flex; gap: 0.3rem; flex-wrap: wrap;\">\r\n    @for (val of value; track val[itemValue]) {\r\n      <ng-jvx-multiselect-chip [value]=\"val\" class=\"ng-jvx-multiselect-chip\" [disabled]=\"this.disabled\" >\r\n        {{ val[itemText] }}\r\n      </ng-jvx-multiselect-chip>\r\n    }\r\n  </div>\r\n</ng-template>\r\n<ng-template #defaultGroupHeaderTemplate let-opt>\r\n  <div style=\"padding-inline: 15px\"><strong>{{ opt.group }}</strong></div>\r\n</ng-template>\r\n", styles: ["ng-jvx-multiselect{display:flex;align-items:center;width:100%}ng-jvx-multiselect .ng-jvx-multiselect{width:100%;display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container{width:100%;display:flex;cursor:pointer;position:relative;justify-content:space-between;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__placeholder{height:100%;display:flex;align-items:center;position:absolute}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value{flex:1 1 100%;max-width:calc(100% - 28px);display:flex;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect__remove-button{display:flex;height:100%;align-items:center}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow{width:24px;padding-right:4px;display:flex;align-items:center;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow svg{transition:transform .3s ease-in-out}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring{display:inline-block;position:relative;width:24px;height:24px}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div{box-sizing:border-box;display:block;position:absolute;width:6px;height:16px;margin:4px;border:2px solid;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--jvx-multiselect-accent) transparent transparent transparent}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(1){animation-delay:-.45s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(2){animation-delay:-.3s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow .lds-ring div:nth-child(3){animation-delay:-.15s}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container.is-open .ng-jvx-multiselect-arrow svg{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow svg{opacity:.3}ng-jvx-multiselect .ng-jvx-multiselect.has-errors{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.single-value-container{color:red}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-value.multi-value-container{width:100%}ng-jvx-multiselect .ng-jvx-multiselect.has-errors .ng-jvx-multiselect-arrow svg{color:red}.menu-list-container{flex:1 1 0;max-height:300px;display:flex;flex-direction:column}.menu-footer{overflow:hidden}.cdk-overlay-pane .closeMenuButton{height:22px;width:22px;background-color:var(--jvx-multiselect-primary);position:absolute;top:-11px;right:11px;border-radius:100%;cursor:pointer;color:#fff;z-index:10}.cdk-overlay-pane .closeMenuButton svg{fill:var(--jvx-multiselect-on-primary);font-size:15px;height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {