@tetacom/ng-components 1.6.16 → 1.6.17
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.
|
@@ -54,6 +54,8 @@ export declare class DatePickerComponent extends BasePicker implements OnInit, C
|
|
|
54
54
|
writeValue(obj: Date | string | number): void;
|
|
55
55
|
setDisabledState?(isDisabled: boolean): void;
|
|
56
56
|
ngOnChanges(changes: SimpleChanges): void;
|
|
57
|
+
changeInput(v: any): void;
|
|
58
|
+
private updateCalendarSelection;
|
|
57
59
|
static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, never>;
|
|
58
60
|
static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "teta-date-picker", never, { "date": { "alias": "date"; "required": false; }; "showTime": { "alias": "showTime"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "align": { "alias": "align"; "required": false; }; "verticalAlign": { "alias": "verticalAlign"; "required": false; }; "viewType": { "alias": "viewType"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; }; "backdrop": { "alias": "backdrop"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "open": { "alias": "open"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "disabledPeriods": { "alias": "disabledPeriods"; "required": false; }; "disabledDays": { "alias": "disabledDays"; "required": false; }; "minYearDate": { "alias": "minYearDate"; "required": false; }; "maxYearDate": { "alias": "maxYearDate"; "required": false; }; }, { "selectDate": "selectDate"; }, never, never, true, never>;
|
|
59
61
|
}
|
|
@@ -2453,7 +2453,9 @@ class DatePickerComponent extends BasePicker {
|
|
|
2453
2453
|
if (this.showTime) {
|
|
2454
2454
|
date = new Date(date.setHours(hours || 0, mins || 0));
|
|
2455
2455
|
}
|
|
2456
|
-
this.
|
|
2456
|
+
const availableDate = this.getAvailableDate(this.minDate, this.maxDate, date);
|
|
2457
|
+
this.changeSelectedDate(availableDate);
|
|
2458
|
+
this.selectedDate.next(availableDate);
|
|
2457
2459
|
}
|
|
2458
2460
|
else {
|
|
2459
2461
|
this.setDate(this.date);
|
|
@@ -2499,8 +2501,33 @@ class DatePickerComponent extends BasePicker {
|
|
|
2499
2501
|
ngOnChanges(changes) {
|
|
2500
2502
|
this.prepareInput(false);
|
|
2501
2503
|
}
|
|
2504
|
+
changeInput(v) {
|
|
2505
|
+
this.changePlaceholder(v);
|
|
2506
|
+
this.updateCalendarSelection(v);
|
|
2507
|
+
}
|
|
2508
|
+
updateCalendarSelection(inputValue) {
|
|
2509
|
+
if (!inputValue || inputValue.trim() === '') {
|
|
2510
|
+
if (this.allowNull) {
|
|
2511
|
+
this.selectedDate.next(null);
|
|
2512
|
+
}
|
|
2513
|
+
return;
|
|
2514
|
+
}
|
|
2515
|
+
const val = inputValue.split(',');
|
|
2516
|
+
const { day, year, month } = this.getDateFromStr(val[0]);
|
|
2517
|
+
const { mins, hours } = this.getTimeFromStr(val[1]);
|
|
2518
|
+
if (day && year && month) {
|
|
2519
|
+
let date = new Date(year, month - 1, day);
|
|
2520
|
+
if (this.showTime && hours !== null && mins !== null) {
|
|
2521
|
+
date = new Date(date.setHours(hours, mins));
|
|
2522
|
+
}
|
|
2523
|
+
if (!isNaN(date.getTime())) {
|
|
2524
|
+
const availableDate = this.getAvailableDate(this.minDate, this.maxDate, date);
|
|
2525
|
+
this.selectedDate.next(availableDate);
|
|
2526
|
+
}
|
|
2527
|
+
}
|
|
2528
|
+
}
|
|
2502
2529
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.DatePipe }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DatePickerComponent, isStandalone: true, selector: "teta-date-picker", inputs: { date: "date", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", open: "open", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "class.datepicker-time": "this.dateTimeClass", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({ selectedDate: selectedDate | async }; as data) {\n <teta-dropdown\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n >\n <div\n tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_' + viewType\"\n [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n >\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_' + viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input\n [ngClass]=\"{ 'color-text-90': !disabled }\"\n [disabled]=\"disabled\"\n #input\n style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\"\n />\n @if (data.selectedDate || allowNull) {\n <div\n (click)=\"input.focus()\"\n class=\"position-absolute color-text-10\"\n style=\"cursor: text; user-select: none\"\n >\n {{ placeholder }}\n </div>\n }\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n <teta-date-calendar\n [isDateNull]=\"
|
|
2530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DatePickerComponent, isStandalone: true, selector: "teta-date-picker", inputs: { date: "date", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", open: "open", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "class.datepicker-time": "this.dateTimeClass", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ({ selectedDate: selectedDate | async }; as data) {\n <teta-dropdown\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n >\n <div\n tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_' + viewType\"\n [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n >\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_' + viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input\n [ngClass]=\"{ 'color-text-90': !disabled }\"\n [disabled]=\"disabled\"\n #input\n style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n (blur)=\"onBlur()\"\n [maskito]=\"maskitoOptions\"\n />\n @if (data.selectedDate || allowNull) {\n <div\n (click)=\"input.focus()\"\n class=\"position-absolute color-text-10\"\n style=\"cursor: text; user-select: none\"\n >\n {{ placeholder }}\n </div>\n }\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n <teta-date-calendar\n [isDateNull]=\"data.selectedDate === null\"\n [open]=\"open\"\n [max]=\"maxDate\"\n [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event)\"\n [selectedDate]=\"data.selectedDate\"\n [viewType]=\"viewType\"\n [locale]=\"locale | async\"\n ></teta-date-calendar>\n </div>\n </teta-dropdown>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MaskitoModule }, { kind: "directive", type: i4.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i4.MaskitoCVA, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "open", "locale", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2504
2531
|
}
|
|
2505
2532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2506
2533
|
type: Component,
|
|
@@ -2515,7 +2542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2515
2542
|
DropdownContentDirective,
|
|
2516
2543
|
DateCalendarComponent,
|
|
2517
2544
|
AsyncPipe,
|
|
2518
|
-
], template: "@if ({ selectedDate: selectedDate | async }; as data) {\n <teta-dropdown\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n >\n <div\n tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_' + viewType\"\n [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n >\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_' + viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input\n [ngClass]=\"{ 'color-text-90': !disabled }\"\n [disabled]=\"disabled\"\n #input\n style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n [maskito]=\"maskitoOptions\"\n />\n @if (data.selectedDate || allowNull) {\n <div\n (click)=\"input.focus()\"\n class=\"position-absolute color-text-10\"\n style=\"cursor: text; user-select: none\"\n >\n {{ placeholder }}\n </div>\n }\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n <teta-date-calendar\n [isDateNull]=\"
|
|
2545
|
+
], template: "@if ({ selectedDate: selectedDate | async }; as data) {\n <teta-dropdown\n class=\"row row_auto\"\n [appendToBody]=\"appendToBody\"\n [backdrop]=\"backdrop\"\n [open]=\"open\"\n (openChange)=\"openChange($event)\"\n [viewType]=\"viewType\"\n [disabled]=\"disabled\"\n [verticalAlign]=\"verticalAlign\"\n [align]=\"align\"\n [autoCloseIgnore]=\"['esc', 'inside', 'enter']\"\n >\n <div\n tetaDropdownHead\n [class]=\"'datepicker-head font-body-3 gap-8 datepicker_' + viewType\"\n [ngClass]=\"{ 'datepicker-head_invalid': invalid, 'datepicker-head_disabled': disabled }\"\n >\n <teta-input class=\"row row_auto flex\">\n <div [class]=\"'row_auto row datepicker_' + viewType\">\n <div class=\"row row_auto position-relative font-body-3 align-center\">\n <input\n [ngClass]=\"{ 'color-text-90': !disabled }\"\n [disabled]=\"disabled\"\n #input\n style=\"z-index: 1\"\n class=\"row_auto border-0\"\n (keydown)=\"checkEnter($event)\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"changeInput($event)\"\n (blur)=\"onBlur()\"\n [maskito]=\"maskitoOptions\"\n />\n @if (data.selectedDate || allowNull) {\n <div\n (click)=\"input.focus()\"\n class=\"position-absolute color-text-10\"\n style=\"cursor: text; user-select: none\"\n >\n {{ placeholder }}\n </div>\n }\n </div>\n <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </teta-input>\n </div>\n <div tetaDropdownContent (click)=\"$event.preventDefault()\">\n <teta-date-calendar\n [isDateNull]=\"data.selectedDate === null\"\n [open]=\"open\"\n [max]=\"maxDate\"\n [min]=\"minDate\"\n (setDate)=\"changeSelectedDate($event)\"\n [selectedDate]=\"data.selectedDate\"\n [viewType]=\"viewType\"\n [locale]=\"locale | async\"\n ></teta-date-calendar>\n </div>\n </teta-dropdown>\n}\n" }]
|
|
2519
2546
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.DatePipe }, { type: TetaConfigService }], propDecorators: { date: [{
|
|
2520
2547
|
type: Input
|
|
2521
2548
|
}], showTime: [{
|