@nettyapps/ntyui 21.1.19 → 21.1.20
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, NgModule, input, booleanAttribute, inject, model, viewChild, effect,
|
|
2
|
+
import { Component, NgModule, input, booleanAttribute, inject, model, viewChild, effect, computed, signal, output, HostListener, numberAttribute, Injectable } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { Validators, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import * as i2 from '@angular/material/form-field';
|
|
@@ -111,6 +111,16 @@ class UiBase {
|
|
|
111
111
|
}
|
|
112
112
|
});
|
|
113
113
|
}
|
|
114
|
+
requiredPlaceholder = computed(() => {
|
|
115
|
+
const customPlaceholder = this.placeholder();
|
|
116
|
+
if (customPlaceholder) {
|
|
117
|
+
return customPlaceholder;
|
|
118
|
+
}
|
|
119
|
+
if (this.required()) {
|
|
120
|
+
return this.translate.instant('@requiredFieldPlaceHolder');
|
|
121
|
+
}
|
|
122
|
+
return '';
|
|
123
|
+
}, ...(ngDevMode ? [{ debugName: "requiredPlaceholder" }] : []));
|
|
114
124
|
// ControlValueAccessor interface implementation
|
|
115
125
|
writeValue(value) {
|
|
116
126
|
this.value.set(value || '');
|
|
@@ -217,7 +227,7 @@ class NettyUITextInput extends UiBase {
|
|
|
217
227
|
useExisting: NettyUITextInput,
|
|
218
228
|
multi: true,
|
|
219
229
|
},
|
|
220
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"
|
|
230
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [ngModel]=\"value()\"\n (input)=\"onInputChange($event)\"\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 (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
221
231
|
}
|
|
222
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITextInput, decorators: [{
|
|
223
233
|
type: Component,
|
|
@@ -227,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
227
237
|
useExisting: NettyUITextInput,
|
|
228
238
|
multi: true,
|
|
229
239
|
},
|
|
230
|
-
], host: { 'ntyui-id': 'NettyUITextInput' }, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"
|
|
240
|
+
], host: { 'ntyui-id': 'NettyUITextInput' }, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [ngModel]=\"value()\"\n (input)=\"onInputChange($event)\"\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 (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
231
241
|
}] });
|
|
232
242
|
|
|
233
243
|
class NettyUIEmailInput extends UiBase {
|
|
@@ -259,7 +269,7 @@ class NettyUIEmailInput extends UiBase {
|
|
|
259
269
|
useExisting: NettyUIEmailInput,
|
|
260
270
|
multi: true,
|
|
261
271
|
},
|
|
262
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"email\"\n matInput\n [placeholder]=\"
|
|
272
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"email\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\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 (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
263
273
|
}
|
|
264
274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIEmailInput, decorators: [{
|
|
265
275
|
type: Component,
|
|
@@ -269,7 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
269
279
|
useExisting: NettyUIEmailInput,
|
|
270
280
|
multi: true,
|
|
271
281
|
},
|
|
272
|
-
], host: { 'ntyui-id': 'NettyUIEmailInput' }, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"email\"\n matInput\n [placeholder]=\"
|
|
282
|
+
], host: { 'ntyui-id': 'NettyUIEmailInput' }, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"email\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\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 (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
273
283
|
}] });
|
|
274
284
|
|
|
275
285
|
class PartialDateAdapter extends NativeDateAdapter {
|
|
@@ -499,7 +509,7 @@ class NettyUIDateTime extends UiBase {
|
|
|
499
509
|
provide: DateAdapter,
|
|
500
510
|
useClass: PartialDateAdapter
|
|
501
511
|
}
|
|
502
|
-
], viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }, { propertyName: "inputModel", first: true, predicate: ["dateInputModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #dateInputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"
|
|
512
|
+
], viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }, { propertyName: "inputModel", first: true, predicate: ["dateInputModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #dateInputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"requiredPlaceholder()\"\n [ngModel]=\"dateValue()\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"calendarMin() ?? undefined\"\n [max]=\"calendarMax() ?? undefined\"\n />\n\n @if (dateValue() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n dateInputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n <!-- Timepicker -->\n <mat-form-field\n class=\"time-field\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n >\n @if (timeLabel()) {\n <mat-label>{{ timeLabel() }}</mat-label>\n }\n <input\n #timeInputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"timepicker\"\n [ngModel]=\"timeValue()\"\n (ngModelChange)=\"onTimeChange($event)\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n [disabled]=\"disabled()\"\n />\n\n @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n timeInputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #timepicker />\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}::ng-deep .mat-mdc-form-field-icon-prefix,::ng-deep .mat-mdc-form-field-icon-suffix{display:flex!important;flex-direction:row!important;align-items:center!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
|
|
503
513
|
}
|
|
504
514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, decorators: [{
|
|
505
515
|
type: Component,
|
|
@@ -514,7 +524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
514
524
|
provide: DateAdapter,
|
|
515
525
|
useClass: PartialDateAdapter
|
|
516
526
|
}
|
|
517
|
-
], host: { 'ntyui-id': 'NettyUIDateTime' }, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #dateInputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"
|
|
527
|
+
], host: { 'ntyui-id': 'NettyUIDateTime' }, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #dateInputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"requiredPlaceholder()\"\n [ngModel]=\"dateValue()\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"calendarMin() ?? undefined\"\n [max]=\"calendarMax() ?? undefined\"\n />\n\n @if (dateValue() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n dateInputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n <!-- Timepicker -->\n <mat-form-field\n class=\"time-field\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n >\n @if (timeLabel()) {\n <mat-label>{{ timeLabel() }}</mat-label>\n }\n <input\n #timeInputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"timepicker\"\n [ngModel]=\"timeValue()\"\n (ngModelChange)=\"onTimeChange($event)\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n [disabled]=\"disabled()\"\n />\n\n @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n timeInputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #timepicker />\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}::ng-deep .mat-mdc-form-field-icon-prefix,::ng-deep .mat-mdc-form-field-icon-suffix{display:flex!important;flex-direction:row!important;align-items:center!important}\n"] }]
|
|
518
528
|
}], ctorParameters: () => [], propDecorators: { timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], compareMinDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareMinDate", required: false }] }], compareMaxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareMaxDate", required: false }] }], dateTimeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeValue", required: false }] }, { type: i0.Output, args: ["dateTimeValueChange"] }], dateModel: [{ type: i0.ViewChild, args: ['dateModel', { isSignal: true }] }], timeModel: [{ type: i0.ViewChild, args: ['timeModel', { isSignal: true }] }], inputModel: [{ type: i0.ViewChild, args: ['dateInputModel', { isSignal: true }] }] } });
|
|
519
529
|
|
|
520
530
|
class NettyUIDatePicker extends UiBase {
|
|
@@ -631,7 +641,7 @@ class NettyUIDatePicker extends UiBase {
|
|
|
631
641
|
provide: DateAdapter,
|
|
632
642
|
useClass: PartialDateAdapter
|
|
633
643
|
}
|
|
634
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n class=\"example-full-width\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && selectedDate()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"
|
|
644
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n class=\"example-full-width\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && selectedDate()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"selectedDate\"\n (dateChange)=\"onDateChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n <button\n mat-icon-button\n matSuffix\n [class.invisible]=\"!selectedDate() || disabled()\"\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
635
645
|
}
|
|
636
646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDatePicker, decorators: [{
|
|
637
647
|
type: Component,
|
|
@@ -646,7 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
646
656
|
provide: DateAdapter,
|
|
647
657
|
useClass: PartialDateAdapter
|
|
648
658
|
}
|
|
649
|
-
], host: { 'ntyui-id': 'NettyUIDatePicker' }, template: "<mat-form-field\n [appearance]=\"appearance()\"\n class=\"example-full-width\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && selectedDate()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"
|
|
659
|
+
], host: { 'ntyui-id': 'NettyUIDatePicker' }, template: "<mat-form-field\n [appearance]=\"appearance()\"\n class=\"example-full-width\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && selectedDate()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"selectedDate\"\n (dateChange)=\"onDateChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n <button\n mat-icon-button\n matSuffix\n [class.invisible]=\"!selectedDate() || disabled()\"\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"] }]
|
|
650
660
|
}], ctorParameters: () => [], propDecorators: { dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], dateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateValue", required: false }] }, { type: i0.Output, args: ["dateValueChange"] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }, { type: i0.Output, args: ["selectedDateChange"] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }] } });
|
|
651
661
|
|
|
652
662
|
class NettyUIMaskedInput extends UiBase {
|
|
@@ -772,7 +782,7 @@ class NettyUIMaskedInput extends UiBase {
|
|
|
772
782
|
useExisting: NettyUIMaskedInput,
|
|
773
783
|
multi: true,
|
|
774
784
|
},
|
|
775
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n matInput\n [placeholder]=\"
|
|
785
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\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 (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
776
786
|
}
|
|
777
787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIMaskedInput, decorators: [{
|
|
778
788
|
type: Component,
|
|
@@ -782,7 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
782
792
|
useExisting: NettyUIMaskedInput,
|
|
783
793
|
multi: true,
|
|
784
794
|
},
|
|
785
|
-
], host: { 'ntyui-id': 'NettyUIMaskedInput' }, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n matInput\n [placeholder]=\"
|
|
795
|
+
], host: { 'ntyui-id': 'NettyUIMaskedInput' }, template: "<mat-form-field\n class=\"example-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 <input\n #inputModel=\"ngModel\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\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 (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
786
796
|
}], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }] } });
|
|
787
797
|
|
|
788
798
|
class NettyUICarousel {
|
|
@@ -1107,7 +1117,7 @@ class NettyUINumberInput extends UiBase {
|
|
|
1107
1117
|
useExisting: NettyUINumberInput,
|
|
1108
1118
|
multi: true,
|
|
1109
1119
|
},
|
|
1110
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n matInput\n name=\"calculation\"\n #calcInput\n class=\"calculation-input\"\n [placeholder]=\"
|
|
1120
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n matInput\n name=\"calculation\"\n #calcInput\n class=\"calculation-input\"\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n (input)=\"onInputChange($event)\"\n (keydown.enter)=\"calculateExpression($event)\"\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 (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.calculation-input{text-align:right;padding-left:-24px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1111
1121
|
}
|
|
1112
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUINumberInput, decorators: [{
|
|
1113
1123
|
type: Component,
|
|
@@ -1117,7 +1127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1117
1127
|
useExisting: NettyUINumberInput,
|
|
1118
1128
|
multi: true,
|
|
1119
1129
|
},
|
|
1120
|
-
], host: { 'ntyui-id': 'NettyUINumberInput' }, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n matInput\n name=\"calculation\"\n #calcInput\n class=\"calculation-input\"\n [placeholder]=\"
|
|
1130
|
+
], host: { 'ntyui-id': 'NettyUINumberInput' }, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n matInput\n name=\"calculation\"\n #calcInput\n class=\"calculation-input\"\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled()\"\n (input)=\"onInputChange($event)\"\n (keydown.enter)=\"calculateExpression($event)\"\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 (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.calculation-input{text-align:right;padding-left:-24px}\n"] }]
|
|
1121
1131
|
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
|
|
1122
1132
|
|
|
1123
1133
|
class NettyUISearchInput extends UiBase {
|
|
@@ -1133,7 +1143,7 @@ class NettyUISearchInput extends UiBase {
|
|
|
1133
1143
|
useExisting: NettyUISearchInput,
|
|
1134
1144
|
multi: true,
|
|
1135
1145
|
},
|
|
1136
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"
|
|
1146
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n (keyup.enter)=\"emitSearch()\"\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 }\n\n <button\n class=\"search-icon\"\n mat-icon-button\n matSuffix\n (click)=\"emitSearch()\"\n aria-label=\"Search\"\n >\n <mat-icon matSuffix>search</mat-icon>\n </button>\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1137
1147
|
}
|
|
1138
1148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUISearchInput, decorators: [{
|
|
1139
1149
|
type: Component,
|
|
@@ -1143,7 +1153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1143
1153
|
useExisting: NettyUISearchInput,
|
|
1144
1154
|
multi: true,
|
|
1145
1155
|
},
|
|
1146
|
-
], host: { 'ntyui-id': 'NettyUISearchInput' }, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"
|
|
1156
|
+
], host: { 'ntyui-id': 'NettyUISearchInput' }, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n (keyup.enter)=\"emitSearch()\"\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 }\n\n <button\n class=\"search-icon\"\n mat-icon-button\n matSuffix\n (click)=\"emitSearch()\"\n aria-label=\"Search\"\n >\n <mat-icon matSuffix>search</mat-icon>\n </button>\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
1147
1157
|
}], propDecorators: { search: [{ type: i0.Output, args: ["search"] }] } });
|
|
1148
1158
|
|
|
1149
1159
|
class NettyUIBarcodeInput extends UiBase {
|
|
@@ -1161,7 +1171,7 @@ class NettyUIBarcodeInput extends UiBase {
|
|
|
1161
1171
|
useExisting: NettyUIBarcodeInput,
|
|
1162
1172
|
multi: true,
|
|
1163
1173
|
},
|
|
1164
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"
|
|
1174
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [ngModel]=\"value()\"\n (input)=\"onInputChange($event)\"\n (keyup.enter)=\"handleKeyUpEnter()\" \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 } \n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1165
1175
|
}
|
|
1166
1176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIBarcodeInput, decorators: [{
|
|
1167
1177
|
type: Component,
|
|
@@ -1171,7 +1181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1171
1181
|
useExisting: NettyUIBarcodeInput,
|
|
1172
1182
|
multi: true,
|
|
1173
1183
|
},
|
|
1174
|
-
], template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"
|
|
1184
|
+
], template: "<mat-form-field\n class=\"example-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 #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"requiredPlaceholder()\"\n [ngModel]=\"value()\"\n (input)=\"onInputChange($event)\"\n (keyup.enter)=\"handleKeyUpEnter()\" \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 } \n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
1175
1185
|
}], propDecorators: { onEnter: [{ type: i0.Output, args: ["onEnter"] }] } });
|
|
1176
1186
|
|
|
1177
1187
|
class NettyUISelect extends UiBase {
|
|
@@ -1233,7 +1243,7 @@ class NettyUISelect extends UiBase {
|
|
|
1233
1243
|
useExisting: NettyUISelect,
|
|
1234
1244
|
multi: true,
|
|
1235
1245
|
},
|
|
1236
|
-
], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && (multiple() ? selectedValue()?.length > 0 : selectedValue() !== null)\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <mat-select\n #inputModel=\"ngModel\"\n [(ngModel)]=\"selectedValue\"\n [placeholder]=\"
|
|
1246
|
+
], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && (multiple() ? selectedValue()?.length > 0 : selectedValue() !== null)\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <mat-select\n #inputModel=\"ngModel\"\n [(ngModel)]=\"selectedValue\"\n [placeholder]=\"requiredPlaceholder()\"\n [required]=\"required() && !nullAllowed()\"\n [multiple]=\"multiple()\"\n >\n <!-- Custom trigger -->\n @if (showCustomTrigger()) {\n <mat-select-trigger>\n @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n ((selectedValue()?.length || 0) > 1) {\n <span class=\"additional-selection\">\n (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n 'others' }})\n </span>\n } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n </mat-select-trigger>\n }\n <!-- None option -->\n @if (hasNoneOption()) {\n <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n }\n <!-- Dynamic options -->\n @for (option of enumList(); track option.value) {\n <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n }\n </mat-select>\n\n @if (inputModel?.hasError('required')) {\n <mat-error>{{ getErrorMessage() }}</mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }] });
|
|
1237
1247
|
}
|
|
1238
1248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUISelect, decorators: [{
|
|
1239
1249
|
type: Component,
|
|
@@ -1243,7 +1253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1243
1253
|
useExisting: NettyUISelect,
|
|
1244
1254
|
multi: true,
|
|
1245
1255
|
},
|
|
1246
|
-
], host: { 'ntyui-id': 'NettyUISelect' }, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && (multiple() ? selectedValue()?.length > 0 : selectedValue() !== null)\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <mat-select\n #inputModel=\"ngModel\"\n [(ngModel)]=\"selectedValue\"\n [placeholder]=\"
|
|
1256
|
+
], host: { 'ntyui-id': 'NettyUISelect' }, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && (multiple() ? selectedValue()?.length > 0 : selectedValue() !== null)\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <mat-select\n #inputModel=\"ngModel\"\n [(ngModel)]=\"selectedValue\"\n [placeholder]=\"requiredPlaceholder()\"\n [required]=\"required() && !nullAllowed()\"\n [multiple]=\"multiple()\"\n >\n <!-- Custom trigger -->\n @if (showCustomTrigger()) {\n <mat-select-trigger>\n @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n ((selectedValue()?.length || 0) > 1) {\n <span class=\"additional-selection\">\n (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n 'others' }})\n </span>\n } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n </mat-select-trigger>\n }\n <!-- None option -->\n @if (hasNoneOption()) {\n <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n }\n <!-- Dynamic options -->\n @for (option of enumList(); track option.value) {\n <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n }\n </mat-select>\n\n @if (inputModel?.hasError('required')) {\n <mat-error>{{ getErrorMessage() }}</mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
1247
1257
|
}], ctorParameters: () => [], propDecorators: { showNoneOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoneOption", required: false }] }], nullAllowed: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullAllowed", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], showCustomTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomTrigger", required: false }] }], enumList: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumList", required: false }] }, { type: i0.Output, args: ["enumListChange"] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], selectModel: [{ type: i0.ViewChild, args: ['selectModel', { isSignal: true }] }] } });
|
|
1248
1258
|
|
|
1249
1259
|
class NettyUIVisibleSwitchButton extends UiBase {
|
|
@@ -1315,7 +1325,7 @@ class NettyUITimePicker extends UiBase {
|
|
|
1315
1325
|
useExisting: NettyUITimePicker,
|
|
1316
1326
|
multi: true,
|
|
1317
1327
|
},
|
|
1318
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"picker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [placeholder]=\"
|
|
1328
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"picker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [placeholder]=\"requiredPlaceholder()\"\n />\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #picker />\n <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1319
1329
|
}
|
|
1320
1330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITimePicker, decorators: [{
|
|
1321
1331
|
type: Component,
|
|
@@ -1326,7 +1336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1326
1336
|
useExisting: NettyUITimePicker,
|
|
1327
1337
|
multi: true,
|
|
1328
1338
|
},
|
|
1329
|
-
], host: { 'ntyui-id': 'NettyUITimePicker' }, template: "<mat-form-field\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"picker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [placeholder]=\"
|
|
1339
|
+
], host: { 'ntyui-id': 'NettyUITimePicker' }, template: "<mat-form-field\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"picker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [placeholder]=\"requiredPlaceholder()\"\n />\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #picker />\n <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"] }]
|
|
1330
1340
|
}], ctorParameters: () => [], propDecorators: { timeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeValue", required: false }] }, { type: i0.Output, args: ["timeValueChange"] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }] } });
|
|
1331
1341
|
|
|
1332
1342
|
class NettyUITree {
|