@yoozsoft/yoozsoft-ng 3.1.4 → 4.0.0

package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs

@@ -1,26 +1,44 @@
-import { NgIf, NgFor, NgClass } from '@angular/common';
+import { NgIf, NgFor, NgClass, JsonPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { forwardRef, Component, Input } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 
 class YsSelectComponent {
-    constructor() {
-        this.options = [];
-        this.optionLabel = 'label';
-        this.isDisabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    get value() { return this.val; }
-    set value(val) {
-        if (val !== undefined && this.val !== val) {
-            this.val = val;
-            this.onChange(val);
-            this.onTouched(val);
-        }
-    }
+    /**ُSelect element id */
+    id = 'ys-select';
+    options = [];
+    /**Name of field to display in option title */
+    optionLabel = 'label';
+    placeholder;
+    styleClass;
+    invalid = false;
+    invalidStyleClass = 'is-invalid';
+    valid = false;
+    validStyleClass = 'is-valid';
+    multiple = false;
+    /**Display clear button */
+    isClear = false;
+    isDisabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    value;
     writeValue(obj) {
+        if (this.placeholder && !obj) {
+            this.value = undefined;
+            this.onChange(this.value);
+            return;
+        }
+        if (!this.multiple && obj && Array.isArray(obj)) {
+            if (obj.length) {
+                this.value = obj[0];
+            }
+            else {
+                this.value = undefined;
+            }
+            this.onChange(this.value);
+            return;
+        }
         this.value = obj;
     }
     registerOnChange(fn) {
@@ -32,27 +50,38 @@ class YsSelectComponent {
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
     }
+    onModelChange(option) {
+        this.onChange(option);
+        this.onTouched(option);
+    }
     clearValue() {
+        this.value = undefined;
+        this.onModelChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass" }, providers: [
+    isObject(item) {
+        return typeof item == 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass", invalid: "invalid", invalidStyleClass: "invalidStyleClass", valid: "valid", validStyleClass: "validStyleClass", multiple: "multiple", isClear: "isClear" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<select class=\"form-select\" aria-label=\"Select option\" [(ngModel)]=\"value\" [disabled]=\"isDisabled\"\r\n    [ngClass]=\"styleClass\">\r\n    <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\"> {{placeholder}} </option>\r\n    <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n        {{item[optionLabel]}}\r\n    </option>\r\n</select>\r\n\r\n<!-- <button type=\"button\" class=\"fa fa-times\" (click)=\"clearValue()\"></button> -->", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        ], ngImport: i0, template: "<div class=\"input-group ys-select\">\r\n\r\n    <select *ngIf=\"!multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"undefined\" class=\"d-none\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled\"\r\n        [multiple]=\"multiple\">\r\n\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <button *ngIf=\"isClear\" class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\r\n        (click)=\"clearValue()\" [disabled]=\"isDisabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-select', standalone: true, imports: [NgIf, NgFor, NgClass, FormsModule], providers: [
+            args: [{ selector: 'ys-select', imports: [NgIf, NgFor, NgClass, FormsModule, JsonPipe], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => YsSelectComponent),
                             multi: true
                         }
-                    ], template: "<select class=\"form-select\" aria-label=\"Select option\" [(ngModel)]=\"value\" [disabled]=\"isDisabled\"\r\n    [ngClass]=\"styleClass\">\r\n    <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\"> {{placeholder}} </option>\r\n    <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n        {{item[optionLabel]}}\r\n    </option>\r\n</select>\r\n\r\n<!-- <button type=\"button\" class=\"fa fa-times\" (click)=\"clearValue()\"></button> -->" }]
-        }], propDecorators: { options: [{
+                    ], template: "<div class=\"input-group ys-select\">\r\n\r\n    <select *ngIf=\"!multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"undefined\" class=\"d-none\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled\"\r\n        [multiple]=\"multiple\">\r\n\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <button *ngIf=\"isClear\" class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\r\n        (click)=\"clearValue()\" [disabled]=\"isDisabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], options: [{
                 type: Input
             }], optionLabel: [{
                 type: Input
@@ -60,6 +89,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], styleClass: [{
                 type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidStyleClass: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], validStyleClass: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], isClear: [{
+                type: Input
             }] } });
 
 /*

package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, Input, forwardRef } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-select',\r\n  standalone: true,\r\n  imports: [NgIf, NgFor, NgClass, FormsModule],\r\n  templateUrl: './ys-select.component.html',\r\n  styleUrls: ['./ys-select.component.scss'],\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsSelectComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n  @Input() options: any[] = [];\r\n  @Input() optionLabel: string = 'label';\r\n  @Input() placeholder?: string;\r\n  @Input() styleClass?: string;\r\n\r\n  isDisabled: boolean = false;\r\n  onChange: any = () => { }\r\n  onTouched: any = () => { }\r\n\r\n  private val?: any;\r\n  get value() { return this.val; }\r\n  set value(val: any) {\r\n    if (val !== undefined && this.val !== val) {\r\n      this.val = val;\r\n      this.onChange(val);\r\n      this.onTouched(val);\r\n    }\r\n  }\r\n\r\n  writeValue(obj: any): void {\r\n    this.value = obj;\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n    this.isDisabled = isDisabled;\r\n  }\r\n\r\n  clearValue() {\r\n\r\n  }\r\n}\r\n","<select class=\"form-select\" aria-label=\"Select option\" [(ngModel)]=\"value\" [disabled]=\"isDisabled\"\r\n    [ngClass]=\"styleClass\">\r\n    <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"null\"> {{placeholder}} </option>\r\n    <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n        {{item[optionLabel]}}\r\n    </option>\r\n</select>\r\n\r\n<!-- <button type=\"button\" class=\"fa fa-times\" (click)=\"clearValue()\"></button> -->","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-select.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/src/ys-select/ys-select.component.html","../../../../projects/yoozsoft/yoozsoft-ng/select/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/select/yoozsoft-yoozsoft-ng-select.ts"],"sourcesContent":["import { JsonPipe, NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, forwardRef, Input } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'ys-select',\r\n  imports: [NgIf, NgFor, NgClass, FormsModule, JsonPipe],\r\n  templateUrl: './ys-select.component.html',\r\n  styleUrl: './ys-select.component.scss',\r\n  providers: [\r\n    {\r\n      provide: NG_VALUE_ACCESSOR,\r\n      useExisting: forwardRef(() => YsSelectComponent),\r\n      multi: true\r\n    }\r\n  ]\r\n})\r\nexport class YsSelectComponent implements ControlValueAccessor {\r\n\r\n  /**ُSelect element id */\r\n  @Input() id: string = 'ys-select';\r\n  @Input() options: any[] = [];\r\n  /**Name of field to display in option title */\r\n  @Input() optionLabel: string = 'label';\r\n  @Input() placeholder?: string;\r\n  @Input() styleClass?: string;\r\n  @Input() invalid?: boolean = false;\r\n  @Input() invalidStyleClass?: string = 'is-invalid';\r\n  @Input() valid?: boolean = false;\r\n  @Input() validStyleClass?: string = 'is-valid';\r\n  @Input() multiple?: boolean = false;\r\n  /**Display clear button */\r\n  @Input() isClear?: boolean = false;\r\n\r\n  isDisabled: boolean = false;\r\n  onChange: any = () => { }\r\n  onTouched: any = () => { }\r\n\r\n  value?: any;\r\n\r\n  writeValue(obj: any): void {\r\n    if (this.placeholder && !obj) {\r\n      this.value = undefined;\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    if (!this.multiple && obj && Array.isArray(obj)) {\r\n      if (obj.length) {\r\n        this.value = obj[0];\r\n      }\r\n      else {\r\n        this.value = undefined;\r\n      }\r\n      this.onChange(this.value);\r\n      return;\r\n    }\r\n\r\n    this.value = obj;\r\n  }\r\n  registerOnChange(fn: any): void {\r\n    this.onChange = fn;\r\n  }\r\n  registerOnTouched(fn: any): void {\r\n    this.onTouched = fn;\r\n  }\r\n  setDisabledState?(isDisabled: boolean): void {\r\n    this.isDisabled = isDisabled;\r\n  }\r\n\r\n  onModelChange(option: any) {\r\n    this.onChange(option);\r\n    this.onTouched(option);\r\n  }\r\n\r\n  clearValue() {\r\n    this.value = undefined;\r\n    this.onModelChange(this.value);\r\n  }\r\n\r\n  isObject(item: any) {\r\n    return typeof item == 'object';\r\n  }\r\n\r\n}\r\n","<div class=\"input-group ys-select\">\r\n\r\n    <select *ngIf=\"!multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled\">\r\n        <option *ngIf=\"placeholder\" selected disabled [ngValue]=\"undefined\" class=\"d-none\"> {{placeholder}}\r\n        </option>\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <select *ngIf=\"multiple\" [id]=\"id\"\r\n        class=\"form-select {{styleClass}} {{invalid && invalidStyleClass}} {{valid && validStyleClass}}\"\r\n        aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"isDisabled\"\r\n        [multiple]=\"multiple\">\r\n\r\n        <option *ngFor=\"let item of options; let i = index;\" [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n            {{isObject(item) ? item[optionLabel] : item}}\r\n        </option>\r\n    </select>\r\n\r\n    <button *ngIf=\"isClear\" class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\"\r\n        (click)=\"clearValue()\" [disabled]=\"isDisabled\">\r\n        <span class=\"fa fa-times\"></span>\r\n    </button>\r\n</div>","/*\r\n * Public API Surface of ys-select\r\n */\r\n\r\nexport * from './src/ys-select/ys-select.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAiBa,iBAAiB,CAAA;;IAGnB,EAAE,GAAW,WAAW;IACxB,OAAO,GAAU,EAAE;;IAEnB,WAAW,GAAW,OAAO;AAC7B,IAAA,WAAW;AACX,IAAA,UAAU;IACV,OAAO,GAAa,KAAK;IACzB,iBAAiB,GAAY,YAAY;IACzC,KAAK,GAAa,KAAK;IACvB,eAAe,GAAY,UAAU;IACrC,QAAQ,GAAa,KAAK;;IAE1B,OAAO,GAAa,KAAK;IAElC,UAAU,GAAY,KAAK;AAC3B,IAAA,QAAQ,GAAQ,MAAK,GAAI;AACzB,IAAA,SAAS,GAAQ,MAAK,GAAI;AAE1B,IAAA,KAAK;AAEL,IAAA,UAAU,CAAC,GAAQ,EAAA;AACjB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE;AAC5B,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB;;AAGF,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AAC/C,YAAA,IAAI,GAAG,CAAC,MAAM,EAAE;AACd,gBAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;;iBAEhB;AACH,gBAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;AAExB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB;;AAGF,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;AAElB,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;AAEpB,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAErB,IAAA,gBAAgB,CAAE,UAAmB,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU;;AAG9B,IAAA,aAAa,CAAC,MAAW,EAAA;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;;IAGxB,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGhC,IAAA,QAAQ,CAAC,IAAS,EAAA;AAChB,QAAA,OAAO,OAAO,IAAI,IAAI,QAAQ;;uGAhErB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EARjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,UAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,gBAAA,KAAK,EAAE;AACR;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfH,g+CA0BM,EDpBM,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAI,EAAE,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,KAAK,kHAAW,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,6GAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kCAAA,EAAA,QAAA,EAAA,2FAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAWhC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EACZ,OAAA,EAAA,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAG3C,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE;AACR;AACF,qBAAA,EAAA,QAAA,EAAA,g+CAAA,EAAA;8BAKQ,EAAE,EAAA,CAAA;sBAAV;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBAEQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBAEQ,OAAO,EAAA,CAAA;sBAAf;;;AEhCH;;AAEG;;ACFH;;AAEG;;;;"}

package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs

@@ -3,59 +3,57 @@ import { Injectable, Component, Input } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { NgIf, NgFor, NgClass } from '@angular/common';
 import * as i1 from '@angular/router';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { YsOverlayComponent } from '@yoozsoft/yoozsoft-ng/overlay';
+import { NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 
 class SidebarService {
-    constructor() {
-        this._sidebarPinned$ = new BehaviorSubject(true);
-        this._sidebarToggled$ = new BehaviorSubject(true);
-        this._sidebar$ = new BehaviorSubject(false);
-    }
-    get sidebarPinned$() { return this._sidebarPinned$.asObservable(); }
-    get sidebarToggled$() { return this._sidebarToggled$.asObservable(); }
-    get sidebar$() { return this._sidebar$.asObservable(); }
+    constructor() { }
+    _isSidebarToggled$ = new BehaviorSubject(true);
+    _isSidebar$ = new BehaviorSubject(false);
+    get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }
+    get isSidebar$() { return this._isSidebar$.asObservable(); }
     toggleSidebar() {
-        this._sidebarToggled$.next(!this._sidebarToggled$.value);
-        this._sidebarPinned$.next(false);
-    }
-    toggleSidebarPin() {
-        this._sidebarPinned$.next(!this._sidebarPinned$.value);
-        this._sidebarToggled$.next(false);
+        this._isSidebarToggled$.next(!this._isSidebarToggled$.value);
     }
-    setSidebar(value) {
-        this._sidebar$.next(value);
+    setIsSidebar(isSidebar) {
+        this._isSidebar$.next(isSidebar);
     }
     get sidebarState() {
-        return {
-            sidebarPinned: this._sidebarPinned$.getValue(),
-            sidebarToggled: this._sidebarToggled$.getValue()
-        };
+        return this._isSidebarToggled$.getValue();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: SidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SidebarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class YsSidebarComponent {
-    constructor(router, sidebarService) {
+    router;
+    subscription;
+    currentItem;
+    currentItemState = [];
+    _items = [];
+    get items() { return this._items; }
+    ;
+    set items(value) { this._items = value; }
+    profile = null;
+    styleClass;
+    itemsStyleClass;
+    constructor(router) {
         this.router = router;
-        this.sidebarService = sidebarService;
-        this.items = [];
-        this.profile = null;
-        this.styleClass = 'bg-dark text-white';
-        this.overlay = false;
-        this.currentItem = null;
+        this.subscription = router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                this.currentItem = undefined;
+                this.currentItemState = [];
+            }
+        });
     }
-    ngAfterViewInit() {
-        let a = this.router.url;
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
-    get sidebarToggled() { return this.sidebarService.sidebarState.sidebarToggled; }
     get fullName() { return `${this.profile?.firstName} ${this.profile?.lastName}`; }
     openItem(item) {
         if (item.isOpen) {
@@ -68,30 +66,27 @@ class YsSidebarComponent {
     isDropdown(item) {
         return (item.items?.length ?? 0) > 0;
     }
-    toggleSidebar() {
-        this.sidebarService.toggleSidebar();
-    }
-    onRouterLinkActive(event, item) {
-        if (!event && this.currentItem == item) {
-            return;
+    onRouterLinkActive(isActive, item) {
+        this.currentItemState.push(isActive);
+        if (!isActive && this.currentItem == item) {
+            if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {
+                return;
+            }
         }
         this.currentItem = item;
-        item.isActive = event;
+        item.isActive = isActive;
+        // if (isActive) {
+        //   this.items.forEach(x => x.isOpen = false);
+        //   item.isOpen = true;
+        // }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass", overlay: "overlay" }, ngImport: i0, template: "<aside class=\"sidebar overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details text-center transition-ease\">\r\n                <p *ngIf=\"fullName\" class=\"mb-0 text-uppercase name\">\r\n                    <strong>{{fullName || ''}}</strong>\r\n                </p>\r\n                <p *ngIf=\"profile.role\" class=\"mb-0 text-uppercase role\">\r\n                    <small>{{profile.role}}</small>\r\n                </p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (isActiveChange)=\"onRouterLinkActive($event, item)\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\"\r\n                                class=\"badge bg-info {{item.badgeStyleClass}}\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive, 'toggled': item.isOpen}\" data-bs-toggle=\"dropdown\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\"\r\n                                class=\"badge bg-info {{item.badgeStyleClass}}\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-item nav nav-pills flex-column mx-2\" [ngClass]=\"{'d-none': !item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        [routerLinkActive]=\"['active']\" role=\"button\"\r\n                                        (isActiveChange)=\"onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\"\r\n                                            class=\"badge bg-info {{subItem.badgeStyleClass}}\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>\r\n\r\n<ys-overlay *ngIf=\"overlay\" (onClick)=\"toggleSidebar()\" [show]=\"sidebarToggled\"></ys-overlay>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:260px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:60px;height:60px;border-radius:50%;overflow:hidden}.sidebar .sidebar-profile .user-image img{width:100%;height:100%;object-fit:cover;object-position:center}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .name{font-size:.9rem}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-link{height:40px;line-height:40px}.sidebar .sidebar-menu .nav-link span{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-item{-webkit-animation:fadeIn .3s;animation:fadeIn .3s}.sidebar .sidebar-menu .nav-sub-item .nav-link{height:3em;line-height:3em;font-size:11px}.sidebar .sidebar-menu .sidebar-divider{margin:.5rem 0}@media (min-width: 768px){.ys-overlay.show{display:none}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: YsOverlayComponent, selector: "ys-overlay", inputs: ["show"], outputs: ["onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n                <strong *ngIf=\"fullName\" class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n                <small *ngIf=\"profile.role\" class=\"text-uppercase role\">{{profile.role}}</small>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info me-1\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n                            [ngClass]=\"{'show': item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider my-1\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        role=\"button\" [routerLinkActive]=\"['active']\"\r\n                                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\" class=\"badge bg-info\"\r\n                                            [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:60px;height:60px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: YsSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: YsSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-sidebar', standalone: true, imports: [
-                        NgIf,
-                        NgFor,
-                        NgClass,
-                        YsOverlayComponent,
-                        RouterLink,
-                        RouterLinkActive
-                    ], template: "<aside class=\"sidebar overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details text-center transition-ease\">\r\n                <p *ngIf=\"fullName\" class=\"mb-0 text-uppercase name\">\r\n                    <strong>{{fullName || ''}}</strong>\r\n                </p>\r\n                <p *ngIf=\"profile.role\" class=\"mb-0 text-uppercase role\">\r\n                    <small>{{profile.role}}</small>\r\n                </p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (isActiveChange)=\"onRouterLinkActive($event, item)\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\"\r\n                                class=\"badge bg-info {{item.badgeStyleClass}}\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive, 'toggled': item.isOpen}\" data-bs-toggle=\"dropdown\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\"\r\n                                class=\"badge bg-info {{item.badgeStyleClass}}\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-item nav nav-pills flex-column mx-2\" [ngClass]=\"{'d-none': !item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        [routerLinkActive]=\"['active']\" role=\"button\"\r\n                                        (isActiveChange)=\"onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\"\r\n                                            class=\"badge bg-info {{subItem.badgeStyleClass}}\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>\r\n\r\n<ys-overlay *ngIf=\"overlay\" (onClick)=\"toggleSidebar()\" [show]=\"sidebarToggled\"></ys-overlay>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:260px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:60px;height:60px;border-radius:50%;overflow:hidden}.sidebar .sidebar-profile .user-image img{width:100%;height:100%;object-fit:cover;object-position:center}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .name{font-size:.9rem}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-link{height:40px;line-height:40px}.sidebar .sidebar-menu .nav-link span{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-item{-webkit-animation:fadeIn .3s;animation:fadeIn .3s}.sidebar .sidebar-menu .nav-sub-item .nav-link{height:3em;line-height:3em;font-size:11px}.sidebar .sidebar-menu .sidebar-divider{margin:.5rem 0}@media (min-width: 768px){.ys-overlay.show{display:none}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: SidebarService }], propDecorators: { items: [{
+            args: [{ selector: 'ys-sidebar', imports: [NgIf, NgFor, NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n                <strong *ngIf=\"fullName\" class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n                <small *ngIf=\"profile.role\" class=\"text-uppercase role\">{{profile.role}}</small>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info me-1\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n                            [ngClass]=\"{'show': item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider my-1\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        role=\"button\" [routerLinkActive]=\"['active']\"\r\n                                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\" class=\"badge bg-info\"\r\n                                            [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:60px;height:60px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { items: [{
                 type: Input
             }], profile: [{
                 type: Input
@@ -99,8 +94,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], itemsStyleClass: [{
                 type: Input
-            }], overlay: [{
-                type: Input
             }] } });
 
 /*

package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { SidebarState } from '../models/sidebar-state';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n  private _sidebarPinned$ = new BehaviorSubject<boolean>(true);\r\n  private _sidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n  private _sidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n  get sidebarPinned$() { return this._sidebarPinned$.asObservable(); }\r\n  get sidebarToggled$() { return this._sidebarToggled$.asObservable(); }\r\n\r\n  get sidebar$() { return this._sidebar$.asObservable(); }\r\n\r\n  toggleSidebar() {\r\n    this._sidebarToggled$.next(!this._sidebarToggled$.value);\r\n    this._sidebarPinned$.next(false);\r\n  }\r\n\r\n  toggleSidebarPin() {\r\n    this._sidebarPinned$.next(!this._sidebarPinned$.value);\r\n    this._sidebarToggled$.next(false);\r\n  }\r\n\r\n  setSidebar(value: boolean) {\r\n    this._sidebar$.next(value);\r\n  }\r\n\r\n  get sidebarState() {\r\n    return <SidebarState>{\r\n      sidebarPinned: this._sidebarPinned$.getValue(),\r\n      sidebarToggled: this._sidebarToggled$.getValue()\r\n    }\r\n  }\r\n\r\n}\r\n","import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { AfterViewInit, Component, Input } from '@angular/core';\r\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { YsOverlayComponent } from '@yoozsoft/yoozsoft-ng/overlay';\r\nimport { SidebarItem, UserProfile } from '../models';\r\nimport { SidebarItemActive } from '../models/sidebar-item-active';\r\nimport { SidebarService } from '../services';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  standalone: true,\r\n  imports: [\r\n    NgIf,\r\n    NgFor,\r\n    NgClass,\r\n    YsOverlayComponent,\r\n    RouterLink,\r\n    RouterLinkActive\r\n  ],\r\n  templateUrl: './ys-sidebar.component.html',\r\n  styleUrls: ['./ys-sidebar.component.scss']\r\n})\r\nexport class YsSidebarComponent implements AfterViewInit {\r\n\r\n  @Input() items: SidebarItemActive[] = [];\r\n  @Input() profile: UserProfile | null = null;\r\n  @Input() styleClass?: string = 'bg-dark text-white';\r\n  @Input() itemsStyleClass?: string;\r\n  @Input() overlay: boolean = false;\r\n\r\n  constructor(\r\n    private router: Router,\r\n    private sidebarService: SidebarService) {\r\n  }\r\n  ngAfterViewInit(): void {\r\n    let a = this.router.url;\r\n  }\r\n\r\n  get sidebarToggled(): boolean { return this.sidebarService.sidebarState.sidebarToggled; }\r\n  get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n  openItem(item: SidebarItemActive): void {\r\n    if (item.isOpen) {\r\n      item.isOpen = !item.isOpen;\r\n      return;\r\n    }\r\n\r\n    this.items.forEach(x => x.isOpen = false);\r\n    item.isOpen = !item.isOpen;\r\n  }\r\n\r\n  isDropdown(item: SidebarItem): boolean {\r\n    return (item.items?.length ?? 0) > 0;\r\n  }\r\n\r\n  toggleSidebar() {\r\n    this.sidebarService.toggleSidebar();\r\n  }\r\n\r\n  currentItem: SidebarItemActive | null = null;\r\n  onRouterLinkActive(event: any, item: SidebarItemActive) {\r\n    if (!event && this.currentItem == item) {\r\n      return;\r\n    }\r\n\r\n    this.currentItem = item;\r\n    item.isActive = event;\r\n  }\r\n\r\n}\r\n","<aside class=\"sidebar overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details text-center transition-ease\">\r\n                <p *ngIf=\"fullName\" class=\"mb-0 text-uppercase name\">\r\n                    <strong>{{fullName || ''}}</strong>\r\n                </p>\r\n                <p *ngIf=\"profile.role\" class=\"mb-0 text-uppercase role\">\r\n                    <small>{{profile.role}}</small>\r\n                </p>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (isActiveChange)=\"onRouterLinkActive($event, item)\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\"\r\n                                class=\"badge bg-info {{item.badgeStyleClass}}\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive, 'toggled': item.isOpen}\" data-bs-toggle=\"dropdown\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\"\r\n                                class=\"badge bg-info {{item.badgeStyleClass}}\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-item nav nav-pills flex-column mx-2\" [ngClass]=\"{'d-none': !item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        [routerLinkActive]=\"['active']\" role=\"button\"\r\n                                        (isActiveChange)=\"onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\"\r\n                                            class=\"badge bg-info {{subItem.badgeStyleClass}}\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>\r\n\r\n<ys-overlay *ngIf=\"overlay\" (onClick)=\"toggleSidebar()\" [show]=\"sidebarToggled\"></ys-overlay>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\n// export * from './src/ys-sidebar-pin/ys-sidebar-pin.component';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2.SidebarService"],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar.service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.component.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SidebarService {\r\n\r\n  constructor() { }\r\n\r\n  private _isSidebarToggled$ = new BehaviorSubject<boolean>(true);\r\n\r\n  private _isSidebar$ = new BehaviorSubject<boolean>(false);\r\n\r\n  get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }\r\n\r\n  get isSidebar$() { return this._isSidebar$.asObservable(); }\r\n\r\n  toggleSidebar() {\r\n    this._isSidebarToggled$.next(!this._isSidebarToggled$.value);\r\n  }\r\n\r\n  setIsSidebar(isSidebar: boolean) {\r\n    this._isSidebar$.next(isSidebar);\r\n  }\r\n\r\n  get sidebarState() {\r\n    return this._isSidebarToggled$.getValue()\r\n  }\r\n\r\n}\r\n","import { NgClass, NgFor, NgIf } from '@angular/common';\r\nimport { Component, Input, OnDestroy } from '@angular/core';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Subscription } from 'rxjs';\r\nimport { SidebarItem, SidebarItemActive, UserProfile } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  imports: [NgIf, NgFor, NgClass, RouterLink, RouterLinkActive],\r\n  templateUrl: './ys-sidebar.component.html',\r\n  styleUrl: './ys-sidebar.component.scss'\r\n})\r\nexport class YsSidebarComponent implements OnDestroy {\r\n\r\n  private subscription: Subscription;\r\n  private currentItem?: SidebarItemActive;\r\n  private currentItemState: boolean[] = [];\r\n\r\n  private _items: SidebarItemActive[] = [];\r\n  @Input()\r\n  get items(): SidebarItemActive[] { return this._items };\r\n  set items(value: SidebarItem[]) { this._items = value; }\r\n\r\n  @Input() profile: UserProfile | null = null;\r\n  @Input() styleClass?: string;\r\n  @Input() itemsStyleClass?: string;\r\n\r\n  constructor(private router: Router) {\r\n    this.subscription = router.events.subscribe(e => {\r\n      if (e instanceof NavigationEnd) {\r\n        this.currentItem = undefined;\r\n        this.currentItemState = [];\r\n      }\r\n    })\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.subscription.unsubscribe();\r\n  }\r\n\r\n  get fullName(): string { return `${this.profile?.firstName} ${this.profile?.lastName}`; }\r\n\r\n  openItem(item: SidebarItemActive): void {\r\n    if (item.isOpen) {\r\n      item.isOpen = !item.isOpen;\r\n      return;\r\n    }\r\n\r\n    this.items.forEach(x => x.isOpen = false);\r\n    item.isOpen = !item.isOpen;\r\n  }\r\n\r\n  isDropdown(item: SidebarItem): boolean {\r\n    return (item.items?.length ?? 0) > 0;\r\n  }\r\n\r\n  onRouterLinkActive(isActive: boolean, item: SidebarItemActive) {\r\n    this.currentItemState.push(isActive);\r\n\r\n    if (!isActive && this.currentItem == item) {\r\n      if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {\r\n        return;\r\n      }\r\n    }\r\n\r\n    this.currentItem = item;\r\n    item.isActive = isActive;\r\n    // if (isActive) {\r\n    //   this.items.forEach(x => x.isOpen = false);\r\n    //   item.isOpen = true;\r\n    // }\r\n  }\r\n\r\n}\r\n","<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n    <div *ngIf=\"profile\">\r\n        <div *ngIf=\"profile.image || fullName || profile.role\"\r\n            class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n            <div *ngIf=\"profile.image\" class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n                <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n                    <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.src}}\">\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"fullName || profile.role\" class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n                <strong *ngIf=\"fullName\" class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n                <small *ngIf=\"profile.role\" class=\"text-uppercase role\">{{profile.role}}</small>\r\n            </div>\r\n        </div>\r\n\r\n        <hr />\r\n    </div>\r\n\r\n    <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n        <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n\r\n                <hr *ngIf=\"item.isDivider\" class=\"sidebar-divider\" />\r\n\r\n                <ng-container *ngIf=\"!item.isDivider\">\r\n                    <li *ngIf=\"!isDropdown(item)\" class=\"nav-item d-block\">\r\n                        <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"item.routerLink\"\r\n                            [routerLinkActive]=\"['active']\" role=\"button\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n                    </li>\r\n                    <li *ngIf=\"isDropdown(item)\" class=\"nav-item d-block dropend\">\r\n                        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n                            [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen}\" data-bs-toggle=\"dropend\"\r\n                            role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n                            (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n                            <i *ngIf=\"item.iconClass\" [ngClass]=\"item.iconClass\"></i>\r\n                            <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n                            <span *ngIf=\"item.badgeLabel\" class=\"badge bg-info me-1\"\r\n                                [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n                        </a>\r\n\r\n                        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n                            [ngClass]=\"{'show': item.isOpen}\">\r\n                            <ng-container *ngFor=\"let subItem of item.items;\">\r\n\r\n                                <hr *ngIf=\"subItem.isDivider\" class=\"sidebar-divider my-1\" />\r\n\r\n                                <li *ngIf=\"!subItem.isDivider\" class=\"nav-item d-block\">\r\n                                    <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\"\r\n                                        role=\"button\" [routerLinkActive]=\"['active']\"\r\n                                        (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n                                        (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n                                        <i *ngIf=\"subItem.iconClass\" [ngClass]=\"subItem.iconClass\"></i>\r\n                                        <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n                                        <span *ngIf=\"subItem.badgeLabel\" class=\"badge bg-info\"\r\n                                            [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n                                    </a>\r\n                                </li>\r\n                            </ng-container>\r\n                        </ul>\r\n                    </li>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n    </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar.component';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}