@nettyapps/ntyux 21.0.24 → 21.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/nettyapps-ntyux.mjs +35 -57
- package/fesm2022/nettyapps-ntyux.mjs.map +1 -1
- package/package.json +1 -1
- package/themes/deep-bluetheme.css +65 -75
- package/themes/graytheme.css +66 -76
- package/themes/greentheme.css +66 -76
- package/themes/nettytheme.css +313 -0
- package/themes/orangetheme.css +65 -75
- package/themes/purpletheme.css +65 -75
- package/themes/redtheme.css +65 -75
- package/themes/themes.css +1 -0
- package/types/nettyapps-ntyux.d.ts +14 -13
|
@@ -36,7 +36,7 @@ import * as i1$2 from '@angular/material/card';
|
|
|
36
36
|
import { MatCardModule } from '@angular/material/card';
|
|
37
37
|
import * as i1$3 from '@angular/material/sidenav';
|
|
38
38
|
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
|
|
39
|
-
import * as
|
|
39
|
+
import * as i1$4 from '@angular/cdk/drag-drop';
|
|
40
40
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
41
41
|
|
|
42
42
|
class Ntyux {
|
|
@@ -1003,42 +1003,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1003
1003
|
}], ctorParameters: () => [], propDecorators: { isMinimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMinimized", required: false }] }], toggleMinimize: [{ type: i0.Output, args: ["toggleMinimize"] }] } });
|
|
1004
1004
|
|
|
1005
1005
|
class Theme {
|
|
1006
|
-
THEME_STORAGE_KEY = 'app-theme';
|
|
1007
1006
|
appTheme = signal('light', ...(ngDevMode ? [{ debugName: "appTheme" }] : []));
|
|
1008
1007
|
themes = [
|
|
1009
1008
|
{ name: 'light', icon: 'light_mode' },
|
|
1010
1009
|
{ name: 'dark', icon: 'dark_mode' },
|
|
1011
1010
|
];
|
|
1012
1011
|
selectedTheme = computed(() => this.themes.find((theme) => theme.name === this.appTheme()), ...(ngDevMode ? [{ debugName: "selectedTheme" }] : []));
|
|
1013
|
-
constructor() {
|
|
1014
|
-
const savedTheme = this.getSavedTheme();
|
|
1015
|
-
if (savedTheme) {
|
|
1016
|
-
this.appTheme.set(savedTheme);
|
|
1017
|
-
}
|
|
1018
|
-
effect(() => {
|
|
1019
|
-
const appTheme = this.appTheme();
|
|
1020
|
-
document.body.style.setProperty('color-scheme', appTheme);
|
|
1021
|
-
document.body.setAttribute('data-ag-theme-mode', appTheme);
|
|
1022
|
-
});
|
|
1023
|
-
}
|
|
1024
1012
|
getThemes() {
|
|
1025
1013
|
return this.themes;
|
|
1026
1014
|
}
|
|
1027
1015
|
setTheme(theme) {
|
|
1028
1016
|
this.appTheme.set(theme);
|
|
1029
|
-
this.saveTheme(theme);
|
|
1030
1017
|
}
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
const
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
}
|
|
1038
|
-
saveTheme(theme) {
|
|
1039
|
-
if (typeof window !== 'undefined' && window.localStorage) {
|
|
1040
|
-
localStorage.setItem(this.THEME_STORAGE_KEY, theme);
|
|
1041
|
-
}
|
|
1018
|
+
constructor() {
|
|
1019
|
+
effect(() => {
|
|
1020
|
+
const appTheme = this.appTheme();
|
|
1021
|
+
document.body.style.setProperty('color-scheme', appTheme);
|
|
1022
|
+
document.body.setAttribute('data-ag-theme-mode', appTheme);
|
|
1023
|
+
});
|
|
1042
1024
|
}
|
|
1043
1025
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Theme, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1044
1026
|
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
|
|
|
1053
1035
|
class ColorPalette {
|
|
1054
1036
|
THEME_STORAGE_KEY = 'selected-theme';
|
|
1055
1037
|
themes = [];
|
|
1038
|
+
themeService = inject(Theme);
|
|
1056
1039
|
currentTheme = signal(null, ...(ngDevMode ? [{ debugName: "currentTheme" }] : []));
|
|
1057
1040
|
setThemes(customThemes) {
|
|
1058
1041
|
this.themes = customThemes;
|
|
@@ -1063,12 +1046,6 @@ class ColorPalette {
|
|
|
1063
1046
|
if (themeToSet) {
|
|
1064
1047
|
this.currentTheme.set(themeToSet);
|
|
1065
1048
|
}
|
|
1066
|
-
else if (this.themes.length > 0) {
|
|
1067
|
-
this.currentTheme.set(this.themes[0]);
|
|
1068
|
-
}
|
|
1069
|
-
}
|
|
1070
|
-
getThemes() {
|
|
1071
|
-
return this.themes;
|
|
1072
1049
|
}
|
|
1073
1050
|
setTheme(themeId) {
|
|
1074
1051
|
const theme = this.themes.find((t) => t.id === themeId);
|
|
@@ -1077,6 +1054,12 @@ class ColorPalette {
|
|
|
1077
1054
|
this.saveTheme(themeId);
|
|
1078
1055
|
}
|
|
1079
1056
|
}
|
|
1057
|
+
getThemes() {
|
|
1058
|
+
return this.themes;
|
|
1059
|
+
}
|
|
1060
|
+
getCurrentTheme() {
|
|
1061
|
+
return this.currentTheme();
|
|
1062
|
+
}
|
|
1080
1063
|
getSavedTheme() {
|
|
1081
1064
|
if (typeof window !== 'undefined' && window.localStorage) {
|
|
1082
1065
|
return localStorage.getItem(this.THEME_STORAGE_KEY);
|
|
@@ -1093,6 +1076,7 @@ class ColorPalette {
|
|
|
1093
1076
|
if (theme) {
|
|
1094
1077
|
document.body.classList.remove(...this.themes.map((t) => `${t.id}-theme`));
|
|
1095
1078
|
document.body.classList.add(`${theme.id}-theme`);
|
|
1079
|
+
this.themeService.setTheme(theme.type);
|
|
1096
1080
|
}
|
|
1097
1081
|
}, ...(ngDevMode ? [{ debugName: "updateThemeClass" }] : []));
|
|
1098
1082
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ColorPalette, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -1149,7 +1133,7 @@ class Toolbar {
|
|
|
1149
1133
|
}
|
|
1150
1134
|
}
|
|
1151
1135
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1152
|
-
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
|
|
1136
|
+
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" }] });
|
|
1153
1137
|
}
|
|
1154
1138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Toolbar, decorators: [{
|
|
1155
1139
|
type: Component,
|
|
@@ -1160,7 +1144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1160
1144
|
CommonModule,
|
|
1161
1145
|
TitleCasePipe,
|
|
1162
1146
|
TranslateModule,
|
|
1163
|
-
], 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
|
|
1147
|
+
], 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"] }]
|
|
1164
1148
|
}], propDecorators: { toggleSidenav: [{ type: i0.Output, args: ["toggleSidenav"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }, { type: i0.Output, args: ["iconChange"] }] } });
|
|
1165
1149
|
|
|
1166
1150
|
class NettyUXFilterCard extends UiBase {
|
|
@@ -1381,13 +1365,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1381
1365
|
}] } });
|
|
1382
1366
|
|
|
1383
1367
|
class NtyUXSaveLayout {
|
|
1384
|
-
title = '';
|
|
1385
|
-
identifier = '';
|
|
1386
|
-
viewMode = 'dialog';
|
|
1387
|
-
saveDisabled = false;
|
|
1388
|
-
showClose = true;
|
|
1389
|
-
|
|
1390
|
-
|
|
1368
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
1369
|
+
identifier = input('', ...(ngDevMode ? [{ debugName: "identifier" }] : []));
|
|
1370
|
+
viewMode = input('dialog', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
|
|
1371
|
+
saveDisabled = input(false, ...(ngDevMode ? [{ debugName: "saveDisabled" }] : []));
|
|
1372
|
+
showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
|
|
1373
|
+
showSave = input(true, ...(ngDevMode ? [{ debugName: "showSave" }] : []));
|
|
1374
|
+
save = output();
|
|
1375
|
+
cancel = output();
|
|
1391
1376
|
onSave() {
|
|
1392
1377
|
this.save.emit();
|
|
1393
1378
|
}
|
|
@@ -1395,26 +1380,19 @@ class NtyUXSaveLayout {
|
|
|
1395
1380
|
this.cancel.emit();
|
|
1396
1381
|
}
|
|
1397
1382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NtyUXSaveLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NtyUXSaveLayout, isStandalone: true, selector: "ntyux-save-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, saveDisabled: { classPropertyName: "saveDisabled", publicName: "saveDisabled", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, showSave: { classPropertyName: "showSave", publicName: "showSave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancel: "cancel" }, ngImport: i0, template: "<div\n [class.fullscreen-container]=\"viewMode() === 'fullscreen'\"\n [class.sidenav-container]=\"viewMode() === 'sidenav'\"\n [class.popup-container]=\"viewMode() === 'dialog'\"\n [class.dialog-drag-container]=\"viewMode() === 'dialog'\"\n cdkDrag\n [cdkDragDisabled]=\"viewMode() !== 'dialog'\"\n cdkDragRootElement=\".cdk-overlay-pane\"\n [ntyResizable]=\"viewMode() === 'dialog'\"\n>\n <div class=\"menu-button\">\n <ntyui-button\n type=\"menu\"\n icon=\"arrow_back\"\n [disableOnClick]=\"true\"\n [disableDuration]=\"6\"\n (clicked)=\"onCancel()\"\n />\n <ntyui-button\n type=\"menu\"\n icon=\"save\"\n [disableOnClick]=\"true\"\n [disableDuration]=\"6\"\n (clicked)=\"onSave()\"\n />\n <ng-content select=\"[additional-menu-item]\"></ng-content>\n @if(viewMode() === 'dialog' && showClose()){\n <ng-container>\n <ntyui-button\n type=\"close\"\n class=\"list-close-button\"\n [toolTip]=\"'@close'| translate\"\n (clicked)=\"onCancel()\"\n />\n </ng-container>\n }\n </div>\n\n <!-- Header -->\n <div class=\"nettybase-save-record-header-bar\" cdkDragHandle>\n <div class=\"nettybase-save-record-title-info\">\n <span class=\"nettybase-save-record-identifier\">\n {{ title() }}: {{ identifier() }}\n </span>\n </div>\n </div>\n\n <!-- Scrollable Content Area -->\n <div class=\"nettybase-container\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Buttons -->\n <div class=\"nettybase-save-button-container\">\n @if(showSave()){\n <ntyui-button\n [label]=\"'@btnSave' | translate\"\n class=\"ntyui-form-button-save\"\n isFilled=\"true\"\n icon=\"save\"\n type=\"regular\"\n (clicked)=\"onSave()\"\n [disabled]=\"saveDisabled()\"\n />\n }\n\n <ntyui-button\n [label]=\"'@btnCancel' | translate\"\n class=\"ntyui-form-button-cancel\"\n icon=\"close\"\n type=\"regular\"\n (clicked)=\"onCancel()\"\n />\n </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}.fullscreen-container,.sidenav-container,.popup-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.nettybase-container{padding:16px;flex:1;overflow-y:auto}.resize-handle{position:absolute;right:1px;bottom:1px;width:24px;height:24px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;z-index:9999;color:#0006;transition:color .2s,transform .2s;background:transparent;pointer-events:auto}.resize-handle:hover{color:#000c;transform:scale(1.1)}.resize-handle mat-icon{font-size:20px;width:20px;height:20px}:host-context(.cdk-overlay-pane){display:flex!important;flex-direction:column!important;height:100%!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:8px}:host-context(.cdk-overlay-pane) form{height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;margin:0}:host-context(.cdk-overlay-pane) .popup-container{flex:1!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;position:relative!important;height:100%!important;background:#fff}:host-context(.cdk-overlay-pane) .nettybase-container{flex:1!important;overflow-y:auto!important;overflow-x:hidden!important;padding:16px;position:relative}:host-context(.cdk-overlay-pane) .nettybase-save-button-container{flex-shrink:0!important;padding:12px 16px;background:#f8f9fa;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:8px}:host-context(.cdk-overlay-pane) .nettybase-save-record-header-bar{flex-shrink:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: NettyUIButton, selector: "ntyui-button", inputs: ["icon", "isFilled", "menuReference", "disableOnClick", "disableDuration", "waitingText", "type", "toolTip"], outputs: ["clicked"] }, { kind: "directive", type: NtyResizableDirective, selector: "[ntyResizable]", inputs: ["ntyResizable"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
1399
1384
|
}
|
|
1400
1385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NtyUXSaveLayout, decorators: [{
|
|
1401
1386
|
type: Component,
|
|
1402
|
-
args: [{ selector: 'ntyux-save-layout', standalone: true, imports: [
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
}], showClose: [{
|
|
1412
|
-
type: Input
|
|
1413
|
-
}], save: [{
|
|
1414
|
-
type: Output
|
|
1415
|
-
}], cancel: [{
|
|
1416
|
-
type: Output
|
|
1417
|
-
}] } });
|
|
1387
|
+
args: [{ selector: 'ntyux-save-layout', standalone: true, imports: [
|
|
1388
|
+
CommonModule,
|
|
1389
|
+
TranslateModule,
|
|
1390
|
+
DragDropModule,
|
|
1391
|
+
MatIconModule,
|
|
1392
|
+
NettyUIButton,
|
|
1393
|
+
NtyResizableDirective,
|
|
1394
|
+
], template: "<div\n [class.fullscreen-container]=\"viewMode() === 'fullscreen'\"\n [class.sidenav-container]=\"viewMode() === 'sidenav'\"\n [class.popup-container]=\"viewMode() === 'dialog'\"\n [class.dialog-drag-container]=\"viewMode() === 'dialog'\"\n cdkDrag\n [cdkDragDisabled]=\"viewMode() !== 'dialog'\"\n cdkDragRootElement=\".cdk-overlay-pane\"\n [ntyResizable]=\"viewMode() === 'dialog'\"\n>\n <div class=\"menu-button\">\n <ntyui-button\n type=\"menu\"\n icon=\"arrow_back\"\n [disableOnClick]=\"true\"\n [disableDuration]=\"6\"\n (clicked)=\"onCancel()\"\n />\n <ntyui-button\n type=\"menu\"\n icon=\"save\"\n [disableOnClick]=\"true\"\n [disableDuration]=\"6\"\n (clicked)=\"onSave()\"\n />\n <ng-content select=\"[additional-menu-item]\"></ng-content>\n @if(viewMode() === 'dialog' && showClose()){\n <ng-container>\n <ntyui-button\n type=\"close\"\n class=\"list-close-button\"\n [toolTip]=\"'@close'| translate\"\n (clicked)=\"onCancel()\"\n />\n </ng-container>\n }\n </div>\n\n <!-- Header -->\n <div class=\"nettybase-save-record-header-bar\" cdkDragHandle>\n <div class=\"nettybase-save-record-title-info\">\n <span class=\"nettybase-save-record-identifier\">\n {{ title() }}: {{ identifier() }}\n </span>\n </div>\n </div>\n\n <!-- Scrollable Content Area -->\n <div class=\"nettybase-container\">\n <ng-content></ng-content>\n </div>\n\n <!-- Footer Buttons -->\n <div class=\"nettybase-save-button-container\">\n @if(showSave()){\n <ntyui-button\n [label]=\"'@btnSave' | translate\"\n class=\"ntyui-form-button-save\"\n isFilled=\"true\"\n icon=\"save\"\n type=\"regular\"\n (clicked)=\"onSave()\"\n [disabled]=\"saveDisabled()\"\n />\n }\n\n <ntyui-button\n [label]=\"'@btnCancel' | translate\"\n class=\"ntyui-form-button-cancel\"\n icon=\"close\"\n type=\"regular\"\n (clicked)=\"onCancel()\"\n />\n </div>\n</div>\n", styles: [":host{display:block;height:100%;width:100%}.fullscreen-container,.sidenav-container,.popup-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.nettybase-container{padding:16px;flex:1;overflow-y:auto}.resize-handle{position:absolute;right:1px;bottom:1px;width:24px;height:24px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;z-index:9999;color:#0006;transition:color .2s,transform .2s;background:transparent;pointer-events:auto}.resize-handle:hover{color:#000c;transform:scale(1.1)}.resize-handle mat-icon{font-size:20px;width:20px;height:20px}:host-context(.cdk-overlay-pane){display:flex!important;flex-direction:column!important;height:100%!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:8px}:host-context(.cdk-overlay-pane) form{height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;margin:0}:host-context(.cdk-overlay-pane) .popup-container{flex:1!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;position:relative!important;height:100%!important;background:#fff}:host-context(.cdk-overlay-pane) .nettybase-container{flex:1!important;overflow-y:auto!important;overflow-x:hidden!important;padding:16px;position:relative}:host-context(.cdk-overlay-pane) .nettybase-save-button-container{flex-shrink:0!important;padding:12px 16px;background:#f8f9fa;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:8px}:host-context(.cdk-overlay-pane) .nettybase-save-record-header-bar{flex-shrink:0!important}\n"] }]
|
|
1395
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], saveDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveDisabled", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], showSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSave", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
|
|
1418
1396
|
|
|
1419
1397
|
/*
|
|
1420
1398
|
* Public API Surface of ntyux
|