@nettyapps/ntyui 21.1.18 → 21.1.19
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.
|
@@ -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;
|
|
@@ -123,17 +124,22 @@ class UiBase {
|
|
|
123
124
|
getErrorMessage() {
|
|
124
125
|
if (!this.ngModel?.control)
|
|
125
126
|
return undefined;
|
|
126
|
-
|
|
127
|
-
|
|
127
|
+
const control = this.ngModel.control;
|
|
128
|
+
const customMessages = this.errorMessages();
|
|
129
|
+
if (control.hasError('required')) {
|
|
130
|
+
return customMessages.required || this.translate.instant('@requiredField');
|
|
128
131
|
}
|
|
129
|
-
if (
|
|
130
|
-
|
|
132
|
+
if (control.hasError('minlength')) {
|
|
133
|
+
const limit = this.minLength();
|
|
134
|
+
return customMessages.minlength || this.translate.instant('@minLengthError', { value: limit });
|
|
131
135
|
}
|
|
132
|
-
if (
|
|
133
|
-
|
|
136
|
+
if (control.hasError('maxlength')) {
|
|
137
|
+
const limit = this.maxLength();
|
|
138
|
+
return customMessages.maxlength || this.translate.instant('@maxLengthError', { value: limit });
|
|
139
|
+
;
|
|
134
140
|
}
|
|
135
|
-
if (
|
|
136
|
-
return
|
|
141
|
+
if (control.hasError('pattern')) {
|
|
142
|
+
return customMessages.pattern || this.translate.instant('@invalidFormat');
|
|
137
143
|
}
|
|
138
144
|
return undefined;
|
|
139
145
|
}
|
|
@@ -320,6 +326,8 @@ class NettyUIDateTime extends UiBase {
|
|
|
320
326
|
timeLabel = input('', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
|
|
321
327
|
dateRestriction = input('any', ...(ngDevMode ? [{ debugName: "dateRestriction" }] : []));
|
|
322
328
|
timeFormat = input('tr-TR', ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
|
|
329
|
+
compareMinDate = input(null, ...(ngDevMode ? [{ debugName: "compareMinDate" }] : []));
|
|
330
|
+
compareMaxDate = input(null, ...(ngDevMode ? [{ debugName: "compareMaxDate" }] : []));
|
|
323
331
|
// Combined value output
|
|
324
332
|
dateTimeValue = model(null, ...(ngDevMode ? [{ debugName: "dateTimeValue" }] : []));
|
|
325
333
|
// Date properties
|
|
@@ -341,20 +349,20 @@ class NettyUIDateTime extends UiBase {
|
|
|
341
349
|
return `${day}/${month}/${year}`;
|
|
342
350
|
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
343
351
|
// Date restrictions
|
|
344
|
-
|
|
352
|
+
calendarMin = computed(() => {
|
|
345
353
|
const today = new Date();
|
|
346
354
|
today.setHours(0, 0, 0, 0);
|
|
347
355
|
return this.dateRestriction() === 'future'
|
|
348
356
|
? new Date(today.getTime() + 86400000)
|
|
349
357
|
: null;
|
|
350
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
351
|
-
|
|
358
|
+
}, ...(ngDevMode ? [{ debugName: "calendarMin" }] : []));
|
|
359
|
+
calendarMax = computed(() => {
|
|
352
360
|
const today = new Date();
|
|
353
361
|
today.setHours(0, 0, 0, 0);
|
|
354
362
|
return this.dateRestriction() === 'past'
|
|
355
363
|
? new Date(today.getTime() - 86400000)
|
|
356
364
|
: null;
|
|
357
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
365
|
+
}, ...(ngDevMode ? [{ debugName: "calendarMax" }] : []));
|
|
358
366
|
constructor() {
|
|
359
367
|
super();
|
|
360
368
|
// Value changes
|
|
@@ -408,12 +416,13 @@ class NettyUIDateTime extends UiBase {
|
|
|
408
416
|
return;
|
|
409
417
|
}
|
|
410
418
|
const localDate = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
|
|
411
|
-
const min = this.
|
|
412
|
-
const max = this.
|
|
419
|
+
const min = this.calendarMin();
|
|
420
|
+
const max = this.calendarMax();
|
|
413
421
|
const isValid = (!min || localDate >= min) && (!max || localDate <= max);
|
|
414
422
|
if (isValid) {
|
|
415
423
|
this.dateValue.set(localDate);
|
|
416
424
|
this.updateCombinedValue();
|
|
425
|
+
this.checkComparisonDateTime(localDate);
|
|
417
426
|
}
|
|
418
427
|
else {
|
|
419
428
|
this.dateValue.set(null);
|
|
@@ -425,6 +434,10 @@ class NettyUIDateTime extends UiBase {
|
|
|
425
434
|
time.setHours(newTime.getHours());
|
|
426
435
|
time.setMinutes(newTime.getMinutes());
|
|
427
436
|
this.timeValue.set(time);
|
|
437
|
+
const date = this.dateValue();
|
|
438
|
+
if (date) {
|
|
439
|
+
this.checkComparisonDateTime(date);
|
|
440
|
+
}
|
|
428
441
|
}
|
|
429
442
|
clearInput() {
|
|
430
443
|
this.dateValue.set(null);
|
|
@@ -451,8 +464,31 @@ class NettyUIDateTime extends UiBase {
|
|
|
451
464
|
this.value.set(shouldBeNull ? null : '');
|
|
452
465
|
this.dateTimeValue.set(shouldBeNull ? null : new Date('1900-01-01T00:00:00'));
|
|
453
466
|
}
|
|
467
|
+
checkComparisonDateTime(selectedDate) {
|
|
468
|
+
const date = this.dateValue();
|
|
469
|
+
const time = this.timeValue();
|
|
470
|
+
if (!date)
|
|
471
|
+
return;
|
|
472
|
+
const currentCombined = new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), 0);
|
|
473
|
+
const ensureDate = (d) => {
|
|
474
|
+
if (!d)
|
|
475
|
+
return null;
|
|
476
|
+
const dateObj = d instanceof Date ? d : new Date(d);
|
|
477
|
+
return isNaN(dateObj.getTime()) ? null : dateObj;
|
|
478
|
+
};
|
|
479
|
+
const cMin = ensureDate(this.compareMinDate());
|
|
480
|
+
const cMax = ensureDate(this.compareMaxDate());
|
|
481
|
+
// 1900 yılı kontrolü: Eğer tarih set edilmemişse (varsayılan 1900 ise) uyarı verme
|
|
482
|
+
const isRealDate = (d) => d && d.getFullYear() > 1900;
|
|
483
|
+
if (cMin && isRealDate(cMin) && currentCombined.getTime() < cMin.getTime()) {
|
|
484
|
+
this.alertService.showError('@dateCannotBeBeforeStart');
|
|
485
|
+
}
|
|
486
|
+
if (cMax && isRealDate(cMax) && currentCombined.getTime() > cMax.getTime()) {
|
|
487
|
+
this.alertService.showError('@dateCannotBeAfterEnd');
|
|
488
|
+
}
|
|
489
|
+
}
|
|
454
490
|
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: [
|
|
491
|
+
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
492
|
provideNativeDateAdapter(),
|
|
457
493
|
{
|
|
458
494
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -463,7 +499,7 @@ class NettyUIDateTime extends UiBase {
|
|
|
463
499
|
provide: DateAdapter,
|
|
464
500
|
useClass: PartialDateAdapter
|
|
465
501
|
}
|
|
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]=\"placeholder()\"\n [ngModel]=\"dateValue()\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"
|
|
502
|
+
], viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }, { propertyName: "inputModel", first: true, predicate: ["dateInputModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #dateInputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\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
503
|
}
|
|
468
504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyUIDateTime, decorators: [{
|
|
469
505
|
type: Component,
|
|
@@ -478,8 +514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
478
514
|
provide: DateAdapter,
|
|
479
515
|
useClass: PartialDateAdapter
|
|
480
516
|
}
|
|
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]=\"placeholder()\"\n [ngModel]=\"dateValue()\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"
|
|
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 }] }] } });
|
|
517
|
+
], host: { 'ntyui-id': 'NettyUIDateTime' }, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #dateInputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"dateValue()\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"calendarMin() ?? undefined\"\n [max]=\"calendarMax() ?? undefined\"\n />\n\n @if (dateValue() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (dateInputModel.invalid && (dateInputModel.dirty ||\n dateInputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n <!-- Timepicker -->\n <mat-form-field\n class=\"time-field\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n >\n @if (timeLabel()) {\n <mat-label>{{ timeLabel() }}</mat-label>\n }\n <input\n #timeInputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"timepicker\"\n [ngModel]=\"timeValue()\"\n (ngModelChange)=\"onTimeChange($event)\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n [disabled]=\"disabled()\"\n />\n\n @if ( timeInputModel.invalid && ( timeInputModel.dirty ||\n timeInputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #timepicker />\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}::ng-deep .mat-mdc-form-field-icon-prefix,::ng-deep .mat-mdc-form-field-icon-suffix{display:flex!important;flex-direction:row!important;align-items:center!important}\n"] }]
|
|
518
|
+
}], 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
519
|
|
|
484
520
|
class NettyUIDatePicker extends UiBase {
|
|
485
521
|
// Constants
|
|
@@ -1622,6 +1658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1622
1658
|
class NettyuUIDateTimeRange extends UiBase {
|
|
1623
1659
|
endValue = model(null, ...(ngDevMode ? [{ debugName: "endValue" }] : []));
|
|
1624
1660
|
endLabel = input('', ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
|
|
1661
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
1625
1662
|
constructor() {
|
|
1626
1663
|
super();
|
|
1627
1664
|
effect(() => {
|
|
@@ -1642,7 +1679,7 @@ class NettyuUIDateTimeRange extends UiBase {
|
|
|
1642
1679
|
}
|
|
1643
1680
|
}
|
|
1644
1681
|
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: [
|
|
1682
|
+
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
1683
|
provideNativeDateAdapter(),
|
|
1647
1684
|
{
|
|
1648
1685
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1653,7 +1690,7 @@ class NettyuUIDateTimeRange extends UiBase {
|
|
|
1653
1690
|
provide: DateAdapter,
|
|
1654
1691
|
useClass: PartialDateAdapter
|
|
1655
1692
|
}
|
|
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"] }] });
|
|
1693
|
+
], 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
1694
|
}
|
|
1658
1695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NettyuUIDateTimeRange, decorators: [{
|
|
1659
1696
|
type: Component,
|
|
@@ -1668,8 +1705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1668
1705
|
provide: DateAdapter,
|
|
1669
1706
|
useClass: PartialDateAdapter
|
|
1670
1707
|
}
|
|
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 }] }] } });
|
|
1708
|
+
], 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"] }]
|
|
1709
|
+
}], 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
1710
|
|
|
1674
1711
|
class NettyEnumValues {
|
|
1675
1712
|
languageCode = '';
|