ng-jvx-multiselect 17.0.2 → 18.0.0

package/esm2022/lib/ng-jvx-multiselect.service.mjs

@@ -17,7 +17,7 @@ export class NgJvxMultiselectService {
                 .set('size', pageSize.toString());
         }
         const options = {
-            mode: 'no-cors',
+            mode: 'no-cors', // cors
             headers: requestHeaders,
             context: setJvxCall(),
             // withCredentials: true,
@@ -32,13 +32,13 @@ export class NgJvxMultiselectService {
             return this.http.post(url, options);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctanZ4LW11bHRpc2VsZWN0LnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi9uZy1qdngtbXVsdGlzZWxlY3Quc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXpDLE9BQU8sRUFBYSxVQUFVLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUM1RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sU0FBUyxDQUFDOzs7QUFLbkMsTUFBTSxPQUFPLHVCQUF1QjtJQUNsQyxZQUFvQixJQUFnQjtRQUFoQixTQUFJLEdBQUosSUFBSSxDQUFZO0lBQ3BDLENBQUM7SUFFRCxPQUFPLENBQUMsRUFDRSxHQUFHLEVBQ0gsZ0JBQWdCLEdBQUcsS0FBSyxFQUN4QixXQUFXLEVBQ1gsUUFBUSxFQUNSLFdBQVcsR0FBRyxLQUFLLEVBQ25CLGNBQWMsRUFDZCxNQUFNLEVBQ04sVUFBVSxHQUFHLFFBQVEsRUFDckIsSUFBSSxFQVViO1FBQ0MsSUFBSSxNQUFNLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztRQUM5QixJQUFJLE1BQU0sSUFBSSxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUMvQixNQUFNLEdBQUcsTUFBTSxDQUFDLEdBQUcsQ0FBQyxVQUFVLEVBQUUsTUFBTSxDQUFDLENBQUM7U0FDekM7UUFDRCxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDckIsTUFBTSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLFdBQVcsQ0FBQyxRQUFRLEVBQUUsQ0FBQztpQkFDaEQsR0FBRyxDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztTQUNyQztRQUNELE1BQU0sT0FBTyxHQUFHO1lBQ2QsSUFBSSxFQUFFLFNBQVM7WUFDZixPQUFPLEVBQUUsY0FBYztZQUN2QixPQUFPLEVBQUUsVUFBVSxFQUFFO1lBQ3JCLHlCQUF5QjtZQUN6QixtREFBbUQ7WUFDbkQsSUFBSTtZQUNKLE1BQU07U0FDUCxDQUFDO1FBQ0YsSUFBSSxXQUFXLEtBQUssS0FBSyxFQUFFO1lBQ3pCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1NBQ3BDO2FBQU07WUFDTCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxPQUFPLENBQUMsQ0FBQztTQUNyQztJQUNILENBQUM7OEdBOUNVLHVCQUF1QjtrSEFBdkIsdUJBQXVCLGNBRnRCLE1BQU07OzJGQUVQLHVCQUF1QjtrQkFIbkMsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0luamVjdGFibGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQge0h0dHBDbGllbnQsIEh0dHBQYXJhbXN9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuaW1wb3J0IHtzZXRKdnhDYWxsfSBmcm9tICcuL3V0aWxzJztcclxuXHJcbkBJbmplY3RhYmxlKHtcclxuICBwcm92aWRlZEluOiAncm9vdCdcclxufSlcclxuZXhwb3J0IGNsYXNzIE5nSnZ4TXVsdGlzZWxlY3RTZXJ2aWNlIHtcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGh0dHA6IEh0dHBDbGllbnQpIHtcclxuICB9XHJcblxyXG4gIGdldExpc3Qoe1xyXG4gICAgICAgICAgICB1cmwsXHJcbiAgICAgICAgICAgIGlnbm9yZVBhZ2luYXRpb24gPSBmYWxzZSxcclxuICAgICAgICAgICAgY3VycmVudFBhZ2UsXHJcbiAgICAgICAgICAgIHBhZ2VTaXplLFxyXG4gICAgICAgICAgICByZXF1ZXN0VHlwZSA9ICdnZXQnLFxyXG4gICAgICAgICAgICByZXF1ZXN0SGVhZGVycyxcclxuICAgICAgICAgICAgc2VhcmNoLFxyXG4gICAgICAgICAgICBzZWFyY2hQcm9wID0gJ3NlYXJjaCcsXHJcbiAgICAgICAgICAgIGRhdGFcclxuICAgICAgICAgIH06IHtcclxuICAgIHVybDogc3RyaW5nLCBpZ25vcmVQYWdpbmF0aW9uOiBib29sZWFuLFxyXG4gICAgY3VycmVudFBhZ2U6IG51bWJlcixcclxuICAgIHBhZ2VTaXplOiBudW1iZXIsXHJcbiAgICByZXF1ZXN0VHlwZTogJ2dldCcgfCAncG9zdCcsXHJcbiAgICByZXF1ZXN0SGVhZGVyczogYW55LFxyXG4gICAgc2VhcmNoPzogc3RyaW5nLFxyXG4gICAgc2VhcmNoUHJvcD86IHN0cmluZyxcclxuICAgIGRhdGE6IGFueVxyXG4gIH0pOiBPYnNlcnZhYmxlPGFueT4ge1xyXG4gICAgbGV0IHBhcmFtcyA9IG5ldyBIdHRwUGFyYW1zKCk7XHJcbiAgICBpZiAoc2VhcmNoICYmIHNlYXJjaC5sZW5ndGggPiAwKSB7XHJcbiAgICAgIHBhcmFtcyA9IHBhcmFtcy5zZXQoc2VhcmNoUHJvcCwgc2VhcmNoKTtcclxuICAgIH1cclxuICAgIGlmICghaWdub3JlUGFnaW5hdGlvbikge1xyXG4gICAgICBwYXJhbXMgPSBwYXJhbXMuc2V0KCdwYWdlJywgY3VycmVudFBhZ2UudG9TdHJpbmcoKSlcclxuICAgICAgICAuc2V0KCdzaXplJywgcGFnZVNpemUudG9TdHJpbmcoKSk7XHJcbiAgICB9XHJcbiAgICBjb25zdCBvcHRpb25zID0ge1xyXG4gICAgICBtb2RlOiAnbm8tY29ycycsIC8vIGNvcnNcclxuICAgICAgaGVhZGVyczogcmVxdWVzdEhlYWRlcnMsXHJcbiAgICAgIGNvbnRleHQ6IHNldEp2eENhbGwoKSxcclxuICAgICAgLy8gd2l0aENyZWRlbnRpYWxzOiB0cnVlLFxyXG4gICAgICAvLyBjcmVkZW50aWFsczogJ3NhbWUtb3JpZ2luJywgLy8gY2FjaGU6ICdkZWZhdWx0JyxcclxuICAgICAgZGF0YSxcclxuICAgICAgcGFyYW1zXHJcbiAgICB9O1xyXG4gICAgaWYgKHJlcXVlc3RUeXBlID09PSAnZ2V0Jykge1xyXG4gICAgICByZXR1cm4gdGhpcy5odHRwLmdldCh1cmwsIG9wdGlvbnMpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgcmV0dXJuIHRoaXMuaHR0cC5wb3N0KHVybCwgb3B0aW9ucyk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctanZ4LW11bHRpc2VsZWN0LnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi9uZy1qdngtbXVsdGlzZWxlY3Quc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXpDLE9BQU8sRUFBYyxVQUFVLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUM5RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sU0FBUyxDQUFDOzs7QUFLbkMsTUFBTSxPQUFPLHVCQUF1QjtJQUNsQyxZQUFvQixJQUFnQjtRQUFoQixTQUFJLEdBQUosSUFBSSxDQUFZO0lBQ3BDLENBQUM7SUFFRCxPQUFPLENBQUMsRUFDRSxHQUFHLEVBQ0gsZ0JBQWdCLEdBQUcsS0FBSyxFQUN4QixXQUFXLEVBQ1gsUUFBUSxFQUNSLFdBQVcsR0FBRyxLQUFLLEVBQ25CLGNBQWMsRUFDZCxNQUFNLEVBQ04sVUFBVSxHQUFHLFFBQVEsRUFDckIsSUFBSSxFQVViO1FBQ0MsSUFBSSxNQUFNLEdBQUcsSUFBSSxVQUFVLEVBQUUsQ0FBQztRQUM5QixJQUFJLE1BQU0sSUFBSSxNQUFNLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ2hDLE1BQU0sR0FBRyxNQUFNLENBQUMsR0FBRyxDQUFDLFVBQVUsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUMxQyxDQUFDO1FBQ0QsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDdEIsTUFBTSxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLFdBQVcsQ0FBQyxRQUFRLEVBQUUsQ0FBQztpQkFDaEQsR0FBRyxDQUFDLE1BQU0sRUFBRSxRQUFRLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUN0QyxDQUFDO1FBQ0QsTUFBTSxPQUFPLEdBQUc7WUFDZCxJQUFJLEVBQUUsU0FBUyxFQUFFLE9BQU87WUFDeEIsT0FBTyxFQUFFLGNBQWM7WUFDdkIsT0FBTyxFQUFFLFVBQVUsRUFBRTtZQUNyQix5QkFBeUI7WUFDekIsbURBQW1EO1lBQ25ELElBQUk7WUFDSixNQUFNO1NBQ1AsQ0FBQztRQUNGLElBQUksV0FBVyxLQUFLLEtBQUssRUFBRSxDQUFDO1lBQzFCLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBQ3JDLENBQUM7YUFBTSxDQUFDO1lBQ04sT0FBTyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFDdEMsQ0FBQztJQUNILENBQUM7OEdBOUNVLHVCQUF1QjtrSEFBdkIsdUJBQXVCLGNBRnRCLE1BQU07OzJGQUVQLHVCQUF1QjtrQkFIbkMsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0luamVjdGFibGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBIdHRwQ2xpZW50LCBIdHRwUGFyYW1zIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xyXG5pbXBvcnQge3NldEp2eENhbGx9IGZyb20gJy4vdXRpbHMnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgTmdKdnhNdWx0aXNlbGVjdFNlcnZpY2Uge1xyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgaHR0cDogSHR0cENsaWVudCkge1xyXG4gIH1cclxuXHJcbiAgZ2V0TGlzdCh7XHJcbiAgICAgICAgICAgIHVybCxcclxuICAgICAgICAgICAgaWdub3JlUGFnaW5hdGlvbiA9IGZhbHNlLFxyXG4gICAgICAgICAgICBjdXJyZW50UGFnZSxcclxuICAgICAgICAgICAgcGFnZVNpemUsXHJcbiAgICAgICAgICAgIHJlcXVlc3RUeXBlID0gJ2dldCcsXHJcbiAgICAgICAgICAgIHJlcXVlc3RIZWFkZXJzLFxyXG4gICAgICAgICAgICBzZWFyY2gsXHJcbiAgICAgICAgICAgIHNlYXJjaFByb3AgPSAnc2VhcmNoJyxcclxuICAgICAgICAgICAgZGF0YVxyXG4gICAgICAgICAgfToge1xyXG4gICAgdXJsOiBzdHJpbmcsIGlnbm9yZVBhZ2luYXRpb246IGJvb2xlYW4sXHJcbiAgICBjdXJyZW50UGFnZTogbnVtYmVyLFxyXG4gICAgcGFnZVNpemU6IG51bWJlcixcclxuICAgIHJlcXVlc3RUeXBlOiAnZ2V0JyB8ICdwb3N0JyxcclxuICAgIHJlcXVlc3RIZWFkZXJzOiBhbnksXHJcbiAgICBzZWFyY2g/OiBzdHJpbmcsXHJcbiAgICBzZWFyY2hQcm9wPzogc3RyaW5nLFxyXG4gICAgZGF0YTogYW55XHJcbiAgfSk6IE9ic2VydmFibGU8YW55PiB7XHJcbiAgICBsZXQgcGFyYW1zID0gbmV3IEh0dHBQYXJhbXMoKTtcclxuICAgIGlmIChzZWFyY2ggJiYgc2VhcmNoLmxlbmd0aCA+IDApIHtcclxuICAgICAgcGFyYW1zID0gcGFyYW1zLnNldChzZWFyY2hQcm9wLCBzZWFyY2gpO1xyXG4gICAgfVxyXG4gICAgaWYgKCFpZ25vcmVQYWdpbmF0aW9uKSB7XHJcbiAgICAgIHBhcmFtcyA9IHBhcmFtcy5zZXQoJ3BhZ2UnLCBjdXJyZW50UGFnZS50b1N0cmluZygpKVxyXG4gICAgICAgIC5zZXQoJ3NpemUnLCBwYWdlU2l6ZS50b1N0cmluZygpKTtcclxuICAgIH1cclxuICAgIGNvbnN0IG9wdGlvbnMgPSB7XHJcbiAgICAgIG1vZGU6ICduby1jb3JzJywgLy8gY29yc1xyXG4gICAgICBoZWFkZXJzOiByZXF1ZXN0SGVhZGVycyxcclxuICAgICAgY29udGV4dDogc2V0SnZ4Q2FsbCgpLFxyXG4gICAgICAvLyB3aXRoQ3JlZGVudGlhbHM6IHRydWUsXHJcbiAgICAgIC8vIGNyZWRlbnRpYWxzOiAnc2FtZS1vcmlnaW4nLCAvLyBjYWNoZTogJ2RlZmF1bHQnLFxyXG4gICAgICBkYXRhLFxyXG4gICAgICBwYXJhbXNcclxuICAgIH07XHJcbiAgICBpZiAocmVxdWVzdFR5cGUgPT09ICdnZXQnKSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmh0dHAuZ2V0KHVybCwgb3B0aW9ucyk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gdGhpcy5odHRwLnBvc3QodXJsLCBvcHRpb25zKTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19

package/esm2022/lib/ng-jvx-option/ng-jvx-option.component.mjs

@@ -16,10 +16,10 @@ export class NgJvxOptionComponent {
     deselect() {
         this.listOption.selected = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { listOption: [{
@@ -28,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }], value: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctanZ4LW9wdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi9uZy1qdngtb3B0aW9uL25nLWp2eC1vcHRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctanZ4LW11bHRpc2VsZWN0L3NyYy9saWIvbmctanZ4LW9wdGlvbi9uZy1qdngtb3B0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVcsS0FBSyxFQUFVLFNBQVMsRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7OztBQVU5RixNQUFNLE9BQU8sb0JBQW9CO0lBSy9CO1FBRk8sZUFBVSxHQUFHLEtBQUssQ0FBQztJQUcxQixDQUFDO0lBRUQsUUFBUTtJQUVSLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFO1lBQ2hELElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUM7U0FDNUM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNuQyxDQUFDOzhHQXBCVSxvQkFBb0I7a0dBQXBCLG9CQUFvQix5TUNWakMsaVBBSUE7OzJGRE1hLG9CQUFvQjtrQkFQaEMsU0FBUzsrQkFFRSxlQUFlLGlCQUdWLGlCQUFpQixDQUFDLElBQUk7d0RBR0ksVUFBVTtzQkFBbEQsU0FBUzt1QkFBQyxZQUFZLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQUM5QixLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRG9DaGVjaywgSW5wdXQsIE9uSW5pdCwgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7TWF0TGlzdE9wdGlvbn0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvbGlzdCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6Y29tcG9uZW50LXNlbGVjdG9yXHJcbiAgc2VsZWN0b3I6ICduZy1qdngtb3B0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbmctanZ4LW9wdGlvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vbmctanZ4LW9wdGlvbi5jb21wb25lbnQuc2NzcyddLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcclxufSlcclxuZXhwb3J0IGNsYXNzIE5nSnZ4T3B0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBEb0NoZWNrIHtcclxuICBAVmlld0NoaWxkKCdsaXN0T3B0aW9uJywge3N0YXRpYzogdHJ1ZX0pIGxpc3RPcHRpb246IE1hdExpc3RPcHRpb247XHJcbiAgQElucHV0KCkgdmFsdWU6IGFueTtcclxuICBwdWJsaWMgaXNTZWxlY3RlZCA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG5cclxuICB9XHJcblxyXG4gIG5nRG9DaGVjaygpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmlzU2VsZWN0ZWQgIT09IHRoaXMubGlzdE9wdGlvbi5zZWxlY3RlZCkge1xyXG4gICAgICB0aGlzLmlzU2VsZWN0ZWQgPSB0aGlzLmxpc3RPcHRpb24uc2VsZWN0ZWQ7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBkZXNlbGVjdCgpOiB2b2lke1xyXG4gICAgdGhpcy5saXN0T3B0aW9uLnNlbGVjdGVkID0gZmFsc2U7XHJcbiAgfVxyXG59XHJcbiIsIjxtYXQtbGlzdC1vcHRpb24gW3ZhbHVlXT1cInZhbHVlXCIgW25nQ2xhc3NdPVwieyduZy1qdngtb3B0aW9uJzogdHJ1ZSwgJ21hdC1saXN0LXNpbmdsZS1zZWxlY3RlZC1vcHRpb24nOiBpc1NlbGVjdGVkfVwiICNsaXN0T3B0aW9uPlxyXG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICA8ZGl2IGNsYXNzPVwibGlzdC1vcHRpb24tYmFja2dyb3VuZFwiPjwvZGl2PlxyXG48L21hdC1saXN0LW9wdGlvbj5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctanZ4LW9wdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi9uZy1qdngtb3B0aW9uL25nLWp2eC1vcHRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctanZ4LW11bHRpc2VsZWN0L3NyYy9saWIvbmctanZ4LW9wdGlvbi9uZy1qdngtb3B0aW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVcsS0FBSyxFQUFVLFNBQVMsRUFBRSxpQkFBaUIsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7OztBQVU5RixNQUFNLE9BQU8sb0JBQW9CO0lBSy9CO1FBRk8sZUFBVSxHQUFHLEtBQUssQ0FBQztJQUcxQixDQUFDO0lBRUQsUUFBUTtJQUVSLENBQUM7SUFFRCxTQUFTO1FBQ1AsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDakQsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQztRQUM3QyxDQUFDO0lBQ0gsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7SUFDbkMsQ0FBQzs4R0FwQlUsb0JBQW9CO2tHQUFwQixvQkFBb0IseU1DVmpDLGlQQUlBOzsyRkRNYSxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBRUUsZUFBZSxpQkFHVixpQkFBaUIsQ0FBQyxJQUFJO3dEQUdJLFVBQVU7c0JBQWxELFNBQVM7dUJBQUMsWUFBWSxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQztnQkFDOUIsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIERvQ2hlY2ssIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCwgVmlld0VuY2Fwc3VsYXRpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge01hdExpc3RPcHRpb259IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2xpc3QnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmNvbXBvbmVudC1zZWxlY3RvclxyXG4gIHNlbGVjdG9yOiAnbmctanZ4LW9wdGlvbicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL25nLWp2eC1vcHRpb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL25nLWp2eC1vcHRpb24uY29tcG9uZW50LnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ0p2eE9wdGlvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgRG9DaGVjayB7XHJcbiAgQFZpZXdDaGlsZCgnbGlzdE9wdGlvbicsIHtzdGF0aWM6IHRydWV9KSBsaXN0T3B0aW9uOiBNYXRMaXN0T3B0aW9uO1xyXG4gIEBJbnB1dCgpIHZhbHVlOiBhbnk7XHJcbiAgcHVibGljIGlzU2VsZWN0ZWQgPSBmYWxzZTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuXHJcbiAgfVxyXG5cclxuICBuZ0RvQ2hlY2soKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5pc1NlbGVjdGVkICE9PSB0aGlzLmxpc3RPcHRpb24uc2VsZWN0ZWQpIHtcclxuICAgICAgdGhpcy5pc1NlbGVjdGVkID0gdGhpcy5saXN0T3B0aW9uLnNlbGVjdGVkO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZGVzZWxlY3QoKTogdm9pZHtcclxuICAgIHRoaXMubGlzdE9wdGlvbi5zZWxlY3RlZCA9IGZhbHNlO1xyXG4gIH1cclxufVxyXG4iLCI8bWF0LWxpc3Qtb3B0aW9uIFt2YWx1ZV09XCJ2YWx1ZVwiIFtuZ0NsYXNzXT1cInsnbmctanZ4LW9wdGlvbic6IHRydWUsICdtYXQtbGlzdC1zaW5nbGUtc2VsZWN0ZWQtb3B0aW9uJzogaXNTZWxlY3RlZH1cIiAjbGlzdE9wdGlvbj5cclxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgPGRpdiBjbGFzcz1cImxpc3Qtb3B0aW9uLWJhY2tncm91bmRcIj48L2Rpdj5cclxuPC9tYXQtbGlzdC1vcHRpb24+XHJcbiJdfQ==

package/esm2022/lib/utils.mjs

@@ -1,4 +1,4 @@
 import { HttpContext, HttpContextToken } from '@angular/common/http';
 export const JVXMULTISELECT = new HttpContextToken(() => false);
 export const setJvxCall = () => new HttpContext().set(JVXMULTISELECT, true);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi91dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsV0FBVyxFQUFFLGdCQUFnQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFFbkUsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUksZ0JBQWdCLENBQVUsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDekUsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLEdBQVEsRUFBRSxDQUFDLElBQUksV0FBVyxFQUFFLENBQUMsR0FBRyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7SHR0cENvbnRleHQsIEh0dHBDb250ZXh0VG9rZW59IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuXHJcbmV4cG9ydCBjb25zdCBKVlhNVUxUSVNFTEVDVCA9IG5ldyBIdHRwQ29udGV4dFRva2VuPGJvb2xlYW4+KCgpID0+IGZhbHNlKTtcclxuZXhwb3J0IGNvbnN0IHNldEp2eENhbGwgPSAoKTogYW55ID0+IG5ldyBIdHRwQ29udGV4dCgpLnNldChKVlhNVUxUSVNFTEVDVCwgdHJ1ZSk7XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1qdngtbXVsdGlzZWxlY3Qvc3JjL2xpYi91dGlscy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFFckUsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLElBQUksZ0JBQWdCLENBQVUsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDekUsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLEdBQVEsRUFBRSxDQUFDLElBQUksV0FBVyxFQUFFLENBQUMsR0FBRyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEh0dHBDb250ZXh0LCBIdHRwQ29udGV4dFRva2VuIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xyXG5cclxuZXhwb3J0IGNvbnN0IEpWWE1VTFRJU0VMRUNUID0gbmV3IEh0dHBDb250ZXh0VG9rZW48Ym9vbGVhbj4oKCkgPT4gZmFsc2UpO1xyXG5leHBvcnQgY29uc3Qgc2V0SnZ4Q2FsbCA9ICgpOiBhbnkgPT4gbmV3IEh0dHBDb250ZXh0KCkuc2V0KEpWWE1VTFRJU0VMRUNULCB0cnVlKTtcclxuIl19

package/fesm2022/ng-jvx-multiselect.mjs

@@ -40,10 +40,10 @@ class NgJvxOptionComponent {
     deselect() {
         this.listOption.selected = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "listOption", first: true, predicate: ["listOption"], descendants: true, static: true }], ngImport: i0, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-jvx-option', encapsulation: ViewEncapsulation.None, template: "<mat-list-option [value]=\"value\" [ngClass]=\"{'ng-jvx-option': true, 'mat-list-single-selected-option': isSelected}\" #listOption>\r\n  <ng-content></ng-content>\r\n  <div class=\"list-option-background\"></div>\r\n</mat-list-option>\r\n", styles: ["ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option{padding:0;height:auto;min-height:48px}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option .mat-list-text{min-height:48px;display:flex;justify-content:center}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true]{color:var(--jvx-multiselect-primary)}ng-jvx-option .mat-mdc-list-item.mat-mdc-list-option.ng-jvx-option[aria-selected=true] .list-option-background{position:absolute;left:0;top:0;z-index:-1;opacity:.45;height:100%;width:100%;background:var(--jvx-multiselect-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { listOption: [{
@@ -64,10 +64,10 @@ class NgJvxOptionsTemplateDirective {
             this.vcRef.createEmbeddedView(this.template, { $implicit: item });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxOptionsTemplateDirective, deps: [{ token: i0.ElementRef }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxOptionsTemplateDirective, selector: "[ngJvxOptionsTemplate]", inputs: { ngJvxOptionsTemplateOf: "ngJvxOptionsTemplateOf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxOptionsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -87,10 +87,10 @@ class NgJvxSelectionTemplateDirective {
             this.vcRef.createEmbeddedView(this.template, { $implicit: item });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxSelectionTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxSelectionTemplateDirective, selector: "[ngJvxSelectionTemplate]", inputs: { ngJvxSelectionTemplateOf: "ngJvxSelectionTemplateOf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxSelectionTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -110,10 +110,10 @@ class NgJvxGroupHeaderDirective {
             this.vcRef.createEmbeddedView(this.template, { $implicit: item });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxGroupHeaderDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxGroupHeaderDirective, selector: "[ngJvxGroupHeader]", inputs: { ngJvxGroupHeaderOf: "ngJvxGroupHeaderOf" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxGroupHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -152,10 +152,10 @@ class NgJvxDisabledOptionDirective {
         this.unsubs.next();
         this.unsubs.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxDisabledOptionDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxDisabledOptionDirective, selector: "[ngJvxDisabledOption]", inputs: { ngJvxDisabledOption: "ngJvxDisabledOption" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxDisabledOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -182,7 +182,7 @@ class NgJvxMultiselectService {
                 .set('size', pageSize.toString());
         }
         const options = {
-            mode: 'no-cors',
+            mode: 'no-cors', // cors
             headers: requestHeaders,
             context: setJvxCall(),
             // withCredentials: true,
@@ -197,10 +197,10 @@ class NgJvxMultiselectService {
             return this.http.post(url, options);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -221,10 +221,10 @@ class NgJvxFocusDirective {
             this.el.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.8", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: { ngJvxFocus: "ngJvxFocus" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     // tslint:disable-next-line:directive-selector
@@ -725,16 +725,16 @@ class NgJvxMultiselectComponent {
     closeMenu() {
         this.trigger.closeMenu();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.8", type: NgJvxMultiselectComponent, selector: "ng-jvx-multiselect", inputs: { options: "options", multi: "multi", url: "url", requestType: "requestType", itemValue: "itemValue", itemText: "itemText", ignorePagination: "ignorePagination", clearable: "clearable", closeOnClick: "closeOnClick", hasErrors: "hasErrors", searchMode: "searchMode", searchInput: "searchInput", searchLabel: "searchLabel", listProp: "listProp", totalRowsProp: "totalRowsProp", panelClass: "panelClass", searchProp: "searchProp", closeButton: "closeButton", mapper: "mapper", multiMapper: "multiMapper", searchMapper: "searchMapper", groupBy: "groupBy", value: "value", requestHeaders: "requestHeaders", required: "required", disabled: "disabled", pageSize: "pageSize" }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: NgJvxMultiselectService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: NgJvxMultiselectComponent, selector: "ng-jvx-multiselect", inputs: { options: "options", multi: "multi", url: "url", requestType: "requestType", itemValue: "itemValue", itemText: "itemText", ignorePagination: "ignorePagination", clearable: "clearable", closeOnClick: "closeOnClick", hasErrors: "hasErrors", searchMode: "searchMode", searchInput: "searchInput", searchLabel: "searchLabel", listProp: "listProp", totalRowsProp: "totalRowsProp", panelClass: "panelClass", searchProp: "searchProp", closeButton: "closeButton", mapper: "mapper", multiMapper: "multiMapper", searchMapper: "searchMapper", groupBy: "groupBy", value: "value", requestHeaders: "requestHeaders", required: "required", disabled: "disabled", pageSize: "pageSize" }, outputs: { valueChange: "valueChange", jvxMultiselectOpen: "jvxMultiselectOpen", jvxMultiselectOpened: "jvxMultiselectOpened", jvxMultiselectClose: "jvxMultiselectClose", jvxMultiselectClosed: "jvxMultiselectClosed", scrollEnd: "scrollEnd" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat" } }, providers: [
             {
                 provide: MatFormFieldControl,
                 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, static: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\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 > 260? 260 - (searchInput? 40 : 0) + '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              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\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\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\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    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\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  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"], dependencies: [{ kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.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: "directive", type: i9.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], 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, static: true }, { propertyName: "valueContainer", first: true, predicate: ["valueContainer"], descendants: true, static: true }, { propertyName: "selectionContainer", first: true, predicate: ["selectionContainer"], descendants: true }, { propertyName: "selection", first: true, predicate: ["selection"], descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, static: true }, { propertyName: "scrollbar", first: true, predicate: ["scrollbar"], descendants: true }, { propertyName: "multiContainer", first: true, predicate: ["multiContainer"], descendants: true }, { propertyName: "placeholderContainer", first: true, predicate: ["placeholderContainer"], descendants: true }, { propertyName: "optionComp", predicate: NgJvxOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\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 > 260? 260 - (searchInput? 40 : 0) + '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              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\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\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\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    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\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  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"], dependencies: [{ kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i7.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.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: "directive", type: i9.SmoothScroll, selector: "[smoothScroll], [smooth-scroll]", exportAs: ["smoothScroll"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgJvxOptionComponent, selector: "ng-jvx-option", inputs: ["value"] }, { kind: "directive", type: NgJvxFocusDirective, selector: "[ngJvxFocus]", inputs: ["ngJvxFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-jvx-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
@@ -742,7 +742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                             useExisting: forwardRef(() => NgJvxMultiselectComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\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 > 260? 260 - (searchInput? 40 : 0) + '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              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\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\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\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    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\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  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"] }]
+                    ], template: "<div class=\"ng-jvx-multiselect\" [ngClass]=\"{'disabled': disabled, 'has-errors': hasErrors}\" #jvxMultiselect>\r\n  <!-- START MENU -->\r\n  <div [matMenuTriggerFor]=\"menuRef\" (onMenuOpen)=\"onMenuOpen()\" (menuOpened)=\"onMenuOpened()\"\r\n       (onMenuClose)=\"onMenuClose()\" (menuClosed)=\"onMenuClosed()\"\r\n       #trigger=\"matMenuTrigger\">\r\n    <mat-menu #menuRef=\"matMenu\" [class]=\"['jvx-multiselect-panel', panelClass].join(' ')\" [formGroup]=\"form\"\r\n              [yPosition]=\"yPosition\">\r\n      <div *ngIf=\"closeButton\" class=\"closeMenuButton\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n      <div class=\"menu-list-container\"\r\n           #menuLIstContainer\r\n           [ngStyle]=\"{'overflow-y': 'hidden', 'width': listContainerSize.width, 'min-width.px': 112, 'max-height': '260px', 'height': listContainerSize.height, 'min-height': listContainerSize.minHeight}\">\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 > 260? 260 - (searchInput? 40 : 0) + '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              <mat-selection-list #selection [multiple]=\"multi\"\r\n                                  *ngIf=\"showList\"\r\n                                  [ngStyle]=\"{'padding': 0, 'width': listContainerSize.width, 'min-width.px': 112}\"\r\n                                  (selectionChange)=\"onChange($event)\"\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                      <!--        <ng-container [ngTemplateOutlet]=\"optionsTemplate\" [ngTemplateOutletContext]=\"{$implicit: option}\"></ng-container>-->\r\n                      <div class=\"ng-jvx-option-wrapper\">\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 || groupBy.length === 0\">\r\n                  <ng-jvx-option *ngFor=\"let option of selectableOptions\" [value]=\"option[itemValue]\">\r\n                    <div class=\"ng-jvx-option-wrapper\">\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              </mat-selection-list>\r\n            </div>\r\n          </ng-scrollbar>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"menu-footer\">\r\n        <ng-content select=\"[ng-jvx-footer]\"></ng-content>\r\n      </div>\r\n\r\n    </mat-menu>\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\r\n      <ng-container [ngTemplateOutlet]=\"selectionTemplate? selectionTemplate.template : defaultMultiSelectionTemplate\"\r\n                    [ngTemplateOutletContext]=\"{$implicit: value}\"></ng-container>\r\n\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    <div class=\"ng-jvx-multiselect__remove-button\" *ngIf=\"clearable && value.length > 0\" (click)=\"clear($event)\">\r\n      <mat-icon style=\"font-size: 18px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\">clear\r\n      </mat-icon>\r\n    </div>\r\n    <div class=\"ng-jvx-multiselect-arrow\">\r\n      <mat-icon *ngIf=\"!isLoading\">expand_more</mat-icon>\r\n      <div *ngIf=\"isLoading\" class=\"lds-ring\">\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n        <div></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- END INPUT -->\r\n</div>\r\n<ng-template #defaultTemplate let-option>\r\n  <div style=\"max-width: 100%;\r\n     white-space: nowrap;\r\n     overflow: hidden;\r\n     text-overflow: ellipsis;\">{{ option[itemText] }}\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  <mat-chip-listbox #chipList [disabled]=\"this.disabled\">\r\n    <mat-chip-option [color]=\"'primary'\" selected *ngFor=\"let val of value\" [selectable]=\"false\"\r\n                     class=\"ng-jvx-multiselect-chip\"\r\n                     [removable]=\"true\" (removed)=\"deselect(val)\">\r\n          <span class=\"chip-content\"\r\n                [ngStyle]=\"{'max-width': multiContainerWidth - 50 +'px'}\">{{ val[itemText] }}</span>\r\n\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\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-value .mat-chip-list-wrapper .mat-mdc-standard-chip{padding:0 5px 0 7px;margin:4px 5px 0}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-value .mat-chip-list-wrapper .mat-mdc-standard-chip .chip-content{margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}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}ng-jvx-multiselect .ng-jvx-multiselect .ng-jvx-multiselect-value-container .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{transform:rotate(180deg)}ng-jvx-multiselect .ng-jvx-multiselect.disabled{pointer-events:none}ng-jvx-multiselect .ng-jvx-multiselect.disabled .ng-jvx-multiselect-arrow mat-icon{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 mat-icon{color:red}.mat-select-test{width:250px}.menu-list-container{max-height:300px;display:flex;flex-direction:column}.menu-footer{max-height:30px;overflow:hidden}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel{max-width:100%;position:relative;overflow:visible}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .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 .mat-mdc-menu-panel.jvx-multiselect-panel .closeMenuButton mat-icon{color:#fff;font-size:15px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .menu-list-container ng-scrollbar{--scrollbar-color: transparent;--scrollbar-container-color: transparent;--scrollbar-thumb-color: var(--jvx-multiselect-accent);--scrollbar-thumb-hover-color: var(--jvx-multiselect-accent);--scrollbar-border-radius: 4px;--scrollbar-size: 6px;--scrollbar-padding: 8px;--scroll-view-margin: 0;--scroll-view-color: transparent}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container{height:40px;display:flex;align-items:center;padding:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input{width:100%;outline:none;border:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:focus{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .search-input-container input:active{outline:none}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list{padding-top:0!important;padding-bottom:0!important}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .ng-jvx-option-wrapper,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .ng-jvx-option-wrapper{padding-inline:10px}.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=true] .mdc-list-item__end,.cdk-overlay-pane .mat-mdc-menu-panel.jvx-multiselect-panel .mat-mdc-menu-content .mat-mdc-selection-list .mat-mdc-list-option[aria-selected=false] .mdc-list-item__end{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: NgJvxMultiselectService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -857,8 +857,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class NgJvxMultiselectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, declarations: [NgJvxMultiselectComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectModule, declarations: [NgJvxMultiselectComponent,
             NgJvxOptionComponent,
             NgJvxOptionsTemplateDirective,
             NgJvxSelectionTemplateDirective,
@@ -881,7 +881,7 @@ class NgJvxMultiselectModule {
             NgJvxSelectionTemplateDirective,
             NgJvxDisabledOptionDirective,
             NgJvxGroupHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, imports: [MatButtonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectModule, imports: [MatButtonModule,
             MatOptionModule,
             MatSelectModule,
             MatMenuModule,
@@ -893,7 +893,7 @@ class NgJvxMultiselectModule {
             NgScrollbarModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: NgJvxMultiselectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [