sidesys-generic-ui 2.0.0 → 2.0.1

package/esm2022/lib/content/s-content.component.mjs

@@ -6,6 +6,7 @@ export class SContentComponent {
     constructor(localStorage) {
         this.localStorage = localStorage;
         this.sidebar = true;
+        this.animated = false;
         this.subscriptionRefresh = this.localStorage.refreshLocalStorage.subscribe(() => {
             this.loadDataFromLocalStorage();
         });
@@ -14,20 +15,23 @@ export class SContentComponent {
         this.loadDataFromLocalStorage();
     }
     loadDataFromLocalStorage() {
-        this.expand = this.localStorage.getItem("s-sidebar:expand");
+        this.expand = this.localStorage.getItem('s-sidebar:expand');
     }
     ngOnDestroy() {
         this.subscriptionRefresh.unsubscribe();
     }
+    onLoad() {
+        this.animated = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SContentComponent, deps: [{ token: i1.LocalstorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SContentComponent, selector: "s-content", inputs: { sidebar: "sidebar", expand: "expand" }, ngImport: i0, template: "<div class=\"s-content s-scroll\" [ngClass]=\"!sidebar ? '' : (expand ? 's-content--menu-expanded' : 's-content--menu-closed')\">\n    <ng-content></ng-content>\n</div>", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-closed{margin-left:4.5rem!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SContentComponent, selector: "s-content", inputs: { sidebar: "sidebar", expand: "expand" }, ngImport: i0, template: "<div\n  (window:load)=\"onLoad()\"\n  class=\"s-content s-scroll\"\n  [ngClass]=\"{\n    's-content--menu-expanded': sidebar && expand,\n    's-content--menu-closed': sidebar && !expand,\n    animated: animated,\n  }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-expanded.animated{transition:.3s ease-in-out}.s-content--menu-closed{margin-left:4.5rem!important}.s-content--menu-closed.animated{transition:.1s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-content', template: "<div class=\"s-content s-scroll\" [ngClass]=\"!sidebar ? '' : (expand ? 's-content--menu-expanded' : 's-content--menu-closed')\">\n    <ng-content></ng-content>\n</div>", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-closed{margin-left:4.5rem!important}\n"] }]
+            args: [{ selector: 's-content', template: "<div\n  (window:load)=\"onLoad()\"\n  class=\"s-content s-scroll\"\n  [ngClass]=\"{\n    's-content--menu-expanded': sidebar && expand,\n    's-content--menu-closed': sidebar && !expand,\n    animated: animated,\n  }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-expanded.animated{transition:.3s ease-in-out}.s-content--menu-closed{margin-left:4.5rem!important}.s-content--menu-closed.animated{transition:.1s ease-in-out}\n"] }]
         }], ctorParameters: () => [{ type: i1.LocalstorageService }], propDecorators: { sidebar: [{
                 type: Input
             }], expand: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NvbnRlbnQvcy1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NvbnRlbnQvcy1jb250ZW50LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQzs7OztBQVNwRSxNQUFNLE9BQU8saUJBQWlCO0lBTTVCLFlBQW1CLFlBQWdDO1FBQWhDLGlCQUFZLEdBQVosWUFBWSxDQUFvQjtRQUoxQyxZQUFPLEdBQVksSUFBSSxDQUFDO1FBTS9CLElBQUksQ0FBQyxtQkFBbUIsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLG1CQUFtQixDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDOUUsSUFBSSxDQUFDLHdCQUF3QixFQUFFLENBQUM7UUFDbEMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFRCx3QkFBd0I7UUFDcEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLG1CQUFtQixDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3pDLENBQUM7K0dBdkJVLGlCQUFpQjttR0FBakIsaUJBQWlCLG1HQ1Q5QiwwS0FFTTs7NEZET08saUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLFdBQVc7d0ZBTVosT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMb2NhbHN0b3JhZ2VTZXJ2aWNlIH0gZnJvbSAnLi4vc2hhcmVkL2xvY2Fsc3RvcmFnZS5zZXJ2aWNlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzLWNvbnRlbnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcy1jb250ZW50LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcy1jb250ZW50LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgU0NvbnRlbnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQgLCBPbkRlc3Ryb3l7XG5cbiAgQElucHV0KCkgc2lkZWJhcjogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIGV4cGFuZD86IGJvb2xlYW47XG4gIHN1YnNjcmlwdGlvblJlZnJlc2g6IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgbG9jYWxTdG9yYWdlOkxvY2Fsc3RvcmFnZVNlcnZpY2UpIHsgXG5cbiAgICB0aGlzLnN1YnNjcmlwdGlvblJlZnJlc2ggPSB0aGlzLmxvY2FsU3RvcmFnZS5yZWZyZXNoTG9jYWxTdG9yYWdlLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICB0aGlzLmxvYWREYXRhRnJvbUxvY2FsU3RvcmFnZSgpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5sb2FkRGF0YUZyb21Mb2NhbFN0b3JhZ2UoKTtcbiAgfVxuXG4gIGxvYWREYXRhRnJvbUxvY2FsU3RvcmFnZSgpOiB2b2lkIHtcbiAgICAgIHRoaXMuZXhwYW5kID0gdGhpcy5sb2NhbFN0b3JhZ2UuZ2V0SXRlbShcInMtc2lkZWJhcjpleHBhbmRcIik7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvblJlZnJlc2gudW5zdWJzY3JpYmUoKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInMtY29udGVudCBzLXNjcm9sbFwiIFtuZ0NsYXNzXT1cIiFzaWRlYmFyID8gJycgOiAoZXhwYW5kID8gJ3MtY29udGVudC0tbWVudS1leHBhbmRlZCcgOiAncy1jb250ZW50LS1tZW51LWNsb3NlZCcpXCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NvbnRlbnQvcy1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NvbnRlbnQvcy1jb250ZW50LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFxQixNQUFNLGVBQWUsQ0FBQzs7OztBQVNwRSxNQUFNLE9BQU8saUJBQWlCO0lBTTVCLFlBQW1CLFlBQWlDO1FBQWpDLGlCQUFZLEdBQVosWUFBWSxDQUFxQjtRQUwzQyxZQUFPLEdBQVksSUFBSSxDQUFDO1FBR2pDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFHeEIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsbUJBQW1CLENBQUMsU0FBUyxDQUN4RSxHQUFHLEVBQUU7WUFDSCxJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUNsQyxDQUFDLENBQ0YsQ0FBQztJQUNKLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLHdCQUF3QixFQUFFLENBQUM7SUFDbEMsQ0FBQztJQUVELHdCQUF3QjtRQUN0QixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDOUQsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsbUJBQW1CLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDekMsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztJQUN2QixDQUFDOytHQTVCVSxpQkFBaUI7bUdBQWpCLGlCQUFpQixtR0NUOUIsb1FBVUE7OzRGRERhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxXQUFXO3dGQUtaLE9BQU87c0JBQWYsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTG9jYWxzdG9yYWdlU2VydmljZSB9IGZyb20gJy4uL3NoYXJlZC9sb2NhbHN0b3JhZ2Uuc2VydmljZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncy1jb250ZW50JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3MtY29udGVudC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3MtY29udGVudC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBTQ29udGVudENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KCkgc2lkZWJhcjogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIGV4cGFuZD86IGJvb2xlYW47XG4gIHN1YnNjcmlwdGlvblJlZnJlc2g6IFN1YnNjcmlwdGlvbjtcbiAgYW5pbWF0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgbG9jYWxTdG9yYWdlOiBMb2NhbHN0b3JhZ2VTZXJ2aWNlKSB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25SZWZyZXNoID0gdGhpcy5sb2NhbFN0b3JhZ2UucmVmcmVzaExvY2FsU3RvcmFnZS5zdWJzY3JpYmUoXG4gICAgICAoKSA9PiB7XG4gICAgICAgIHRoaXMubG9hZERhdGFGcm9tTG9jYWxTdG9yYWdlKCk7XG4gICAgICB9XG4gICAgKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMubG9hZERhdGFGcm9tTG9jYWxTdG9yYWdlKCk7XG4gIH1cblxuICBsb2FkRGF0YUZyb21Mb2NhbFN0b3JhZ2UoKTogdm9pZCB7XG4gICAgdGhpcy5leHBhbmQgPSB0aGlzLmxvY2FsU3RvcmFnZS5nZXRJdGVtKCdzLXNpZGViYXI6ZXhwYW5kJyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvblJlZnJlc2gudW5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIG9uTG9hZCgpIHtcbiAgICB0aGlzLmFuaW1hdGVkID0gdHJ1ZTtcbiAgfVxufVxuIiwiPGRpdlxuICAod2luZG93OmxvYWQpPVwib25Mb2FkKClcIlxuICBjbGFzcz1cInMtY29udGVudCBzLXNjcm9sbFwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAncy1jb250ZW50LS1tZW51LWV4cGFuZGVkJzogc2lkZWJhciAmJiBleHBhbmQsXG4gICAgJ3MtY29udGVudC0tbWVudS1jbG9zZWQnOiBzaWRlYmFyICYmICFleHBhbmQsXG4gICAgYW5pbWF0ZWQ6IGFuaW1hdGVkLFxuICB9XCI+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19

package/esm2022/lib/modal/modal-confirm/models/modalType.mjs

@@ -1,4 +1,4 @@
-import { THEME } from 'projects/sidesys-generic-ui/src/lib/enums/theme.enum';
+import { THEME } from '../../../enums/theme.enum';
 export const ModalTypeIcon = [
     {
         type: 'alert',
@@ -16,4 +16,4 @@ export const ModalTypeIcon = [
         icon: 'info',
     },
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWxUeXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvbW9kYWwvbW9kYWwtY29uZmlybS9tb2RlbHMvbW9kYWxUeXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzREFBc0QsQ0FBQztBQUU3RSxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQVU7SUFDbEM7UUFDRSxJQUFJLEVBQUUsT0FBTztRQUNiLEtBQUssRUFBRSxLQUFLLENBQUMsTUFBTTtRQUNuQixJQUFJLEVBQUUsU0FBUztLQUNoQjtJQUNEO1FBQ0UsSUFBSSxFQUFFLE9BQU87UUFDYixLQUFLLEVBQUUsS0FBSyxDQUFDLEdBQUc7UUFDaEIsSUFBSSxFQUFFLFFBQVE7S0FDZjtJQUNEO1FBQ0UsSUFBSSxFQUFFLE1BQU07UUFDWixLQUFLLEVBQUUsS0FBSyxDQUFDLE9BQU87UUFDcEIsSUFBSSxFQUFFLE1BQU07S0FDYjtDQUNGLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUSEVNRSB9IGZyb20gJ3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2VudW1zL3RoZW1lLmVudW0nO1xuXG5leHBvcnQgY29uc3QgTW9kYWxUeXBlSWNvbjogYW55W10gPSBbXG4gIHtcbiAgICB0eXBlOiAnYWxlcnQnLFxuICAgIGNvbG9yOiBUSEVNRS5ZRUxMT1csXG4gICAgaWNvbjogJ3dhcm5pbmcnLFxuICB9LFxuICB7XG4gICAgdHlwZTogJ2Vycm9yJyxcbiAgICBjb2xvcjogVEhFTUUuUkVELFxuICAgIGljb246ICdjYW5jZWwnLFxuICB9LFxuICB7XG4gICAgdHlwZTogJ2luZm8nLFxuICAgIGNvbG9yOiBUSEVNRS5ERUZBVUxULFxuICAgIGljb246ICdpbmZvJyxcbiAgfSxcbl07XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWxUeXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2lkZXN5cy1nZW5lcmljLXVpL3NyYy9saWIvbW9kYWwvbW9kYWwtY29uZmlybS9tb2RlbHMvbW9kYWxUeXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUVsRCxNQUFNLENBQUMsTUFBTSxhQUFhLEdBQVU7SUFDbEM7UUFDRSxJQUFJLEVBQUUsT0FBTztRQUNiLEtBQUssRUFBRSxLQUFLLENBQUMsTUFBTTtRQUNuQixJQUFJLEVBQUUsU0FBUztLQUNoQjtJQUNEO1FBQ0UsSUFBSSxFQUFFLE9BQU87UUFDYixLQUFLLEVBQUUsS0FBSyxDQUFDLEdBQUc7UUFDaEIsSUFBSSxFQUFFLFFBQVE7S0FDZjtJQUNEO1FBQ0UsSUFBSSxFQUFFLE1BQU07UUFDWixLQUFLLEVBQUUsS0FBSyxDQUFDLE9BQU87UUFDcEIsSUFBSSxFQUFFLE1BQU07S0FDYjtDQUNGLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUSEVNRSB9IGZyb20gJy4uLy4uLy4uL2VudW1zL3RoZW1lLmVudW0nO1xuXG5leHBvcnQgY29uc3QgTW9kYWxUeXBlSWNvbjogYW55W10gPSBbXG4gIHtcbiAgICB0eXBlOiAnYWxlcnQnLFxuICAgIGNvbG9yOiBUSEVNRS5ZRUxMT1csXG4gICAgaWNvbjogJ3dhcm5pbmcnLFxuICB9LFxuICB7XG4gICAgdHlwZTogJ2Vycm9yJyxcbiAgICBjb2xvcjogVEhFTUUuUkVELFxuICAgIGljb246ICdjYW5jZWwnLFxuICB9LFxuICB7XG4gICAgdHlwZTogJ2luZm8nLFxuICAgIGNvbG9yOiBUSEVNRS5ERUZBVUxULFxuICAgIGljb246ICdpbmZvJyxcbiAgfSxcbl07XG4iXX0=

package/esm2022/lib/sidebar/s-sidebar.component.mjs

@@ -120,11 +120,11 @@ export class SSidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, deps: [{ token: i1.LocalstorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i5.SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: i6.SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: i5.SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: i6.SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"] }]
+            args: [{ selector: 's-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.LocalstorageService }], propDecorators: { menu: [{
                 type: Input
             }], expand: [{

package/fesm2022/sidesys-generic-ui.mjs

@@ -9,7 +9,6 @@ import { NG_VALUE_ACCESSOR, Validators, NgControl, FormControlName, FormGroupDir
 import * as i1$1 from '@angular/platform-browser';
 import { Subject, takeUntil, startWith, distinctUntilChanged, tap, BehaviorSubject } from 'rxjs';
 import { HttpClientModule } from '@angular/common/http';
-import { THEME as THEME$1 } from 'projects/sidesys-generic-ui/src/lib/enums/theme.enum';
 import lottie from 'lottie-web';
 import { provideLottieOptions } from 'ngx-lottie';
 
@@ -5841,11 +5840,11 @@ class SSidebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, deps: [{ token: LocalstorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SSidebarComponent, selector: "s-sidebar", inputs: { menu: "menu", expand: "expand", showExpand: "showExpand", theme: "theme", images: "images" }, outputs: { clickEvent: "clickEvent", clickEventMenu: "clickEventMenu" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["name", "size", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { kind: "component", type: SBadgeComponent, selector: "s-badge", inputs: ["type", "size", "new"] }, { kind: "component", type: SMenuItemTitleComponent, selector: "s-menu-item", inputs: ["title", "expand"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"] }]
+            args: [{ selector: 's-sidebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"s-sidebar\" [ngClass]=\"[\n    theme ? 's-sidebar--theme-' + theme : '',\n    expand ? 's-sidebar--open' : 's-sidebar--close']\">\n\n    <div *ngIf=\"images\" class=\"s-sidebar__top\" [ngClass]=\"{'s-sidebar__top--expand': expand, 's-sidebar__top--collapse': !expand}\">\n        <img [src]=\"getImageSource()\" alt=\"\"/>\n    </div>\n    \n    <ul class=\"s-sidebar__menu s-scroll\">\n        <ng-container *ngFor=\"let item of menu; index as i\">\n            <!-- Cuando es separate -->\n            <div *ngIf=\"item.separate && item.separateText\" class=\"s-sidebar__menu__line-separate\">\n                <div *ngIf=\"item.separateLine\" class=\"s-sidebar__menu__line-separate__line\"></div>\n                <div class=\"s-sidebar__menu__line-separate__text\">{{item.separateText}}</div>\n                <div class=\"s-sidebar__menu__line-separate__dot cursor\" title=\"{{item.separateText ? item.separateText : ''}}\" (click)=\"toogleMenu()\">...</div>\n            </div>\n            <!-- Cuando NO tiene hijos esta visible y no es separate -->\n            <li class=\"s-sidebar__menu__item\" *ngIf=\"!item.hidden && !item.separate && !item.children\" title=\"{{item.title}}\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex: true }\"></ng-template>\n            </li>\n            <!-- Cuando SI tiene hijos esta visible y no es separate -->\n            <!-- Padre -->\n            <li class=\"s-sidebar__menu__item {{item.expanded ? 's-sidebar__menu__item--open' : 's-sidebar__menu__item--close'}}\" *ngIf=\"!item.hidden && !item.separate && item.children\" title=\"{{item.title}}\" (click)=\"clickParent(item)\" (keydown.enter)=\"clickParent(item)\">\n                <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item , tabindex:  true  }\"></ng-template>\n            </li>\n            <!-- Hijos -->\n            <ul *ngIf=\"item.children && !item.hidden && !item.separate\" class=\"s-sidebar__menu {{item.expanded ? 's-sidebar__menu--open' : 's-sidebar__menu--close'}}\">\n                <ng-container *ngFor=\"let itemChildren of item.children\">\n                    <li *ngIf=\"!itemChildren.hidden\">\n                        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: itemChildren, tabindex: item.expanded ? true : false}\"></ng-template>\n                    </li>\n                </ng-container>\n            </ul>\n        </ng-container>\n    </ul>\n</div>\n\n<div tabindex=\"0\" class=\"no-select button-menu {{expand ? 'button-menu--open' : 'button-menu--close'}}\" (keydown.enter)=\"toogleMenu()\" (click)=\"toogleMenu()\">\n    <s-icon-mat size=\"20\">chevron_right</s-icon-mat>\n</div>\n\n<ng-template #itemTemplate let-item let-tabindex=\"tabindex\">\n    <a [tabindex]=\"tabindex ? 0 : -1\" [ngClass]=\"[getClassItem(item) , getClassChildren(item) , getClassActive(item)]\" (click)=\"item.action ? item.action() : null ; clickItem(item)\" [routerLink]=\"item.link ? item.link : undefined\" routerLinkActive=\"active\" title=\"{{item.title ? item.title : ''}}\">\n        <ng-template [ngTemplateOutlet]=\"iconTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item.icon }\"></ng-template>\n        <s-menu-item [expand]=\"expand\" [title]=\"item.title\"></s-menu-item>\n        <ng-template *ngIf=\"item.badge\" [ngTemplateOutlet]=\"badgeTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        <s-icon-mat size=\"17\" *ngIf=\"item.children && item.children.length > 0\"\n            class=\"arrow {{item.expanded ? 'arrow-open' : 'arrow-close'}}\">\n            keyboard_arrow_down\n        </s-icon-mat>\n    </a>\n</ng-template>\n\n<ng-template #iconTemplate let-icon>\n    <s-icon-mat \n        *ngIf=\"icon\" \n        [type]=\"isSIcon(icon) && icon.type ? icon.type : 'icon'\"\n        [size]=\"isSIcon(icon) && icon.size ? icon.size : '20'\"\n        class=\"icon-menu\">{{isSIcon(icon) && icon.name ? icon.name : icon}}\n    </s-icon-mat>\n    <s-icon-mat \n        *ngIf=\"!icon\" \n        type=\"symbol\"\n        size=\"20\"\n        class=\"icon-menu icon-menu-default\">fiber_manual_record\n    </s-icon-mat>\n</ng-template>\n\n<ng-template #badgeTemplate let-item>\n    <s-badge class=\"badge-padding\"\n        type=\"{{item.badgeType ? item.badgeType : 'secondary'}}\">\n        {{item.badge}}\n    </s-badge>\n</ng-template>", styles: [".s-sidebar{position:fixed;background-color:var(--neutrals-1200);box-sizing:border-box;padding-top:.5rem;box-shadow:0 18px 28px #17386126;z-index:0;flex:1;align-items:center;height:calc(100vh - 5.4rem)}.s-sidebar:first-child{padding-left:5px;padding-right:3px;padding-bottom:40px}.s-sidebar a{border-color:transparent;border-style:solid;border-width:0;padding:.7rem 0rem;line-height:1.5rem;display:grid;grid-template-columns:1fr 10fr 2fr;align-items:center;justify-items:center;text-decoration:none;cursor:pointer;margin-bottom:3px}.s-sidebar a.grid-template-1-10-1{grid-template-columns:2fr 10fr 2fr}.s-sidebar a.grid-template-1-10-1-1{grid-template-columns:2fr 8fr 1fr 2fr}.s-sidebar a.grid-template-1{grid-template-columns:2fr;padding-left:10px;padding-right:10px}.s-sidebar a.grid-template-1-10{grid-template-columns:2fr 10fr;padding-right:10px}.s-sidebar a.grid-template-10-1{grid-template-columns:10fr 2fr;padding-left:10px}.s-sidebar a.grid-template-10-1-1{grid-template-columns:10fr 2fr 2fr;padding-left:10px}.s-sidebar--close{width:4.5rem;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.s-sidebar--close .icon-menu-default{display:block}.s-sidebar--close a.grid-template-1{padding-left:0}.s-sidebar--close a{grid-template-columns:1fr!important;padding-right:0!important;padding-left:0!important}.s-sidebar--close .s-sidebar__menu__line-separate{height:24px;display:grid;grid-template-columns:1fr}.s-sidebar--close .s-sidebar__menu__line-separate__dot{display:block;text-align:center;width:100%;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:0 11px}.s-sidebar--close .s-sidebar__menu__line-separate__text{display:none;font-size:1rem;color:var(--primary-600)}.s-sidebar--close .s-sidebar__menu .icon-menu{padding-right:0rem!important}.s-sidebar--open{width:15rem;-webkit-transition:width .3s ease-in-out;-moz-transition:width .3s ease-in-out;-o-transition:width .3s ease-in-out;transition:width .3s ease-in-out}.s-sidebar--open .icon-menu-default{display:none!important}.s-sidebar--open .s-sidebar__menu__line-separate{margin:5px}.s-sidebar--open .s-sidebar__menu__line-separate__line{height:1px;background:var(--primary-600);margin:10px 0}.s-sidebar--open .s-sidebar__menu__line-separate__text{font-size:.875rem;font-weight:700;color:var(--primary-600);cursor:default}.s-sidebar--open .s-sidebar__menu__line-separate__dot{display:none}.s-sidebar--open .s-sidebar__menu--open li a{margin:2px}.s-sidebar__menu{overflow-y:auto;overflow-x:hidden;height:97%;margin:0}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a{border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover{border-radius:4px;background-color:var(--primary-300);border-left:none}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-600)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a) .menu-title{font-weight:700}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active .menu-title,.s-sidebar__menu__item:not(.s-sidebar__menu__item--open) a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--open{opacity:1;transition:opacity .2s ease-in-out;height:auto;margin-top:4px;margin-bottom:4px;background-color:var(--cyan-alpha-200);border-radius:4px}.s-sidebar__menu--open li a{border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu--open li a:hover{border-radius:4px;background-color:var(--primary-300);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a:hover .menu-title{font-weight:700}.s-sidebar__menu--open li a.active,.s-sidebar__menu--open li a.active-forced{border-radius:4px;background-color:var(--primary-200);border-left:3px solid var(--primary-500)}.s-sidebar__menu--open li a.active .menu-title,.s-sidebar__menu--open li a.active-forced .menu-title{font-weight:700}.s-sidebar__menu--close{opacity:0;transition:opacity .2s ease-in-out;height:0;overflow:hidden}.s-sidebar__menu .arrow{padding:0 3px;color:var(--primary-600);-webkit-transition:.01s ease-in-out;-moz-transition:.01s ease-in-out;-o-transition:.01s ease-in-out;transition:.01s ease-in-out}.s-sidebar__menu .arrow.arrow-open{display:flex;transform:rotate(180deg)!important}.s-sidebar__menu .arrow.arrow-close{display:flex;transform:rotate(360deg)!important}.s-sidebar__menu .menu-title-box{height:20px;overflow:hidden;position:relative}.s-sidebar__menu .menu-title-box .menu-title{font-family:Roboto;color:var(--secondary-600);font-size:.875rem;line-height:1.5rem;flex:1 0 auto;position:absolute;white-space:nowrap}.s-sidebar__menu .menu-title-box .menu-title.menu-title-display{transform:translate(0);transition:1s}.s-sidebar__menu .icon-menu{color:var(--secondary-700)}.s-sidebar__menu__item--open a{border-radius:4px;background-color:var(--primary-200);border-left:3px solid rgba(255,0,0,0)}.s-sidebar__menu__item--open a .menu-title{font-weight:700}.s-sidebar--theme-dark{background:var(--primary-800)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__line{background:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu__line-separate .s-sidebar__menu__line-separate__text,.s-sidebar--theme-dark .s-sidebar__menu .icon-menu,.s-sidebar--theme-dark .s-sidebar__menu .menu-title{color:var(--neutrals-1200)}.s-sidebar--theme-dark .s-sidebar__menu .s-sidebar__menu--open{background-color:var(--primary-900)}.s-sidebar--theme-dark .s-sidebar__menu__item--open a .menu-title,.s-sidebar--theme-dark .s-sidebar__menu__item a:hover .menu-title{font-weight:700}.s-sidebar--theme-dark .s-sidebar__menu__item--open a{background-color:var(--primary-600);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a.active:not(.s-sidebar__menu__item--open a),.s-sidebar--theme-dark .s-sidebar__menu__item a.active-forced:not(.s-sidebar__menu__item--open a){background-color:var(--primary-600);border-left:3px solid var(--primary-400);border-radius:4px}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid rgba(255,0,0,0)}.s-sidebar--theme-dark .s-sidebar__menu__item a:hover:not(.s-sidebar__menu__item--close a,.s-sidebar__menu__item--open a){background-color:var(--primary-700);border-radius:4px;border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .s-sidebar__menu--open a:hover{background-color:var(--primary-700);border-left:3px solid var(--primary-400)}.s-sidebar--theme-dark .s-sidebar__menu--open a.active,.s-sidebar--theme-dark .s-sidebar__menu--open a.active-forced{background-color:var(--primary-600);border-left:3px solid var(--primary-300)}.s-sidebar--theme-dark .arrow,.s-sidebar--theme-dark.s-sidebar--close .s-sidebar__menu__line-separate__dot{color:var(--neutrals-1200)}.s-sidebar__top{display:flex;justify-content:center;align-items:center}.s-sidebar__top--expand{margin:10px}.s-sidebar__top--collapse{margin:5px}.s-sidebar--close>.s-sidebar__menu>li>a>span,.s-sidebar--close>.s-sidebar__menu>li>a>.arrow,.s-sidebar--close .menu-title-box,.s-sidebar--close .s-badge{display:none!important}.button-menu{display:flex;justify-content:center;align-items:center;border-radius:50px;background:var(--primary-600);color:var(--neutrals-1200);position:fixed;width:44px;height:32px;cursor:pointer;-webkit-transition:width .1s ease-in-out;-moz-transition:width .1s ease-in-out;-o-transition:width .1s ease-in-out;transition:width .1s ease-in-out}.button-menu:hover{background:var(--primary-800)}.button-menu--open{left:190px;bottom:42px;transition:.3s ease-in-out}.button-menu--open s-icon-mat span{transform:rotate(180deg)!important}.button-menu--close{left:15px;bottom:42px;transition:.1s ease-in-out}.button-menu--close s-icon-mat span{transform:rotate(0)!important}\n"] }]
         }], ctorParameters: () => [{ type: LocalstorageService }], propDecorators: { menu: [{
                 type: Input
             }], expand: [{
@@ -5902,6 +5901,7 @@ class SContentComponent {
     constructor(localStorage) {
         this.localStorage = localStorage;
         this.sidebar = true;
+        this.animated = false;
         this.subscriptionRefresh = this.localStorage.refreshLocalStorage.subscribe(() => {
             this.loadDataFromLocalStorage();
         });
@@ -5910,17 +5910,20 @@ class SContentComponent {
         this.loadDataFromLocalStorage();
     }
     loadDataFromLocalStorage() {
-        this.expand = this.localStorage.getItem("s-sidebar:expand");
+        this.expand = this.localStorage.getItem('s-sidebar:expand');
     }
     ngOnDestroy() {
         this.subscriptionRefresh.unsubscribe();
     }
+    onLoad() {
+        this.animated = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SContentComponent, deps: [{ token: LocalstorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SContentComponent, selector: "s-content", inputs: { sidebar: "sidebar", expand: "expand" }, ngImport: i0, template: "<div class=\"s-content s-scroll\" [ngClass]=\"!sidebar ? '' : (expand ? 's-content--menu-expanded' : 's-content--menu-closed')\">\n    <ng-content></ng-content>\n</div>", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-closed{margin-left:4.5rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SContentComponent, selector: "s-content", inputs: { sidebar: "sidebar", expand: "expand" }, ngImport: i0, template: "<div\n  (window:load)=\"onLoad()\"\n  class=\"s-content s-scroll\"\n  [ngClass]=\"{\n    's-content--menu-expanded': sidebar && expand,\n    's-content--menu-closed': sidebar && !expand,\n    animated: animated,\n  }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-expanded.animated{transition:.3s ease-in-out}.s-content--menu-closed{margin-left:4.5rem!important}.s-content--menu-closed.animated{transition:.1s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-content', template: "<div class=\"s-content s-scroll\" [ngClass]=\"!sidebar ? '' : (expand ? 's-content--menu-expanded' : 's-content--menu-closed')\">\n    <ng-content></ng-content>\n</div>", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-closed{margin-left:4.5rem!important}\n"] }]
+            args: [{ selector: 's-content', template: "<div\n  (window:load)=\"onLoad()\"\n  class=\"s-content s-scroll\"\n  [ngClass]=\"{\n    's-content--menu-expanded': sidebar && expand,\n    's-content--menu-closed': sidebar && !expand,\n    animated: animated,\n  }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".s-content{display:flex;flex:1;-ms-flex:1 1 auto;flex-direction:column;min-width:0;padding:1.5rem 1rem 1.5rem 2rem;height:calc(100vh - 5.5rem);overflow-y:auto;overflow-x:hidden;background-color:var(--neutrals-1100);box-sizing:border-box}.s-content--menu-expanded{margin-left:15rem!important}.s-content--menu-expanded.animated{transition:.3s ease-in-out}.s-content--menu-closed{margin-left:4.5rem!important}.s-content--menu-closed.animated{transition:.1s ease-in-out}\n"] }]
         }], ctorParameters: () => [{ type: LocalstorageService }], propDecorators: { sidebar: [{
                 type: Input
             }], expand: [{
@@ -7113,17 +7116,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 const ModalTypeIcon = [
     {
         type: 'alert',
-        color: THEME$1.YELLOW,
+        color: THEME.YELLOW,
         icon: 'warning',
     },
     {
         type: 'error',
-        color: THEME$1.RED,
+        color: THEME.RED,
         icon: 'cancel',
     },
     {
         type: 'info',
-        color: THEME$1.DEFAULT,
+        color: THEME.DEFAULT,
         icon: 'info',
     },
 ];