@nettyapps/ntyui 21.1.18 → 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';
|
|
@@ -8,6 +8,8 @@ import * as i3 from '@angular/material/input';
|
|
|
8
8
|
import { MatInputModule } from '@angular/material/input';
|
|
9
9
|
import * as i4 from '@angular/material/icon';
|
|
10
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
11
|
+
import * as i5 from '@ngx-translate/core';
|
|
12
|
+
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
11
13
|
import { AlertService } from '@nettyapps/ntybase';
|
|
12
14
|
import * as i4$1 from '@angular/material/datepicker';
|
|
13
15
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
@@ -31,8 +33,6 @@ import * as i2$3 from '@angular/material/select';
|
|
|
31
33
|
import { MatSelectModule } from '@angular/material/select';
|
|
32
34
|
import * as i2$4 from '@angular/material/radio';
|
|
33
35
|
import { MatRadioModule } from '@angular/material/radio';
|
|
34
|
-
import * as i5 from '@ngx-translate/core';
|
|
35
|
-
import { TranslateModule } from '@ngx-translate/core';
|
|
36
36
|
import { HttpClient } from '@angular/common/http';
|
|
37
37
|
import { EnvironmentProxy } from '@nettyapps/ntycontract';
|
|
38
38
|
|
|
@@ -77,10 +77,11 @@ class UiBase {
|
|
|
77
77
|
maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
|
|
78
78
|
minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
|
|
79
79
|
validateRegex = input(null, ...(ngDevMode ? [{ debugName: "validateRegex" }] : []));
|
|
80
|
-
validateRegexErrorMessage = input(
|
|
80
|
+
validateRegexErrorMessage = input(...(ngDevMode ? [undefined, { debugName: "validateRegexErrorMessage" }] : []));
|
|
81
81
|
forFilter = input(false, { ...(ngDevMode ? { debugName: "forFilter" } : {}), transform: booleanAttribute });
|
|
82
82
|
// Services
|
|
83
83
|
alertService = inject(AlertService);
|
|
84
|
+
translate = inject(TranslateService);
|
|
84
85
|
// Debounce properties
|
|
85
86
|
debounce = input(200, ...(ngDevMode ? [{ debugName: "debounce" }] : []));
|
|
86
87
|
debounceTimer;
|
|
@@ -110,6 +111,16 @@ class UiBase {
|
|
|
110
111
|
}
|
|
111
112
|
});
|
|
112
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" }] : []));
|
|
113
124
|
// ControlValueAccessor interface implementation
|
|
114
125
|
writeValue(value) {
|
|
115
126
|
this.value.set(value || '');
|
|
@@ -123,17 +134,22 @@ class UiBase {
|
|
|
123
134
|
getErrorMessage() {
|
|
124
135
|
if (!this.ngModel?.control)
|
|
125
136
|
return undefined;
|
|
126
|
-
|
|
127
|
-
|
|
137
|
+
const control = this.ngModel.control;
|
|
138
|
+
const customMessages = this.errorMessages();
|
|
139
|
+
if (control.hasError('required')) {
|
|
140
|
+
return customMessages.required || this.translate.instant('@requiredField');
|
|
128
141
|
}
|
|
129
|
-
if (
|
|
130
|
-
|
|
142
|
+
if (control.hasError('minlength')) {
|
|
143
|
+
const limit = this.minLength();
|
|
144
|
+
return customMessages.minlength || this.translate.instant('@minLengthError', { value: limit });
|
|
131
145
|
}
|
|
132
|
-
if (
|
|
133
|
-
|
|
146
|
+
if (control.hasError('maxlength')) {
|
|
147
|
+
const limit = this.maxLength();
|
|
148
|
+
return customMessages.maxlength || this.translate.instant('@maxLengthError', { value: limit });
|
|
149
|
+
;
|
|
134
150
|
}
|
|
135
|
-
if (
|
|
136
|
-
return
|
|
151
|
+
if (control.hasError('pattern')) {
|
|
152
|
+
return customMessages.pattern || this.translate.instant('@invalidFormat');
|
|
137
153
|
}
|
|
138
154
|
return undefined;
|
|
139
155
|
}
|
|
@@ -211,7 +227,7 @@ class NettyUITextInput extends UiBase {
|
|
|
211
227
|
useExisting: NettyUITextInput,
|
|
212
228
|
multi: true,
|
|
213
229
|
},
|
|
214
|
-
], 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"] }] });
|
|
215
231
|
}
|
|
216
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITextInput, decorators: [{
|
|
217
233
|
type: Component,
|
|
@@ -221,7 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
221
237
|
useExisting: NettyUITextInput,
|
|
222
238
|
multi: true,
|
|
223
239
|
},
|
|
224
|
-
], 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"] }]
|
|
225
241
|
}] });
|
|
226
242
|
|
|
227
243
|
class NettyUIEmailInput extends UiBase {
|
|
@@ -253,7 +269,7 @@ class NettyUIEmailInput extends UiBase {
|
|
|
253
269
|
useExisting: NettyUIEmailInput,
|
|
254
270
|
multi: true,
|
|
255
271
|
},
|
|
256
|
-
], 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"] }] });
|
|
257
273
|
}
|
|
258
274
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIEmailInput, decorators: [{
|
|
259
275
|
type: Component,
|
|
@@ -263,7 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
263
279
|
useExisting: NettyUIEmailInput,
|
|
264
280
|
multi: true,
|
|
265
281
|
},
|
|
266
|
-
], 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"] }]
|
|
267
283
|
}] });
|
|
268
284
|
|
|
269
285
|
class PartialDateAdapter extends NativeDateAdapter {
|
|
@@ -320,6 +336,8 @@ class NettyUIDateTime extends UiBase {
|
|
|
320
336
|
timeLabel = input('', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
|
|
321
337
|
dateRestriction = input('any', ...(ngDevMode ? [{ debugName: "dateRestriction" }] : []));
|
|
322
338
|
timeFormat = input('tr-TR', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
|
|
339
|
+
compareMinDate = input(null, ...(ngDevMode ? [{ debugName: "compareMinDate" }] : []));
|
|
340
|
+
compareMaxDate = input(null, ...(ngDevMode ? [{ debugName: "compareMaxDate" }] : []));
|
|
323
341
|
// Combined value output
|
|
324
342
|
dateTimeValue = model(null, ...(ngDevMode ? [{ debugName: "dateTimeValue" }] : []));
|
|
325
343
|
// Date properties
|
|
@@ -341,20 +359,20 @@ class NettyUIDateTime extends UiBase {
|
|
|
341
359
|
return `${day}/${month}/${year}`;
|
|
342
360
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
343
361
|
// Date restrictions
|
|
344
|
-
|
|
362
|
+
calendarMin = computed(() => {
|
|
345
363
|
const today = new Date();
|
|
346
364
|
today.setHours(0, 0, 0, 0);
|
|
347
365
|
return this.dateRestriction() === 'future'
|
|
348
366
|
? new Date(today.getTime() + 86400000)
|
|
349
367
|
: null;
|
|
350
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
351
|
-
|
|
368
|
+
}, ...(ngDevMode ? [{ debugName: "calendarMin" }] : []));
|
|
369
|
+
calendarMax = computed(() => {
|
|
352
370
|
const today = new Date();
|
|
353
371
|
today.setHours(0, 0, 0, 0);
|
|
354
372
|
return this.dateRestriction() === 'past'
|
|
355
373
|
? new Date(today.getTime() - 86400000)
|
|
356
374
|
: null;
|
|
357
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
375
|
+
}, ...(ngDevMode ? [{ debugName: "calendarMax" }] : []));
|
|
358
376
|
constructor() {
|
|
359
377
|
super();
|
|
360
378
|
// Value changes
|
|
@@ -408,12 +426,13 @@ class NettyUIDateTime extends UiBase {
|
|
|
408
426
|
return;
|
|
409
427
|
}
|
|
410
428
|
const localDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
|
|
411
|
-
const min = this.
|
|
412
|
-
const max = this.
|
|
429
|
+
const min = this.calendarMin();
|
|
430
|
+
const max = this.calendarMax();
|
|
413
431
|
const isValid = (!min || localDate >= min) && (!max || localDate <= max);
|
|
414
432
|
if (isValid) {
|
|
415
433
|
this.dateValue.set(localDate);
|
|
416
434
|
this.updateCombinedValue();
|
|
435
|
+
this.checkComparisonDateTime(localDate);
|
|
417
436
|
}
|
|
418
437
|
else {
|
|
419
438
|
this.dateValue.set(null);
|
|
@@ -425,6 +444,10 @@ class NettyUIDateTime extends UiBase {
|
|
|
425
444
|
time.setHours(newTime.getHours());
|
|
426
445
|
time.setMinutes(newTime.getMinutes());
|
|
427
446
|
this.timeValue.set(time);
|
|
447
|
+
const date = this.dateValue();
|
|
448
|
+
if (date) {
|
|
449
|
+
this.checkComparisonDateTime(date);
|
|
450
|
+
}
|
|
428
451
|
}
|
|
429
452
|
clearInput() {
|
|
430
453
|
this.dateValue.set(null);
|
|
@@ -451,8 +474,31 @@ class NettyUIDateTime extends UiBase {
|
|
|
451
474
|
this.value.set(shouldBeNull ? null : '');
|
|
452
475
|
this.dateTimeValue.set(shouldBeNull ? null : new Date('1900-01-01T00:00:00'));
|
|
453
476
|
}
|
|
477
|
+
checkComparisonDateTime(selectedDate) {
|
|
478
|
+
const date = this.dateValue();
|
|
479
|
+
const time = this.timeValue();
|
|
480
|
+
if (!date)
|
|
481
|
+
return;
|
|
482
|
+
const currentCombined = new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), 0);
|
|
483
|
+
const ensureDate = (d) => {
|
|
484
|
+
if (!d)
|
|
485
|
+
return null;
|
|
486
|
+
const dateObj = d instanceof Date ? d : new Date(d);
|
|
487
|
+
return isNaN(dateObj.getTime()) ? null : dateObj;
|
|
488
|
+
};
|
|
489
|
+
const cMin = ensureDate(this.compareMinDate());
|
|
490
|
+
const cMax = ensureDate(this.compareMaxDate());
|
|
491
|
+
// 1900 yılı kontrolü: Eğer tarih set edilmemişse (varsayılan 1900 ise) uyarı verme
|
|
492
|
+
const isRealDate = (d) => d && d.getFullYear() > 1900;
|
|
493
|
+
if (cMin && isRealDate(cMin) && currentCombined.getTime() < cMin.getTime()) {
|
|
494
|
+
this.alertService.showError('@dateCannotBeBeforeStart');
|
|
495
|
+
}
|
|
496
|
+
if (cMax && isRealDate(cMax) && currentCombined.getTime() > cMax.getTime()) {
|
|
497
|
+
this.alertService.showError('@dateCannotBeAfterEnd');
|
|
498
|
+
}
|
|
499
|
+
}
|
|
454
500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, host: { attributes: { "ntyui-id": "NettyUIDateTime" } }, providers: [
|
|
501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, compareMinDate: { classPropertyName: "compareMinDate", publicName: "compareMinDate", isSignal: true, isRequired: false, transformFunction: null }, compareMaxDate: { classPropertyName: "compareMaxDate", publicName: "compareMaxDate", isSignal: true, isRequired: false, transformFunction: null }, dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, host: { attributes: { "ntyui-id": "NettyUIDateTime" } }, providers: [
|
|
456
502
|
provideNativeDateAdapter(),
|
|
457
503
|
{
|
|
458
504
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -463,7 +509,7 @@ class NettyUIDateTime extends UiBase {
|
|
|
463
509
|
provide: DateAdapter,
|
|
464
510
|
useClass: PartialDateAdapter
|
|
465
511
|
}
|
|
466
|
-
], 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"] }] });
|
|
467
513
|
}
|
|
468
514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, decorators: [{
|
|
469
515
|
type: Component,
|
|
@@ -478,8 +524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
478
524
|
provide: DateAdapter,
|
|
479
525
|
useClass: PartialDateAdapter
|
|
480
526
|
}
|
|
481
|
-
], 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]=\"
|
|
482
|
-
}], 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 }] }], 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 }] }] } });
|
|
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"] }]
|
|
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 }] }] } });
|
|
483
529
|
|
|
484
530
|
class NettyUIDatePicker extends UiBase {
|
|
485
531
|
// Constants
|
|
@@ -595,7 +641,7 @@ class NettyUIDatePicker extends UiBase {
|
|
|
595
641
|
provide: DateAdapter,
|
|
596
642
|
useClass: PartialDateAdapter
|
|
597
643
|
}
|
|
598
|
-
], 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"] }] });
|
|
599
645
|
}
|
|
600
646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDatePicker, decorators: [{
|
|
601
647
|
type: Component,
|
|
@@ -610,7 +656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
610
656
|
provide: DateAdapter,
|
|
611
657
|
useClass: PartialDateAdapter
|
|
612
658
|
}
|
|
613
|
-
], 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"] }]
|
|
614
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 }] }] } });
|
|
615
661
|
|
|
616
662
|
class NettyUIMaskedInput extends UiBase {
|
|
@@ -736,7 +782,7 @@ class NettyUIMaskedInput extends UiBase {
|
|
|
736
782
|
useExisting: NettyUIMaskedInput,
|
|
737
783
|
multi: true,
|
|
738
784
|
},
|
|
739
|
-
], 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"] }] });
|
|
740
786
|
}
|
|
741
787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIMaskedInput, decorators: [{
|
|
742
788
|
type: Component,
|
|
@@ -746,7 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
746
792
|
useExisting: NettyUIMaskedInput,
|
|
747
793
|
multi: true,
|
|
748
794
|
},
|
|
749
|
-
], 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"] }]
|
|
750
796
|
}], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }] } });
|
|
751
797
|
|
|
752
798
|
class NettyUICarousel {
|
|
@@ -1071,7 +1117,7 @@ class NettyUINumberInput extends UiBase {
|
|
|
1071
1117
|
useExisting: NettyUINumberInput,
|
|
1072
1118
|
multi: true,
|
|
1073
1119
|
},
|
|
1074
|
-
], 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"] }] });
|
|
1075
1121
|
}
|
|
1076
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUINumberInput, decorators: [{
|
|
1077
1123
|
type: Component,
|
|
@@ -1081,7 +1127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1081
1127
|
useExisting: NettyUINumberInput,
|
|
1082
1128
|
multi: true,
|
|
1083
1129
|
},
|
|
1084
|
-
], 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"] }]
|
|
1085
1131
|
}], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
|
|
1086
1132
|
|
|
1087
1133
|
class NettyUISearchInput extends UiBase {
|
|
@@ -1097,7 +1143,7 @@ class NettyUISearchInput extends UiBase {
|
|
|
1097
1143
|
useExisting: NettyUISearchInput,
|
|
1098
1144
|
multi: true,
|
|
1099
1145
|
},
|
|
1100
|
-
], 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"] }] });
|
|
1101
1147
|
}
|
|
1102
1148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUISearchInput, decorators: [{
|
|
1103
1149
|
type: Component,
|
|
@@ -1107,7 +1153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1107
1153
|
useExisting: NettyUISearchInput,
|
|
1108
1154
|
multi: true,
|
|
1109
1155
|
},
|
|
1110
|
-
], 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"] }]
|
|
1111
1157
|
}], propDecorators: { search: [{ type: i0.Output, args: ["search"] }] } });
|
|
1112
1158
|
|
|
1113
1159
|
class NettyUIBarcodeInput extends UiBase {
|
|
@@ -1125,7 +1171,7 @@ class NettyUIBarcodeInput extends UiBase {
|
|
|
1125
1171
|
useExisting: NettyUIBarcodeInput,
|
|
1126
1172
|
multi: true,
|
|
1127
1173
|
},
|
|
1128
|
-
], 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"] }] });
|
|
1129
1175
|
}
|
|
1130
1176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIBarcodeInput, decorators: [{
|
|
1131
1177
|
type: Component,
|
|
@@ -1135,7 +1181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1135
1181
|
useExisting: NettyUIBarcodeInput,
|
|
1136
1182
|
multi: true,
|
|
1137
1183
|
},
|
|
1138
|
-
], 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"] }]
|
|
1139
1185
|
}], propDecorators: { onEnter: [{ type: i0.Output, args: ["onEnter"] }] } });
|
|
1140
1186
|
|
|
1141
1187
|
class NettyUISelect extends UiBase {
|
|
@@ -1197,7 +1243,7 @@ class NettyUISelect extends UiBase {
|
|
|
1197
1243
|
useExisting: NettyUISelect,
|
|
1198
1244
|
multi: true,
|
|
1199
1245
|
},
|
|
1200
|
-
], 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 }] });
|
|
1201
1247
|
}
|
|
1202
1248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUISelect, decorators: [{
|
|
1203
1249
|
type: Component,
|
|
@@ -1207,7 +1253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1207
1253
|
useExisting: NettyUISelect,
|
|
1208
1254
|
multi: true,
|
|
1209
1255
|
},
|
|
1210
|
-
], 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"] }]
|
|
1211
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 }] }] } });
|
|
1212
1258
|
|
|
1213
1259
|
class NettyUIVisibleSwitchButton extends UiBase {
|
|
@@ -1279,7 +1325,7 @@ class NettyUITimePicker extends UiBase {
|
|
|
1279
1325
|
useExisting: NettyUITimePicker,
|
|
1280
1326
|
multi: true,
|
|
1281
1327
|
},
|
|
1282
|
-
], 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"] }] });
|
|
1283
1329
|
}
|
|
1284
1330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUITimePicker, decorators: [{
|
|
1285
1331
|
type: Component,
|
|
@@ -1290,7 +1336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1290
1336
|
useExisting: NettyUITimePicker,
|
|
1291
1337
|
multi: true,
|
|
1292
1338
|
},
|
|
1293
|
-
], 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"] }]
|
|
1294
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 }] }] } });
|
|
1295
1341
|
|
|
1296
1342
|
class NettyUITree {
|
|
@@ -1622,6 +1668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1622
1668
|
class NettyuUIDateTimeRange extends UiBase {
|
|
1623
1669
|
endValue = model(null, ...(ngDevMode ? [{ debugName: "endValue" }] : []));
|
|
1624
1670
|
endLabel = input('', ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
|
|
1671
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1625
1672
|
constructor() {
|
|
1626
1673
|
super();
|
|
1627
1674
|
effect(() => {
|
|
@@ -1642,7 +1689,7 @@ class NettyuUIDateTimeRange extends UiBase {
|
|
|
1642
1689
|
}
|
|
1643
1690
|
}
|
|
1644
1691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyuUIDateTimeRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1645
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: NettyuUIDateTimeRange, isStandalone: true, selector: "ntyui-date-time-range", inputs: { endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endValue: "endValueChange" }, providers: [
|
|
1692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: NettyuUIDateTimeRange, isStandalone: true, selector: "ntyui-date-time-range", inputs: { endValue: { classPropertyName: "endValue", publicName: "endValue", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endValue: "endValueChange", value: "valueChange" }, providers: [
|
|
1646
1693
|
provideNativeDateAdapter(),
|
|
1647
1694
|
{
|
|
1648
1695
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1653,7 +1700,7 @@ class NettyuUIDateTimeRange extends UiBase {
|
|
|
1653
1700
|
provide: DateAdapter,
|
|
1654
1701
|
useClass: PartialDateAdapter
|
|
1655
1702
|
}
|
|
1656
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-range-wrapper\">\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"value\"\n ></ntyui-date-time>\n </div>\n\n <div class=\"range-separator\">\n <span class=\"dash\">\u2014</span>\n </div>\n\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"endLabel() || label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"endValue\"\n ></ntyui-date-time>\n </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"], dependencies: [{ kind: "component", type: NettyUIDateTime, selector: "ntyui-date-time", inputs: ["timeLabel", "dateRestriction", "timeFormat", "dateTimeValue"], outputs: ["dateTimeValueChange"] }, { 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"] }] });
|
|
1703
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-range-wrapper\">\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"value\"\n [compareMaxDate]=\"endValue()\"\n ></ntyui-date-time>\n </div>\n\n <div class=\"range-separator\">\n <span class=\"dash\">\u2014</span>\n </div>\n\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"endLabel() || label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"endValue\"\n [compareMinDate]=\"value()\"\n ></ntyui-date-time>\n </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"], dependencies: [{ kind: "component", type: NettyUIDateTime, selector: "ntyui-date-time", inputs: ["timeLabel", "dateRestriction", "timeFormat", "compareMinDate", "compareMaxDate", "dateTimeValue"], outputs: ["dateTimeValueChange"] }, { 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"] }] });
|
|
1657
1704
|
}
|
|
1658
1705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyuUIDateTimeRange, decorators: [{
|
|
1659
1706
|
type: Component,
|
|
@@ -1668,8 +1715,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1668
1715
|
provide: DateAdapter,
|
|
1669
1716
|
useClass: PartialDateAdapter
|
|
1670
1717
|
}
|
|
1671
|
-
], template: "<div class=\"datetime-range-wrapper\">\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"value\"\n ></ntyui-date-time>\n </div>\n\n <div class=\"range-separator\">\n <span class=\"dash\">\u2014</span>\n </div>\n\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"endLabel() || label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"endValue\"\n ></ntyui-date-time>\n </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"] }]
|
|
1672
|
-
}], ctorParameters: () => [], propDecorators: { endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }, { type: i0.Output, args: ["endValueChange"] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }] } });
|
|
1718
|
+
], template: "<div class=\"datetime-range-wrapper\">\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"value\"\n [compareMaxDate]=\"endValue()\"\n ></ntyui-date-time>\n </div>\n\n <div class=\"range-separator\">\n <span class=\"dash\">\u2014</span>\n </div>\n\n <div class=\"range-field\">\n <ntyui-date-time\n [label]=\"endLabel() || label()\"\n [appearance]=\"appearance()\"\n [required]=\"required()\"\n [forFilter]=\"forFilter()\"\n [disabled]=\"disabled()\"\n [(ngModel)]=\"endValue\"\n [compareMinDate]=\"value()\"\n ></ntyui-date-time>\n </div>\n</div>", styles: [".datetime-range-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:12px;width:100%}.datetime-range-wrapper .range-field{flex:1;min-width:0}.datetime-range-wrapper .range-separator{display:flex;align-items:center;height:56px;color:#00000061;font-weight:700}@media(max-width:768px){.datetime-range-wrapper{flex-direction:column;gap:0}.datetime-range-wrapper .range-separator{display:none}}\n"] }]
|
|
1719
|
+
}], ctorParameters: () => [], propDecorators: { endValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "endValue", required: false }] }, { type: i0.Output, args: ["endValueChange"] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
1673
1720
|
|
|
1674
1721
|
class NettyEnumValues {
|
|
1675
1722
|
languageCode = '';
|