@tetacom/ng-components 1.1.39 → 1.1.41

package/fesm2022/tetacom-ng-components.mjs

@@ -2449,35 +2449,6 @@ class BaseCalendar {
     minMax = new ReplaySubject(1);
     currentYear = new ReplaySubject(1);
     selectedPicker = new BehaviorSubject('day');
-    localeMonths = new Map()
-        .set('ru', [
-        'Январь',
-        'Февраль',
-        'Март',
-        'Апрель',
-        'Май',
-        'Июнь',
-        'Июль',
-        'Август',
-        'Сентябрь',
-        'Октябрь',
-        'Ноябрь',
-        'Декабрь',
-    ])
-        .set('en', [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ]);
     alive = true;
     constructor(_cdr) {
         this._cdr = _cdr;
@@ -2503,11 +2474,11 @@ class BaseCalendar {
     }
     isSuitableMinDate(d, minDate) {
         return (dayjs(new Date(minDate)).startOf('date').toDate() <= new Date(d) ||
-            minDate === null);
+            !minDate);
     }
     isSuitableMaxDate(d, maxDate) {
         return (new Date(d) < dayjs(new Date(maxDate)).endOf('date').toDate() ||
-            maxDate === null);
+            !maxDate);
     }
     isSelected(date, selectedDate) {
         const isSelectedDate = date.getDate() === selectedDate?.getDate();
@@ -2536,7 +2507,16 @@ class BaseCalendar {
         }
     }
     changeCalendarData(selectedDate) {
-        const date = new Date(selectedDate || new Date());
+        let date;
+        if (!this.isSuitableMinDate(new Date(selectedDate), this.min)) {
+            date = this.min;
+        }
+        else if (!this.isSuitableMaxDate(new Date(selectedDate), this.max)) {
+            date = this.max;
+        }
+        else {
+            date = selectedDate ? selectedDate : this.min ? this.min : this.max ? this.max : new Date();
+        }
         this.currentMonth.next(new Date(date).getMonth());
         this.currentYear.next(new Date(date).getFullYear());
         this.minMax.next({ min: this.min, max: this.max });
@@ -2559,7 +2539,7 @@ class BaseCalendar {
         return { availableMonth: month, availableYear: year };
     }
     getMothName(month) {
-        return this.localeMonths.get(this.locale)[month];
+        return this.locale.months[month];
     }
     selectDate(date) {
         this.setDate.emit(date);
@@ -2612,7 +2592,7 @@ class DayPickerComponent {
     hoveredDate;
     hoveredDateChange = new EventEmitter();
     selectDate = new EventEmitter();
-    daysOfWeek = new Map().set('ru', ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']).set('en', ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
+    dayOrder;
     constructor() {
     }
     isInRange(day, from, to) {
@@ -2688,12 +2668,17 @@ class DayPickerComponent {
         }
         return '';
     }
+    ngOnChanges(changes) {
+        const arr = [...this.locale.daysShort];
+        arr.push(arr.shift());
+        this.dayOrder = arr;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DayPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DayPickerComponent, selector: "teta-day-picker", inputs: { date: "date", calendar: "calendar", viewType: "viewType", range: "range", min: "min", max: "max", locale: "locale", hoveredDate: "hoveredDate" }, outputs: { hoveredDateChange: "hoveredDateChange", selectDate: "selectDate" }, ngImport: i0, template: "<div class=\"datepicker-week font-caption\">\n  <p class=\"datepicker-day\" *ngFor=\"let day of daysOfWeek.get(locale)\">\n    {{day}}\n  </p>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  <ng-container *ngFor=\"let day of calendar\">\n    <div [class]=\"getRangeActiveClass(day)+' datepicker-date font-body-3 datepicker_'+viewType\"\n         (mouseenter)=\"hover(day.date)\"\n         (click)=\"pickDate(day)\"\n         [ngClass]=\"{'datepicker-date_active':day.selected||(day.date===hoveredDate&&range&&!range.to),'datepicker-date-range_hover':range&&isHoveredRange(day),\n         'datepicker-date_disabled':day.disabled,'color-text-30':day.disabled||(!range&&!day.isCurrentMonth),'datepicker-date-range_disabled':!day.isCurrentMonth&&range,'datepicker-date-range_active':isActiveRange(day)}\">\n      <teta-day-item [day]=\"day\"></teta-day-item>\n    </div>\n  </ng-container>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DayItemComponent, selector: "teta-day-item", inputs: ["day"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DayPickerComponent, selector: "teta-day-picker", inputs: { date: "date", calendar: "calendar", viewType: "viewType", range: "range", min: "min", max: "max", locale: "locale", hoveredDate: "hoveredDate" }, outputs: { hoveredDateChange: "hoveredDateChange", selectDate: "selectDate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-week font-caption\">\n  <p class=\"datepicker-day\" *ngFor=\"let day of dayOrder\">\n    {{day}}\n  </p>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  <ng-container *ngFor=\"let day of calendar\">\n    <div [class]=\"getRangeActiveClass(day)+' datepicker-date font-body-3 datepicker_'+viewType\"\n         (mouseenter)=\"hover(day.date)\"\n         (click)=\"pickDate(day)\"\n         [ngClass]=\"{'datepicker-date_active':day.selected||(day.date===hoveredDate&&range&&!range.to),'datepicker-date-range_hover':range&&isHoveredRange(day),\n         'datepicker-date_disabled':day.disabled,'color-text-30':day.disabled||(!range&&!day.isCurrentMonth),'datepicker-date-range_disabled':!day.isCurrentMonth&&range,'datepicker-date-range_active':isActiveRange(day)}\">\n      <teta-day-item [day]=\"day\"></teta-day-item>\n    </div>\n  </ng-container>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DayItemComponent, selector: "teta-day-item", inputs: ["day"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DayPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-week font-caption\">\n  <p class=\"datepicker-day\" *ngFor=\"let day of daysOfWeek.get(locale)\">\n    {{day}}\n  </p>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  <ng-container *ngFor=\"let day of calendar\">\n    <div [class]=\"getRangeActiveClass(day)+' datepicker-date font-body-3 datepicker_'+viewType\"\n         (mouseenter)=\"hover(day.date)\"\n         (click)=\"pickDate(day)\"\n         [ngClass]=\"{'datepicker-date_active':day.selected||(day.date===hoveredDate&&range&&!range.to),'datepicker-date-range_hover':range&&isHoveredRange(day),\n         'datepicker-date_disabled':day.disabled,'color-text-30':day.disabled||(!range&&!day.isCurrentMonth),'datepicker-date-range_disabled':!day.isCurrentMonth&&range,'datepicker-date-range_active':isActiveRange(day)}\">\n      <teta-day-item [day]=\"day\"></teta-day-item>\n    </div>\n  </ng-container>\n</div>\n\n" }]
+            args: [{ selector: 'teta-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-week font-caption\">\n  <p class=\"datepicker-day\" *ngFor=\"let day of dayOrder\">\n    {{day}}\n  </p>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  <ng-container *ngFor=\"let day of calendar\">\n    <div [class]=\"getRangeActiveClass(day)+' datepicker-date font-body-3 datepicker_'+viewType\"\n         (mouseenter)=\"hover(day.date)\"\n         (click)=\"pickDate(day)\"\n         [ngClass]=\"{'datepicker-date_active':day.selected||(day.date===hoveredDate&&range&&!range.to),'datepicker-date-range_hover':range&&isHoveredRange(day),\n         'datepicker-date_disabled':day.disabled,'color-text-30':day.disabled||(!range&&!day.isCurrentMonth),'datepicker-date-range_disabled':!day.isCurrentMonth&&range,'datepicker-date-range_active':isActiveRange(day)}\">\n      <teta-day-item [day]=\"day\"></teta-day-item>\n    </div>\n  </ng-container>\n</div>\n\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { date: [{
                 type: Input
             }], calendar: [{
@@ -2717,7 +2702,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             }] } });
 
 class MonthPickerComponent {
-    locale;
     selectedMonth = 1;
     viewType;
     currentYear;
@@ -2734,7 +2718,7 @@ class MonthPickerComponent {
         this.changeYear.emit(year);
     }
     ngOnInit() {
-        this.months = this.localeMoths.get(this.locale).map((m, i) => {
+        this.months = this.localeMoths.map((m, i) => {
             return {
                 id: i,
                 name: m,
@@ -2743,14 +2727,12 @@ class MonthPickerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { locale: "locale", selectedMonth: "selectedMonth", viewType: "viewType", currentYear: "currentYear", localeMoths: "localeMoths" }, outputs: { selectMonth: "selectMonth", changeYear: "changeYear" }, ngImport: i0, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n  <div class=\"row align-center justify-content-between font-button-2\">\n    <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                 (click)=\"pickYear(currentYear-1)\"\n                 palette=\"text\"\n                 view=\"ghost\">\n      <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n    </teta-button>\n    <p>{{currentYear}}</p>\n    <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                 (click)=\"pickYear(currentYear+1)\"\n                 palette=\"text\"\n                 view=\"ghost\">\n      <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n    </teta-button>\n  </div>\n  <div class=\"datepicker-month font-body-3 color-text-90\"\n       style=\"width: 100%\">\n    <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n      <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n           [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n         <p>\n            {{month.name}}\n          </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { selectedMonth: "selectedMonth", viewType: "viewType", currentYear: "currentYear", localeMoths: "localeMoths" }, outputs: { selectMonth: "selectMonth", changeYear: "changeYear" }, ngImport: i0, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n  <div class=\"row align-center justify-content-between font-button-2\">\n    <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                 (click)=\"pickYear(currentYear-1)\"\n                 palette=\"text\"\n                 view=\"ghost\">\n      <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n    </teta-button>\n    <p>{{currentYear}}</p>\n    <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                 (click)=\"pickYear(currentYear+1)\"\n                 palette=\"text\"\n                 view=\"ghost\">\n      <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n    </teta-button>\n  </div>\n  <div class=\"datepicker-month font-body-3 color-text-90\"\n       style=\"width: 100%\">\n    <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n      <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n           [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n         <p>\n            {{month.name}}\n          </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-month-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-h-3 padding-v-2 gap-8 column datepicker-month-wrapper\">\n  <div class=\"row align-center justify-content-between font-button-2\">\n    <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                 (click)=\"pickYear(currentYear-1)\"\n                 palette=\"text\"\n                 view=\"ghost\">\n      <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n    </teta-button>\n    <p>{{currentYear}}</p>\n    <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                 (click)=\"pickYear(currentYear+1)\"\n                 palette=\"text\"\n                 view=\"ghost\">\n      <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n    </teta-button>\n  </div>\n  <div class=\"datepicker-month font-body-3 color-text-90\"\n       style=\"width: 100%\">\n    <div *ngFor=\"let month of months\" (click)=\"pickMonth(month.id)\">\n      <div [ngClass]=\"{'datepicker-month_item_active':month.isSelected}\"\n           [class]=\"'datepicker-month_item column align-center justify-content-center datepicker_'+viewType\">\n         <p>\n            {{month.name}}\n          </p>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { locale: [{
-                type: Input
-            }], selectedMonth: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { selectedMonth: [{
                 type: Input
             }], viewType: [{
                 type: Input
@@ -2795,8 +2777,6 @@ class YearPickerComponent {
     minMax;
     locale;
     selectYear = new EventEmitter();
-    yearPickerDictionary = new Map().set('ru', 'Выберете год').set('en', 'Select year');
-    alive = true;
     years;
     constructor() {
     }
@@ -2820,11 +2800,11 @@ class YearPickerComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: YearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: YearPickerComponent, selector: "teta-year-picker", inputs: { selectedYear: "selectedYear", viewType: "viewType", minMax: "minMax", locale: "locale" }, outputs: { selectYear: "selectYear" }, ngImport: i0, template: "<div class=\"column\">\n  <div class=\"font-title-3 padding-v-4 padding-h-3\">\n    <p>{{yearPickerDictionary.get(locale)}}</p>\n  </div>\n  <div class=\"datepicker-year overflow-y-auto\">\n    <div *ngFor=\"let y of years\" class=\"font-button-2\" (click)=\"pickYear(y.id,y.disabled)\">\n      <div [ngClass]=\"{'datepicker-year_item_active':y.isSelected,'datepicker-year_item_disabled':y.disabled}\"\n           [class]=\"'datepicker-year_item column align-center justify-content-center datepicker_'+viewType\">\n        <div *ngIf=\" y.isSelected===true\" tetaScrollToSelectedYear>\n          <span>{{y.id}}</span>\n        </div>\n        <div *ngIf=\"!y.isSelected\">\n          <span>{{y.id}} </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ScrollToSelectedYearDirective, selector: "[tetaScrollToSelectedYear]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: YearPickerComponent, selector: "teta-year-picker", inputs: { selectedYear: "selectedYear", viewType: "viewType", minMax: "minMax", locale: "locale" }, outputs: { selectYear: "selectYear" }, ngImport: i0, template: "<div class=\"column\">\n  <div class=\"font-title-3 padding-v-4 padding-h-3\">\n    <p>{{locale.selectYear}}</p>\n  </div>\n  <div class=\"datepicker-year overflow-y-auto\">\n    <div *ngFor=\"let y of years\" class=\"font-button-2\" (click)=\"pickYear(y.id,y.disabled)\">\n      <div [ngClass]=\"{'datepicker-year_item_active':y.isSelected,'datepicker-year_item_disabled':y.disabled}\"\n           [class]=\"'datepicker-year_item column align-center justify-content-center datepicker_'+viewType\">\n        <div *ngIf=\" y.isSelected===true\" tetaScrollToSelectedYear>\n          <span>{{y.id}}</span>\n        </div>\n        <div *ngIf=\"!y.isSelected\">\n          <span>{{y.id}} </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ScrollToSelectedYearDirective, selector: "[tetaScrollToSelectedYear]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: YearPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-year-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column\">\n  <div class=\"font-title-3 padding-v-4 padding-h-3\">\n    <p>{{yearPickerDictionary.get(locale)}}</p>\n  </div>\n  <div class=\"datepicker-year overflow-y-auto\">\n    <div *ngFor=\"let y of years\" class=\"font-button-2\" (click)=\"pickYear(y.id,y.disabled)\">\n      <div [ngClass]=\"{'datepicker-year_item_active':y.isSelected,'datepicker-year_item_disabled':y.disabled}\"\n           [class]=\"'datepicker-year_item column align-center justify-content-center datepicker_'+viewType\">\n        <div *ngIf=\" y.isSelected===true\" tetaScrollToSelectedYear>\n          <span>{{y.id}}</span>\n        </div>\n        <div *ngIf=\"!y.isSelected\">\n          <span>{{y.id}} </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n" }]
+            args: [{ selector: 'teta-year-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column\">\n  <div class=\"font-title-3 padding-v-4 padding-h-3\">\n    <p>{{locale.selectYear}}</p>\n  </div>\n  <div class=\"datepicker-year overflow-y-auto\">\n    <div *ngFor=\"let y of years\" class=\"font-button-2\" (click)=\"pickYear(y.id,y.disabled)\">\n      <div [ngClass]=\"{'datepicker-year_item_active':y.isSelected,'datepicker-year_item_disabled':y.disabled}\"\n           [class]=\"'datepicker-year_item column align-center justify-content-center datepicker_'+viewType\">\n        <div *ngIf=\" y.isSelected===true\" tetaScrollToSelectedYear>\n          <span>{{y.id}}</span>\n        </div>\n        <div *ngIf=\"!y.isSelected\">\n          <span>{{y.id}} </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { selectedYear: [{
                 type: Input
             }], viewType: [{
@@ -2840,8 +2820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
 class DateCalendarComponent extends BaseCalendar {
     _cdr;
     selectedDate = new Date();
-    locale;
     open;
+    locale;
     viewType;
     min;
     isDateNull;
@@ -2851,27 +2831,26 @@ class DateCalendarComponent extends BaseCalendar {
     constructor(_cdr) {
         super(_cdr);
         this._cdr = _cdr;
-        dayjs().locale('ru', { weekStart: 1 });
         combineLatest([this.currentYear, this.currentMonth, this.minMax])
             .pipe(takeWhile$1(() => this.alive), filter$1(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, minMax]) => {
-            return this.generateCalendar(dayjs(new Date(this.selectedDate)).locale(this.locale), year, month, minMax);
+            return this.generateCalendar(dayjs(new Date(this.selectedDate)).locale('ru', { weekStart: 1 }), year, month, minMax);
         }))
             .subscribe(_ => {
             this.calendar = _;
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: { selectedDate: "selectedDate", locale: "locale", open: "open", viewType: "viewType", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { setDate: "setDate" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n     class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"padding-h-3 padding-v-2\" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"row align-center justify-content-between\">\n        <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                     (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n        <div class=\"row gap-4 font-button-2 \">\n          <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n          <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n        </div>\n        <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                     (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n      </div>\n      <div>\n        <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                         [calendar]=\"calendar\"></teta-day-picker>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["locale", "selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: { selectedDate: "selectedDate", open: "open", locale: "locale", viewType: "viewType", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { setDate: "setDate" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n     class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"padding-h-3 padding-v-2\" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"row align-center justify-content-between\">\n        <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                     (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n        <div class=\"row gap-4 font-button-2 \">\n          <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n          <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n        </div>\n        <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                     (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n      </div>\n      <div>\n        <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                         [calendar]=\"calendar\"></teta-day-picker>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"locale.months\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n     class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"padding-h-3 padding-v-2\" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"row align-center justify-content-between\">\n        <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                     (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n        <div class=\"row gap-4 font-button-2 \">\n          <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n          <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n        </div>\n        <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                     (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n      </div>\n      <div>\n        <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                         [calendar]=\"calendar\"></teta-day-picker>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'teta-date-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async} as data\"\n     class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"padding-h-3 padding-v-2\" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"row align-center justify-content-between\">\n        <teta-button [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n                     (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n        <div class=\"row gap-4 font-button-2 \">\n          <button [class]=\"'datepicker_'+viewType \" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('month')\"> {{getMothName(data.currentMonth)}}</button>\n          <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                  (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n        </div>\n        <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker_'+viewType\"\n                     (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                     palette=\"text\"\n                     view=\"ghost\">\n          <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n        </teta-button>\n      </div>\n      <div>\n        <teta-day-picker [viewType]=\"viewType\" (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                         [calendar]=\"calendar\"></teta-day-picker>\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"locale.months\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedDate: [{
                 type: Input
-            }], locale: [{
-                type: Input
             }], open: [{
                 type: Input
+            }], locale: [{
+                type: Input
             }], viewType: [{
                 type: Input
             }], min: [{
@@ -2978,7 +2957,7 @@ class BasePicker {
         return new Date(date).toLocaleString([], {
             year: 'numeric',
             month: '2-digit',
-            day: '2-digit',
+            day: '2-digit', hourCycle: 'h24',
             hour: this.showTime ? '2-digit' : undefined,
             minute: this.showTime ? '2-digit' : undefined,
         });
@@ -3022,6 +3001,7 @@ const enLocale = {
     sum: 'Sum',
     avg: 'Avg',
     search: 'Search',
+    selectYear: 'Select year',
     selected: 'Selected',
     notSelected: 'Not selected',
     notFound: 'Not found',
@@ -3088,7 +3068,7 @@ class DatePickerComponent extends BasePicker {
     datePipe;
     localeService;
     date = null;
-    locale = 'ru';
+    locale;
     showTime = false;
     minDate = null;
     maxDate = null;
@@ -3121,6 +3101,7 @@ class DatePickerComponent extends BasePicker {
         this._cdr = _cdr;
         this.datePipe = datePipe;
         this.localeService = localeService;
+        this.locale = this.localeService.locale;
     }
     ngOnInit() {
         if (!this.date) {
@@ -3130,17 +3111,17 @@ class DatePickerComponent extends BasePicker {
         else {
             this.setDate(new Date(this.date));
         }
-        this.prepareInput();
+        this.prepareInput(true);
     }
-    async prepareInput() {
+    async prepareInput(isFirstRender) {
         const config = await lastValueFrom(this.localeService.locale.pipe(take(1)));
         const str = this.date ? this.getLocaleString(this.date) : '';
         let option;
         const setMinMax = () => {
-            if (this.minDate) {
+            if (this.minDate && !isFirstRender) {
                 option.min = dayjs(new Date(this.minDate)).startOf('day');
             }
-            if (this.maxDate) {
+            if (this.maxDate && !isFirstRender) {
                 option.max = dayjs(new Date(this.maxDate)).endOf('day');
             }
         };
@@ -3221,18 +3202,16 @@ class DatePickerComponent extends BasePicker {
         }
     }
     ngOnChanges(changes) {
-        this.prepareInput();
+        this.prepareInput(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", 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: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\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  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input 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          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale'></teta-date-calendar>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "locale", "open", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DatePickerComponent, 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", 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: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\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  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input 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          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale|async'></teta-date-calendar>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "open", "locale", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], template: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\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  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input 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          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale'></teta-date-calendar>\n  </div>\n</teta-dropdown>\n" }]
+            args: [{ selector: 'teta-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], template: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\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  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input 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          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale|async'></teta-date-calendar>\n  </div>\n</teta-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }, { type: TetaConfigService }]; }, propDecorators: { date: [{
                 type: Input
-            }], locale: [{
-                type: Input
             }], showTime: [{
                 type: Input
             }], minDate: [{
@@ -3308,13 +3287,12 @@ class RangeCalendarComponent extends BaseCalendar {
     constructor(_cdr) {
         super(_cdr);
         this._cdr = _cdr;
-        dayjs().locale('ru', { weekStart: 1 });
         combineLatest([this.currentYear, this.currentMonth, this.minMax])
             .pipe(takeWhile$1(() => this.alive), shareReplay({ bufferSize: 1, refCount: false }), filter$1(([currentYear, currentMonth]) => currentMonth !== null && currentYear !== null), map$1(([year, month, minMax]) => {
             const { availableYear, availableMonth } = this.getAvailableMonthYear(month + 1, year);
             return {
-                currentMonth: this.generateCalendar(dayjs(new Date(this.selectedDate.from || new Date())).locale(this.locale), year, month, minMax),
-                nextMonth: this.generateCalendar(dayjs(new Date(this.selectedDate.from || new Date())).locale(this.locale), availableYear, availableMonth, minMax),
+                currentMonth: this.generateCalendar(dayjs(new Date(this.selectedDate.from || new Date())).locale('ru', { weekStart: 1 }), year, month, minMax),
+                nextMonth: this.generateCalendar(dayjs(new Date(this.selectedDate.from || new Date())).locale('ru', { weekStart: 1 }), availableYear, availableMonth, minMax),
             };
         }))
             .subscribe(_ => {
@@ -3364,11 +3342,11 @@ class RangeCalendarComponent extends BaseCalendar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RangeCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: { locale: "locale", open: "open", date: "date", viewType: "viewType", allowNull: "allowNull", selectedDate: "selectedDate", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { hoveredDateChange: "hoveredDateChange", setDate: "setDate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n  class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"row \" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"padding-h-3 padding-v-2\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button\n            [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n            [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n            (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n            palette=\"text\"\n            view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p> {{getMothName(data.currentMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n          </div>\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n        </div>\n      </div>\n      <div class=\"padding-h-3 padding-v-2\"\n           *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n          </div>\n          <teta-button [square]=\"true\"\n                       [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n                       [class]=\"'change-month-button datepicker_'+viewType\"\n                       (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n        </div>\n      </div>\n    </div>\n\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["locale", "selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: { locale: "locale", open: "open", date: "date", viewType: "viewType", allowNull: "allowNull", selectedDate: "selectedDate", min: "min", isDateNull: "isDateNull", max: "max" }, outputs: { hoveredDateChange: "hoveredDateChange", setDate: "setDate" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n  class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"row \" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"padding-h-3 padding-v-2\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button\n            [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n            [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n            (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n            palette=\"text\"\n            view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p> {{getMothName(data.currentMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n          </div>\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n        </div>\n      </div>\n      <div class=\"padding-h-3 padding-v-2\"\n           *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n          </div>\n          <teta-button [square]=\"true\"\n                       [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n                       [class]=\"'change-month-button datepicker_'+viewType\"\n                       (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n        </div>\n      </div>\n    </div>\n\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"locale.months\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DayPickerComponent, selector: "teta-day-picker", inputs: ["date", "calendar", "viewType", "range", "min", "max", "locale", "hoveredDate"], outputs: ["hoveredDateChange", "selectDate"] }, { kind: "component", type: MonthPickerComponent, selector: "teta-month-picker", inputs: ["selectedMonth", "viewType", "currentYear", "localeMoths"], outputs: ["selectMonth", "changeYear"] }, { kind: "component", type: YearPickerComponent, selector: "teta-year-picker", inputs: ["selectedYear", "viewType", "minMax", "locale"], outputs: ["selectYear"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RangeCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-range-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n  class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"row \" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"padding-h-3 padding-v-2\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button\n            [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n            [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n            (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n            palette=\"text\"\n            view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p> {{getMothName(data.currentMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n          </div>\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n        </div>\n      </div>\n      <div class=\"padding-h-3 padding-v-2\"\n           *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n          </div>\n          <teta-button [square]=\"true\"\n                       [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n                       [class]=\"'change-month-button datepicker_'+viewType\"\n                       (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n        </div>\n      </div>\n    </div>\n\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"localeMonths\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\" [locale]=\"locale\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'teta-range-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"{currentMonth:currentMonth|async,currentYear:currentYear|async,selectedPicker:selectedPicker|async,minMax:minMax|async} as data\"\n  class=\"datepicker-content overflow-y-auto\"\n>\n  <ng-container *ngIf=\"data.selectedPicker==='day'\">\n    <div class=\"row \" (wheel)=\"scrollMonth($event,data.currentMonth,data.currentYear)\">\n      <div class=\"padding-h-3 padding-v-2\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button\n            [ngClass]=\"{'datepicker-arrow_hidden':!isLastDaySuitable(data.currentMonth-1,data.currentYear,min)}\"\n            [class]=\"'change-month-button datepicker_'+viewType\" [square]=\"true\"\n            (click)=\"changeMonth(data.currentMonth-1,data.currentYear)\"\n            palette=\"text\"\n            view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p> {{getMothName(data.currentMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{data.currentYear}}</button>\n          </div>\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.currentMonth\"></teta-day-picker>\n        </div>\n      </div>\n      <div class=\"padding-h-3 padding-v-2\"\n           *ngIf=\"getAvailableMonthYear(data.currentMonth+1,data.currentYear) as availableMonthYear\">\n        <div class=\"row align-center justify-content-between\">\n          <teta-button [square]=\"true\" [class]=\"'change-month-button datepicker-arrow_hidden datepicker_'+viewType\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowLeftKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n          <div class=\"row gap-4 font-button-2 align-center padding-left-1\">\n            <p>{{getMothName(availableMonthYear.availableMonth)}}</p>\n            <button [class]=\"'datepicker_'+viewType\" teta-button view=\"ghost\" palette=\"text\"\n                    (click)=\"selectPicker('year')\">{{availableMonthYear.availableYear}}</button>\n          </div>\n          <teta-button [square]=\"true\"\n                       [ngClass]=\"{'datepicker-arrow_hidden': !isFirstDaySuitable(data.currentMonth+2,data.currentYear,max)}\"\n                       [class]=\"'change-month-button datepicker_'+viewType\"\n                       (click)=\"changeMonth(data.currentMonth+1,data.currentYear)\"\n                       palette=\"text\"\n                       view=\"ghost\">\n            <teta-icon name=\"arrowRightKey\" [palette]=\"'text'\"></teta-icon>\n          </teta-button>\n        </div>\n        <div>\n          <teta-day-picker [(hoveredDate)]=\"hoveredDate\" [range]=\"getFromTo()\" [viewType]=\"viewType\"\n                           (selectDate)=\"selectDate($event)\" [locale]=\"locale\"\n                           [calendar]=\"calendar.nextMonth\"></teta-day-picker>\n        </div>\n      </div>\n    </div>\n\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='month'\">\n    <teta-month-picker [localeMoths]=\"locale.months\" [currentYear]=\"data.currentYear\" (changeYear)=\"setYear($event)\"\n                       [selectedMonth]=\"data.currentMonth\" [viewType]=\"viewType\"\n                       (selectMonth)=\"selectMonth($event)\"></teta-month-picker>\n  </ng-container>\n  <ng-container *ngIf=\"data.selectedPicker==='year'\">\n    <teta-year-picker [minMax]=\"data.minMax\" [locale]=\"locale\" [viewType]=\"viewType\" (selectYear)=\"selectYear($event)\"\n                      [selectedYear]=\"data.currentYear\"></teta-year-picker>\n  </ng-container>\n</div>\n\n", styles: [".change-month-button{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { locale: [{
                 type: Input
             }], open: [{
@@ -3404,7 +3382,7 @@ class DateRangeComponent extends BasePicker {
     datePipe;
     localeService;
     date = { from: null, to: null };
-    locale = 'ru';
+    locale;
     showTime = false;
     minDate = null;
     maxDate = null;
@@ -3427,6 +3405,7 @@ class DateRangeComponent extends BasePicker {
         this._elementRef = _elementRef;
         this.datePipe = datePipe;
         this.localeService = localeService;
+        this.locale = this.localeService.locale;
     }
     changeSelectedDate(date, selectedDate) {
         if (selectedDate.from) {
@@ -3569,15 +3548,13 @@ class DateRangeComponent extends BasePicker {
     }
     onChange(date) { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DatePipe }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateRangeComponent, selector: "teta-date-range", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.daterange": "this.classDaterange" } }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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 [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateRangeComponent, selector: "teta-date-range", 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" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.daterange": "this.classDaterange" } }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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 [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale|async\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-range', providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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 [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n" }]
+            args: [{ selector: 'teta-date-range', providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\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 [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale|async\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.DatePipe }, { type: TetaConfigService }]; }, propDecorators: { date: [{
                 type: Input
-            }], locale: [{
-                type: Input
             }], showTime: [{
                 type: Input
             }], minDate: [{
@@ -4670,7 +4647,7 @@ class DateFilterComponent extends FilterComponentBase {
         return filter;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateFilterComponent, selector: "teta-date-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.greaterThan\"\n                      [appendToBody]=\"false\"\n                      (ngModelChange)=\"filter.value.greaterThan=$event\"></teta-date-picker>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.lessThan\"\n                      [appendToBody]=\"false\"\n                      (ngModelChange)=\"filter.value.lessThan=$event\"></teta-date-picker>\n  </teta-input>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "locale", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateFilterComponent, selector: "teta-date-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.greaterThan\"\n                      [appendToBody]=\"false\"\n                      (ngModelChange)=\"filter.value.greaterThan=$event\"></teta-date-picker>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.lessThan\"\n                      [appendToBody]=\"false\"\n                      (ngModelChange)=\"filter.value.lessThan=$event\"></teta-date-picker>\n  </teta-input>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
@@ -7232,7 +7209,7 @@ class PropertyGridItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$2.TranslocoService }, { token: i3.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", decimalPart: "decimalPart", item: "item", itemTemplates: "itemTemplates", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, usesOnChanges: true, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [hint]=\"column.hint\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"editable || !hideNonEditable\">\n  <ng-container *ngIf=\"template; else default\">\n    <ng-container *ngTemplateOutlet=\"template.template;context: {$implicit: formGroup?.get(column.name)}\"></ng-container>\n  </ng-container>\n  <ng-template #default>\n    <ng-container [ngSwitch]=\"column.filterType\"\n                  *ngIf=\"formGroup?.get(column.name)\">\n      <teta-select class=\"row_auto\"\n                   *ngSwitchCase=\"filterTypeEnum.list\"\n                   [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                   [allowNull]=\"!column.required\"\n                   [appendToBody]=\"true\"\n                   [invalid]=\"controlIsInvalid(column.name)\"\n                   [formControlName]=\"column.name\"\n                   [options]=\"getDict()\"\n                   [valueRef]=\"'id'\"\n                   [textRef]=\"'name'\"\n                   [multiple]=\"false\"></teta-select>\n      <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                        class=\"row_auto\"\n                        [appendToBody]=\"true\"\n                        [invalid]=\"controlIsInvalid(column.name)\"\n                        [formControlName]=\"column.name\"></teta-date-picker>\n      <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                   [formControlName]=\"column.name\">\n        {{column.caption}}\n      </teta-toggle>\n      <teta-text-field class=\"row_auto\"\n                       *ngSwitchDefault\n                       [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\n                       [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                       [placeholder]=\"column.caption\"\n                       [invalid]=\"controlIsInvalid(column.name)\"\n                       [formControlName]=\"column.name\"></teta-text-field>\n    </ng-container>\n  </ng-template>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "locale", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [FormsUtil.formProvider] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", decimalPart: "decimalPart", item: "item", itemTemplates: "itemTemplates", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, usesOnChanges: true, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [hint]=\"column.hint\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"editable || !hideNonEditable\">\n  <ng-container *ngIf=\"template; else default\">\n    <ng-container *ngTemplateOutlet=\"template.template;context: {$implicit: formGroup?.get(column.name)}\"></ng-container>\n  </ng-container>\n  <ng-template #default>\n    <ng-container [ngSwitch]=\"column.filterType\"\n                  *ngIf=\"formGroup?.get(column.name)\">\n      <teta-select class=\"row_auto\"\n                   *ngSwitchCase=\"filterTypeEnum.list\"\n                   [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                   [allowNull]=\"!column.required\"\n                   [appendToBody]=\"true\"\n                   [invalid]=\"controlIsInvalid(column.name)\"\n                   [formControlName]=\"column.name\"\n                   [options]=\"getDict()\"\n                   [valueRef]=\"'id'\"\n                   [textRef]=\"'name'\"\n                   [multiple]=\"false\"></teta-select>\n      <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                        class=\"row_auto\"\n                        [appendToBody]=\"true\"\n                        [invalid]=\"controlIsInvalid(column.name)\"\n                        [formControlName]=\"column.name\"></teta-date-picker>\n      <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                   [formControlName]=\"column.name\">\n        {{column.caption}}\n      </teta-toggle>\n      <teta-text-field class=\"row_auto\"\n                       *ngSwitchDefault\n                       [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\n                       [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                       [placeholder]=\"column.caption\"\n                       [invalid]=\"controlIsInvalid(column.name)\"\n                       [formControlName]=\"column.name\"></teta-text-field>\n    </ng-container>\n  </ng-template>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], viewProviders: [FormsUtil.formProvider] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
@@ -10806,7 +10783,7 @@ class DateCellComponent extends CellComponentBase {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateCellComponent, selector: "teta-date-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class='cell-text'\n      [class.cell-text_disabled]='!editable'>\n  {{control?.value | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class='datepicker-table'\n                  #input\n                  *ngIf='edit'\n                  [allowNull]='!column.required'\n                  [appendToBody]='true'\n                  [showTime]='false'\n                  [formControl]='control'></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "locale", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateCellComponent, selector: "teta-date-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class='cell-text'\n      [class.cell-text_disabled]='!editable'>\n  {{control?.value | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class='datepicker-table'\n                  #input\n                  *ngIf='edit'\n                  [allowNull]='!column.required'\n                  [appendToBody]='true'\n                  [showTime]='false'\n                  [formControl]='control'></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateCellComponent, decorators: [{
             type: Component,
@@ -11843,7 +11820,7 @@ class DateTimeCellComponent extends CellComponentBase {
         this.cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateTimeCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateTimeCellComponent, selector: "teta-date-time-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class='cell-text'\n      [class.cell-text_disabled]='!editable'>\n  {{control?.value | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class='datepicker-table'\n                  #input\n                  *ngIf='edit'\n                  [appendToBody]='true'\n                  [showTime]='true'\n                  [formControl]='control'\n></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "locale", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateTimeCellComponent, selector: "teta-date-time-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class='cell-text'\n      [class.cell-text_disabled]='!editable'>\n  {{control?.value | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class='datepicker-table'\n                  #input\n                  *ngIf='edit'\n                  [appendToBody]='true'\n                  [showTime]='true'\n                  [formControl]='control'\n></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateTimeCellComponent, decorators: [{
             type: Component,
@@ -14269,6 +14246,7 @@ const ruLocale = {
     search: 'Поиск',
     notFound: 'Не найдено',
     selected: 'Выбрано',
+    selectYear: 'Выберите год',
     notSelected: 'Не выбрано',
     yes: 'Да',
     no: 'Нет',