@nettyapps/ntyux 21.1.1 → 21.1.3
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.
|
@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/material/form-field';
|
|
|
4
4
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
5
5
|
import * as i2$1 from '@angular/material/autocomplete';
|
|
6
6
|
import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i1$2 from '@angular/forms';
|
|
8
8
|
import { ReactiveFormsModule, FormControl, Validators, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
9
9
|
import { ErrorStateMatcher } from '@angular/material/core';
|
|
10
10
|
import * as i4 from '@angular/material/input';
|
|
@@ -20,23 +20,23 @@ import { CommonModule, Location, TitleCasePipe } from '@angular/common';
|
|
|
20
20
|
import * as i3 from '@ngx-translate/core';
|
|
21
21
|
import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
22
22
|
import { Clipboard } from '@angular/cdk/clipboard';
|
|
23
|
-
import { AlertService, CommonService, AuthenticationService, NettyMenuService, CredentialsService, NettyImageService } from '@nettyapps/ntybase';
|
|
23
|
+
import { AlertService, CommonService, AuthenticationService, NettyMenuService, CredentialsService, NettyImageService, PageTitle } from '@nettyapps/ntybase';
|
|
24
24
|
import * as i5 from '@angular/router';
|
|
25
25
|
import { Router, ActivatedRoute, RouterLink, RouterModule, RouterOutlet } from '@angular/router';
|
|
26
|
-
import * as i3$
|
|
26
|
+
import * as i3$1 from '@angular/material/list';
|
|
27
27
|
import { MatListModule } from '@angular/material/list';
|
|
28
28
|
import * as i4$1 from '@angular/material/menu';
|
|
29
29
|
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
|
|
30
|
-
import * as i3$
|
|
30
|
+
import * as i3$2 from '@angular/material/toolbar';
|
|
31
31
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
32
32
|
import { I18nService } from '@nettyapps/ntyi18n';
|
|
33
33
|
import * as i2$2 from '@angular/material/button';
|
|
34
34
|
import { MatButtonModule } from '@angular/material/button';
|
|
35
|
-
import * as i1$
|
|
35
|
+
import * as i1$3 from '@angular/material/card';
|
|
36
36
|
import { MatCardModule } from '@angular/material/card';
|
|
37
|
-
import * as i1$
|
|
37
|
+
import * as i1$4 from '@angular/material/sidenav';
|
|
38
38
|
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
|
|
39
|
-
import * as i1$
|
|
39
|
+
import * as i1$5 from '@angular/cdk/drag-drop';
|
|
40
40
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
41
41
|
|
|
42
42
|
class Ntyux {
|
|
@@ -643,7 +643,7 @@ class AutoComplete extends UiBase {
|
|
|
643
643
|
useExisting: forwardRef(() => AutoComplete),
|
|
644
644
|
multi: true,
|
|
645
645
|
},
|
|
646
|
-
], viewQueries: [{ propertyName: "autoCompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputField", first: true, predicate: ["autoCompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"ui-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n type=\"text\"\n #autoCompleteInput\n matInput\n [(ngModel)]=\"value\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder()\"\n (input)=\"onInputChanged($event)\"\n (paste)=\"onPaste($event)\"\n [errorStateMatcher]=\"matcher\"\n [formControl]=\"control\"\n (contextmenu)=\"rightClick($event)\"\n (focus)=\"onFocus()\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (showSearchButton()) {\n <button\n mat-icon-button\n matSuffix\n aria-label=\"Search\"\n (click)=\"onLookup()\"\n class=\"search-btn\"\n [disabled]=\"disabled()\"\n >\n <mat-icon>search</mat-icon>\n </button>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn.bind(this)\"\n (optionSelected)=\"optionSelected($event)\"\n >\n @for (option of filteredData(); track option.value) {\n <mat-option [value]=\"option.value\"> {{ option.name }} </mat-option>\n }\n </mat-autocomplete>\n\n <mat-error>{{ getErrorMessage() }}</mat-error>\n</mat-form-field>\n", styles: ["::ng-deep .ui-full-width{width:100%;max-width:500px}::ng-deep .mat-mdc-form-field-subscript-wrapper{width:auto;height:0}::ng-deep .clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}::ng-deep .search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}::ng-deep .search-icon:hover,::ng-deep .clear-btn:hover{color:#f97a00}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type:
|
|
646
|
+
], viewQueries: [{ propertyName: "autoCompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputField", first: true, predicate: ["autoCompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"ui-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n type=\"text\"\n #autoCompleteInput\n matInput\n [(ngModel)]=\"value\"\n [matAutocomplete]=\"auto\"\n [placeholder]=\"placeholder()\"\n (input)=\"onInputChanged($event)\"\n (paste)=\"onPaste($event)\"\n [errorStateMatcher]=\"matcher\"\n [formControl]=\"control\"\n (contextmenu)=\"rightClick($event)\"\n (focus)=\"onFocus()\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (showSearchButton()) {\n <button\n mat-icon-button\n matSuffix\n aria-label=\"Search\"\n (click)=\"onLookup()\"\n class=\"search-btn\"\n [disabled]=\"disabled()\"\n >\n <mat-icon>search</mat-icon>\n </button>\n }\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n [displayWith]=\"displayFn.bind(this)\"\n (optionSelected)=\"optionSelected($event)\"\n >\n @for (option of filteredData(); track option.value) {\n <mat-option [value]=\"option.value\"> {{ option.name }} </mat-option>\n }\n </mat-autocomplete>\n\n <mat-error>{{ getErrorMessage() }}</mat-error>\n</mat-form-field>\n", styles: ["::ng-deep .ui-full-width{width:100%;max-width:500px}::ng-deep .mat-mdc-form-field-subscript-wrapper{width:auto;height:0}::ng-deep .clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}::ng-deep .search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}::ng-deep .search-icon:hover,::ng-deep .clear-btn:hover{color:#f97a00}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
647
647
|
}
|
|
648
648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AutoComplete, decorators: [{
|
|
649
649
|
type: Component,
|
|
@@ -724,7 +724,7 @@ class ValueUnitInput extends UiBase {
|
|
|
724
724
|
useExisting: forwardRef(() => ValueUnitInput),
|
|
725
725
|
multi: true,
|
|
726
726
|
},
|
|
727
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"combined-container\">\n <div class=\"value\">\n <ntyui-number-input\n #inputModel=\"ngModel\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n >\n </ntyui-number-input>\n </div>\n\n <div class=\"unit\">\n <ntybase-auto-complete\n #inputModel=\"ngModel\"\n [label]=\"unitLabel()\"\n [placeholder]=\"unitPlaceholder()\"\n [required]=\"required()\"\n [(ngModel)]=\"unitValue\"\n [tableName]=\"tableName()\"\n [apiEndpoint]=\"apiEndpoint()\"\n [lookupComponent]=\"lookupComponent()\"\n [lookupComponentPath]=\"lookupComponentPath()\"\n [showSearchButton]=\"showSearchButton()\"\n [searchAfter]=\"searchAfter()\"\n [filterField]=\"filterField()\"\n [fieldCode]=\"fieldCode()\"\n [filterFieldValue]=\"filterFieldValue()\"\n [disabled]=\"disabled() || unitDisabled()\"\n >\n </ntybase-auto-complete>\n </div>\n</div>\n@if (getErrorMessage()) {\n<mat-error class=\"error-message\">{{ getErrorMessage() }}</mat-error>\n}\n", styles: [".combined-container{display:flex;width:100%}.error-message{display:block;text-align:center;width:100%;margin-top:4px;font-size:14px}\n"], dependencies: [{ kind: "component", type: NettyUINumberInput, selector: "ntyui-number-input", inputs: ["min", "max"] }, { kind: "component", type: AutoComplete, selector: "ntybase-auto-complete", inputs: ["tableName", "apiEndpoint", "showSearchButton", "searchAfter", "fieldCode", "fieldName", "lookupComponent", "lookupComponentPath", "filterField", "filterFieldValue", "filterFieldNumeric", "filterFieldEquality", "debounceTime", "searchOnFocus", "staticData", "apiPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type:
|
|
727
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"combined-container\">\n <div class=\"value\">\n <ntyui-number-input\n #inputModel=\"ngModel\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n >\n </ntyui-number-input>\n </div>\n\n <div class=\"unit\">\n <ntybase-auto-complete\n #inputModel=\"ngModel\"\n [label]=\"unitLabel()\"\n [placeholder]=\"unitPlaceholder()\"\n [required]=\"required()\"\n [(ngModel)]=\"unitValue\"\n [tableName]=\"tableName()\"\n [apiEndpoint]=\"apiEndpoint()\"\n [lookupComponent]=\"lookupComponent()\"\n [lookupComponentPath]=\"lookupComponentPath()\"\n [showSearchButton]=\"showSearchButton()\"\n [searchAfter]=\"searchAfter()\"\n [filterField]=\"filterField()\"\n [fieldCode]=\"fieldCode()\"\n [filterFieldValue]=\"filterFieldValue()\"\n [disabled]=\"disabled() || unitDisabled()\"\n >\n </ntybase-auto-complete>\n </div>\n</div>\n@if (getErrorMessage()) {\n<mat-error class=\"error-message\">{{ getErrorMessage() }}</mat-error>\n}\n", styles: [".combined-container{display:flex;width:100%}.error-message{display:block;text-align:center;width:100%;margin-top:4px;font-size:14px}\n"], dependencies: [{ kind: "component", type: NettyUINumberInput, selector: "ntyui-number-input", inputs: ["min", "max"] }, { kind: "component", type: AutoComplete, selector: "ntybase-auto-complete", inputs: ["tableName", "apiEndpoint", "showSearchButton", "searchAfter", "fieldCode", "fieldName", "lookupComponent", "lookupComponentPath", "filterField", "filterFieldValue", "filterFieldNumeric", "filterFieldEquality", "debounceTime", "searchOnFocus", "staticData", "apiPrefix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
|
|
728
728
|
}
|
|
729
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ValueUnitInput, decorators: [{
|
|
730
730
|
type: Component,
|
|
@@ -1029,7 +1029,7 @@ class LeftSidenav {
|
|
|
1029
1029
|
this.searchTerm.set(term);
|
|
1030
1030
|
}
|
|
1031
1031
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LeftSidenav, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1032
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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 [src]=\"profileImage()\" [alt]=\"username()\" class=\"profile-image\" />\n @if(!isMinimized()){\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{ username() }}</p>\n </div>\n }\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 @if (!isMinimized()){\n <ntyui-search-input\n class=\"search-input\"\n [label]=\"'@search' | translate\"\n [placeholder]=\"'@placeholderSearch' | translate\"\n [appearance]=\"'outline'\"\n (search)=\"onSearch($event)\"\n >\n </ntyui-search-input>\n }\n\n <!-- Menu -->\n @if (!isMinimized()) {\n <mat-nav-list>\n <div class=\"sidebar\">\n <ul>\n <!-- Recursive menu render -->\n @let items = filteredMenuItems(); @let level = 0;\n <ng-container\n [ngTemplateOutlet]=\"menuItemsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: items, level: level }\"\n ></ng-container>\n </ul>\n </div>\n </mat-nav-list>\n }\n\n <!-- Footer -->\n <div class=\"sidenav-footer\">\n <button mat-button [matMenuTriggerFor]=\"footerMenu\" class=\"footer-button\">\n @if (!isMinimized()) {\n <div class=\"footer-text\">\n <div class=\"company-name\">\n <p>© 2025 AXIS</p>\n </div>\n </div>\n }\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\n<!-- Recursive Menu Template -->\n<ng-template #menuItemsTemplate let-items let-level=\"level\">\n @for (item of items; track item.name) {\n <li [class]=\"'menu-level-' + level\">\n <!-- Leaf node (no children) -->\n @if (!item.children || item.children.length === 0) {\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"active\"\n [class]=\"'menu-link level-' + level\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n <span>{{ item.name }}</span>\n </a>\n }\n\n <!-- Parent node with children -->\n @if (item.children && item.children.length > 0) {\n <a\n (click)=\"toggleSubMenu(item)\"\n [class.expanded]=\"item.expanded\"\n [class]=\"'menu-link has-children level-' + level\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n <span>{{ item.name }}</span>\n <mat-icon [class.rotated]=\"item.expanded\" class=\"expand-icon\">\n {{ item.expanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </a>\n }\n\n <!-- Recursive submenu -->\n @if (item.children && item.children.length > 0 && item.expanded) {\n <ul [class]=\"'submenu level-' + (level + 1)\">\n <ng-container\n *ngTemplateOutlet=\"menuItemsTemplate; context: { $implicit: item.children, level: level + 1 }\"\n ></ng-container>\n </ul>\n }\n </li>\n }\n</ng-template>\n", styles: [".profile-section{text-align:center;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:60px;height:60px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:2px 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:5px 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}.menu-link.level-2{margin-left:20px;font-size:.82rem}.menu-link.level-3{margin-left:20px;font-size:.8rem}.menu-link.level-4{margin-left:20px;font-size:.78rem}.submenu{padding-left:12px;margin-top:4px}.submenu li a{padding:5px 16px 5px 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) .sidenav-content-wrapper button[mat-icon-button]{position:absolute;right:-8px;top:50%;z-index:999}: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:1px;z-index:999}.search-input{margin-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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$
|
|
1032
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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 [src]=\"profileImage()\" [alt]=\"username()\" class=\"profile-image\" />\n @if(!isMinimized()){\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{ username() }}</p>\n </div>\n }\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 @if (!isMinimized()){\n <ntyui-search-input\n class=\"search-input\"\n [label]=\"'@search' | translate\"\n [placeholder]=\"'@placeholderSearch' | translate\"\n [appearance]=\"'outline'\"\n (search)=\"onSearch($event)\"\n >\n </ntyui-search-input>\n }\n\n <!-- Menu -->\n @if (!isMinimized()) {\n <mat-nav-list>\n <div class=\"sidebar\">\n <ul>\n <!-- Recursive menu render -->\n @let items = filteredMenuItems(); @let level = 0;\n <ng-container\n [ngTemplateOutlet]=\"menuItemsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: items, level: level }\"\n ></ng-container>\n </ul>\n </div>\n </mat-nav-list>\n }\n\n <!-- Footer -->\n <div class=\"sidenav-footer\">\n <button mat-button [matMenuTriggerFor]=\"footerMenu\" class=\"footer-button\">\n @if (!isMinimized()) {\n <div class=\"footer-text\">\n <div class=\"company-name\">\n <p>© 2025 AXIS</p>\n </div>\n </div>\n }\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\n<!-- Recursive Menu Template -->\n<ng-template #menuItemsTemplate let-items let-level=\"level\">\n @for (item of items; track item.name) {\n <li [class]=\"'menu-level-' + level\">\n <!-- Leaf node (no children) -->\n @if (!item.children || item.children.length === 0) {\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"active\"\n [class]=\"'menu-link level-' + level\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n <span>{{ item.name }}</span>\n </a>\n }\n\n <!-- Parent node with children -->\n @if (item.children && item.children.length > 0) {\n <a\n (click)=\"toggleSubMenu(item)\"\n [class.expanded]=\"item.expanded\"\n [class]=\"'menu-link has-children level-' + level\"\n >\n <mat-icon>{{ item.icon }}</mat-icon>\n <span>{{ item.name }}</span>\n <mat-icon [class.rotated]=\"item.expanded\" class=\"expand-icon\">\n {{ item.expanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </a>\n }\n\n <!-- Recursive submenu -->\n @if (item.children && item.children.length > 0 && item.expanded) {\n <ul [class]=\"'submenu level-' + (level + 1)\">\n <ng-container\n *ngTemplateOutlet=\"menuItemsTemplate; context: { $implicit: item.children, level: level + 1 }\"\n ></ng-container>\n </ul>\n }\n </li>\n }\n</ng-template>\n", styles: [".profile-section{text-align:center;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:60px;height:60px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;border:2px 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:5px 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}.menu-link.level-2{margin-left:20px;font-size:.82rem}.menu-link.level-3{margin-left:20px;font-size:.8rem}.menu-link.level-4{margin-left:20px;font-size:.78rem}.submenu{padding-left:12px;margin-top:4px}.submenu li a{padding:5px 16px 5px 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) .sidenav-content-wrapper button[mat-icon-button]{position:absolute;right:-8px;top:50%;z-index:999}: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:1px;z-index:999}.search-input{margin-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { 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: "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: NettyUISearchInput, selector: "ntyui-search-input", outputs: ["search"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
1033
1033
|
}
|
|
1034
1034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LeftSidenav, decorators: [{
|
|
1035
1035
|
type: Component,
|
|
@@ -1156,6 +1156,7 @@ class Toolbar {
|
|
|
1156
1156
|
themeService = inject(Theme);
|
|
1157
1157
|
colorPaletteService = inject(ColorPalette);
|
|
1158
1158
|
i18nService = inject(I18nService);
|
|
1159
|
+
pageTitleService = inject(PageTitle);
|
|
1159
1160
|
router = inject(Router);
|
|
1160
1161
|
toggleSidenav = output();
|
|
1161
1162
|
onToggleSidenav() {
|
|
@@ -1196,7 +1197,7 @@ class Toolbar {
|
|
|
1196
1197
|
}
|
|
1197
1198
|
}
|
|
1198
1199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Toolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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
|
|
1200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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 mat-raised-button color=\"primary\" [matMenuTriggerFor]=\"languageMenu\">\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\n\n <div class=\"header-title\">\n @if (pageTitleService.title()) {\n <span class=\"page-divider\">/</span>\n <span class=\"page-title\">{{ pageTitleService.title() }}</span>\n }\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"flex-stretch\"></div>\n <mat-menu #themeMenu=\"matMenu\">\n @for (theme of themeService.getThemes(); track theme.name) {\n <button [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\" mat-menu-item\n (click)=\"themeService.setTheme(theme.name)\">\n <mat-icon>{{ theme.icon }}</mat-icon>\n <span>{{ theme.name | titlecase }}</span>\n </button>\n }\n </mat-menu>\n <button mat-icon-button [matMenuTriggerFor]=\"customThemeMenu\" class=\"custom-theme-button\">\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 mat-menu-item (click)=\"colorPaletteService.setTheme(customTheme.id)\">\n <div class=\"theme-menu-item\">\n <div class=\"color-preview\" [style.background-color]=\"customTheme.primary\"></div>\n <span>{{ customTheme.displayName }}</span>\n </div>\n </button>\n }\n </mat-menu>\n</mat-toolbar>", 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}.header-title{display:flex;align-items:center;gap:8px}\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$2.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" }] });
|
|
1200
1201
|
}
|
|
1201
1202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Toolbar, decorators: [{
|
|
1202
1203
|
type: Component,
|
|
@@ -1207,7 +1208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1207
1208
|
CommonModule,
|
|
1208
1209
|
TitleCasePipe,
|
|
1209
1210
|
TranslateModule,
|
|
1210
|
-
], 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
|
|
1211
|
+
], 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 mat-raised-button color=\"primary\" [matMenuTriggerFor]=\"languageMenu\">\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\n\n <div class=\"header-title\">\n @if (pageTitleService.title()) {\n <span class=\"page-divider\">/</span>\n <span class=\"page-title\">{{ pageTitleService.title() }}</span>\n }\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"flex-stretch\"></div>\n <mat-menu #themeMenu=\"matMenu\">\n @for (theme of themeService.getThemes(); track theme.name) {\n <button [class.selected-theme]=\"themeService.selectedTheme()?.name === theme.name\" mat-menu-item\n (click)=\"themeService.setTheme(theme.name)\">\n <mat-icon>{{ theme.icon }}</mat-icon>\n <span>{{ theme.name | titlecase }}</span>\n </button>\n }\n </mat-menu>\n <button mat-icon-button [matMenuTriggerFor]=\"customThemeMenu\" class=\"custom-theme-button\">\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 mat-menu-item (click)=\"colorPaletteService.setTheme(customTheme.id)\">\n <div class=\"theme-menu-item\">\n <div class=\"color-preview\" [style.background-color]=\"customTheme.primary\"></div>\n <span>{{ customTheme.displayName }}</span>\n </div>\n </button>\n }\n </mat-menu>\n</mat-toolbar>", 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}.header-title{display:flex;align-items:center;gap:8px}\n"] }]
|
|
1211
1212
|
}], propDecorators: { toggleSidenav: [{ type: i0.Output, args: ["toggleSidenav"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }, { type: i0.Output, args: ["iconChange"] }] } });
|
|
1212
1213
|
|
|
1213
1214
|
class NettyUXFilterCard extends UiBase {
|
|
@@ -1232,7 +1233,7 @@ class NettyUXFilterCard extends UiBase {
|
|
|
1232
1233
|
return this.exportButtonLabel() || this.translateService.instant("@exportButtonLabel");
|
|
1233
1234
|
}
|
|
1234
1235
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUXFilterCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1235
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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$
|
|
1236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$3.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 }] });
|
|
1236
1237
|
}
|
|
1237
1238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUXFilterCard, decorators: [{
|
|
1238
1239
|
type: Component,
|
|
@@ -1352,7 +1353,7 @@ class NtyUXLayout {
|
|
|
1352
1353
|
// Language
|
|
1353
1354
|
showIcon = signal(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
|
|
1354
1355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NtyUXLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1355
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: NtyUXLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: "<ntybase-toolbar [(icon)]=\"showIcon\" (toggleSidenav)=\"toggleLeftSidenav()\"></ntybase-toolbar>\n\n<mat-sidenav-container class=\"netty-sidenav-container\" [autosize]=\"true\">\n <!-- Left Sidenav -->\n <mat-sidenav #leftSidenav mode=\"side\" [opened]=\"leftSidenavOpen\" position=\"start\" [class.minimized]=\"isMinimized\"\n ntySidenavResizable side=\"right\" (widthChange)=\"onSidenavResize($event)\">\n <ntybase-left-sidenav [isMinimized]=\"isMinimized\" (toggleMinimize)=\"toggleMinimize()\">\n </ntybase-left-sidenav>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content [style.margin-left]=\"leftSidenavOpen ? drawerWidth : '0'\">\n <router-outlet></router-outlet>\n </mat-sidenav-content>\n\n <!-- Right Sidenav -->\n <mat-sidenav #rightSidenav mode=\"side\" position=\"end\" [opened]=\"rightSidenavOpen\" class=\"netty-right-sidenav\"\n ntySidenavResizable side=\"left\">\n <router-outlet name=\"rightSidenav\"></router-outlet>\n </mat-sidenav>\n</mat-sidenav-container>", styles: [":host ::ng-deep .sidenav-resize-handle{position:absolute;top:0;bottom:0;width:10px;background-color:transparent;z-index:99999!important;transition:background-color .2s;pointer-events:auto}:host ::ng-deep .sidenav-resize-handle:hover{background-color:#0000000d;cursor:ew-resize!important}:host ::ng-deep .sidenav-resize-handle.handle-left{left:0}:host ::ng-deep .sidenav-resize-handle.handle-right{right:0}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$
|
|
1356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: NtyUXLayout, isStandalone: true, selector: "app-layout", ngImport: i0, template: "<ntybase-toolbar [(icon)]=\"showIcon\" (toggleSidenav)=\"toggleLeftSidenav()\"></ntybase-toolbar>\n\n<mat-sidenav-container class=\"netty-sidenav-container\" [autosize]=\"true\">\n <!-- Left Sidenav -->\n <mat-sidenav #leftSidenav mode=\"side\" [opened]=\"leftSidenavOpen\" position=\"start\" [class.minimized]=\"isMinimized\"\n ntySidenavResizable side=\"right\" (widthChange)=\"onSidenavResize($event)\">\n <ntybase-left-sidenav [isMinimized]=\"isMinimized\" (toggleMinimize)=\"toggleMinimize()\">\n </ntybase-left-sidenav>\n </mat-sidenav>\n\n <!-- Main Content -->\n <mat-sidenav-content [style.margin-left]=\"leftSidenavOpen ? drawerWidth : '0'\">\n <router-outlet></router-outlet>\n </mat-sidenav-content>\n\n <!-- Right Sidenav -->\n <mat-sidenav #rightSidenav mode=\"side\" position=\"end\" [opened]=\"rightSidenavOpen\" class=\"netty-right-sidenav\"\n ntySidenavResizable side=\"left\">\n <router-outlet name=\"rightSidenav\"></router-outlet>\n </mat-sidenav>\n</mat-sidenav-container>", styles: [":host ::ng-deep .sidenav-resize-handle{position:absolute;top:0;bottom:0;width:10px;background-color:transparent;z-index:99999!important;transition:background-color .2s;pointer-events:auto}:host ::ng-deep .sidenav-resize-handle:hover{background-color:#0000000d;cursor:ew-resize!important}:host ::ng-deep .sidenav-resize-handle.handle-left{left:0}:host ::ng-deep .sidenav-resize-handle.handle-right{right:0}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: Toolbar, selector: "ntybase-toolbar", inputs: ["icon"], outputs: ["toggleSidenav", "iconChange"] }, { kind: "component", type: LeftSidenav, selector: "ntybase-left-sidenav", inputs: ["isMinimized"], outputs: ["toggleMinimize"] }, { kind: "directive", type: NtySidenavResizableDirective, selector: "[ntySidenavResizable]", inputs: ["side", "minWidth", "maxWidth"], outputs: ["widthChange"] }] });
|
|
1356
1357
|
}
|
|
1357
1358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NtyUXLayout, decorators: [{
|
|
1358
1359
|
type: Component,
|
|
@@ -1456,7 +1457,7 @@ class NtyUXSaveLayout {
|
|
|
1456
1457
|
this.cancel.emit();
|
|
1457
1458
|
}
|
|
1458
1459
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NtyUXSaveLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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$
|
|
1460
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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$5.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$5.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" }] });
|
|
1460
1461
|
}
|
|
1461
1462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NtyUXSaveLayout, decorators: [{
|
|
1462
1463
|
type: Component,
|
|
@@ -1470,6 +1471,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1470
1471
|
], 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"] }]
|
|
1471
1472
|
}], 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"] }] } });
|
|
1472
1473
|
|
|
1474
|
+
class NtyUXDynamicCard {
|
|
1475
|
+
quantity = model(0, ...(ngDevMode ? [{ debugName: "quantity" }] : []));
|
|
1476
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
1477
|
+
max = input(Infinity, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
1478
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
1479
|
+
canIncrease = input(true, ...(ngDevMode ? [{ debugName: "canIncrease" }] : []));
|
|
1480
|
+
isEdit = input(false, ...(ngDevMode ? [{ debugName: "isEdit" }] : []));
|
|
1481
|
+
isMinusDisabled = computed(() => this.quantity() <= this.min(), ...(ngDevMode ? [{ debugName: "isMinusDisabled" }] : []));
|
|
1482
|
+
isPlusDisabled = computed(() => !this.canIncrease() || this.quantity() >= this.max(), ...(ngDevMode ? [{ debugName: "isPlusDisabled" }] : []));
|
|
1483
|
+
update(change) {
|
|
1484
|
+
const nextValue = this.quantity() + change;
|
|
1485
|
+
this.applyValue(nextValue, change > 0);
|
|
1486
|
+
}
|
|
1487
|
+
onInputChange(event) {
|
|
1488
|
+
const inputElement = event.target;
|
|
1489
|
+
let newValue = parseFloat(inputElement.value);
|
|
1490
|
+
if (isNaN(newValue)) {
|
|
1491
|
+
newValue = this.min();
|
|
1492
|
+
}
|
|
1493
|
+
this.applyValue(newValue, true);
|
|
1494
|
+
inputElement.value = this.quantity().toString();
|
|
1495
|
+
}
|
|
1496
|
+
applyValue(value, isIncreasing) {
|
|
1497
|
+
if (value < this.min())
|
|
1498
|
+
value = this.min();
|
|
1499
|
+
if (value > this.max())
|
|
1500
|
+
value = this.max();
|
|
1501
|
+
if (isIncreasing && !this.canIncrease() && value > this.quantity()) {
|
|
1502
|
+
return;
|
|
1503
|
+
}
|
|
1504
|
+
this.quantity.set(value);
|
|
1505
|
+
}
|
|
1506
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NtyUXDynamicCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1507
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NtyUXDynamicCard, isStandalone: true, selector: "ntyux-dynamic-card", inputs: { quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, canIncrease: { classPropertyName: "canIncrease", publicName: "canIncrease", isSignal: true, isRequired: false, transformFunction: null }, isEdit: { classPropertyName: "isEdit", publicName: "isEdit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { quantity: "quantityChange" }, ngImport: i0, template: "<div class=\"stepper-card\">\n <button class=\"step-btn minus\" (click)=\"update(-step())\" [disabled]=\"isMinusDisabled()\">\n <i class=\"fas fa-minus\"></i> -\n </button>\n\n <div class=\"card-content\">\n <ng-content select=\"[card-body]\"></ng-content>\n\n <div class=\"quantity-display\">\n <ng-content select=\"[card-label]\"></ng-content>\n\n @if (isEdit()) {\n <input type=\"number\" class=\"value-input\" [ngModel]=\"quantity()\" (change)=\"onInputChange($event)\"\n [min]=\"min()\" [max]=\"max()\" [step]=\"step()\" />\n } @else {\n <span class=\"value\">{{ quantity() }}</span>\n }\n </div>\n </div>\n\n <button class=\"step-btn plus\" (click)=\"update(step())\" [disabled]=\"isPlusDisabled()\">\n <i class=\"fas fa-plus\"></i> +\n </button>\n</div>", styles: [".stepper-card{display:flex;background:#fff;border-radius:12px;border:1px solid #e0e6ed;overflow:hidden;height:160px;box-shadow:0 2px 8px #0000000d;transition:transform .2s}.stepper-card .step-btn{width:50px;border:none;background:#f8f9fa;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.stepper-card .step-btn:hover:not(:disabled){background:#e2e6ea}.stepper-card .step-btn:disabled{cursor:not-allowed;color:#ccc;background:#f0f0f0}.stepper-card .step-btn.minus{color:#d32f2f;border-right:1px solid #eee}.stepper-card .step-btn.plus{color:#2e7d32;border-left:1px solid #eee}.stepper-card .step-btn:not(:disabled).minus{background-color:#d32f2f;color:#fff;border-right:1px solid #eee}.stepper-card .step-btn:not(:disabled).plus{background-color:#48a111;color:#fff;border-left:1px solid #eee}.stepper-card .card-content{flex:1;display:flex;flex-direction:column;padding:10px;text-align:center;justify-content:space-between}.stepper-card .card-content .info-section .stock-code{display:block;font-weight:700;font-size:1rem;color:#333}.stepper-card .card-content .info-section .sub-details{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mat-sys-primary-container-surface);margin-top:20px;white-space:nowrap;overflow:hidden}.stepper-card .card-content .info-section .sub-details .separator{display:none}.stepper-card .card-content .quantity-display{display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid #f0f0f0;padding-top:5px}.stepper-card .card-content .quantity-display .label{display:inline-block;font-size:.85rem;color:#333;margin-bottom:0}.stepper-card .card-content .quantity-display .value{font-size:.9rem;font-weight:500;color:var(--mat-sys-primary-container-surface)}.stepper-card .card-content .quantity-display .value-input{width:60px;border:1px solid #ddd;border-radius:4px;padding:4px;text-align:center;font-size:1rem;font-weight:700;color:#48a111;outline:none}.stepper-card .card-content .quantity-display .value-input:focus{border-color:#48a111;box-shadow:0 0 0 2px #48a1111a}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1508
|
+
}
|
|
1509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NtyUXDynamicCard, decorators: [{
|
|
1510
|
+
type: Component,
|
|
1511
|
+
args: [{ selector: 'ntyux-dynamic-card', imports: [FormsModule], template: "<div class=\"stepper-card\">\n <button class=\"step-btn minus\" (click)=\"update(-step())\" [disabled]=\"isMinusDisabled()\">\n <i class=\"fas fa-minus\"></i> -\n </button>\n\n <div class=\"card-content\">\n <ng-content select=\"[card-body]\"></ng-content>\n\n <div class=\"quantity-display\">\n <ng-content select=\"[card-label]\"></ng-content>\n\n @if (isEdit()) {\n <input type=\"number\" class=\"value-input\" [ngModel]=\"quantity()\" (change)=\"onInputChange($event)\"\n [min]=\"min()\" [max]=\"max()\" [step]=\"step()\" />\n } @else {\n <span class=\"value\">{{ quantity() }}</span>\n }\n </div>\n </div>\n\n <button class=\"step-btn plus\" (click)=\"update(step())\" [disabled]=\"isPlusDisabled()\">\n <i class=\"fas fa-plus\"></i> +\n </button>\n</div>", styles: [".stepper-card{display:flex;background:#fff;border-radius:12px;border:1px solid #e0e6ed;overflow:hidden;height:160px;box-shadow:0 2px 8px #0000000d;transition:transform .2s}.stepper-card .step-btn{width:50px;border:none;background:#f8f9fa;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.stepper-card .step-btn:hover:not(:disabled){background:#e2e6ea}.stepper-card .step-btn:disabled{cursor:not-allowed;color:#ccc;background:#f0f0f0}.stepper-card .step-btn.minus{color:#d32f2f;border-right:1px solid #eee}.stepper-card .step-btn.plus{color:#2e7d32;border-left:1px solid #eee}.stepper-card .step-btn:not(:disabled).minus{background-color:#d32f2f;color:#fff;border-right:1px solid #eee}.stepper-card .step-btn:not(:disabled).plus{background-color:#48a111;color:#fff;border-left:1px solid #eee}.stepper-card .card-content{flex:1;display:flex;flex-direction:column;padding:10px;text-align:center;justify-content:space-between}.stepper-card .card-content .info-section .stock-code{display:block;font-weight:700;font-size:1rem;color:#333}.stepper-card .card-content .info-section .sub-details{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:.8rem;color:var(--mat-sys-primary-container-surface);margin-top:20px;white-space:nowrap;overflow:hidden}.stepper-card .card-content .info-section .sub-details .separator{display:none}.stepper-card .card-content .quantity-display{display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid #f0f0f0;padding-top:5px}.stepper-card .card-content .quantity-display .label{display:inline-block;font-size:.85rem;color:#333;margin-bottom:0}.stepper-card .card-content .quantity-display .value{font-size:.9rem;font-weight:500;color:var(--mat-sys-primary-container-surface)}.stepper-card .card-content .quantity-display .value-input{width:60px;border:1px solid #ddd;border-radius:4px;padding:4px;text-align:center;font-size:1rem;font-weight:700;color:#48a111;outline:none}.stepper-card .card-content .quantity-display .value-input:focus{border-color:#48a111;box-shadow:0 0 0 2px #48a1111a}\n"] }]
|
|
1512
|
+
}], propDecorators: { quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }, { type: i0.Output, args: ["quantityChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], canIncrease: [{ type: i0.Input, args: [{ isSignal: true, alias: "canIncrease", required: false }] }], isEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEdit", required: false }] }] } });
|
|
1513
|
+
|
|
1473
1514
|
/*
|
|
1474
1515
|
* Public API Surface of ntyux
|
|
1475
1516
|
*/
|
|
@@ -1478,5 +1519,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1478
1519
|
* Generated bundle index. Do not edit.
|
|
1479
1520
|
*/
|
|
1480
1521
|
|
|
1481
|
-
export { AutoComplete, ColorPalette, Guid, HttpError403, HttpError404, LeftSidenav, NettyFilter, NettyUXFilterCard, NtyAutoCompleteFilter, NtyAutoCompleteFilterFields, NtyResizableDirective, NtySidenavResizableDirective, NtyUXLayout, NtyUXSaveLayout, Ntyux, NtyuxModule, SelectionItem, Theme, Toolbar, ValueUnitInput };
|
|
1522
|
+
export { AutoComplete, ColorPalette, Guid, HttpError403, HttpError404, LeftSidenav, NettyFilter, NettyUXFilterCard, NtyAutoCompleteFilter, NtyAutoCompleteFilterFields, NtyResizableDirective, NtySidenavResizableDirective, NtyUXDynamicCard, NtyUXLayout, NtyUXSaveLayout, Ntyux, NtyuxModule, SelectionItem, Theme, Toolbar, ValueUnitInput };
|
|
1482
1523
|
//# sourceMappingURL=nettyapps-ntyux.mjs.map
|