@tetacom/ng-components 1.1.30 → 1.1.32

package/fesm2022/tetacom-ng-components.mjs

@@ -392,11 +392,11 @@ class AvatarComponent {
     ngOnInit() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: AvatarComponent, selector: "teta-avatar", inputs: { photo: "photo", name: "name", id: "id", viewType: "viewType", size: "size" }, host: { properties: { "class": "this.avatar" } }, ngImport: i0, template: "<div [class]=\"avatar\">\n  <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n  <ng-template #withoutPhoto>\n    <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n         class=\"column align-center justify-content-center position-relative\">\n      <ng-container *ngIf=\"name;else withoutName\">\n        <p>{{name}}</p>\n      </ng-container>\n      <ng-template #withoutName>\n        <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n                   name=\"photoCamera\"></teta-icon>\n      </ng-template>\n      <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n           style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle) \"\"}.avatar_round{border-radius:var(--radius-base-round)}.avatar-size-24{height:24px;width:24px;font-size:11px}.avatar-size-24 img,.avatar-size-24 div{height:24px;width:24px}.avatar-size-28{height:28px;width:28px;font-size:11px}.avatar-size-28 img,.avatar-size-28 div{height:28px;width:28px}.avatar-size-32{height:32px;width:32px;font-size:11px}.avatar-size-32 img,.avatar-size-32 div{height:32px;width:32px}.avatar-size-44{height:44px;width:44px;font-size:14px}.avatar-size-44 img,.avatar-size-44 div{height:44px;width:44px}.avatar-size-64{height:64px;width:64px;font-size:16px}.avatar-size-64 img,.avatar-size-64 div{height:64px;width:64px}.avatar-size-128{height:128px;width:128px;font-size:28px}.avatar-size-128 img,.avatar-size-128 div{height:128px;width:128px}.avatar-size-200{height:200px;width:200px;font-size:35px}.avatar-size-200 img,.avatar-size-200 div{height:200px;width:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: AvatarComponent, selector: "teta-avatar", inputs: { photo: "photo", name: "name", id: "id", viewType: "viewType", size: "size" }, host: { properties: { "class": "this.avatar" } }, ngImport: i0, template: "<div [class]=\"avatar\">\n  <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n  <ng-template #withoutPhoto>\n    <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n         class=\"column align-center justify-content-center position-relative\">\n      <ng-container *ngIf=\"name;else withoutName\">\n        <p>{{name}}</p>\n      </ng-container>\n      <ng-template #withoutName>\n        <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n                   name=\"photoCamera\"></teta-icon>\n      </ng-template>\n      <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n           style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle)}.avatar_rounded{border-radius:var(--radius-base-round)}.avatar-size-24{height:24px;width:24px;font-size:11px}.avatar-size-24 img,.avatar-size-24 div{height:24px;width:24px}.avatar-size-28{height:28px;width:28px;font-size:11px}.avatar-size-28 img,.avatar-size-28 div{height:28px;width:28px}.avatar-size-32{height:32px;width:32px;font-size:11px}.avatar-size-32 img,.avatar-size-32 div{height:32px;width:32px}.avatar-size-44{height:44px;width:44px;font-size:14px}.avatar-size-44 img,.avatar-size-44 div{height:44px;width:44px}.avatar-size-64{height:64px;width:64px;font-size:16px}.avatar-size-64 img,.avatar-size-64 div{height:64px;width:64px}.avatar-size-128{height:128px;width:128px;font-size:28px}.avatar-size-128 img,.avatar-size-128 div{height:128px;width:128px}.avatar-size-200{height:200px;width:200px;font-size:35px}.avatar-size-200 img,.avatar-size-200 div{height:200px;width:200px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"avatar\">\n  <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n  <ng-template #withoutPhoto>\n    <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n         class=\"column align-center justify-content-center position-relative\">\n      <ng-container *ngIf=\"name;else withoutName\">\n        <p>{{name}}</p>\n      </ng-container>\n      <ng-template #withoutName>\n        <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n                   name=\"photoCamera\"></teta-icon>\n      </ng-template>\n      <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n           style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle) \"\"}.avatar_round{border-radius:var(--radius-base-round)}.avatar-size-24{height:24px;width:24px;font-size:11px}.avatar-size-24 img,.avatar-size-24 div{height:24px;width:24px}.avatar-size-28{height:28px;width:28px;font-size:11px}.avatar-size-28 img,.avatar-size-28 div{height:28px;width:28px}.avatar-size-32{height:32px;width:32px;font-size:11px}.avatar-size-32 img,.avatar-size-32 div{height:32px;width:32px}.avatar-size-44{height:44px;width:44px;font-size:14px}.avatar-size-44 img,.avatar-size-44 div{height:44px;width:44px}.avatar-size-64{height:64px;width:64px;font-size:16px}.avatar-size-64 img,.avatar-size-64 div{height:64px;width:64px}.avatar-size-128{height:128px;width:128px;font-size:28px}.avatar-size-128 img,.avatar-size-128 div{height:128px;width:128px}.avatar-size-200{height:200px;width:200px;font-size:35px}.avatar-size-200 img,.avatar-size-200 div{height:200px;width:200px}\n"] }]
