@nettyapps/ntybase 0.0.7 → 0.0.8

package/README.md

@@ -78,8 +78,8 @@ Here's an example of the generated theme CSS that will be available in `deep-blu
 
   /* Required field */
   --mat-sys-required: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-inverse-primary));
-  --mat-sys-user-info: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-primary));
-  --mat-sys-user-text: light-dark(var(--mat-sys-on-primary-container), var(--mat-sys-on-primary));
+  --mat-nty-save-record-header-bar: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-primary));
+  --mat-nty-save-record-identifier: light-dark(var(--mat-sys-on-primary-container), var(--mat-sys-on-primary));
 
   /* Primary palette variables */
   --mat-sys-primary: light-dark(#005faf, #a5c8ff);

package/fesm2022/nettyapps-ntybase.mjs

@@ -2840,7 +2840,7 @@ class LeftSidenav {
         this.searchTerm.set(term);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LeftSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: LeftSidenav, isStandalone: true, selector: "ntybase-left-sidenav", inputs: { isMinimized: { classPropertyName: "isMinimized", publicName: "isMinimized", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleMinimize: "toggleMinimize" }, ngImport: i0, template: "<div class=\"sidenav-content-wrapper\">\n  <!-- Minimize Icon -->\n  <button mat-icon-button (click)=\"onToggleMinimize()\" class=\"minimize-button\">\n    <mat-icon class=\"minimize-icon\">\n      {{ isMinimized() ? \"chevron_right\" : \"chevron_left\" }}\n    </mat-icon>\n  </button>\n\n  <!-- Profile -->\n  <div class=\"profile-section\">\n    <button mat-button [matMenuTriggerFor]=\"profileMenu\" class=\"profile-button\">\n      <img\n        src=\"https://images.unsplash.com/photo-1654110455429-cf322b40a906?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Profil Image\"\n        class=\"profile-image\"\n      />\n      <div class=\"profile-info\" *ngIf=\"!isMinimized()\">\n        <p class=\"profile-name\">Mustafa Samet \u00C7al\u0131\u015F\u0131r</p>\n      </div>\n    </button>\n\n    <mat-menu #profileMenu=\"matMenu\" xPosition=\"before\">\n      <button mat-menu-item disabled>\n        <mat-icon>account_circle</mat-icon>\n        <span>{{ '@profile' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button disabled>\n        <mat-icon>swap_horiz</mat-icon>\n        <span>{{ '@changeCompany' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        <span>{{ '@logout' | translate }}</span>\n      </button>\n    </mat-menu>\n  </div>\n\n  <!-- Search Input -->\n  <ntyui-search-input\n    [label]=\"'@search' | translate\"\n    [placeholder]=\"'@placeholderSearch' | translate\"\n    [appearance]=\"'outline'\"\n    *ngIf=\"!isMinimized()\"\n    (search)=\"onSearch($event)\"\n  >\n  </ntyui-search-input>\n\n  <!-- Menu -->\n  <mat-nav-list *ngIf=\"!isMinimized()\">\n    <div class=\"sidebar\">\n      <ul>\n        <ng-container *ngFor=\"let item of filteredMenuItems()\">\n          <li>\n            <a\n              *ngIf=\"!item.children || item.children.length === 0\"\n              [routerLink]=\"item.link\"\n              routerLinkActive=\"active\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n            </a>\n\n            <a\n              *ngIf=\"item.children && item.children.length > 0\"\n              (click)=\"toggleSubMenu(item)\"\n              [class.expanded]=\"item.expanded\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n              <mat-icon [class.rotated]=\"item.expanded\">\n                {{ item.expanded ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </a>\n\n            <ul\n              *ngIf=\"item.children && item.children.length > 0 && item.expanded\"\n              class=\"submenu\"\n            >\n              <li *ngFor=\"let child of item.children\">\n                <a [routerLink]=\"child.link\" routerLinkActive=\"active\">\n                  <mat-icon>{{ child.icon }}</mat-icon>\n                  <span>{{ child.name }}</span>\n                </a>\n              </li>\n            </ul>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </mat-nav-list>\n\n  <!-- Footer -->\n  <div class=\"sidenav-footer\">\n    <button mat-button [matMenuTriggerFor]=\"footerMenu\" class=\"footer-button\">\n      <div class=\"footer-text\" *ngIf=\"!isMinimized()\">\n        <div class=\"company-name\">\n          <p>&copy; 2025 AXIS</p>\n        </div>\n      </div>\n    </button>\n    <div class=\"version\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n\n  <mat-menu #footerMenu=\"matMenu\" xPosition=\"before\">\n    <button mat-menu-item disabled>\n      <mat-icon>swap_horiz</mat-icon>\n      {{ '@changeCompany' | translate }}\n    </button>\n    <button mat-menu-item mat-button (click)=\"logout()\">\n      <mat-icon>logout</mat-icon>\n      <span>{{ '@logout' | translate }}</span>\n    </button>\n  </mat-menu>\n</div>\n", styles: [".profile-section{text-align:center;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;flex-direction:column;position:relative}.profile-section:hover{transform:scale(.98)}.profile-section .profile-button{display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0;cursor:pointer;width:100%}.profile-image{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:3px solid white;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.profile-name{font-weight:500;font-size:1rem;color:inherit;transition:opacity .3s ease;margin-top:8px}:host-context(.minimized) .profile-section{padding:10px 0}:host-context(.minimized) .profile-image{width:40px;height:40px;margin:0 auto}.sidenav-footer{position:static;bottom:0;left:0;right:0;padding:16px;color:inherit;font-size:12px;border-top:1px solid rgba(0,0,0,.1);transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;margin-top:auto}.sidenav-footer .version{font-size:10px;margin-top:4px}.footer-button{border:none;background:none;cursor:pointer}:host-context(.minimized) .version{margin-right:7px}:host-context(.minimized) .sidenav-content-wrapper{overflow:hidden}.sidenav-content-wrapper{position:relative;height:100%;display:flex;flex-direction:column;overflow-x:hidden}.sidebar{flex:1;overflow:auto}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{margin-bottom:4px;position:relative}.sidebar li a{display:flex;align-items:center;padding:12px 0 0;border-radius:6px;color:var(--mat-sys-primary);text-decoration:none;transition:all .2s ease;position:relative;overflow:hidden}.sidebar li a:hover{background-color:var(--mat-sys-user-info);color:var(--mat-sys-user-text)}.sidebar li a.active{background-color:var(--mat-sys-user-info);color:var(--mat-sys-user-text);font-weight:500}.sidebar li a.active:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--mat-sys-user-info);border-radius:3px 0 0 3px}.sidebar mat-icon{font-size:20px;width:20px;height:20px;color:inherit}.sidebar span{font-size:.875rem;white-space:nowrap}.submenu{padding-left:12px;margin-top:4px}.submenu li a{padding:10px 16px 0 20px}.submenu mat-icon{font-size:18px}.sidebar li a mat-icon:last-child{margin-left:auto;margin-right:0;font-size:18px;color:#5f6368}:host-context(.minimized) .sidebar li a{justify-content:center;padding:12px 0}:host-context(.minimized) .sidebar mat-icon{margin-right:0}:host-context(.minimized) .sidebar span,:host-context(.minimized) .sidebar li a mat-icon:last-child{display:none}:host-context(.minimized) .submenu{display:none}.sidenav-content-wrapper button[mat-icon-button]{position:absolute;right:-8px;top:10%;z-index:5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SearchInput, selector: "ntyui-search-input", outputs: ["search"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: LeftSidenav, isStandalone: true, selector: "ntybase-left-sidenav", inputs: { isMinimized: { classPropertyName: "isMinimized", publicName: "isMinimized", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleMinimize: "toggleMinimize" }, ngImport: i0, template: "<div class=\"sidenav-content-wrapper\">\n  <!-- Minimize Icon -->\n  <button mat-icon-button (click)=\"onToggleMinimize()\" class=\"minimize-button\">\n    <mat-icon class=\"minimize-icon\">\n      {{ isMinimized() ? \"chevron_right\" : \"chevron_left\" }}\n    </mat-icon>\n  </button>\n\n  <!-- Profile -->\n  <div class=\"profile-section\">\n    <button mat-button [matMenuTriggerFor]=\"profileMenu\" class=\"profile-button\">\n      <img\n        src=\"https://images.unsplash.com/photo-1654110455429-cf322b40a906?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Profil Image\"\n        class=\"profile-image\"\n      />\n      <div class=\"profile-info\" *ngIf=\"!isMinimized()\">\n        <p class=\"profile-name\">Mustafa Samet \u00C7al\u0131\u015F\u0131r</p>\n      </div>\n    </button>\n\n    <mat-menu #profileMenu=\"matMenu\" xPosition=\"before\">\n      <button mat-menu-item disabled>\n        <mat-icon>account_circle</mat-icon>\n        <span>{{ '@profile' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button disabled>\n        <mat-icon>swap_horiz</mat-icon>\n        <span>{{ '@changeCompany' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        <span>{{ '@logout' | translate }}</span>\n      </button>\n    </mat-menu>\n  </div>\n\n  <!-- Search Input -->\n  <ntyui-search-input\n    [label]=\"'@search' | translate\"\n    [placeholder]=\"'@placeholderSearch' | translate\"\n    [appearance]=\"'outline'\"\n    *ngIf=\"!isMinimized()\"\n    (search)=\"onSearch($event)\"\n  >\n  </ntyui-search-input>\n\n  <!-- Menu -->\n  <mat-nav-list *ngIf=\"!isMinimized()\">\n    <div class=\"sidebar\">\n      <ul>\n        <ng-container *ngFor=\"let item of filteredMenuItems()\">\n          <li>\n            <a\n              *ngIf=\"!item.children || item.children.length === 0\"\n              [routerLink]=\"item.link\"\n              routerLinkActive=\"active\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n            </a>\n\n            <a\n              *ngIf=\"item.children && item.children.length > 0\"\n              (click)=\"toggleSubMenu(item)\"\n              [class.expanded]=\"item.expanded\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n              <mat-icon [class.rotated]=\"item.expanded\">\n                {{ item.expanded ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </a>\n\n            <ul\n              *ngIf=\"item.children && item.children.length > 0 && item.expanded\"\n              class=\"submenu\"\n            >\n              <li *ngFor=\"let child of item.children\">\n                <a [routerLink]=\"child.link\" routerLinkActive=\"active\">\n                  <mat-icon>{{ child.icon }}</mat-icon>\n                  <span>{{ child.name }}</span>\n                </a>\n              </li>\n            </ul>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </mat-nav-list>\n\n  <!-- Footer -->\n  <div class=\"sidenav-footer\">\n    <button mat-button [matMenuTriggerFor]=\"footerMenu\" class=\"footer-button\">\n      <div class=\"footer-text\" *ngIf=\"!isMinimized()\">\n        <div class=\"company-name\">\n          <p>&copy; 2025 AXIS</p>\n        </div>\n      </div>\n    </button>\n    <div class=\"version\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n\n  <mat-menu #footerMenu=\"matMenu\" xPosition=\"before\">\n    <button mat-menu-item disabled>\n      <mat-icon>swap_horiz</mat-icon>\n      {{ '@changeCompany' | translate }}\n    </button>\n    <button mat-menu-item mat-button (click)=\"logout()\">\n      <mat-icon>logout</mat-icon>\n      <span>{{ '@logout' | translate }}</span>\n    </button>\n  </mat-menu>\n</div>\n", styles: [".profile-section{text-align:center;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;flex-direction:column;position:relative}.profile-section:hover{transform:scale(.98)}.profile-section .profile-button{display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0;cursor:pointer;width:100%}.profile-image{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:3px solid white;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.profile-name{font-weight:500;font-size:1rem;color:inherit;transition:opacity .3s ease;margin-top:8px}:host-context(.minimized) .profile-section{padding:10px 0}:host-context(.minimized) .profile-image{width:40px;height:40px;margin:0 auto}.sidenav-footer{position:static;bottom:0;left:0;right:0;padding:16px;color:inherit;font-size:12px;border-top:1px solid rgba(0,0,0,.1);transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;margin-top:auto}.sidenav-footer .version{font-size:10px;margin-top:4px}.footer-button{border:none;background:none;cursor:pointer}:host-context(.minimized) .version{margin-right:7px}:host-context(.minimized) .sidenav-content-wrapper{overflow:hidden}.sidenav-content-wrapper{position:relative;height:100%;display:flex;flex-direction:column;overflow-x:hidden}.sidebar{flex:1;overflow:auto}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{margin-bottom:4px;position:relative}.sidebar li a{display:flex;align-items:center;padding:12px 0 0;border-radius:6px;color:var(--mat-sys-primary);text-decoration:none;transition:all .2s ease;position:relative;overflow:hidden}.sidebar li a:hover{background-color:var(--mat-nty-save-record-header-bar);color:var(--mat-nty-save-record-identifier)}.sidebar li a.active{background-color:var(--mat-nty-save-record-header-bar);color:var(--mat-nty-save-record-identifier);font-weight:500}.sidebar li a.active:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--mat-nty-save-record-header-bar);border-radius:3px 0 0 3px}.sidebar mat-icon{font-size:20px;width:20px;height:20px;color:inherit}.sidebar span{font-size:.875rem;white-space:nowrap}.submenu{padding-left:12px;margin-top:4px}.submenu li a{padding:10px 16px 0 20px}.submenu mat-icon{font-size:18px}.sidebar li a mat-icon:last-child{margin-left:auto;margin-right:0;font-size:18px;color:#5f6368}:host-context(.minimized) .sidebar li a{justify-content:center;padding:12px 0}:host-context(.minimized) .sidebar mat-icon{margin-right:0}:host-context(.minimized) .sidebar span,:host-context(.minimized) .sidebar li a mat-icon:last-child{display:none}:host-context(.minimized) .submenu{display:none}.sidenav-content-wrapper button[mat-icon-button]{position:absolute;right:-8px;top:10%;z-index:5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SearchInput, selector: "ntyui-search-input", outputs: ["search"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LeftSidenav, decorators: [{
             type: Component,
@@ -2854,7 +2854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         RouterModule,
                         SearchInput,
                         TranslateModule,
-                    ], template: "<div class=\"sidenav-content-wrapper\">\n  <!-- Minimize Icon -->\n  <button mat-icon-button (click)=\"onToggleMinimize()\" class=\"minimize-button\">\n    <mat-icon class=\"minimize-icon\">\n      {{ isMinimized() ? \"chevron_right\" : \"chevron_left\" }}\n    </mat-icon>\n  </button>\n\n  <!-- Profile -->\n  <div class=\"profile-section\">\n    <button mat-button [matMenuTriggerFor]=\"profileMenu\" class=\"profile-button\">\n      <img\n        src=\"https://images.unsplash.com/photo-1654110455429-cf322b40a906?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Profil Image\"\n        class=\"profile-image\"\n      />\n      <div class=\"profile-info\" *ngIf=\"!isMinimized()\">\n        <p class=\"profile-name\">Mustafa Samet \u00C7al\u0131\u015F\u0131r</p>\n      </div>\n    </button>\n\n    <mat-menu #profileMenu=\"matMenu\" xPosition=\"before\">\n      <button mat-menu-item disabled>\n        <mat-icon>account_circle</mat-icon>\n        <span>{{ '@profile' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button disabled>\n        <mat-icon>swap_horiz</mat-icon>\n        <span>{{ '@changeCompany' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        <span>{{ '@logout' | translate }}</span>\n      </button>\n    </mat-menu>\n  </div>\n\n  <!-- Search Input -->\n  <ntyui-search-input\n    [label]=\"'@search' | translate\"\n    [placeholder]=\"'@placeholderSearch' | translate\"\n    [appearance]=\"'outline'\"\n    *ngIf=\"!isMinimized()\"\n    (search)=\"onSearch($event)\"\n  >\n  </ntyui-search-input>\n\n  <!-- Menu -->\n  <mat-nav-list *ngIf=\"!isMinimized()\">\n    <div class=\"sidebar\">\n      <ul>\n        <ng-container *ngFor=\"let item of filteredMenuItems()\">\n          <li>\n            <a\n              *ngIf=\"!item.children || item.children.length === 0\"\n              [routerLink]=\"item.link\"\n              routerLinkActive=\"active\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n            </a>\n\n            <a\n              *ngIf=\"item.children && item.children.length > 0\"\n              (click)=\"toggleSubMenu(item)\"\n              [class.expanded]=\"item.expanded\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n              <mat-icon [class.rotated]=\"item.expanded\">\n                {{ item.expanded ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </a>\n\n            <ul\n              *ngIf=\"item.children && item.children.length > 0 && item.expanded\"\n              class=\"submenu\"\n            >\n              <li *ngFor=\"let child of item.children\">\n                <a [routerLink]=\"child.link\" routerLinkActive=\"active\">\n                  <mat-icon>{{ child.icon }}</mat-icon>\n                  <span>{{ child.name }}</span>\n                </a>\n              </li>\n            </ul>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </mat-nav-list>\n\n  <!-- Footer -->\n  <div class=\"sidenav-footer\">\n    <button mat-button [matMenuTriggerFor]=\"footerMenu\" class=\"footer-button\">\n      <div class=\"footer-text\" *ngIf=\"!isMinimized()\">\n        <div class=\"company-name\">\n          <p>&copy; 2025 AXIS</p>\n        </div>\n      </div>\n    </button>\n    <div class=\"version\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n\n  <mat-menu #footerMenu=\"matMenu\" xPosition=\"before\">\n    <button mat-menu-item disabled>\n      <mat-icon>swap_horiz</mat-icon>\n      {{ '@changeCompany' | translate }}\n    </button>\n    <button mat-menu-item mat-button (click)=\"logout()\">\n      <mat-icon>logout</mat-icon>\n      <span>{{ '@logout' | translate }}</span>\n    </button>\n  </mat-menu>\n</div>\n", styles: [".profile-section{text-align:center;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;flex-direction:column;position:relative}.profile-section:hover{transform:scale(.98)}.profile-section .profile-button{display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0;cursor:pointer;width:100%}.profile-image{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:3px solid white;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.profile-name{font-weight:500;font-size:1rem;color:inherit;transition:opacity .3s ease;margin-top:8px}:host-context(.minimized) .profile-section{padding:10px 0}:host-context(.minimized) .profile-image{width:40px;height:40px;margin:0 auto}.sidenav-footer{position:static;bottom:0;left:0;right:0;padding:16px;color:inherit;font-size:12px;border-top:1px solid rgba(0,0,0,.1);transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;margin-top:auto}.sidenav-footer .version{font-size:10px;margin-top:4px}.footer-button{border:none;background:none;cursor:pointer}:host-context(.minimized) .version{margin-right:7px}:host-context(.minimized) .sidenav-content-wrapper{overflow:hidden}.sidenav-content-wrapper{position:relative;height:100%;display:flex;flex-direction:column;overflow-x:hidden}.sidebar{flex:1;overflow:auto}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{margin-bottom:4px;position:relative}.sidebar li a{display:flex;align-items:center;padding:12px 0 0;border-radius:6px;color:var(--mat-sys-primary);text-decoration:none;transition:all .2s ease;position:relative;overflow:hidden}.sidebar li a:hover{background-color:var(--mat-sys-user-info);color:var(--mat-sys-user-text)}.sidebar li a.active{background-color:var(--mat-sys-user-info);color:var(--mat-sys-user-text);font-weight:500}.sidebar li a.active:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--mat-sys-user-info);border-radius:3px 0 0 3px}.sidebar mat-icon{font-size:20px;width:20px;height:20px;color:inherit}.sidebar span{font-size:.875rem;white-space:nowrap}.submenu{padding-left:12px;margin-top:4px}.submenu li a{padding:10px 16px 0 20px}.submenu mat-icon{font-size:18px}.sidebar li a mat-icon:last-child{margin-left:auto;margin-right:0;font-size:18px;color:#5f6368}:host-context(.minimized) .sidebar li a{justify-content:center;padding:12px 0}:host-context(.minimized) .sidebar mat-icon{margin-right:0}:host-context(.minimized) .sidebar span,:host-context(.minimized) .sidebar li a mat-icon:last-child{display:none}:host-context(.minimized) .submenu{display:none}.sidenav-content-wrapper button[mat-icon-button]{position:absolute;right:-8px;top:10%;z-index:5}\n"] }]
+                    ], template: "<div class=\"sidenav-content-wrapper\">\n  <!-- Minimize Icon -->\n  <button mat-icon-button (click)=\"onToggleMinimize()\" class=\"minimize-button\">\n    <mat-icon class=\"minimize-icon\">\n      {{ isMinimized() ? \"chevron_right\" : \"chevron_left\" }}\n    </mat-icon>\n  </button>\n\n  <!-- Profile -->\n  <div class=\"profile-section\">\n    <button mat-button [matMenuTriggerFor]=\"profileMenu\" class=\"profile-button\">\n      <img\n        src=\"https://images.unsplash.com/photo-1654110455429-cf322b40a906?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        alt=\"Profil Image\"\n        class=\"profile-image\"\n      />\n      <div class=\"profile-info\" *ngIf=\"!isMinimized()\">\n        <p class=\"profile-name\">Mustafa Samet \u00C7al\u0131\u015F\u0131r</p>\n      </div>\n    </button>\n\n    <mat-menu #profileMenu=\"matMenu\" xPosition=\"before\">\n      <button mat-menu-item disabled>\n        <mat-icon>account_circle</mat-icon>\n        <span>{{ '@profile' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button disabled>\n        <mat-icon>swap_horiz</mat-icon>\n        <span>{{ '@changeCompany' | translate }}</span>\n      </button>\n      <button mat-menu-item mat-button (click)=\"logout()\">\n        <mat-icon>logout</mat-icon>\n        <span>{{ '@logout' | translate }}</span>\n      </button>\n    </mat-menu>\n  </div>\n\n  <!-- Search Input -->\n  <ntyui-search-input\n    [label]=\"'@search' | translate\"\n    [placeholder]=\"'@placeholderSearch' | translate\"\n    [appearance]=\"'outline'\"\n    *ngIf=\"!isMinimized()\"\n    (search)=\"onSearch($event)\"\n  >\n  </ntyui-search-input>\n\n  <!-- Menu -->\n  <mat-nav-list *ngIf=\"!isMinimized()\">\n    <div class=\"sidebar\">\n      <ul>\n        <ng-container *ngFor=\"let item of filteredMenuItems()\">\n          <li>\n            <a\n              *ngIf=\"!item.children || item.children.length === 0\"\n              [routerLink]=\"item.link\"\n              routerLinkActive=\"active\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n            </a>\n\n            <a\n              *ngIf=\"item.children && item.children.length > 0\"\n              (click)=\"toggleSubMenu(item)\"\n              [class.expanded]=\"item.expanded\"\n            >\n              <mat-icon>{{ item.icon }}</mat-icon>\n              <span>{{ item.name }}</span>\n              <mat-icon [class.rotated]=\"item.expanded\">\n                {{ item.expanded ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </a>\n\n            <ul\n              *ngIf=\"item.children && item.children.length > 0 && item.expanded\"\n              class=\"submenu\"\n            >\n              <li *ngFor=\"let child of item.children\">\n                <a [routerLink]=\"child.link\" routerLinkActive=\"active\">\n                  <mat-icon>{{ child.icon }}</mat-icon>\n                  <span>{{ child.name }}</span>\n                </a>\n              </li>\n            </ul>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </mat-nav-list>\n\n  <!-- Footer -->\n  <div class=\"sidenav-footer\">\n    <button mat-button [matMenuTriggerFor]=\"footerMenu\" class=\"footer-button\">\n      <div class=\"footer-text\" *ngIf=\"!isMinimized()\">\n        <div class=\"company-name\">\n          <p>&copy; 2025 AXIS</p>\n        </div>\n      </div>\n    </button>\n    <div class=\"version\">\n      <span class=\"version\">v{{version}}</span>\n    </div>\n  </div>\n\n  <mat-menu #footerMenu=\"matMenu\" xPosition=\"before\">\n    <button mat-menu-item disabled>\n      <mat-icon>swap_horiz</mat-icon>\n      {{ '@changeCompany' | translate }}\n    </button>\n    <button mat-menu-item mat-button (click)=\"logout()\">\n      <mat-icon>logout</mat-icon>\n      <span>{{ '@logout' | translate }}</span>\n    </button>\n  </mat-menu>\n</div>\n", styles: [".profile-section{text-align:center;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;flex-direction:column;position:relative}.profile-section:hover{transform:scale(.98)}.profile-section .profile-button{display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0;cursor:pointer;width:100%}.profile-image{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:3px solid white;box-shadow:0 2px 4px #0000001a;transition:all .3s ease}.profile-name{font-weight:500;font-size:1rem;color:inherit;transition:opacity .3s ease;margin-top:8px}:host-context(.minimized) .profile-section{padding:10px 0}:host-context(.minimized) .profile-image{width:40px;height:40px;margin:0 auto}.sidenav-footer{position:static;bottom:0;left:0;right:0;padding:16px;color:inherit;font-size:12px;border-top:1px solid rgba(0,0,0,.1);transition:all .3s ease;display:flex;align-items:center;justify-content:space-between;margin-top:auto}.sidenav-footer .version{font-size:10px;margin-top:4px}.footer-button{border:none;background:none;cursor:pointer}:host-context(.minimized) .version{margin-right:7px}:host-context(.minimized) .sidenav-content-wrapper{overflow:hidden}.sidenav-content-wrapper{position:relative;height:100%;display:flex;flex-direction:column;overflow-x:hidden}.sidebar{flex:1;overflow:auto}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar li{margin-bottom:4px;position:relative}.sidebar li a{display:flex;align-items:center;padding:12px 0 0;border-radius:6px;color:var(--mat-sys-primary);text-decoration:none;transition:all .2s ease;position:relative;overflow:hidden}.sidebar li a:hover{background-color:var(--mat-nty-save-record-header-bar);color:var(--mat-nty-save-record-identifier)}.sidebar li a.active{background-color:var(--mat-nty-save-record-header-bar);color:var(--mat-nty-save-record-identifier);font-weight:500}.sidebar li a.active:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:var(--mat-nty-save-record-header-bar);border-radius:3px 0 0 3px}.sidebar mat-icon{font-size:20px;width:20px;height:20px;color:inherit}.sidebar span{font-size:.875rem;white-space:nowrap}.submenu{padding-left:12px;margin-top:4px}.submenu li a{padding:10px 16px 0 20px}.submenu mat-icon{font-size:18px}.sidebar li a mat-icon:last-child{margin-left:auto;margin-right:0;font-size:18px;color:#5f6368}:host-context(.minimized) .sidebar li a{justify-content:center;padding:12px 0}:host-context(.minimized) .sidebar mat-icon{margin-right:0}:host-context(.minimized) .sidebar span,:host-context(.minimized) .sidebar li a mat-icon:last-child{display:none}:host-context(.minimized) .submenu{display:none}.sidenav-content-wrapper button[mat-icon-button]{position:absolute;right:-8px;top:10%;z-index:5}\n"] }]
         }], ctorParameters: () => [] });
 
 class Theme {