@nettyapps/ntyux 21.0.25 → 21.0.27

package/fesm2022/nettyapps-ntyux.mjs

@@ -18,7 +18,7 @@ import { MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogModule } from '@a
 import * as i1 from '@angular/common';
 import { CommonModule, Location, TitleCasePipe } from '@angular/common';
 import * as i3 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { AlertService, CommonService, AuthenticationService, NettyMenuService, CredentialsService, NettyImageService } from '@nettyapps/ntybase';
 import * as i5 from '@angular/router';
@@ -1003,42 +1003,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { isMinimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMinimized", required: false }] }], toggleMinimize: [{ type: i0.Output, args: ["toggleMinimize"] }] } });
 
 class Theme {
-    THEME_STORAGE_KEY = 'app-theme';
     appTheme = signal('light', ...(ngDevMode ? [{ debugName: "appTheme" }] : []));
     themes = [
         { name: 'light', icon: 'light_mode' },
         { name: 'dark', icon: 'dark_mode' },
     ];
     selectedTheme = computed(() => this.themes.find((theme) => theme.name === this.appTheme()), ...(ngDevMode ? [{ debugName: "selectedTheme" }] : []));
-    constructor() {
-        const savedTheme = this.getSavedTheme();
-        if (savedTheme) {
-            this.appTheme.set(savedTheme);
-        }
-        effect(() => {
-            const appTheme = this.appTheme();
-            document.body.style.setProperty('color-scheme', appTheme);
-            document.body.setAttribute('data-ag-theme-mode', appTheme);
-        });
-    }
     getThemes() {
         return this.themes;
     }
     setTheme(theme) {
         this.appTheme.set(theme);
-        this.saveTheme(theme);
-    }
-    getSavedTheme() {
-        if (typeof window !== 'undefined' && window.localStorage) {
-            const saved = localStorage.getItem(this.THEME_STORAGE_KEY);
-            return saved === 'light' || saved === 'dark' ? saved : null;
-        }
-        return null;
     }
-    saveTheme(theme) {
-        if (typeof window !== 'undefined' && window.localStorage) {
-            localStorage.setItem(this.THEME_STORAGE_KEY, theme);
-        }
+    constructor() {
+        effect(() => {
+            const appTheme = this.appTheme();
+            document.body.style.setProperty('color-scheme', appTheme);
+            document.body.setAttribute('data-ag-theme-mode', appTheme);
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Theme, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Theme, providedIn: 'root' });
@@ -1053,6 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class ColorPalette {
     THEME_STORAGE_KEY = 'selected-theme';
     themes = [];
+    themeService = inject(Theme);
     currentTheme = signal(null, ...(ngDevMode ? [{ debugName: "currentTheme" }] : []));
     setThemes(customThemes) {
         this.themes = customThemes;
@@ -1063,12 +1046,6 @@ class ColorPalette {
         if (themeToSet) {
             this.currentTheme.set(themeToSet);
         }
-        else if (this.themes.length > 0) {
-            this.currentTheme.set(this.themes[0]);
-        }
-    }
-    getThemes() {
-        return this.themes;
     }
     setTheme(themeId) {
         const theme = this.themes.find((t) => t.id === themeId);
@@ -1077,6 +1054,12 @@ class ColorPalette {
             this.saveTheme(themeId);
         }
     }
+    getThemes() {
+        return this.themes;
+    }
+    getCurrentTheme() {
+        return this.currentTheme();
+    }
     getSavedTheme() {
         if (typeof window !== 'undefined' && window.localStorage) {
             return localStorage.getItem(this.THEME_STORAGE_KEY);
@@ -1093,8 +1076,28 @@ class ColorPalette {
         if (theme) {
             document.body.classList.remove(...this.themes.map((t) => `${t.id}-theme`));
             document.body.classList.add(`${theme.id}-theme`);
+            this.themeService.setTheme(theme.type);
         }
     }, ...(ngDevMode ? [{ debugName: "updateThemeClass" }] : []));
+    loadCustomThemes(customThemes = [], defaultTheme = 'deep-blue') {
+        if (!customThemes || customThemes.length === 0) {
+            customThemes = [
+                { id: 'deep-blue', primary: '#1976D2', displayName: 'Deep Blue', type: 'light' },
+                { id: 'green', primary: '#00796B', displayName: 'Green', type: 'light' },
+                { id: 'orange', primary: '#E65100', displayName: 'Orange', type: 'light' },
+                { id: 'purple', primary: '#6200EE', displayName: 'Purple', type: 'light' },
+                { id: 'red', primary: '#C2185B', displayName: 'Red', type: 'light' },
+                { id: 'gray', primary: '#555', displayName: 'Gray', type: 'light' },
+                { id: 'netty', primary: 'rgb(0 103 126)', displayName: 'Netty', type: 'dark' },
+            ];
+        }
+        this.setThemes(customThemes);
+        // Default theme
+        if (!defaultTheme || defaultTheme.length === 0) {
+            defaultTheme = 'deep-blue';
+        }
+        this.setTheme(defaultTheme);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ColorPalette, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ColorPalette, providedIn: 'root' });
 }
@@ -1149,7 +1152,7 @@ class Toolbar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Toolbar, isStandalone: true, selector: "ntybase-toolbar", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSidenav: "toggleSidenav", icon: "iconChange" }, ngImport: i0, template: "<mat-toolbar class=\"sidenav-header\">\n  <div class=\"left-section\">\n    <button mat-icon-button (click)=\"onToggleSidenav()\" class=\"menu-button\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span>{{'app_name' | translate }}</span>\n\n    <!-- Language Selection -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"flex-stretch\"></div>\n  <button\n    mat-icon-button\n    [mat-menu-trigger-for]=\"themeMenu\"\n    class=\"theme-button\"\n  >\n    <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\n  </button>\n  <mat-menu #themeMenu=\"matMenu\">\n    @for (theme of themeService.getThemes(); track theme.name) {\n    <button\n      [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\"\n      mat-menu-item\n      (click)=\"themeService.setTheme(theme.name)\"\n    >\n      <mat-icon>{{ theme.icon }}</mat-icon>\n      <span>{{ theme.name | titlecase }}</span>\n    </button>\n    }\n  </mat-menu>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"customThemeMenu\"\n    class=\"custom-theme-button\"\n  >\n    <mat-icon>format_color_fill</mat-icon>\n  </button>\n  <mat-menu #customThemeMenu=\"matMenu\">\n    @for (customTheme of colorPaletteService.getThemes(); track customTheme.id)\n    {\n    <button\n      mat-menu-item\n      (click)=\"colorPaletteService.setTheme(customTheme.id)\"\n    >\n      <div class=\"theme-menu-item\">\n        <div\n          class=\"color-preview\"\n          [style.background-color]=\"customTheme.primary\"\n        ></div>\n        <span>{{ customTheme.displayName }}</span>\n      </div>\n    </button>\n    }\n  </mat-menu>\n</mat-toolbar>\n", styles: ["mat-toolbar{position:fixed;top:0;left:0;right:0;z-index:3;box-shadow:0 1px 5px #0000001a;display:flex;align-items:center}.sidenav-header{display:flex;justify-content:space-between;align-items:center;padding:16px;margin:0;font-weight:500}.sidenav-header .left-section{display:flex;align-items:center;gap:16px}.sidenav-header .spacer{flex:1 1 auto}.flex-stretch{flex:1 0 auto}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}::ng-deep .theme-button{border:none;background:none;margin-right:15px;cursor:pointer}::ng-deep .custom-theme-button{border:none;background:none;cursor:pointer}::ng-deep .menu-button{border:none;background:none;cursor:pointer}.language-button{margin:0 auto}::ng-deep button{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.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: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Toolbar, isStandalone: true, selector: "ntybase-toolbar", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSidenav: "toggleSidenav", icon: "iconChange" }, ngImport: i0, template: "<mat-toolbar class=\"sidenav-header\">\n  <div class=\"left-section\">\n    <button mat-icon-button (click)=\"onToggleSidenav()\" class=\"menu-button\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span>{{'app_name' | translate }}</span>\n\n    <!-- Language Selection -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"flex-stretch\"></div>\n  <!-- <button\n    mat-icon-button\n    [mat-menu-trigger-for]=\"themeMenu\"\n    class=\"theme-button\"\n  >\n    <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\n  </button> -->\n  <mat-menu #themeMenu=\"matMenu\">\n    @for (theme of themeService.getThemes(); track theme.name) {\n    <button\n      [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\"\n      mat-menu-item\n      (click)=\"themeService.setTheme(theme.name)\"\n    >\n      <mat-icon>{{ theme.icon }}</mat-icon>\n      <span>{{ theme.name | titlecase }}</span>\n    </button>\n    }\n  </mat-menu>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"customThemeMenu\"\n    class=\"custom-theme-button\"\n  >\n    <mat-icon>format_color_fill</mat-icon>\n  </button>\n  <mat-menu #customThemeMenu=\"matMenu\">\n    @for (customTheme of colorPaletteService.getThemes(); track customTheme.id)\n    {\n    <button\n      mat-menu-item\n      (click)=\"colorPaletteService.setTheme(customTheme.id)\"\n    >\n      <div class=\"theme-menu-item\">\n        <div\n          class=\"color-preview\"\n          [style.background-color]=\"customTheme.primary\"\n        ></div>\n        <span>{{ customTheme.displayName }}</span>\n      </div>\n    </button>\n    }\n  </mat-menu>\n</mat-toolbar>\n", styles: ["mat-toolbar{position:fixed;top:0;left:0;right:0;z-index:3;box-shadow:0 1px 5px #0000001a;display:flex;align-items:center}.sidenav-header{display:flex;justify-content:space-between;align-items:center;padding:16px;margin:0;font-weight:500}.sidenav-header .left-section{display:flex;align-items:center;gap:16px}.sidenav-header .spacer{flex:1 1 auto}.flex-stretch{flex:1 0 auto}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}::ng-deep .theme-button{border:none;background:none;margin-right:15px;cursor:pointer}::ng-deep .custom-theme-button{border:none;background:none;cursor:pointer}::ng-deep .menu-button{border:none;background:none;cursor:pointer}.language-button{margin:0 auto}::ng-deep button{border:none;background:none;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.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: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Toolbar, decorators: [{
             type: Component,
@@ -1160,7 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         CommonModule,
                         TitleCasePipe,
                         TranslateModule,
-                    ], template: "<mat-toolbar class=\"sidenav-header\">\n  <div class=\"left-section\">\n    <button mat-icon-button (click)=\"onToggleSidenav()\" class=\"menu-button\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span>{{'app_name' | translate }}</span>\n\n    <!-- Language Selection -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"flex-stretch\"></div>\n  <button\n    mat-icon-button\n    [mat-menu-trigger-for]=\"themeMenu\"\n    class=\"theme-button\"\n  >\n    <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\n  </button>\n  <mat-menu #themeMenu=\"matMenu\">\n    @for (theme of themeService.getThemes(); track theme.name) {\n    <button\n      [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\"\n      mat-menu-item\n      (click)=\"themeService.setTheme(theme.name)\"\n    >\n      <mat-icon>{{ theme.icon }}</mat-icon>\n      <span>{{ theme.name | titlecase }}</span>\n    </button>\n    }\n  </mat-menu>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"customThemeMenu\"\n    class=\"custom-theme-button\"\n  >\n    <mat-icon>format_color_fill</mat-icon>\n  </button>\n  <mat-menu #customThemeMenu=\"matMenu\">\n    @for (customTheme of colorPaletteService.getThemes(); track customTheme.id)\n    {\n    <button\n      mat-menu-item\n      (click)=\"colorPaletteService.setTheme(customTheme.id)\"\n    >\n      <div class=\"theme-menu-item\">\n        <div\n          class=\"color-preview\"\n          [style.background-color]=\"customTheme.primary\"\n        ></div>\n        <span>{{ customTheme.displayName }}</span>\n      </div>\n    </button>\n    }\n  </mat-menu>\n</mat-toolbar>\n", styles: ["mat-toolbar{position:fixed;top:0;left:0;right:0;z-index:3;box-shadow:0 1px 5px #0000001a;display:flex;align-items:center}.sidenav-header{display:flex;justify-content:space-between;align-items:center;padding:16px;margin:0;font-weight:500}.sidenav-header .left-section{display:flex;align-items:center;gap:16px}.sidenav-header .spacer{flex:1 1 auto}.flex-stretch{flex:1 0 auto}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}::ng-deep .theme-button{border:none;background:none;margin-right:15px;cursor:pointer}::ng-deep .custom-theme-button{border:none;background:none;cursor:pointer}::ng-deep .menu-button{border:none;background:none;cursor:pointer}.language-button{margin:0 auto}::ng-deep button{border:none;background:none;cursor:pointer}\n"] }]
+                    ], template: "<mat-toolbar class=\"sidenav-header\">\n  <div class=\"left-section\">\n    <button mat-icon-button (click)=\"onToggleSidenav()\" class=\"menu-button\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <span>{{'app_name' | translate }}</span>\n\n    <!-- Language Selection -->\n    <div class=\"language-toggle\">\n      @if (icon()) {\n      <button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n        <span class=\"{{ getCurrentLanguageIcon() }}\"></span>\n      </button>\n      } @else {\n      <button\n        mat-raised-button\n        color=\"primary\"\n        [matMenuTriggerFor]=\"languageMenu\"\n      >\n        {{ currentLanguage }}\n      </button>\n      }\n    </div>\n\n    <!-- Language Menu -->\n    <mat-menu #languageMenu=\"matMenu\">\n      @for (language of languages; track language) {\n      <button mat-menu-item (click)=\"setLanguage(language)\">\n        <span class=\"{{ getLanguageIcon(language) }}\"></span>\n        {{ language }}\n      </button>\n      }\n    </mat-menu>\n  </div>\n\n  <div class=\"spacer\"></div>\n\n  <div class=\"flex-stretch\"></div>\n  <!-- <button\n    mat-icon-button\n    [mat-menu-trigger-for]=\"themeMenu\"\n    class=\"theme-button\"\n  >\n    <mat-icon>{{ themeService.selectedTheme()?.icon }}</mat-icon>\n  </button> -->\n  <mat-menu #themeMenu=\"matMenu\">\n    @for (theme of themeService.getThemes(); track theme.name) {\n    <button\n      [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\"\n      mat-menu-item\n      (click)=\"themeService.setTheme(theme.name)\"\n    >\n      <mat-icon>{{ theme.icon }}</mat-icon>\n      <span>{{ theme.name | titlecase }}</span>\n    </button>\n    }\n  </mat-menu>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"customThemeMenu\"\n    class=\"custom-theme-button\"\n  >\n    <mat-icon>format_color_fill</mat-icon>\n  </button>\n  <mat-menu #customThemeMenu=\"matMenu\">\n    @for (customTheme of colorPaletteService.getThemes(); track customTheme.id)\n    {\n    <button\n      mat-menu-item\n      (click)=\"colorPaletteService.setTheme(customTheme.id)\"\n    >\n      <div class=\"theme-menu-item\">\n        <div\n          class=\"color-preview\"\n          [style.background-color]=\"customTheme.primary\"\n        ></div>\n        <span>{{ customTheme.displayName }}</span>\n      </div>\n    </button>\n    }\n  </mat-menu>\n</mat-toolbar>\n", styles: ["mat-toolbar{position:fixed;top:0;left:0;right:0;z-index:3;box-shadow:0 1px 5px #0000001a;display:flex;align-items:center}.sidenav-header{display:flex;justify-content:space-between;align-items:center;padding:16px;margin:0;font-weight:500}.sidenav-header .left-section{display:flex;align-items:center;gap:16px}.sidenav-header .spacer{flex:1 1 auto}.flex-stretch{flex:1 0 auto}.theme-menu-item{display:flex;align-items:center;gap:12px}.color-preview{width:24px;height:24px;border-radius:50%}::ng-deep .theme-button{border:none;background:none;margin-right:15px;cursor:pointer}::ng-deep .custom-theme-button{border:none;background:none;cursor:pointer}::ng-deep .menu-button{border:none;background:none;cursor:pointer}.language-button{margin:0 auto}::ng-deep button{border:none;background:none;cursor:pointer}\n"] }]
         }], propDecorators: { toggleSidenav: [{ type: i0.Output, args: ["toggleSidenav"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }, { type: i0.Output, args: ["iconChange"] }] } });
 
 class NettyUXFilterCard extends UiBase {
@@ -1171,13 +1174,26 @@ class NettyUXFilterCard extends UiBase {
     onExport = output();
     onReset = output();
     onApply = output();
+    resetButtonLabel = input("", ...(ngDevMode ? [{ debugName: "resetButtonLabel" }] : []));
+    applyButtonLabel = input("", ...(ngDevMode ? [{ debugName: "applyButtonLabel" }] : []));
+    exportButtonLabel = input("", ...(ngDevMode ? [{ debugName: "exportButtonLabel" }] : []));
+    translateService = inject(TranslateService);
+    getResetButtonLabel() {
+        return this.resetButtonLabel() || this.translateService.instant("@resetButtonLabel");
+    }
+    getApplyButtonLabel() {
+        return this.applyButtonLabel() || this.translateService.instant("@applyButtonLabel");
+    }
+    getExportButtonLabel() {
+        return this.exportButtonLabel() || this.translateService.instant("@exportButtonLabel");
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUXFilterCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUXFilterCard, isStandalone: true, selector: "ntyux-filter-card", inputs: { Title: { classPropertyName: "Title", publicName: "Title", isSignal: true, isRequired: false, transformFunction: null }, SubTitle: { classPropertyName: "SubTitle", publicName: "SubTitle", isSignal: true, isRequired: false, transformFunction: null }, isExportVisible: { classPropertyName: "isExportVisible", publicName: "isExportVisible", isSignal: true, isRequired: false, transformFunction: null }, isFormValid: { classPropertyName: "isFormValid", publicName: "isFormValid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onExport: "onExport", onReset: "onReset", onApply: "onApply" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"filter-card\" apperance=\"outlined\">\n    <mat-card-title>{{Title()}}</mat-card-title>\n    <mat-card-subtitle>{{SubTitle()}}</mat-card-subtitle>\n    <mat-card-content>\n        <ng-content>\n            No content provided\n        </ng-content>\n    </mat-card-content>\n    <mat-card-actions class=\"mat-card-actions\">\n        <button matButton=\"outlined\" (click)=\"onReset.emit()\">Reset</button>\n        @if (isExportVisible()) {\n        <button matButton=\"outlined\" [disabled]=\"!isFormValid()\" (click)=\"onExport.emit()\">Export</button>\n        }\n        <button matButton=\"filled\" [disabled]=\"!isFormValid()\" (click)=\"onApply.emit()\">Apply</button>\n    </mat-card-actions>\n</mat-card>", styles: [".filter-card{padding:1rem 1rem 0}.mat-card-actions{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NettyUXFilterCard, isStandalone: true, selector: "ntyux-filter-card", inputs: { Title: { classPropertyName: "Title", publicName: "Title", isSignal: true, isRequired: false, transformFunction: null }, SubTitle: { classPropertyName: "SubTitle", publicName: "SubTitle", isSignal: true, isRequired: false, transformFunction: null }, isExportVisible: { classPropertyName: "isExportVisible", publicName: "isExportVisible", isSignal: true, isRequired: false, transformFunction: null }, isFormValid: { classPropertyName: "isFormValid", publicName: "isFormValid", isSignal: true, isRequired: false, transformFunction: null }, resetButtonLabel: { classPropertyName: "resetButtonLabel", publicName: "resetButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, exportButtonLabel: { classPropertyName: "exportButtonLabel", publicName: "exportButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onExport: "onExport", onReset: "onReset", onApply: "onApply" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"filter-card\" apperance=\"outlined\">\n    <mat-card-title>{{Title()}}</mat-card-title>\n    <mat-card-subtitle>{{SubTitle()}}</mat-card-subtitle>\n    <mat-card-content>\n        <ng-content>\n            No content provided\n        </ng-content>\n    </mat-card-content>\n    <mat-card-actions class=\"mat-card-actions\">\n        <button matButton=\"outlined\" (click)=\"onReset.emit()\">{{getResetButtonLabel()}}</button>\n        @if (isExportVisible()) {\n        <button matButton=\"outlined\" [disabled]=\"!isFormValid()\"\n            (click)=\"onExport.emit()\">{{getExportButtonLabel()}}</button>\n        }\n        <button matButton=\"filled\" [disabled]=\"!isFormValid()\"\n            (click)=\"onApply.emit()\">{{getApplyButtonLabel()}}</button>\n    </mat-card-actions>\n</mat-card>", styles: [".filter-card{padding:1rem 1rem 0}.mat-card-actions{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NettyUXFilterCard, decorators: [{
             type: Component,
-            args: [{ selector: 'ntyux-filter-card', standalone: true, imports: [MatCardModule, MatButtonModule, FormsModule], template: "<mat-card class=\"filter-card\" apperance=\"outlined\">\n    <mat-card-title>{{Title()}}</mat-card-title>\n    <mat-card-subtitle>{{SubTitle()}}</mat-card-subtitle>\n    <mat-card-content>\n        <ng-content>\n            No content provided\n        </ng-content>\n    </mat-card-content>\n    <mat-card-actions class=\"mat-card-actions\">\n        <button matButton=\"outlined\" (click)=\"onReset.emit()\">Reset</button>\n        @if (isExportVisible()) {\n        <button matButton=\"outlined\" [disabled]=\"!isFormValid()\" (click)=\"onExport.emit()\">Export</button>\n        }\n        <button matButton=\"filled\" [disabled]=\"!isFormValid()\" (click)=\"onApply.emit()\">Apply</button>\n    </mat-card-actions>\n</mat-card>", styles: [".filter-card{padding:1rem 1rem 0}.mat-card-actions{justify-content:flex-end}\n"] }]
-        }], propDecorators: { Title: [{ type: i0.Input, args: [{ isSignal: true, alias: "Title", required: false }] }], SubTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "SubTitle", required: false }] }], isExportVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExportVisible", required: false }] }], isFormValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormValid", required: false }] }], onExport: [{ type: i0.Output, args: ["onExport"] }], onReset: [{ type: i0.Output, args: ["onReset"] }], onApply: [{ type: i0.Output, args: ["onApply"] }] } });
+            args: [{ selector: 'ntyux-filter-card', imports: [MatCardModule, MatButtonModule, FormsModule], template: "<mat-card class=\"filter-card\" apperance=\"outlined\">\n    <mat-card-title>{{Title()}}</mat-card-title>\n    <mat-card-subtitle>{{SubTitle()}}</mat-card-subtitle>\n    <mat-card-content>\n        <ng-content>\n            No content provided\n        </ng-content>\n    </mat-card-content>\n    <mat-card-actions class=\"mat-card-actions\">\n        <button matButton=\"outlined\" (click)=\"onReset.emit()\">{{getResetButtonLabel()}}</button>\n        @if (isExportVisible()) {\n        <button matButton=\"outlined\" [disabled]=\"!isFormValid()\"\n            (click)=\"onExport.emit()\">{{getExportButtonLabel()}}</button>\n        }\n        <button matButton=\"filled\" [disabled]=\"!isFormValid()\"\n            (click)=\"onApply.emit()\">{{getApplyButtonLabel()}}</button>\n    </mat-card-actions>\n</mat-card>", styles: [".filter-card{padding:1rem 1rem 0}.mat-card-actions{justify-content:flex-end}\n"] }]
+        }], propDecorators: { Title: [{ type: i0.Input, args: [{ isSignal: true, alias: "Title", required: false }] }], SubTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "SubTitle", required: false }] }], isExportVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExportVisible", required: false }] }], isFormValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormValid", required: false }] }], onExport: [{ type: i0.Output, args: ["onExport"] }], onReset: [{ type: i0.Output, args: ["onReset"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], resetButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetButtonLabel", required: false }] }], applyButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyButtonLabel", required: false }] }], exportButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportButtonLabel", required: false }] }] } });
 
 class NtySidenavResizableDirective {
     el = inject(ElementRef);