+            args: [{ selector: 'teta-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"avatar\">\n  <img [class]=\"'avatar_' + this.viewType\" *ngIf=\"photo;else withoutPhoto\" [src]=\"photo\" alt=\"\"/>\n  <ng-template #withoutPhoto>\n    <div [class]=\"'avatar_' + this.viewType\" [style.background-color]=\"colorMap.get(id%17)||colorMap.get(0)\"\n         class=\"column align-center justify-content-center position-relative\">\n      <ng-container *ngIf=\"name;else withoutName\">\n        <p>{{name}}</p>\n      </ng-container>\n      <ng-template #withoutName>\n        <teta-icon class=\"width-10 height-10\" style=\"fill: white;width:{{size}}px; height:{{size}}px\"\n                   name=\"photoCamera\"></teta-icon>\n      </ng-template>\n      <div [class]=\"'avatar_' + this.viewType\" class=\"position-absolute\"\n           style=\"width: 100%;z-index:1;height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);'\"></div>\n    </div>\n  </ng-template>\n\n</div>\n", styles: [".avatar{font-style:normal;font-weight:600;line-height:16px}.avatar_brick{border-radius:var(--radius-base-brick)}.avatar_circle{border-radius:var(--radius-base-circle)}.avatar_rounded{border-radius:var(--radius-base-round)}.avatar-size-24{height:24px;width:24px;font-size:11px}.avatar-size-24 img,.avatar-size-24 div{height:24px;width:24px}.avatar-size-28{height:28px;width:28px;font-size:11px}.avatar-size-28 img,.avatar-size-28 div{height:28px;width:28px}.avatar-size-32{height:32px;width:32px;font-size:11px}.avatar-size-32 img,.avatar-size-32 div{height:32px;width:32px}.avatar-size-44{height:44px;width:44px;font-size:14px}.avatar-size-44 img,.avatar-size-44 div{height:44px;width:44px}.avatar-size-64{height:64px;width:64px;font-size:16px}.avatar-size-64 img,.avatar-size-64 div{height:64px;width:64px}.avatar-size-128{height:128px;width:128px;font-size:28px}.avatar-size-128 img,.avatar-size-128 div{height:128px;width:128px}.avatar-size-200{height:200px;width:200px;font-size:35px}.avatar-size-200 img,.avatar-size-200 div{height:200px;width:200px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { photo: [{
                 type: Input
             }], name: [{
@@ -2561,6 +2561,18 @@ class BaseCalendar {
     selectDate(date) {
         this.setDate.emit(date);
     }
+    scrollMonth = (e, month, year) => {
+        const delta = e?.deltaY ?? e;
+        if (e instanceof WheelEvent) {
+            e.preventDefault();
+        }
+        if (delta > 0) {
+            this.changeMonth(month - 1, year);
+        }
+        else {
+            this.changeMonth(month + 1, year);
+        }
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: BaseCalendar, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: BaseCalendar, selector: "ng-component", usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2846,11 +2858,11 @@ class DateCalendarComponent extends BaseCalendar {
         });
     }
     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\">\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", 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 });
 }
 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\">\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]=\"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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedDate: [{
                 type: Input
             }], locale: [{
@@ -3339,11 +3351,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 \">\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]=\"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 });
 }
 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 \">\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]=\"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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { locale: [{
                 type: Input
             }], open: [{
@@ -7065,7 +7077,6 @@ class ToggleComponent {
         this.model$ = model;
         this.cdr.markForCheck();
     }
-    ngOnInit() { }
     onChange(_) { }
     onTouched() { }
     registerOnChange(fn) {
@@ -8583,7 +8594,7 @@ class TableService {
             }
             const column = this.getColumnByName(cellEvent?.column);
             if (boolOrFuncCallback(column?.editable)({
-                row: this.getRowByIndex(cellEvent?.row),
+                row: this.getRowByIndex(cellEvent?.row)?.data,
                 column: column,
             })) {
                 this._editCellStart.next(cellEvent);
@@ -10669,6 +10680,14 @@ class CellComponentBase {
                 emitEvent: false,
             });
         }
+        if (this.column && this.row) {
+            if (this.editable) {
+                this.control.enable({ emitEvent: false });
+            }
+            else {
+                this.control.disable({ emitEvent: false });
+            }
+        }
     }
     start(initiator, type) {
         this._edit = true;
@@ -13149,6 +13168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
 class DisableControlDirective {
     ngControl;
     set tetaDisableControl(val) {
+        console.log('set tetaDisableControl', val);
         if (this.ngControl.control) {
             if (val) {
                 this.ngControl.control.disable();
@@ -13167,7 +13187,7 @@ class DisableControlDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DisableControlDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[tetaDisableControl]'
+                    selector: '[tetaDisableControl]',
                 }]
         }], ctorParameters: function () { return [{ type: i3.NgControl }]; }, propDecorators: { tetaDisableControl: [{
                 type: Input